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

CreateImageWizard: Only ask for aws account id in upload step

Browse source
This commit is contained in:
Sanne Raymaekers 2020-12-01 13:06:59 +01:00
parent 9c1125cf37
commit 5adb8b581e
3 changed files with 61 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/PresentationalComponents/CreateImageWizard/WizardStepUploadAWS.js
View file

@ -1,55 +1,26 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Form, FormGroup, FormSelect, TextInput, FormSelectOption, Title } from '@patternfly/react-core';
import { Form, FormGroup, TextInput, Title } from '@patternfly/react-core';
const WizardStepUploadAWS = (props) => {
const serviceOptions = [
{ value: 'ec2', label: 'Amazon Elastic Compute Cloud (ec2)' },
{ value: 's3', label: 'Amazon Simple Storage Service (s3)' },
];
return (
<Form>
<Title headingLevel="h2" size="xl">Upload to AWS</Title>
<FormGroup isRequired label="Access key ID" fieldId="amazon-access-id"
helperTextInvalid={ (props.errors['amazon-access-id'] && props.errors['amazon-access-id'].value) || '' }
<p>
Your image will be uploaded to a temporary account on Amazon Web Services.
The image will be shared with the account ID you provide below. <br />
Within the next 14 days you will need to copy the shared image to your own account.
After 14 days it will be unavailable and will have to be regenerated.
</p>
<FormGroup isRequired label="AWS account ID" fieldId="aws-account-id"
helperTextInvalid={ (props.errors['aws-account-id'] && props.errors['aws-account-id'].value) || '' }
validated={ (props.errors['amazon-access-id'] && 'error') || 'default' }>
<TextInput value={ props.upload.options.access_key_id || '' }
type="text" aria-label="amazon access key ID" id="amazon-access-id"
data-testid="aws-access-key" isRequired
onChange={ value => props.setUploadOptions(Object.assign(props.upload.options, { access_key_id: value })) } />
<TextInput value={ props.upload.options.share_with_accounts || '' }
type="text" aria-label="amazon access key ID" id="aws-account-id"
data-testid="aws-account-id" isRequired
onChange={ value => props.setUploadOptions(Object.assign(props.upload.options, { share_with_accounts: [ value ]})) } />
</FormGroup>
<FormGroup isRequired label="Secret access key" fieldId="amazon-access-secret"
helperTextInvalid={ (props.errors['amazon-access-secret'] && props.errors['amazon-access-secret'].value) || '' }
validated={ (props.errors['amazon-access-secret'] && 'error') || 'default' }>
<TextInput value={ props.upload.options.secret_access_key || '' }
data-testid="aws-secret-access-key" isRequired
type="password" aria-label="amazon secret access key" id="amazon-access-secret"
onChange={ value => props.setUploadOptions(Object.assign(props.upload.options, { secret_access_key: value })) } />
</FormGroup>
<FormGroup isRequired label="Service" fieldId="amazon-service">
<FormSelect value={ props.upload.options.service } aria-label="Select amazon service" id="amazon-service"
data-testid="aws-service-select"
onChange={ value => props.setUploadOptions(Object.assign(props.upload.options, { service: value })) }>
{ serviceOptions.map(option => <FormSelectOption key={ option.value } value={ option.value } label={ option.label } />) }
</FormSelect>
</FormGroup>
<FormGroup isRequired label="Region" fieldId="amazon-region"
helperTextInvalid={ (props.errors['amazon-region'] && props.errors['amazon-region'].value) || '' }
validated={ (props.errors['amazon-region'] && 'error') || 'default' }>
<TextInput value={ props.upload.options.region } type="text" aria-label="amazon region" id="amazon-region"
data-testid="aws-region" isRequired
onChange={ value => props.setUploadOptions(Object.assign(props.upload.options, { region: value })) } />
</FormGroup>
{ props.upload.options.service === 's3' &&
<FormGroup isRequired label="Bucket" fieldId="amazon-bucket"
helperTextInvalid={ (props.errors['amazon-bucket'] && props.errors['amazon-bucket'].value) || '' }
validated={ (props.errors['amazon-bucket'] && 'error') || 'default' }>
<TextInput value={ props.upload.options.bucket || '' } type="text" aria-label="amazon bucket" id="amazon-bucket"
data-testid="aws-bucket" isRequired
onChange={ value => props.setUploadOptions(Object.assign(props.upload.options, { bucket: value })) } />
</FormGroup> }
</Form>
);
};

40
src/SmartComponents/CreateImageWizard/CreateImageWizard.js
View file

@ -35,11 +35,7 @@ class CreateImageWizard extends Component {
upload: {
type: 'aws',
options: {
service: 'ec2',
region: 'eu-west-2',
access_key_id: null,
secret_access_key: null,
bucket: null,
share_with_accounts: [],
}
},
subscription: {
@ -89,25 +85,10 @@ class CreateImageWizard extends Component {
validateUploadAmazon() {
let uploadErrors = {};
if (!this.state.upload.options.access_key_id) {
uploadErrors['amazon-access-id'] =
{ label: 'Access key ID', value: 'A value is required' };
}
if (!this.state.upload.options.secret_access_key) {
uploadErrors['amazon-access-secret'] =
{ label: 'Secret access key', value: 'A value is required' };
}
if (!this.state.upload.options.region) {
uploadErrors['amazon-region'] =
{ label: 'Region', value: 'A value is required' };
}
if (this.state.upload.options.service === 's3' &&
!this.state.upload.options.bucket) {
uploadErrors['amazon-bucket'] =
{ label: 'Bucket', value: 'A value is required' };
let share = this.state.upload.options.share_with_accounts;
if (share.length === 0 || share[0].length !== 12 || isNaN(share[0])) {
uploadErrors['aws-account-id'] =
{ label: 'AWS account ID', value: 'A 12-digit number is required' };
}
this.setState({ uploadErrors });
@ -160,16 +141,7 @@ class CreateImageWizard extends Component {
upload_requests: [{
type: 'aws',
options: {
region: this.state.upload.options.region,
s3: {
access_key_id: this.state.upload.options.access_key_id,
secret_access_key: this.state.upload.options.secret_access_key,
bucket: this.state.upload.options.bucket,
},
ec2: {
access_key_id: this.state.upload.options.access_key_id,
secret_access_key: this.state.upload.options.secret_access_key,
},
share_with_accounts: this.state.upload.options.share_with_accounts,
},
}],
}],

101
src/test/SmartComponents/CreateImageWizard/CreateImageWizard.test.js
View file

@ -92,7 +92,7 @@ describe('Step Image output', () => {
const [ next, , ] = verifyButtons();
next.click();
screen.getByText('Secret access key');
screen.getByText('AWS account ID');
});
test('Back button is disabled', () => {
@ -154,55 +154,11 @@ describe('Step Upload to AWS', () => {
verifyCancelButton(cancel, historySpy);
});
test('choosing S3 shows region and bucket fields', () => {
// change the select to enable the bucket field
userEvent.selectOptions(screen.getByTestId('aws-service-select'), [ 's3' ]);
const accessKeyId = screen.getByTestId('aws-access-key');
test('the aws account id fieldis shown and required', () => {
const accessKeyId = screen.getByTestId('aws-account-id');
expect(accessKeyId).toHaveValue('');
expect(accessKeyId).toBeEnabled();
expect(accessKeyId).toBeRequired();
const secretAccessKey = screen.getByTestId('aws-secret-access-key');
expect(secretAccessKey).toHaveValue('');
expect(secretAccessKey).toBeEnabled();
expect(secretAccessKey).toBeRequired();
const region = screen.getByTestId('aws-region');
expect(region).toHaveValue('eu-west-2');
expect(region).toBeEnabled();
expect(region).toBeRequired();
const bucket = screen.getByTestId('aws-bucket');
expect(bucket).toHaveValue('');
expect(bucket).toBeEnabled();
expect(bucket).toBeRequired();
});
test('choosing EC2 shows region field', async () => {
// change the select to enable the bucket field
userEvent.selectOptions(screen.getByTestId('aws-service-select'), [ 's3' ]);
const accessKeyId = screen.getByTestId('aws-access-key');
expect(accessKeyId).toHaveValue('');
expect(accessKeyId).toBeEnabled();
expect(accessKeyId).toBeRequired();
const secretAccessKey = screen.getByTestId('aws-secret-access-key');
expect(secretAccessKey).toHaveValue('');
expect(secretAccessKey).toBeEnabled();
expect(secretAccessKey).toBeRequired();
const region = screen.getByTestId('aws-region');
expect(region).toHaveValue('eu-west-2');
expect(region).toBeEnabled();
expect(region).toBeRequired();
const p1 = waitForElementToBeRemoved(() => screen.queryByTestId('aws-bucket'));
// change the select to hide the bucket field
userEvent.selectOptions(screen.getByTestId('aws-service-select'), [ 'ec2' ]);
await p1;
});
});
@ -230,8 +186,7 @@ describe('Step Registration', () => {
const [ , back, ] = verifyButtons();
back.click();
screen.getByText('Access key ID');
screen.getByText('Secret access key');
screen.getByText('AWS account ID');
});
test('clicking Cancel loads landing page', () => {
@ -323,12 +278,7 @@ describe('Click through all steps', () => {
next.click();
// select upload target
await screen.findByTestId('aws-access-key');
userEvent.type(screen.getByTestId('aws-access-key'), 'key');
userEvent.type(screen.getByTestId('aws-secret-access-key'), 'secret');
userEvent.selectOptions(screen.getByTestId('aws-service-select'), [ 's3' ]);
userEvent.type(screen.getByTestId('aws-region'), 'us-east-1');
userEvent.type(screen.getByTestId('aws-bucket'), 'imagebuilder');
userEvent.type(screen.getByTestId('aws-account-id'), '012345678901');
next.click();
// registration
@ -369,9 +319,7 @@ describe('Click through all steps', () => {
userEvent.selectOptions(screen.getByTestId('upload-destination'), [ 'aws' ]);
next.click();
// leave AWS access keys empty
userEvent.selectOptions(screen.getByTestId('aws-service-select'), [ 's3' ]);
userEvent.clear(screen.getByTestId('aws-region'));
// leave AWS account id empty
next.click();
// registration
@ -388,6 +336,41 @@ describe('Click through all steps', () => {
await screen.findByText('Register the system on first boot');
const errorMessages = await screen.findAllByText('A value is required');
expect(errorMessages.length).toBe(5);
expect(errorMessages.length).toBe(1);
const uploadErrorMessage = await screen.findAllByText('A 12-digit number is required');
expect(uploadErrorMessage.length).toBe(1);
});
test('with invalid values', async () => {
const next = screen.getByRole('button', { name: /Next/ });
// select release
userEvent.selectOptions(screen.getByTestId('release-select'), [ 'rhel-8' ]);
// select upload target
userEvent.selectOptions(screen.getByTestId('upload-destination'), [ 'aws' ]);
next.click();
userEvent.type(screen.getByTestId('aws-account-id'), 'invalid, isNaN');
next.click();
// registration
screen
.getByLabelText('Embed an activation key and register systems on first boot')
.click();
await screen.findByTestId('subscription-activation');
userEvent.clear(screen.getByTestId('subscription-activation'));
next.click();
await screen.
findByText('Review the information and click Create image to create the image using the following criteria.');
await screen.findByText('Amazon Web Services');
await screen.findByText('Register the system on first boot');
const errorMessages = await screen.findAllByText('A value is required');
expect(errorMessages.length).toBe(1);
const uploadErrorMessage = await screen.findAllByText('A 12-digit number is required');
expect(uploadErrorMessage.length).toBe(1);
});
});