MGMT-17130: Add correct id to <HelperItem> components when shown erro…

…rs (#2517) (#2527) * Add id to HelperItem components to indicate errors * Add tests for validations in New cluster page * Changing id in HelperItem components to show errors
openshift-assisted · Mar 20, 2024 · 71ab4fb · 71ab4fb
1 parent c2b8b33
commit 71ab4fb
Show file tree

Hide file tree

Showing 19 changed files with 118 additions and 8 deletions.
diff --git a/libs/ui-lib-tests/cypress/integration/static-ip/1-configure-static-ip-network-wide.cy.ts b/libs/ui-lib-tests/cypress/integration/static-ip/1-configure-static-ip-network-wide.cy.ts
@@ -113,7 +113,7 @@ describe(`Assisted Installer Static IP Network wide Configuration`, () => {
       staticIpPage.dualStackNetworking().click();
 
       testIpv4AndIpv6Addresses.forEach((dnsEntry) => {
-        staticIpPage.networkWideDns().type(dnsEntry);
+        staticIpPage.networkWideDns().clear().type(dnsEntry);
         commonActions.getDNSErrorMessage().should('not.exist');
         staticIpPage.networkWideDns().clear();
       });

diff --git a/...lib-tests/cypress/integration/use-cases/create-cluster/validations-new-cluster-page.cy.ts b/...lib-tests/cypress/integration/use-cases/create-cluster/validations-new-cluster-page.cy.ts
@@ -0,0 +1,71 @@
+import { NewClusterPage } from '../../../views/pages/NewClusterPage';
+import { ClusterDetailsForm } from '../../../views/forms/ClusterDetails/ClusterDetailsForm';
+import { clusterDetailsPage } from '../../../views/clusterDetails';
+
+describe('Create a new cluster and show correct validations for every field', () => {
+  const setTestStartSignal = (activeSignal: string) => {
+    cy.setTestEnvironment({
+      activeSignal,
+      activeScenario: 'AI_CREATE_MULTINODE',
+    });
+  };
+  before(() => setTestStartSignal(''));
+
+  beforeEach(() => {
+    setTestStartSignal('');
+    NewClusterPage.visit();
+    ClusterDetailsForm.init();
+  });
+
+  it('Base Name (Invalid)', () => {
+    const invalidDnsDomain = 'iamnotavaliddnsdomain-iamnotavaliddnsdomain-iamnotavaliddnsdomain';
+    clusterDetailsPage.inputClusterName();
+    clusterDetailsPage.inputBaseDnsDomain(invalidDnsDomain);
+    clusterDetailsPage.clickClusterDetailsBody();
+    clusterDetailsPage.validateInputDnsDomainFieldHelper(
+      `Every single host component in the base domain name cannot contain more than 63 characters and must not contain spaces.`,
+    );
+  });
+
+  it('Base Name (Field Not Empty)', () => {
+    const emptyDns = ' ';
+    clusterDetailsPage.inputBaseDnsDomain(emptyDns);
+    clusterDetailsPage.clickClusterDetailsBody();
+    clusterDetailsPage.validateInputDnsDomainFieldHelper(
+      `Every single host component in the base domain name cannot contain more than 63 characters and must not contain spaces.`,
+    );
+  });
+
+  it('Pull secret (Field not empty)', () => {
+    const emptyPullSecret = '{}';
+    let pullSecretError = 'Required.';
+    clusterDetailsPage.inputPullSecret(emptyPullSecret);
+    clusterDetailsPage.clearPullSecret();
+    clusterDetailsPage.validateInputPullSecretFieldHelper(pullSecretError);
+  });
+
+  it('Pull Secret (Malformed)', () => {
+    const malformedJsonPullSecret = '{{}}';
+    let pullSecretError =
+      "Invalid pull secret format. You must use your Red Hat account's pull secret";
+    clusterDetailsPage.inputPullSecret(malformedJsonPullSecret);
+    clusterDetailsPage.clickClusterDetailsBody();
+    clusterDetailsPage.validateInputPullSecretFieldHelper(pullSecretError);
+  });
+
+  it('Pull secret (Invalid entry)', () => {
+    const invalidPullSecret = '{"invalid": "pull-secret"}';
+    // Need to set valid name and DNS
+    clusterDetailsPage.inputClusterName();
+    clusterDetailsPage.inputBaseDnsDomain();
+    clusterDetailsPage.inputPullSecret(invalidPullSecret);
+
+    const errorSuffix = Cypress.env('OCM_USER')
+      ? 'Learn more about pull secrets and view examples'
+      : "A Red Hat account's pull secret can be found in";
+    clusterDetailsPage.clickClusterDetailsBody();
+    clusterDetailsPage.validateInputPullSecretFieldHelper(
+      `Invalid pull secret format. You must use your Red Hat account's pull secret`,
+    );
+  });
+});
diff --git a/libs/ui-lib-tests/cypress/support/variables/cluster-details.ts b/libs/ui-lib-tests/cypress/support/variables/cluster-details.ts
@@ -23,3 +23,5 @@ Cypress.env(
   'staticIpNetworkConfigFieldId',
   '#form-radio-hostsNetworkConfigurationType-static-field',
 );
+Cypress.env('baseDnsDomainFieldHelperErrorId', '#form-input-baseDnsDomain-field-helper-error');
+Cypress.env('pullSecretFieldHelperErrorId', '#form-input-pullSecret-field-helper-error');
diff --git a/libs/ui-lib-tests/cypress/views/clusterDetails.ts b/libs/ui-lib-tests/cypress/views/clusterDetails.ts
@@ -32,10 +32,10 @@ export const clusterDetailsPage = {
   getPullSecretFieldHelper: () => {
     return cy.get(Cypress.env('pullSecretFieldHelperId'));
   },
-  inputPullSecret: () => {
+  inputPullSecret: (pullSecretValue = pullSecret) => {
     clusterDetailsPage.getPullSecret().clear();
-    cy.pasteText(Cypress.env('pullSecretFieldId'), pullSecret);
-    clusterDetailsPage.getPullSecret().should('contain.text', pullSecret);
+    cy.pasteText(Cypress.env('pullSecretFieldId'), pullSecretValue);
+    clusterDetailsPage.getPullSecret().should('contain.text', pullSecretValue);
   },
   checkAiTechSupportLevel: () => {
     cy.get(Cypress.env('assistedInstallerSupportLevel'))
@@ -126,4 +126,16 @@ export const clusterDetailsPage = {
   getExternalPlatformIntegrationStaticField: () => {
     return cy.get('#form-static-platform-field');
   },
+  clickClusterDetailsBody: () => {
+    cy.get('.pf-v5-l-grid').click();
+  },
+  validateInputDnsDomainFieldHelper: (msg) => {
+    cy.get(Cypress.env('baseDnsDomainFieldHelperErrorId')).should('contain', msg);
+  },
+  clearPullSecret: () => {
+    cy.get(Cypress.env('pullSecretFieldId')).clear().blur();
+  },
+  validateInputPullSecretFieldHelper: (msg) => {
+    cy.get(Cypress.env('pullSecretFieldHelperErrorId')).should('contain', msg);
+  },
 };
diff --git a/libs/ui-lib/lib/common/components/clusterConfiguration/SecurityFields.tsx b/libs/ui-lib/lib/common/components/clusterConfiguration/SecurityFields.tsx
@@ -93,7 +93,10 @@ const SecurityFields = ({
         {errorMsg && (
           <FormHelperText>
             <HelperText>
-              <HelperTextItem variant={touched && errorMsg ? 'error' : 'default'}>
+              <HelperTextItem
+                variant={touched && errorMsg ? 'error' : 'default'}
+                id={errorMsg ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              >
                 {errorMsg ? errorMsg : ''}
               </HelperTextItem>
             </HelperText>

diff --git a/libs/ui-lib/lib/common/components/ui/StaticTextField.tsx b/libs/ui-lib/lib/common/components/ui/StaticTextField.tsx
@@ -45,6 +45,7 @@ export const StaticField: React.FC<StaticFieldProps> = ({
             <HelperTextItem
               icon={<ExclamationCircleIcon />}
               variant={isValid ? 'default' : 'error'}
+              id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
             >
               {isValid ? helperText : helperTextInvalid}
             </HelperTextItem>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/CertificatesUploadField.tsx b/libs/ui-lib/lib/common/components/ui/formik/CertificatesUploadField.tsx
@@ -124,6 +124,7 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
             <HelperTextItem
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/CheckboxField.tsx b/libs/ui-lib/lib/common/components/ui/formik/CheckboxField.tsx
@@ -44,7 +44,11 @@ const CheckboxField: React.FC<CheckboxFieldProps> = ({
       {errorMessage && (
         <FormHelperText>
           <HelperText>
-            <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+            <HelperTextItem
+              icon={<ExclamationCircleIcon />}
+              variant="error"
+              id={`${fieldId}-helper-error`}
+            >
               {errorMessage}
             </HelperTextItem>
           </HelperText>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/CodeField.tsx b/libs/ui-lib/lib/common/components/ui/formik/CodeField.tsx
@@ -62,6 +62,7 @@ const CodeField = ({
             <HelperTextItem
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/InputField.tsx b/libs/ui-lib/lib/common/components/ui/formik/InputField.tsx
@@ -85,6 +85,7 @@ const InputField: React.FC<
               <HelperTextItem
                 icon={errorMessage && <ExclamationCircleIcon />}
                 variant={showErrorMessage ? 'error' : 'default'}
+                id={showErrorMessage && !isValid ? `${fieldId}-helper-error` : `${fieldId}-helper`}
               >
                 {showErrorMessage ? errorMessage : helperText}
               </HelperTextItem>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/LabelField.tsx b/libs/ui-lib/lib/common/components/ui/formik/LabelField.tsx
@@ -92,6 +92,7 @@ export const LabelField: React.FC<LabelFieldProps> = ({
             <HelperTextItem
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/MultiSelectField.tsx b/libs/ui-lib/lib/common/components/ui/formik/MultiSelectField.tsx
@@ -126,6 +126,7 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
             <HelperTextItem
               icon={<ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
             >
               {errorMessage ? errorMessage : hText}
             </HelperTextItem>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/NumberInputField.tsx b/libs/ui-lib/lib/common/components/ui/formik/NumberInputField.tsx
@@ -89,6 +89,7 @@ const NumberInputField: React.FC<NumberInputFieldProps> = React.forwardRef(
               <HelperTextItem
                 icon={errorMessage && <ExclamationCircleIcon />}
                 variant={errorMessage ? 'error' : 'default'}
+                id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
               >
                 {errorMessage ? errorMessage : helperText}
               </HelperTextItem>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx b/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx
@@ -151,7 +151,12 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
         {helperText && (
           <FormHelperText>
             <HelperText>
-              <HelperTextItem variant={isValid ? 'default' : 'error'}>{helperText}</HelperTextItem>
+              <HelperTextItem
+                variant={isValid ? 'default' : 'error'}
+                id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
+              >
+                {helperText}
+              </HelperTextItem>
             </HelperText>
           </FormHelperText>
         )}

diff --git a/libs/ui-lib/lib/common/components/ui/formik/SelectField.tsx b/libs/ui-lib/lib/common/components/ui/formik/SelectField.tsx
@@ -64,6 +64,7 @@ const SelectField: React.FC<SelectFieldProps> = ({
             <HelperTextItem
               icon={<ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
             >
               {errorMessage ? errorMessage : hText}
             </HelperTextItem>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/SwitchField.tsx b/libs/ui-lib/lib/common/components/ui/formik/SwitchField.tsx
@@ -64,6 +64,7 @@ const SwitchField: React.FC<SwitchFieldProps> = ({
             <HelperTextItem
               icon={<ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
             >
               {errorMessage ? errorMessage : hText}
             </HelperTextItem>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/TextAreaField.tsx b/libs/ui-lib/lib/common/components/ui/formik/TextAreaField.tsx
@@ -63,6 +63,7 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
             <HelperTextItem
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/UploadField.tsx b/libs/ui-lib/lib/common/components/ui/formik/UploadField.tsx
@@ -103,6 +103,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
             <HelperTextItem
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

diff --git a/...lusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWideFields.tsx b/...lusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWideFields.tsx
@@ -76,13 +76,14 @@ const MachineNetwork: React.FC<{ fieldName: string; protocolVersion: ProtocolVer
     const cidr = getMachineNetworkCidr(value);
     return getHumanizedSubnetRange(getAddressObject(cidr, protocolVersion));
   }, [value, protocolVersion, errorMessage]);
+  const fieldId = getFieldId(`${fieldName}`, 'input');
   return (
     <FormGroup
       labelIcon={
         <PopoverIcon noVerticalAlign bodyContent="The range of IP addresses of the hosts." />
       }
       label="Machine network"
-      fieldId={getFieldId(`${fieldName}`, 'input')}
+      fieldId={fieldId}
       isRequired
       className="machine-network"
     >
@@ -118,6 +119,7 @@ const MachineNetwork: React.FC<{ fieldName: string; protocolVersion: ProtocolVer
             <HelperTextItem
               icon={errorMessage ? <ExclamationCircleIcon /> : null}
               variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
             >
               {errorMessage ? errorMessage : machineNetworkHelptext}
             </HelperTextItem>