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

Wizard: add description field to Details steps

Browse source
This commit is contained in:
mgold1234 2023-07-23 21:29:16 +03:00 • committed by Lucas Garfield
parent 082dbf5de1
commit 7cb3f2d0b6
7 changed files with 110 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -103,6 +103,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -138,6 +139,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -167,6 +169,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -189,6 +192,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -208,6 +212,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -227,6 +232,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -246,6 +252,7 @@ const onSave = (values) => {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_description: values?.['image-description'],
image_requests: [
{
architecture: 'x86_64',
@ -290,6 +297,7 @@ const requestToState = (composeRequest, distroInfo, isBeta, isProd) => {
const formState = {};
formState['image-name'] = composeRequest.image_name;
formState['image-description'] = composeRequest.image_description;
formState.release = composeRequest?.distribution;
// set defaults for target environment first
@ -472,7 +480,6 @@ const formStepHistory = (composeRequest, isBeta) => {
} else {
steps.push('File system configuration', 'packages');
}
steps.push('details');
return steps;

20
src/Components/CreateImageWizard/formComponents/ReviewStep.js
View file

@ -147,17 +147,15 @@ const ReviewStep = () => {
) && <RegisterNowList />}
</ExpandableSection>
)}
{getState()?.values?.['image-name'] && (
<ExpandableSection
toggleContent={'Image details'}
onToggle={onToggleImageDetail}
isExpanded={isExpandedImageDetail}
isIndented
data-testid="image-details-expandable"
>
<ImageDetailsList />
</ExpandableSection>
)}
<ExpandableSection
toggleContent={'Image details'}
onToggle={onToggleImageDetail}
isExpanded={isExpandedImageDetail}
isIndented
data-testid="image-details-expandable"
>
<ImageDetailsList />
</ExpandableSection>
</>
);
};

20
src/Components/CreateImageWizard/formComponents/ReviewStepTextLists.js
View file

@ -544,10 +544,13 @@ export const RegisterNowList = () => {
export const ImageDetailsList = () => {
const { getState } = useFormApi();
const imageName = getState()?.values?.['image-name'];
const imageDescription = getState()?.values?.['image-description'];
return (
<TextContent>
<TextList component={TextListVariants.dl}>
{getState()?.values?.['image-name'] && (
{imageName && (
<>
<TextListItem
component={TextListItemVariants.dt}
@ -556,7 +559,20 @@ export const ImageDetailsList = () => {
Image name
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{getState()?.values?.['image-name']}
{imageName}
</TextListItem>
</>
)}
{imageDescription && (
<>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
>
Description
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{imageDescription}
</TextListItem>
</>
)}

26
src/Components/CreateImageWizard/steps/imageName.js
View file

@ -1,12 +1,20 @@
import React from 'react';
import { useFormApi } from '@data-driven-forms/react-form-renderer';
import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
import { Flex, FlexItem, Text } from '@patternfly/react-core';
import StepTemplate from './stepTemplate';
import CustomButtons from '../formComponents/CustomButtons';
const CharacterCount = () => {
const { getState } = useFormApi();
const description = getState().values?.['image-description'];
return <h1>{description?.length || 0}/250</h1>;
};
export default {
StepTemplate,
id: 'wizard-details',
@ -43,5 +51,23 @@ export default {
},
],
},
{
component: componentTypes.TEXTAREA,
name: 'image-description',
type: 'text',
label: (
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
<FlexItem>
<Text component={'b'}>Description</Text>
</FlexItem>
<FlexItem>
<CharacterCount />
</FlexItem>
</Flex>
),
placeholder: 'Add Description',
resizeOrientation: 'vertical',
validate: [{ type: validatorTypes.MAX_LENGTH, threshold: 250 }],
},
],
};

1
src/store/composesSlice.js
View file

@ -53,6 +53,7 @@ export const selectComposeById = (state, composeId) => {
created_at: compose.created_at,
id: compose.id,
imageName: compose.image_name || compose.id,
imageDescription: compose.image_description || '',
region: compose.image_status?.upload_status?.options?.region,
ami: compose.image_status?.upload_status?.options?.ami,
share_with_accounts:

16
src/test/Components/CreateImageWizard/CreateImageWizard.beta.test.js
View file

@ -741,6 +741,15 @@ describe('Click through all steps', () => {
name: 'Image Name',
});
await user.type(nameInput, 'my-image-name');
// Enter description for image
const descriptionInput = screen.getByRole('textbox', {
name: /Description/,
});
await user.type(
descriptionInput,
'this is a perfect description for image'
);
getNextButton().click();
// review
@ -768,6 +777,7 @@ describe('Click through all steps', () => {
);
imageDetailsExpandable.click();
await screen.findByText('my-image-name');
await screen.findByText('this is a perfect description for image');
await screen.findByText('name0');
await screen.findByText('Self-Support');
@ -794,6 +804,7 @@ describe('Click through all steps', () => {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'my-image-name',
image_description: 'this is a perfect description for image',
image_requests: [
{
architecture: 'x86_64',
@ -813,6 +824,7 @@ describe('Click through all steps', () => {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'my-image-name',
image_description: 'this is a perfect description for image',
image_requests: [
{
architecture: 'x86_64',
@ -832,6 +844,7 @@ describe('Click through all steps', () => {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'my-image-name',
image_description: 'this is a perfect description for image',
image_requests: [
{
architecture: 'x86_64',
@ -853,6 +866,7 @@ describe('Click through all steps', () => {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'my-image-name',
image_description: 'this is a perfect description for image',
image_requests: [
{
architecture: 'x86_64',
@ -870,6 +884,7 @@ describe('Click through all steps', () => {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'my-image-name',
image_description: 'this is a perfect description for image',
image_requests: [
{
architecture: 'x86_64',
@ -887,6 +902,7 @@ describe('Click through all steps', () => {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'my-image-name',
image_description: 'this is a perfect description for image',
image_requests: [
{
architecture: 'x86_64',

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

@ -1121,6 +1121,21 @@ describe('Step Details', () => {
await user.type(nameInput, 'valid-name');
expect(getNextButton()).not.toHaveClass('pf-m-disabled');
expect(getNextButton()).toBeEnabled();
// Enter description image
const descriptionInput = screen.getByRole('textbox', {
name: /description 0\/250/i,
});
const invalidDescription = 'a'.repeat(251);
await user.type(descriptionInput, invalidDescription);
expect(getNextButton()).toHaveClass('pf-m-disabled');
expect(getNextButton()).toBeDisabled();
await user.clear(descriptionInput);
await user.type(descriptionInput, 'valid-description');
expect(getNextButton()).not.toHaveClass('pf-m-disabled');
expect(getNextButton()).toBeEnabled();
});
});
@ -1387,6 +1402,16 @@ describe('Click through all steps', () => {
name: 'Image Name',
});
await user.type(nameInput, 'my-image-name');
// Enter description for image
const descriptionInput = screen.getByRole('textbox', {
name: /description/i,
});
await user.type(
descriptionInput,
'this is a perfect description for image'
);
getNextButton().click();
// review
@ -1405,6 +1430,7 @@ describe('Click through all steps', () => {
);
imageDetailsExpandable.click();
await screen.findByText('my-image-name');
await screen.findByText('this is a perfect description for image');
const registrationExpandable = await screen.findByTestId(
'registration-expandable'
@ -1439,6 +1465,7 @@ describe('Click through all steps', () => {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'my-image-name',
image_description: 'this is a perfect description for image',
image_requests: [
{
architecture: 'x86_64',
@ -1482,6 +1509,7 @@ describe('Click through all steps', () => {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'my-image-name',
image_description: 'this is a perfect description for image',
image_requests: [
{
architecture: 'x86_64',
@ -1525,6 +1553,7 @@ describe('Click through all steps', () => {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'my-image-name',
image_description: 'this is a perfect description for image',
image_requests: [
{
architecture: 'x86_64',
@ -1570,6 +1599,7 @@ describe('Click through all steps', () => {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'my-image-name',
image_description: 'this is a perfect description for image',
image_requests: [
{
architecture: 'x86_64',
@ -1611,6 +1641,7 @@ describe('Click through all steps', () => {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'my-image-name',
image_description: 'this is a perfect description for image',
image_requests: [
{
architecture: 'x86_64',
@ -1652,6 +1683,7 @@ describe('Click through all steps', () => {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'my-image-name',
image_description: 'this is a perfect description for image',
image_requests: [
{
architecture: 'x86_64',