CreateImageWizard: redesign registration step
Update the registration options to include registering without insights. Also, improve the text info in the step. The org id is also removed from the registration step since we no longer display the id in this step.
This commit is contained in:
Jacob Kozol
Sanne Raymaekers
parent
3571c969ce
commit
e48e2ca659
5 changed files with 165 additions and 113 deletions
|
|
@ -16,11 +16,19 @@ const onSave = (values) => {
|
|||
packages: values['selected-packages']?.map(p => p.name),
|
||||
};
|
||||
|
||||
if (values['subscription-activation']) {
|
||||
if (values['register-system'] === 'register-now-insights') {
|
||||
customizations.subscription = {
|
||||
'activation-key': values['subscription-activation'],
|
||||
'activation-key': values['subscription-activation-key'],
|
||||
insights: true,
|
||||
organization: Number(values['subscription-organization']),
|
||||
organization: Number(values['subscription-organization-id']),
|
||||
'server-url': 'subscription.rhsm.redhat.com',
|
||||
'base-url': 'https://cdn.redhat.com/',
|
||||
};
|
||||
} else if (values['register-system'] === 'register-now') {
|
||||
customizations.subscription = {
|
||||
'activation-key': values['subscription-activation-key'],
|
||||
insights: false,
|
||||
organization: Number(values['subscription-organization-id']),
|
||||
'server-url': 'subscription.rhsm.redhat.com',
|
||||
'base-url': 'https://cdn.redhat.com/',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import TargetEnvironment from './formComponents/TargetEnvironment';
|
|||
import Packages from './formComponents/Packages';
|
||||
import RadioWithPopover from './formComponents/RadioWithPopover';
|
||||
import AzureAuthButton from './formComponents/AzureAuthButton';
|
||||
import OrganizationID from './formComponents/OrganizationID';
|
||||
import Select from '@data-driven-forms/pf4-component-mapper/select';
|
||||
|
||||
const ImageCreator = ({ schema, onSubmit, onClose, customComponentMapper, defaultArch, className, ...props }) => {
|
||||
|
|
@ -30,7 +29,6 @@ const ImageCreator = ({ schema, onSubmit, onClose, customComponentMapper, defaul
|
|||
},
|
||||
'radio-popover': RadioWithPopover,
|
||||
'azure-auth-button': AzureAuthButton,
|
||||
'organization-id': OrganizationID,
|
||||
...customComponentMapper
|
||||
} }
|
||||
onCancel={ onClose }
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Form, FormGroup, Spinner, TextInput } from '@patternfly/react-core';
|
||||
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
|
||||
|
||||
const OrganizationID = () => {
|
||||
const { change } = useFormApi();
|
||||
const [ orgId, setOrgId ] = useState();
|
||||
useEffect(() => {
|
||||
// const userData = insights?.chrome?.auth?.getUser();
|
||||
// userData.then((user) => setOrgId(user?.identity?.internal?.org_id));
|
||||
(async () => {
|
||||
const userData = await insights?.chrome?.auth?.getUser();
|
||||
setOrgId(userData?.identity?.internal?.org_id);
|
||||
change('subscription-organization', userData?.identity?.internal?.org_id);
|
||||
})();
|
||||
|
||||
return () => {
|
||||
setOrgId(undefined);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<FormGroup label="Organization ID" fieldId="organization-id" data-testid="organization-id">
|
||||
{ orgId ?
|
||||
<TextInput
|
||||
isDisabled
|
||||
type="text"
|
||||
id="organization-id"
|
||||
name="organization-id"
|
||||
value={ orgId } />
|
||||
: <Spinner isSVG size="md" /> }
|
||||
</FormGroup>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrganizationID;
|
||||
|
|
@ -1,15 +1,27 @@
|
|||
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';
|
||||
|
||||
export const registerValues = {
|
||||
'subscribe-now-radio': {
|
||||
title: 'Embed an activation key and register systems on first boot',
|
||||
testId: 'register-now-radio-button'
|
||||
},
|
||||
'register-later-radio-button': {
|
||||
title: 'Register the system later',
|
||||
testId: 'register-later-radio-button'
|
||||
}
|
||||
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 {
|
||||
|
|
@ -17,42 +29,49 @@ export default {
|
|||
name: 'registration',
|
||||
nextStep: 'packages',
|
||||
fields: [
|
||||
{
|
||||
component: componentTypes.PLAIN_TEXT,
|
||||
name: 'register-explanation',
|
||||
label: 'Register your system with subscription manager (RHSM) and insights when the image first boots.'
|
||||
},
|
||||
{
|
||||
component: componentTypes.RADIO,
|
||||
label: 'Register the system',
|
||||
label: 'Register images with Red Hat',
|
||||
name: 'register-system',
|
||||
initialValue: 'register-later-radio-button',
|
||||
options: Object.entries(registerValues).map(([ key, { title, testId }]) => ({
|
||||
label: title,
|
||||
value: key,
|
||||
'data-testid': testId,
|
||||
}))
|
||||
},
|
||||
{
|
||||
component: 'organization-id',
|
||||
name: 'subscription-organization',
|
||||
'data-testid': 'organization-id',
|
||||
condition: {
|
||||
or: [
|
||||
{ when: 'register-system', is: 'subscribe-now-radio' },
|
||||
]
|
||||
}
|
||||
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',
|
||||
},
|
||||
{
|
||||
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: componentTypes.TEXT_FIELD,
|
||||
name: 'subscription-activation',
|
||||
'data-testid': 'subscription-activation',
|
||||
name: 'subscription-activation-key',
|
||||
'data-testid': 'subscription-activation-key',
|
||||
required: true,
|
||||
type: 'text',
|
||||
label: 'Activation key',
|
||||
label: (
|
||||
<>
|
||||
Activation key to use for this image
|
||||
<PopoverActivation />
|
||||
</>
|
||||
),
|
||||
condition: {
|
||||
or: [
|
||||
{ when: 'register-system', is: 'subscribe-now-radio' },
|
||||
{ when: 'register-system', is: 'register-now-insights' },
|
||||
{ when: 'register-system', is: 'register-now' },
|
||||
]
|
||||
},
|
||||
isRequired: true,
|
||||
|
|
@ -61,6 +80,52 @@ export default {
|
|||
type: validatorTypes.REQUIRED,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
component: componentTypes.PLAIN_TEXT,
|
||||
name: 'subscription-activation-description',
|
||||
label: (
|
||||
<>
|
||||
Create and manage activation keys in the
|
||||
<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' },
|
||||
]
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue