particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CreateImageWizard: redesign registration step

Browse source 
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 2022-01-14 16:39:27 +01:00 • committed by Sanne Raymaekers
parent 3571c969ce
commit e48e2ca659
5 changed files with 165 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/Components/CreateImageWizard/CreateImageWizard.js
View file

@ -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/',
};

2
src/Components/CreateImageWizard/ImageCreator.js
View file

@ -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 }

38
src/Components/CreateImageWizard/formComponents/OrganizationID.js
View file

@ -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;

135
src/Components/CreateImageWizard/steps/registration.js
View file

@ -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&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' },
]
},
}
]
};

89
src/test/Components/CreateImageWizard/CreateImageWizard.test.js
View file

@ -192,7 +192,7 @@ describe('Step Upload to AWS', () => {
const [ next, , ] = verifyButtons();
next.click();
screen.getByText('Register the system');
screen.getByText('Register images with Red Hat');
});
test('clicking Back loads Release', () => {
@ -239,7 +239,7 @@ describe('Step Upload to Google', () => {
const [ next, , ] = verifyButtons();
next.click();
screen.getByText('Register the system');
screen.getByText('Register images with Red Hat');
});
test('clicking Back loads Release', () => {
@ -300,7 +300,7 @@ describe('Step Upload to Azure', () => {
const [ next, , ] = verifyButtons();
next.click();
screen.getByText('Register the system');
screen.getByText('Register images with Red Hat');
});
test('clicking Back loads Release', () => {
@ -355,6 +355,9 @@ describe('Step Registration', () => {
test('clicking Next loads Packages', () => {
setUp();
const registerLaterRadio = screen.getByLabelText('Register later');
userEvent.click(registerLaterRadio);
const [ next, , ] = verifyButtons();
next.click();
@ -377,24 +380,36 @@ describe('Step Registration', () => {
verifyCancelButton(cancel, history);
});
test('should allow choosing activation keys', async () => {
test('should allow registering with insights', async () => {
setUp();
const registrationRadio = screen.getByLabelText('Embed an activation key and register systems on first boot');
const registrationRadio = screen.getByLabelText('Register and connect image instances with Red Hat');
userEvent.click(registrationRadio);
const organizationId = await screen.findByLabelText('Organization ID');
expect(organizationId).toHaveValue('5');
expect(organizationId).toBeDisabled();
const activationKey = await screen.findByTestId('subscription-activation');
const activationKey = await screen.findByTestId('subscription-activation-key');
expect(activationKey).toHaveValue('');
expect(activationKey).toBeEnabled();
userEvent.type(screen.getByTestId('subscription-activation-key'), '012345678901');
userEvent.type(screen.getByTestId('subscription-activation'), '012345678901');
screen.getByRole('button', { name: /Next/ }).click();
screen.getByRole('button', { name: /Next/ }).click();
await screen.findByText('Register the system on first boot');
await screen.findByText('Register with Subscriptions and Red Hat Insights');
await screen.findAllByText('012345678901');
});
test('should allow registering without insights', async () => {
setUp();
const registrationRadio = screen.getByLabelText('Register image instances only');
userEvent.click(registrationRadio);
const activationKey = await screen.findByTestId('subscription-activation-key');
expect(activationKey).toHaveValue('');
expect(activationKey).toBeEnabled();
userEvent.type(screen.getByTestId('subscription-activation-key'), '012345678901');
screen.getByRole('button', { name: /Next/ }).click();
screen.getByRole('button', { name: /Next/ }).click();
await screen.findByText('Register with Subscriptions');
await screen.findAllByText('012345678901');
});
@ -402,22 +417,22 @@ describe('Step Registration', () => {
setUp();
// first check the other radio button which causes extra widgets to be shown
const registrationRadio = screen.getByLabelText('Embed an activation key and register systems on first boot');
const registrationRadio = screen.getByLabelText('Register and connect image instances with Red Hat');
userEvent.click(registrationRadio);
const p1 = waitForElementToBeRemoved(() => [
screen.getByTestId('organization-id'),
screen.getByTestId('subscription-activation'),
screen.getByTestId('subscription-activation-key'),
]);
// then click the first radio button which should remove any input fields
const registerLaterRadio = screen.getByTestId('register-later-radio-button');
// then click the later radio button which should remove any input fields
const registerLaterRadio = screen.getByLabelText('Register later');
userEvent.click(registerLaterRadio);
await p1;
const reviewLink = screen.getByRole('button', { name: 'Review' });
reviewLink.click();
screen.getByRole('button', { name: /Next/ }).click();
screen.getByRole('button', { name: /Next/ }).click();
screen.getByText('Register the system later');
});
});
@ -435,7 +450,9 @@ describe('Step Packages', () => {
userEvent.type(screen.getByTestId('aws-account-id'), '012345678901');
screen.getByRole('button', { name: /Next/ }).click();
// registration next
// skip registration
const registerLaterRadio = screen.getByLabelText('Register later');
userEvent.click(registerLaterRadio);
screen.getByRole('button', { name: /Next/ }).click();
};
@ -454,7 +471,7 @@ describe('Step Packages', () => {
const back = screen.getByRole('button', { name: /Back/ });
back.click();
screen.getByText('Register the system');
screen.getByText('Register images with Red Hat');
});
test('clicking Cancel loads landing page', () => {
@ -693,6 +710,8 @@ describe('Step Review', () => {
screen.getByRole('button', { name: /Next/ }).click();
// skip registration
const registerLaterRadio = screen.getByLabelText('Register later');
userEvent.click(registerLaterRadio);
screen.getByRole('button', { name: /Next/ }).click();
//Skip packages
@ -822,9 +841,9 @@ describe('Click through all steps', () => {
screen.getByRole('button', { name: /Next/ }).click();
// registration
const registrationRadio = screen.getByLabelText('Embed an activation key and register systems on first boot');
const registrationRadio = screen.getByLabelText('Register and connect image instances with Red Hat');
userEvent.click(registrationRadio);
userEvent.type(screen.getByTestId('subscription-activation'), '1234567890');
userEvent.type(screen.getByTestId('subscription-activation-key'), '1234567890');
next.click();
// packages
@ -1030,16 +1049,16 @@ describe('Click through all steps', () => {
// leave AWS account id empty
screen.getByRole('button', { name: /Next/ }).click();
expect(screen.queryByText('Embed an activation key and register systems on first boot')).not.toBeInTheDocument();
expect(screen.queryByText('Register and connect image instances with Red Hat')).not.toBeInTheDocument();
// fill in AWS to proceed
userEvent.type(screen.getByTestId('aws-account-id'), '012345678901');
screen.getByRole('button', { name: /Next/ }).click();
// registration
const registrationRadio = screen.getByLabelText('Embed an activation key and register systems on first boot');
const registrationRadio = screen.getByLabelText('Register and connect image instances with Red Hat');
userEvent.click(registrationRadio);
userEvent.clear(screen.getByTestId('subscription-activation'));
userEvent.clear(screen.getByTestId('subscription-activation-key'));
next.click();
expect(screen.queryByText(
@ -1047,8 +1066,8 @@ describe('Click through all steps', () => {
)).not.toBeInTheDocument();
// fill in the registration
await screen.findByTestId('subscription-activation');
userEvent.type(screen.getByTestId('subscription-activation'), '1234567890');
await screen.findByTestId('subscription-activation-key');
userEvent.type(screen.getByTestId('subscription-activation-key'), '1234567890');
screen.getByRole('button', { name: /Next/ }).click();
screen.getByRole('button', { name: /Next/ }).click();
@ -1056,7 +1075,7 @@ describe('Click through all steps', () => {
findByText('Review the information and click "Create image" to create the image using the following criteria.');
// review
await screen.findAllByText('Amazon Web Services');
await screen.findByText('Register the system on first boot');
await screen.findByText('Register with Subscriptions and Red Hat Insights');
});
test('with invalid values', async () => {
@ -1072,9 +1091,9 @@ describe('Click through all steps', () => {
screen.getByRole('button', { name: /Next/ }).click();
// registration
const registrationRadio = screen.getByLabelText('Embed an activation key and register systems on first boot');
const registrationRadio = screen.getByLabelText('Register and connect image instances with Red Hat');
userEvent.click(registrationRadio);
userEvent.clear(screen.getByTestId('subscription-activation'));
userEvent.clear(screen.getByTestId('subscription-activation-key'));
screen.getByRole('button', { name: /Next/ }).click();
expect(screen.queryByText(
@ -1082,14 +1101,14 @@ describe('Click through all steps', () => {
)).not.toBeInTheDocument();
// fill in the registration
await screen.findByTestId('subscription-activation');
userEvent.type(screen.getByTestId('subscription-activation'), '1234567890');
await screen.findByTestId('subscription-activation-key');
userEvent.type(screen.getByTestId('subscription-activation-key'), '1234567890');
screen.getByRole('button', { name: /Next/ }).click();
screen.getByRole('button', { name: /Next/ }).click();
await screen.
findByText('Review the information and click "Create image" to create the image using the following criteria.');
await screen.findAllByText('Amazon Web Services');
await screen.findByText('Register the system on first boot');
await screen.findByText('Register with Subscriptions and Red Hat Insights');
});
});