Skip to content

Commit

Permalink
ZENKO-3313 fix account creation page discrepencies
Browse files Browse the repository at this point in the history
  • Loading branch information
theo-cerutti committed Apr 7, 2021
1 parent 96474de commit 4d53e33
Show file tree
Hide file tree
Showing 6 changed files with 207 additions and 237 deletions.
116 changes: 51 additions & 65 deletions src/react/account/AccountCreate.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// @flow
import { Banner, Button } from '@scality/core-ui';
import Form, * as F from '../ui-elements/FormLayout';
import FormContainer, * as F from '../ui-elements/FormLayout';
import React, { useRef } from 'react';
import { clearError, createAccount } from '../actions';
import { useDispatch, useSelector } from 'react-redux';
Expand All @@ -17,7 +17,6 @@ const regexpName = /^[\w+=,.@ -]+$/;
const schema = Joi.object({
name: Joi.string().label('Name').required().min(2).max(64).regex(regexpName).message('Invalid Name'),
email: Joi.string().label('Root Account Email').required().max(256).regex(regexpEmailAddress).message('Invalid Root Account Email'),
quota: Joi.number().label('Quota').allow('').optional().positive().integer(),
});

function AccountCreate() {
Expand All @@ -31,10 +30,9 @@ function AccountCreate() {

const dispatch = useDispatch();

const onSubmit = ({ email, name, quota }) => {
const onSubmit = ({ email, name }) => {
clearServerError();
const quotaMaxInt = quota || 0;
const payload = { userName: name, email, quotaMax: quotaMaxInt };
const payload = { userName: name, email };
dispatch(createAccount(payload));
};

Expand All @@ -53,66 +51,54 @@ function AccountCreate() {
const formRef = useRef(null);
useOutsideClick(formRef, clearServerError);

return <Form autoComplete='off' ref={formRef}>
<F.Title> create new account </F.Title>
<F.Fieldset>
<F.Label tooltipMessages={['Must be unique']}>
Name
</F.Label>
<F.Input
type='text'
id='name'
name='name'
ref={register}
onChange={clearServerError}
autoComplete='new-password' />
<F.ErrorInput id='error-name' hasError={errors.name}> {errors.name?.message} </F.ErrorInput>
</F.Fieldset>
<F.Fieldset>
<F.Label tooltipMessages={['Must be unique', 'When a new Account is created, a unique email is attached as the Root owner of this account, for initial authentication purpose']}>
Root Account Email
</F.Label>
<F.Input
type='text'
id='email'
name='email'
ref={register}
onChange={clearServerError}
autoComplete='off' />
<F.ErrorInput id='error-email' hasError={errors.email}> {errors.email?.message} </F.ErrorInput>
</F.Fieldset>
<F.Fieldset>
<F.Label tooltipMessages={['Hard quota: the account cannot go over the limit', 'The limit can be changed after the creation', 'If the field is empty, there will be no limit']}>
Quota in GB (optional)
</F.Label>
<F.Input
type='number'
id='quota'
min="0"
name='quota'
ref={register}
onChange={clearServerError}
autoComplete='off' />
<F.ErrorInput id='error-quota' hasError={errors.quota}> {errors.quota?.message} </F.ErrorInput>
</F.Fieldset>
<F.Footer>
<F.FooterError>
{
hasError && <Banner
id="zk-error-banner"
icon={<i className="fas fa-exclamation-triangle" />}
title="Error"
variant="danger">
{errorMessage}
</Banner>
}
</F.FooterError>
<F.FooterButtons>
<Button disabled={loading} outlined onClick={handleCancel} text='Cancel'/>
<Button disabled={loading} id='create-account-btn' variant="info" onClick={handleSubmit(onSubmit)} text='Create'/>
</F.FooterButtons>
</F.Footer>
</Form>;
return <FormContainer>
<F.Form autoComplete='off' ref={formRef}>
<F.Title> Create New Account </F.Title>
<F.Fieldset>
<F.Label tooltipMessages={['Must be unique']}>
Name
</F.Label>
<F.Input
type='text'
id='name'
name='name'
ref={register}
onChange={clearServerError}
autoComplete='new-password' />
<F.ErrorInput id='error-name' hasError={errors.name}> {errors.name?.message} </F.ErrorInput>
</F.Fieldset>
<F.Fieldset>
<F.Label tooltipMessages={['Must be unique', 'When a new Account is created, a unique email is attached as the Root owner of this account, for initial authentication purpose']}>
Root Account Email
</F.Label>
<F.Input
type='text'
id='email'
name='email'
ref={register}
onChange={clearServerError}
autoComplete='off' />
<F.ErrorInput id='error-email' hasError={errors.email}> {errors.email?.message} </F.ErrorInput>
</F.Fieldset>
<F.Footer>
<F.FooterError>
{
hasError && <Banner
id="zk-error-banner"
icon={<i className="fas fa-exclamation-triangle" />}
title="Error"
variant="danger">
{errorMessage}
</Banner>
}
</F.FooterError>
<F.FooterButtons>
<Button disabled={loading} outlined onClick={handleCancel} text='Cancel'/>
<Button disabled={loading} id='create-account-btn' variant="secondary" onClick={handleSubmit(onSubmit)} text='Create'/>
</F.FooterButtons>
</F.Footer>
</F.Form>
</FormContainer>;
}

export default AccountCreate;
34 changes: 0 additions & 34 deletions src/react/account/__tests__/AccountCreate.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,109 +33,85 @@ describe('AccountCreate', () => {
description: 'should render no error if both name and email are valid',
name: 'ba',
email: '[email protected]',
quota: '',
expectedNameError: '',
expectedEmailError: '',
expectedQuotaError: '',
},
{
description: 'should render no error if name, email and quota are valid',
name: 'ba',
email: '[email protected]',
quota: '1',
expectedNameError: '',
expectedEmailError: '',
expectedQuotaError: '',
},
{
description: 'should render error if name is missing',
name: '',
email: '[email protected]',
quota: '1',
expectedNameError: '"Name" is not allowed to be empty',
expectedEmailError: '',
expectedQuotaError: '',
},
{
description: 'should render error if email is missing',
name: 'bart',
email: '',
quota: '1',
expectedNameError: '',
expectedEmailError: '"Root Account Email" is not allowed to be empty',
expectedQuotaError: '',
},
{
description: 'should render 2 errors if name and email are missing',
name: '',
email: '',
quota: '1',
expectedNameError: '"Name" is not allowed to be empty',
expectedEmailError: '"Root Account Email" is not allowed to be empty',
expectedQuotaError: '',
},
{
description: 'should render error if name is too short',
name: 'b',
email: '[email protected]',
quota: '1',
expectedNameError: '"Name" length must be at least 2 characters long',
expectedEmailError: '',
expectedQuotaError: '',
},
{
description: 'should render error if name is too long (> 64)',
name: 'b'.repeat(65),
email: '[email protected]',
quota: '1',
expectedNameError: '"Name" length must be less than or equal to 64 characters long',
expectedEmailError: '',
expectedQuotaError: '',
},
{
description: 'should render error if name is invalid',
name: '^^',
email: '[email protected]',
quota: '1',
expectedNameError: 'Invalid Name',
expectedEmailError: '',
expectedQuotaError: '',
},
{
description: 'should render error if email is invalid',
name: 'bart',
email: 'invalid',
quota: '1',
expectedNameError: '',
expectedEmailError: 'Invalid Root Account Email',
expectedQuotaError: '',
},
{
description: 'should render error if email is too long (> 256)',
name: 'bart',
email: `${'b'.repeat(257)}@long.com`,
quota: '1',
expectedNameError: '',
expectedEmailError: '"Root Account Email" length must be less than or equal to 256 characters long',
expectedQuotaError: '',
},
{
description: 'should render error if quota is invalid',
name: 'bart',
email: '[email protected]',
quota: '-1',
expectedNameError: '',
expectedEmailError: '',
expectedQuotaError: '"Quota" must be a positive number',
},
{
description: 'should render error if quota is set to 0',
name: 'bart',
email: '[email protected]',
quota: '0',
expectedNameError: '',
expectedEmailError: '',
expectedQuotaError: '"Quota" must be a positive number',
},
];

Expand All @@ -153,10 +129,6 @@ describe('AccountCreate', () => {
elementEmail.getDOMNode().value = t.email;
elementEmail.getDOMNode().dispatchEvent(new Event('input'));

const elementQuota = component.find('input#quota');
elementQuota.getDOMNode().value = t.quota;
elementQuota.getDOMNode().dispatchEvent(new Event('input'));

await act(async () => {
component.find('Button#create-account-btn').simulate('click');
});
Expand All @@ -173,12 +145,6 @@ describe('AccountCreate', () => {
} else {
expect(component.find('ErrorInput#error-email').text()).toBeFalsy();
}
if (t.expectedQuotaError) {
expect(component.find('ErrorInput#error-quota').text()).toContain(t.expectedQuotaError);
} else {
expect(component.find('ErrorInput#error-quota').text()).toBeFalsy();
}

component.unmount();
});
});
Expand Down
2 changes: 1 addition & 1 deletion src/react/account/details/Locations.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const Overlay = styled.div`
const CustomHeader = () => <span>
Target Bucket
<Tooltip overlay={<Overlay> Name of the bucket/container created in the specific location (e.g. RING, Azure, AWS S3, GCP...), and where the Zenko buckets attached to that location will store data. </Overlay>} placement="right">
<IconTooltip className='far fa-question-circle'></IconTooltip >
<IconTooltip className='far fa-question-circle'></IconTooltip>
</Tooltip>
</span>;

Expand Down
Loading

0 comments on commit 4d53e33

Please sign in to comment.