debian-image-builder-frontend/src/Components/CreateImageWizard/steps/registration.js
Jacob Kozol 4fa71cede8 update style across the project
The eslint updates require style changes in all components.
2022-05-23 12:47:20 +02:00

142 lines
3.8 KiB
JavaScript

import React from 'react';
import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
import {
Button,
Popover,
Text,
TextContent,
TextVariants,
} from '@patternfly/react-core';
import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
import StepTemplate from './stepTemplate';
const PopoverActivation = () => {
return (
<Popover
hasAutoWidth
maxWidth="35rem"
bodyContent={
<TextContent>
<Text>
Activation keys allow you to register a system with appropriate
subscriptions and system purpose attached.
</Text>
</TextContent>
}
>
<Button
variant="plain"
aria-label="Activation key popover"
aria-describedby="subscription-activation-key"
className="pf-c-form__group-label-help"
>
<HelpIcon />
</Button>
</Popover>
);
};
export default {
StepTemplate,
id: 'wizard-registration',
title: 'Registration',
name: 'registration',
nextStep: 'File system configuration',
fields: [
{
component: componentTypes.RADIO,
label: 'Register images with Red Hat',
name: 'register-system',
initialValue: 'register-now-insights',
options: [
{
label: 'Register and connect image instances with Red Hat',
description: 'Includes Subscriptions and Red Hat Insights',
value: 'register-now-insights',
'data-testid': 'radio-register-now-insights',
autoFocus: true,
},
{
label: 'Register image instances only',
description: 'Includes Subscriptions only',
value: 'register-now',
className: 'pf-u-mt-sm',
'data-testid': 'radio-register-now',
},
{
label: 'Register later',
value: 'register-later',
className: 'pf-u-mt-sm',
'data-testid': 'radio-register-later',
},
],
},
{
component: 'activation-keys',
name: 'subscription-activation-key',
required: true,
label: (
<>
Activation key to use for this image
<PopoverActivation />
</>
),
condition: {
or: [
{ when: 'register-system', is: 'register-now-insights' },
{ when: 'register-system', is: 'register-now' },
],
},
isRequired: true,
validate: [
{
type: validatorTypes.REQUIRED,
},
],
},
{
component: componentTypes.PLAIN_TEXT,
name: 'subscription-activation-description',
label: (
<>
Create and manage activation keys in the&nbsp;
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href="https://access.redhat.com/"
>
Customer Portal
</Button>
</>
),
condition: {
or: [
{ when: 'register-system', is: 'register-now-insights' },
{ when: 'register-system', is: 'register-now' },
],
},
},
{
component: componentTypes.PLAIN_TEXT,
name: 'subscription-register-later',
label: (
<TextContent>
<Text component={TextVariants.h3}>Register Later</Text>
<Text>
On initial boot, systems will need to be registered manually before
having access to updates or Red Hat services.
</Text>
<Text>Registering now is recommended.</Text>
</TextContent>
),
condition: {
or: [{ when: 'register-system', is: 'register-later' }],
},
},
],
};