From 7cb3f2d0b6df77990a657259b2a4a9ae0683d667 Mon Sep 17 00:00:00 2001 From: mgold1234 Date: Sun, 23 Jul 2023 21:29:16 +0300 Subject: [PATCH] Wizard: add description field to Details steps --- .../CreateImageWizard/CreateImageWizard.js | 9 +++++- .../formComponents/ReviewStep.js | 20 ++++++------ .../formComponents/ReviewStepTextLists.js | 20 ++++++++++-- .../CreateImageWizard/steps/imageName.js | 26 +++++++++++++++ src/store/composesSlice.js | 1 + .../CreateImageWizard.beta.test.js | 16 ++++++++++ .../CreateImageWizard.test.js | 32 +++++++++++++++++++ 7 files changed, 110 insertions(+), 14 deletions(-) diff --git a/src/Components/CreateImageWizard/CreateImageWizard.js b/src/Components/CreateImageWizard/CreateImageWizard.js index 0d2b7b53..eade6660 100644 --- a/src/Components/CreateImageWizard/CreateImageWizard.js +++ b/src/Components/CreateImageWizard/CreateImageWizard.js @@ -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; diff --git a/src/Components/CreateImageWizard/formComponents/ReviewStep.js b/src/Components/CreateImageWizard/formComponents/ReviewStep.js index dbe33f9a..2439e31c 100644 --- a/src/Components/CreateImageWizard/formComponents/ReviewStep.js +++ b/src/Components/CreateImageWizard/formComponents/ReviewStep.js @@ -147,17 +147,15 @@ const ReviewStep = () => { ) && } )} - {getState()?.values?.['image-name'] && ( - - - - )} + + + ); }; diff --git a/src/Components/CreateImageWizard/formComponents/ReviewStepTextLists.js b/src/Components/CreateImageWizard/formComponents/ReviewStepTextLists.js index 2cae084a..b61a1dcb 100644 --- a/src/Components/CreateImageWizard/formComponents/ReviewStepTextLists.js +++ b/src/Components/CreateImageWizard/formComponents/ReviewStepTextLists.js @@ -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 ( - {getState()?.values?.['image-name'] && ( + {imageName && ( <> { Image name - {getState()?.values?.['image-name']} + {imageName} + + + )} + {imageDescription && ( + <> + + Description + + + {imageDescription} )} diff --git a/src/Components/CreateImageWizard/steps/imageName.js b/src/Components/CreateImageWizard/steps/imageName.js index 5aea944d..227d44af 100644 --- a/src/Components/CreateImageWizard/steps/imageName.js +++ b/src/Components/CreateImageWizard/steps/imageName.js @@ -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

{description?.length || 0}/250

; +}; + export default { StepTemplate, id: 'wizard-details', @@ -43,5 +51,23 @@ export default { }, ], }, + { + component: componentTypes.TEXTAREA, + name: 'image-description', + type: 'text', + label: ( + + + Description + + + + + + ), + placeholder: 'Add Description', + resizeOrientation: 'vertical', + validate: [{ type: validatorTypes.MAX_LENGTH, threshold: 250 }], + }, ], }; diff --git a/src/store/composesSlice.js b/src/store/composesSlice.js index 8a4ef83d..aba67fdb 100644 --- a/src/store/composesSlice.js +++ b/src/store/composesSlice.js @@ -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: diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.beta.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.beta.test.js index 395dbd12..97cc8102 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.beta.test.js +++ b/src/test/Components/CreateImageWizard/CreateImageWizard.beta.test.js @@ -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', diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js index 737aa044..f7f8a34a 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js +++ b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js @@ -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',