Wizard: add description field to Details steps

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;

src/Components/CreateImageWizard/formComponents/ReviewStep.js

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

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 (
     <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>
           </>
         )}

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 <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 }],
+    },
   ],
 };

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:

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',

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',