Everest-1809 | show wizard errors on sidebar

ui/apps/everest/.e2e/pr/db-cluster/db-wizard/create-db-cluster/create-db-cluster.e2e.ts

@@ -227,9 +227,9 @@ test.describe('DB Cluster creation', () => {
     expect(addedCluster).not.toBeUndefined();
     expect(addedCluster?.spec.engine.type).toBe('psmdb');
     expect(addedCluster?.spec.engine.replicas).toBe(3);
-    expect(addedCluster?.spec.engine.resources?.cpu.toString()).toBe('1');
-    expect(addedCluster?.spec.engine.resources?.memory.toString()).toBe('4G');
-    expect(addedCluster?.spec.engine.storage.size.toString()).toBe('25Gi');
+    expect(addedCluster?.spec.engine.resources?.cpu.toString()).toBe('600m');
+    expect(addedCluster?.spec.engine.resources?.memory.toString()).toBe('1G');
+    expect(addedCluster?.spec.engine.storage.size.toString()).toBe('1Gi');
     expect(addedCluster?.spec.proxy.expose.type).toBe('internal');
     // TODO commented, because we use only psmdb in this test
     // expect(addedCluster?.spec.proxy.replicas).toBe(1);

ui/apps/everest/.e2e/pr/db-cluster/db-wizard/create-db-cluster/errors-handling.e2e.ts

@@ -18,9 +18,7 @@ import { goToStep, moveForward } from '@e2e/utils/db-wizard';
 import { selectDbEngine } from '../db-wizard-utils';
 
 test.describe('DB Cluster creation', () => {
-  test('Blocking the edit buttons when an error occurs in the form', async ({
-    page,
-  }) => {
+  test('Wizard form errors', async ({ page }) => {
     await page.goto('/databases');
     await selectDbEngine(page, 'pxc');
 
@@ -47,18 +45,56 @@ test.describe('DB Cluster creation', () => {
       page.getByTestId('button-edit-preview-backups')
     ).not.toBeDisabled();
 
+    // Introduce an error on resources step
     await page.getByTestId('text-input-memory').fill('');
+    await expect(page.getByTestId('preview-error-resources')).not.toBeVisible();
 
-    await expect(page.getByTestId('db-wizard-previous-button')).toBeDisabled();
-    await expect(page.getByTestId('db-wizard-continue-button')).toBeDisabled();
     await expect(
       page.getByTestId('db-wizard-cancel-button')
     ).not.toBeDisabled();
+
+    // Backups step
+    await moveForward(page);
+    // Advanced Configurations step
+    await moveForward(page);
+
+    await page
+      .getByTestId('switch-input-external-access')
+      .getByRole('checkbox')
+      .check();
+    await page.getByTestId('add-text-input-button').click();
+    // Introduce an error on advanced configs step: two invalid IPs
+    await page
+      .getByTestId('text-input-source-ranges.0.source-range')
+      .fill('invalid-ip');
+    await page
+      .getByTestId('text-input-source-ranges.1.source-range')
+      .fill('another-invalid-ip');
     await expect(
-      page.getByTestId('button-edit-preview-basic-information')
-    ).toBeDisabled();
+      page.getByTestId('preview-error-advanced-configurations')
+    ).not.toBeVisible();
+
+    // Monitoring step
+    await moveForward(page);
+    await expect(page.getByTestId('db-wizard-submit-button')).toBeDisabled();
+    await expect(page.getByTestId('preview-error-resources')).toBeVisible();
     await expect(
-      page.getByTestId('button-edit-preview-backups')
-    ).toBeDisabled();
+      page.getByTestId('preview-error-advanced-configurations')
+    ).toBeVisible();
+    await goToStep(page, 'resources');
+    await page.getByTestId('text-input-memory').fill('1');
+    await goToStep(page, 'advanced-configurations');
+    await page.getByTestId('delete-text-input-1-button').click();
+    await page
+      .getByTestId('text-input-source-ranges.0.source-range')
+      .fill('192.168.1.1');
+    await goToStep(page, 'monitoring');
+    await expect(
+      page.getByTestId('db-wizard-submit-button')
+    ).not.toBeDisabled();
+    await expect(page.getByTestId('preview-error-resources')).not.toBeVisible();
+    await expect(
+      page.getByTestId('preview-error-advanced-configurations')
+    ).not.toBeVisible();
   });
 });

ui/apps/everest/.e2e/pr/db-cluster/db-wizard/create-db-cluster/sharding.e2e.ts

@@ -154,20 +154,26 @@ test.describe('Sharding (psmdb)', () => {
     );
 
     await page.getByTestId('shard-config-servers-1').click();
-    expect(page.getByTestId('shard-config-servers-error')).toBeVisible();
-    expect(page.getByTestId('db-wizard-continue-button')).toBeDisabled();
+    await expect(page.getByTestId('shard-config-servers-error')).toBeVisible();
 
     await page.getByTestId('toggle-button-nodes-1').click();
-    expect(page.getByTestId('shard-config-servers-error')).not.toBeVisible();
-    expect(page.getByTestId('db-wizard-continue-button')).not.toBeDisabled();
+    await expect(
+      page.getByTestId('shard-config-servers-error')
+    ).not.toBeVisible();
+    await expect(
+      page.getByTestId('db-wizard-continue-button')
+    ).not.toBeDisabled();
 
     await page.getByTestId('toggle-button-nodes-3').click();
-    expect(page.getByTestId('shard-config-servers-error')).toBeVisible();
-    expect(page.getByTestId('db-wizard-continue-button')).toBeDisabled();
+    await expect(page.getByTestId('shard-config-servers-error')).toBeVisible();
 
     await page.getByTestId('shard-config-servers-3').click();
-    expect(page.getByTestId('shard-config-servers-error')).not.toBeVisible();
-    expect(page.getByTestId('db-wizard-continue-button')).not.toBeDisabled();
+    await expect(
+      page.getByTestId('shard-config-servers-error')
+    ).not.toBeVisible();
+    await expect(
+      page.getByTestId('db-wizard-continue-button')
+    ).not.toBeDisabled();
   });
 
   test('0 value of the Nº of shards causes an error', async ({ page }) => {
@@ -180,10 +186,13 @@ test.describe('Sharding (psmdb)', () => {
     await moveForward(page);
 
     await page.getByTestId('text-input-shard-nr').fill('0');
-    expect(page.getByText('The value cannot be less than 1')).toBeVisible();
-    expect(page.getByTestId('db-wizard-continue-button')).toBeDisabled();
+    await expect(
+      page.getByText('The value cannot be less than 1')
+    ).toBeVisible();
     await page.getByTestId('text-input-shard-nr').fill('1');
-    expect(page.getByTestId('db-wizard-continue-button')).not.toBeDisabled();
+    await expect(
+      page.getByTestId('db-wizard-continue-button')
+    ).not.toBeDisabled();
   });
 
   test('Changing the Nº of nodes causes changing the confing servers Nº automatically, until the user touches confing servers Nº', async ({

ui/apps/everest/.e2e/utils/db-wizard.ts

@@ -16,10 +16,15 @@ export const storageLocationAutocompleteEmptyValidationCheck = async (
 };
 
 export const moveForward = async (page: Page) => {
-  await expect(
-    page.getByTestId('db-wizard-continue-button')
-  ).not.toBeDisabled();
+  const currHeader = await page.getByTestId('step-header').textContent();
   await page.getByTestId('db-wizard-continue-button').click();
+
+  do {
+    if ((await page.getByTestId('step-header').textContent()) !== currHeader) {
+      break;
+    }
+    page.waitForTimeout(200);
+  } while (1);
 };
 
 export const moveBack = (page: Page) =>

ui/apps/everest/src/components/cluster-form/resources/resources.tsx

@@ -43,6 +43,7 @@
 
 import { ResourcesTogglesProps, ResourceInputProps } from './resources.types';
 import { Messages } from './messages';
+import { DbWizardType } from 'pages/database-form/database-form-schema';
 
 const humanizeResourceSizeMap = (type: ResourceSize): string =>
   humanizedResourceSizeMap[type];
@@ -189,7 +190,7 @@
       }
       setValue(memoryInputName, sizeOptions[resourceSizePerUnit].memory);
     }
   }, [resourceSizePerUnit, allowDiskInputUpdate, setValue]);
 
   useEffect(() => {
     if (diskCapacityExceeded) {
@@ -197,7 +198,7 @@
     } else {
       clearErrors(diskInputName);
     }
   }, [diskCapacityExceeded, clearErrors, setError]);
 
   useEffect(() => {
     if (
@@ -206,7 +207,7 @@
     ) {
       setValue(resourceSizePerUnitInputName, ResourceSize.custom);
     }
   }, [cpu, setValue]);
 
   useEffect(() => {
     if (
@@ -216,7 +217,7 @@
     ) {
       setValue(resourceSizePerUnitInputName, ResourceSize.custom);
     }
   }, [disk, allowDiskInputUpdate, setValue]);
 
   useEffect(() => {
     if (
@@ -225,7 +226,7 @@
     ) {
       setValue(resourceSizePerUnitInputName, ResourceSize.custom);
     }
   }, [memory, setValue]);
 
   return (
     <FormGroup sx={{ mt: 3 }}>
@@ -443,22 +444,23 @@
   const [expanded, setExpanded] = useState<'nodes' | 'proxies' | false>(
     'nodes'
   );
-  const { watch, getFieldState, setValue, trigger, clearErrors } =
-    useFormContext();
+  const {
+    watch,
+    getFieldState,
+    setValue,
+    trigger,
+    clearErrors,
+    formState: { errors },
+  } = useFormContext<DbWizardType>();
 
   const numberOfNodes: string = watch(DbWizardFormFields.numberOfNodes);
 
   const sharding: boolean = watch(DbWizardFormFields.sharding);
-  const shardConfigServers: number = watch(
-    DbWizardFormFields.shardConfigServers
-  );
-  const { error: shardConfigServersError } = getFieldState(
-    DbWizardFormFields.shardConfigServers
-  );
+  const shardConfigServers = watch(DbWizardFormFields.shardConfigServers);
 
   const numberOfProxies: string = watch(DbWizardFormFields.numberOfProxies);
-  const customNrOfNodes: string = watch(DbWizardFormFields.customNrOfNodes);
-  const customNrOfProxies: string = watch(DbWizardFormFields.customNrOfProxies);
+  const customNrOfNodes = watch(DbWizardFormFields.customNrOfNodes);
+  const customNrOfProxies = watch(DbWizardFormFields.customNrOfProxies);
   const proxyUnitNames = getProxyUnitNamesFromDbType(dbType);
   const nodesAccordionSummaryNumber =
     numberOfNodes === CUSTOM_NR_UNITS_INPUT_VALUE
@@ -526,7 +528,9 @@
         clearErrors(DbWizardFormFields.shardConfigServers);
         setValue(
           DbWizardFormFields.shardConfigServers,
-          getDefaultNumberOfconfigServersByNumberOfNodes(+customNrOfNodes)
+          getDefaultNumberOfconfigServersByNumberOfNodes(
+            +(customNrOfNodes || '')
+          )
         );
       }
     }
@@ -579,7 +583,7 @@
       >
         <CustomAccordionSummary
           unitPlural="Nodes"
-          nr={parseInt(nodesAccordionSummaryNumber, 10)}
+          nr={parseInt(nodesAccordionSummaryNumber || '', 10)}
         />
         <Divider />
         <ResourcesToggles
@@ -609,7 +613,7 @@
         >
           <CustomAccordionSummary
             unitPlural={proxyUnitNames.plural}
-            nr={parseInt(proxiesAccordionSummaryNumber, 10)}
+            nr={parseInt(proxiesAccordionSummaryNumber || '', 10)}
           />
           <Divider />
           <ResourcesToggles
@@ -649,8 +653,9 @@
               toggleButtonGroupProps={{
                 size: 'small',
                 onChange: (_, value) => {
-                  setValue(DbWizardFormFields.shardConfigServers, value);
-                  trigger(DbWizardFormFields.shardConfigServers);
+                  setValue(DbWizardFormFields.shardConfigServers, value, {
+                    shouldValidate: true,
+                  });
                 },
               }}
             >
@@ -674,12 +679,12 @@
                 </ToggleRegularButton>
               ))}
             </ToggleButtonGroupInputRegular>
-            {shardConfigServersError && (
+            {errors.shardConfigServers && (
               <FormHelperText
                 data-testid="shard-config-servers-error"
                 error={true}
               >
-                {shardConfigServersError?.message}
+                {errors.shardConfigServers.message}
               </FormHelperText>
             )}
           </Stack>

ui/apps/everest/src/pages/database-form/database-form-body/DatabaseFormBody.tsx

@@ -24,7 +24,6 @@ import DatabaseFormStepControllers from './DatabaseFormStepControllers';
 const DatabaseFormBody = ({
   activeStep,
   longestAchievedStep,
-  disableNext,
   isSubmitting,
   hasErrors,
   onCancel,
@@ -52,8 +51,7 @@ const DatabaseFormBody = ({
           })}
       </Box>
       <DatabaseFormStepControllers
-        disableBack={isFirstStep || hasErrors}
-        disableNext={disableNext}
+        disableBack={isFirstStep}
         disableSubmit={isSubmitting || hasErrors}
         disableCancel={isSubmitting}
         showSubmit={activeStep === steps.length - 1}

ui/apps/everest/src/pages/database-form/database-form-body/DatabaseFormStepControllers.tsx

@@ -20,7 +20,6 @@ import { DatabaseFormStepControllersProps } from './types';
 
 const DatabaseFormStepControllers = ({
   disableBack,
-  disableNext,
   disableSubmit,
   disableCancel,
   showSubmit,
@@ -66,7 +65,6 @@ const DatabaseFormStepControllers = ({
         onClick={onNextClick}
         variant="contained"
         data-testid="db-wizard-continue-button"
-        disabled={disableNext}
       >
         {Messages.continue}
       </Button>