MGMT-15332: Adding same name for 2 manifests - UI shows error on all manifests

libs/ui-lib-tests/cypress/integration/custom-manifests/2-modifying-existing-custom-manifest.cy.ts

@@ -1,6 +1,6 @@
 import { commonActions } from '../../views/common';
 import { setLastWizardSignal } from '../../support/utils';
-import { customManifestsPage } from '../../views/customManifestsPage';
+import { CustomManifestsForm } from '../../views/forms';
 
 const ACTIVE_NAV_ITEM_CLASS = 'pf-m-current';
 
@@ -45,31 +45,36 @@ describe(`Assisted Installer Custom manifests step`, () => {
 
   describe('Editing manifests', () => {
     it('Adding valid content to dummy manifest enables next button', () => {
-      customManifestsPage.getStartFromScratch().click();
-      customManifestsPage.fileUpload(0).attachFile(`custom-manifests/files/manifest1.yaml`);
+      CustomManifestsForm.initManifest(0);
+      CustomManifestsForm.expandedManifest(0)
+        .fileUpload()
+        .attachFile(`custom-manifests/files/manifest1.yaml`);
       commonActions.verifyNextIsEnabled();
     });
 
     it('Cannot upload binary file into manifest content', () => {
-      customManifestsPage.getStartFromScratch().click();
-      customManifestsPage.fileUpload(0).attachFile(`custom-manifests/files/img.png`);
-      customManifestsPage
-        .getYamlContentError()
+      CustomManifestsForm.initManifest(0);
+      CustomManifestsForm.expandedManifest(0).fileName().clear().type('fdd');
+      CustomManifestsForm.expandedManifest(0)
+        .fileUpload()
+        .attachFile(`custom-manifests/files/img.png`);
+      CustomManifestsForm.expandedManifest(0)
+        .fileUploadError()
         .should('contain.text', 'File type is not supported. File type must be yaml, yml or json.');
       commonActions.verifyNextIsDisabled();
     });
 
     it('Incorrect file name is shown as an error', () => {
-      customManifestsPage.getFileName(0).clear().type('test.txt');
-      customManifestsPage
-        .getFileNameError()
+      CustomManifestsForm.initManifest(0);
+      CustomManifestsForm.expandedManifest(0).fileName().clear().type('test.txt');
+      CustomManifestsForm.expandedManifest(0)
+        .fileNameError()
         .should('contain.text', 'Must have a yaml, yml or json extension and can not contain /.');
-      customManifestsPage
-        .getAlertTitle()
-        .should(
-          'contain.text',
-          'Custom manifests configuration contains missing or invalid fields',
-        );
+
+      CustomManifestsForm.validationAlert().should(
+        'contain.text',
+        'Custom manifests configuration contains missing or invalid fields',
+      );
       commonActions.verifyNextIsDisabled();
     });
   });

libs/ui-lib-tests/cypress/integration/custom-manifests/3-removing-adding-custom-manifests.cy.ts

@@ -1,6 +1,6 @@
 import { commonActions } from '../../views/common';
-import { customManifestsPage } from '../../views/customManifestsPage';
 import * as utils from '../../support/utils';
+import { CustomManifestsForm } from '../../views/forms';
 
 describe(`Assisted Installer Custom manifests step`, () => {
   const setTestStartSignal = (activeSignal: string) => {
@@ -10,25 +10,30 @@ describe(`Assisted Installer Custom manifests step`, () => {
     });
   };
 
-  before(() => setTestStartSignal('ONLY_DUMMY_CUSTOM_MANIFEST'));
+  describe('Custom Manifests actions', () => {
+    before(() => setTestStartSignal('ONLY_DUMMY_CUSTOM_MANIFEST'));
 
-  beforeEach(() => {
-    setTestStartSignal('ONLY_DUMMY_CUSTOM_MANIFEST');
-    commonActions.visitClusterDetailsPage();
-  });
+    beforeEach(() => {
+      setTestStartSignal('ONLY_DUMMY_CUSTOM_MANIFEST');
+      commonActions.visitClusterDetailsPage();
+    });
 
-  describe('Custom Manifests actions', () => {
     it('Can add new custom manifests', () => {
       // First make the incomplete dummy manifest valid
-      customManifestsPage.getStartFromScratch().click();
-      customManifestsPage.fileUpload(0).attachFile(`custom-manifests/files/manifest1.yaml`);
-      customManifestsPage.getLinkToAdd().should('be.enabled');
-      customManifestsPage.getLinkToAdd().click();
+      CustomManifestsForm.initManifest(0);
+      CustomManifestsForm.expandedManifest(0)
+        .fileUpload()
+        .attachFile(`custom-manifests/files/manifest1.yaml`);
+      CustomManifestsForm.addManifest().should('be.enabled');
+      CustomManifestsForm.addManifest().click();
 
       // Now we can add a new manifest
-      customManifestsPage.getFileName(1).type('manifest2.yaml');
-      customManifestsPage.fileUpload(1).attachFile(`custom-manifests/files/manifest1.yaml`);
-      customManifestsPage.getLinkToAdd().should('be.enabled');
+      CustomManifestsForm.initManifest(1);
+      CustomManifestsForm.expandedManifest(1).fileName().type('manifest2.yaml');
+      CustomManifestsForm.expandedManifest(1)
+        .fileUpload()
+        .attachFile(`custom-manifests/files/manifest1.yaml`);
+      CustomManifestsForm.addManifest().should('be.enabled');
 
       cy.wait('@create-manifest').then(({ request }) => {
         // Verify that the new manifest content is submitted correctly
@@ -40,39 +45,56 @@ describe(`Assisted Installer Custom manifests step`, () => {
         });
       });
     });
+  });
 
-    it('Validate that custom manifests names are unique', () => {
-      customManifestsPage.getStartFromScratch().click();
-      customManifestsPage.fileUpload(0).attachFile(`custom-manifests/files/manifest1.yaml`);
-      customManifestsPage.getLinkToAdd().should('be.enabled');
-      customManifestsPage.getLinkToAdd().click();
-      // Now we can add a new manifest
-      customManifestsPage.getFileName(1).type('manifest1.yaml');
-      customManifestsPage.fileUpload(1).attachFile(`custom-manifests/files/manifest1.yaml`);
-      customManifestsPage
-        .getFileNameError()
-        .should('contain.text', 'Ensure unique file names to avoid conflicts and errors.');
-      customManifestsPage
-        .getAlertTitle()
-        .should(
-          'contain.text',
-          'Custom manifests configuration contains missing or invalid fields',
-        );
+  describe('Custom manifests actions #2', () => {
+    before(() => setTestStartSignal('CUSTOM_MANIFEST_ADDED'));
+
+    beforeEach(() => {
+      setTestStartSignal('CUSTOM_MANIFEST_ADDED');
+      commonActions.visitClusterDetailsPage();
+      commonActions.startAtWizardStep('Custom manifests');
     });
 
     it('Can delete custom manifest', () => {
       utils.setLastWizardSignal('CUSTOM_MANIFEST_ADDED');
       commonActions.startAtWizardStep('Custom manifests');
 
-      customManifestsPage.getLinkToAdd().should('be.enabled');
-      customManifestsPage.getLinkToAdd().click();
-      customManifestsPage.getFileName(1).type('manifest2.yaml');
-      customManifestsPage.fileUpload(1).attachFile(`custom-manifests/files/manifest1.yaml`);
-      customManifestsPage.getRemoveManifestButton(1).click();
-      customManifestsPage.getRemoveConfirmationButton().click();
+      CustomManifestsForm.addManifest().should('be.enabled');
+      CustomManifestsForm.addManifest().click();
+
+      CustomManifestsForm.initManifest(1);
+      CustomManifestsForm.expandedManifest(1).fileName().type('manifest2.yaml');
+      CustomManifestsForm.expandedManifest(1)
+        .fileUpload()
+        .attachFile(`custom-manifests/files/manifest1.yaml`);
+      CustomManifestsForm.removeManifest(1).click();
+      CustomManifestsForm.getRemoveConfirmationButton().click();
       cy.wait('@delete-manifests').then(({ request }) => {
         expect(request.url).to.contain('folder=manifests&file_name=manifest2.yaml');
       });
     });
+
+    it('Enforces unique file names for custom manifests', () => {
+      CustomManifestsForm.addManifest().click();
+      CustomManifestsForm.initManifest(1);
+      CustomManifestsForm.expandedManifest(1).fileName().type('manifest2.yaml');
+      CustomManifestsForm.expandedManifest(1)
+        .fileUpload()
+        .attachFile(`custom-manifests/files/manifest1.yaml`);
+
+      CustomManifestsForm.addManifest().click();
+      CustomManifestsForm.initManifest(2);
+      CustomManifestsForm.expandedManifest(2).fileName().type('manifest2.yaml');
+
+      CustomManifestsForm.expandedManifest(2)
+        .fileNameError()
+        .should('contain.text', 'Ensure unique file names to avoid conflicts and errors.');
+
+      CustomManifestsForm.initManifest(0, true);
+      CustomManifestsForm.collapsedManifest(0).name();
+      CustomManifestsForm.initManifest(1, true);
+      CustomManifestsForm.collapsedManifest(1).error();
+    });
   });
 });

libs/ui-lib-tests/cypress/views/forms/CustomManifests/CustomManifestsForm.ts

@@ -0,0 +1,41 @@
+import { CollapsedManifest, ExpandedManifest } from './Fields';
+
+export const CustomManifestsForm = {
+  body: () => {
+    return cy.get('.pf-c-wizard__main-body');
+  },
+
+  expandedManifest: (index) => {
+    return ExpandedManifest(`@ExpandedManifest-${index}`, index);
+  },
+  collapsedManifest: (index) => {
+    return CollapsedManifest(`@CollapsedManifest-${index}`, index);
+  },
+
+  validationAlert: () => {
+    return cy.get('.pf-c-alert.pf-m-danger');
+  },
+  addManifest: () => {
+    return CustomManifestsForm.body().findByTestId('add-manifest');
+  },
+
+  removeManifest: (index: number) => {
+    return CustomManifestsForm.body().findByTestId(`remove-manifest-${index}`);
+  },
+
+  getRemoveConfirmationButton: () => {
+    return cy.findByTestId('confirm-modal-submit');
+  },
+
+  initManifest: (index: number, collapsed: boolean = false) => {
+    if (collapsed) {
+      return CustomManifestsForm.body()
+        .findByTestId(`collapsed-manifest-${index}`)
+        .as(`CollapsedManifest-${index}`);
+    } else {
+      return CustomManifestsForm.body()
+        .findByTestId(`expanded-manifest-${index}`)
+        .as(`ExpandedManifest-${index}`);
+    }
+  },
+};

libs/ui-lib-tests/cypress/views/forms/CustomManifests/Fields/CollapsedManifest.ts

@@ -0,0 +1,11 @@
+export const CollapsedManifest = (parentAlias: string, index: number) => ({
+  error: () => {
+    return cy.get(parentAlias).findByTestId('manifest-errors-label');
+  },
+  name: () => {
+    return cy.get(parentAlias).findByTestId('manifest-name');
+  },
+  remove: () => {
+    return cy.get(parentAlias).findByTestId(`remove-manifest-${index}`);
+  },
+});

libs/ui-lib-tests/cypress/views/forms/CustomManifests/Fields/ExpandedManifest.ts

@@ -0,0 +1,17 @@
+export const ExpandedManifest = (parentAlias: string, index: number) => ({
+  fileName: () => {
+    return cy.get(parentAlias).findByTestId(/filename-\d+/);
+  },
+  fileNameError: () => {
+    return cy.get(parentAlias).find('.pf-c-form__helper-text.pf-m-error');
+  },
+  fileUpload: () => {
+    return cy.get(parentAlias).find('input[type="file"]');
+  },
+  fileUploadError: () => {
+    return cy.get(parentAlias).find('.pf-c-form__helper-text.pf-m-error');
+  },
+  remove: () => {
+    return cy.get(parentAlias).findByTestId(`remove-manifest-${index}`);
+  },
+});

libs/ui-lib-tests/cypress/views/forms/CustomManifests/Fields/index.ts

@@ -0,0 +1,2 @@
+export { CollapsedManifest } from './CollapsedManifest';
+export { ExpandedManifest } from './ExpandedManifest';

libs/ui-lib-tests/cypress/views/forms/index.ts

@@ -0,0 +1 @@
+export { CustomManifestsForm } from './CustomManifests/CustomManifestsForm';

libs/ui-lib/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/ExpandedManifest.tsx

@@ -22,7 +22,12 @@ const ExpandedManifest = ({ fieldName, manifestIdx }: CustomManifestComponentPro
   });
 
   return (
-    <ExpandableSection isDetached key={manifestIdx} isExpanded>
+    <ExpandableSection
+      isDetached
+      key={manifestIdx}
+      isExpanded
+      data-testid={`expanded-manifest-${manifestIdx}`}
+    >
       <Grid hasGutter span={12}>
         <GridItem span={6}>
           <TextInput

libs/ui-lib/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/customManifestsValidationSchema.tsx

@@ -1,5 +1,4 @@
 import * as Yup from 'yup';
-import { UniqueStringArrayExtractor } from '../../staticIp/commonValidationSchemas';
 import { CustomManifestValues, ManifestFormData } from '../data/dataTypes';
 import {
   getMaxFileSizeMessage,
@@ -12,45 +11,34 @@ const INCORRECT_FILENAME = 'Must have a yaml, yml or json extension and can not
 
 const UNIQUE_FOLDER_FILENAME = 'Ensure unique file names to avoid conflicts and errors.';
 
-export const getUniqueValidationSchema = <FormValues,>(
-  uniqueStringArrayExtractor: UniqueStringArrayExtractor<FormValues>,
-) => {
-  return Yup.string().test('unique', UNIQUE_FOLDER_FILENAME, function (value: string) {
-    const context = this.options.context as Yup.TestContext & { values?: FormValues };
+export const getUniqueValidationSchema = Yup.string().test(
+  'unique',
+  UNIQUE_FOLDER_FILENAME,
+  function (value: string) {
+    const context = this.options.context as Yup.TestContext & { values?: ManifestFormData };
     if (!context || !context.values) {
       return this.createError({
         message: 'Unexpected error: Yup test context should contain form values',
       });
     }
 
-    const values = uniqueStringArrayExtractor(context.values, this, value);
-
-    const setValues = new Set(values);
-
-    if (!values) {
-      return this.createError({
-        message: 'Unexpected error: Failed to get values to test uniqueness',
-      });
-    }
-    return values.length === setValues.size;
-  });
-};
-
-const getAllManifests: UniqueStringArrayExtractor<ManifestFormData> = (values: ManifestFormData) =>
-  values.manifests.map((manifest) => manifest.filename);
+    const values = context.values.manifests.map((manifest) => manifest.filename);
+    return values.filter((path) => path === value).length === 1;
+  },
+);
 
 export const getFormViewManifestsValidationSchema = Yup.object<ManifestFormData>().shape({
   manifests: Yup.array<CustomManifestValues>().of(
     Yup.object().shape({
-      folder: Yup.mixed().required('Required').concat(getUniqueValidationSchema(getAllManifests)),
+      folder: Yup.mixed().required('Required'),
       filename: Yup.string()
         .required('Required')
         .min(1, 'Number of characters must be 1-255')
         .max(255, 'Number of characters must be 1-255')
         .test('not-correct-filename', INCORRECT_FILENAME, (value: string) => {
           return validateFileName(value);
         })
-        .concat(getUniqueValidationSchema(getAllManifests)),
+        .concat(getUniqueValidationSchema),
       manifestYaml: Yup.string()
         .required('Required')
         .test('not-big-file', getMaxFileSizeMessage, validateFileSize)