Wizard: Debounce unique validation (HMS-4581)

src/Components/CreateImageWizard/utilities/useValidation.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 
+import { UNIQUE_VALIDATION_DELAY } from '../../../constants';
 import { useAppSelector } from '../../../store/hooks';
 import {
   BlueprintsResponse,
@@ -86,24 +87,35 @@ export function useDetailsValidation(): StepValidation {
 
   const [trigger] = useLazyGetBlueprintsQuery();
 
+  // Debounce the API call to check if the name is unique
   useEffect(() => {
     if (name !== '' && nameValid) {
-      trigger({ name })
-        .unwrap()
-        .then((response: BlueprintsResponse) => {
-          if (
-            response?.meta?.count > 0 &&
-            response.data[0].id !== blueprintId
-          ) {
-            setUniqueName(false);
-          } else {
-            setUniqueName(true);
-          }
-        })
-        .catch(() => {
-          // If the request fails, we assume the name is unique
-          setUniqueName(true);
-        });
+      const timer = setTimeout(
+        () => {
+          setUniqueName(null);
+          trigger({ name })
+            .unwrap()
+            .then((response: BlueprintsResponse) => {
+              if (
+                response?.meta?.count > 0 &&
+                response.data[0].id !== blueprintId
+              ) {
+                setUniqueName(false);
+              } else {
+                setUniqueName(true);
+              }
+            })
+            .catch(() => {
+              // If the request fails, we assume the name is unique
+              setUniqueName(true);
+            });
+        },
+        UNIQUE_VALIDATION_DELAY // If name is empty string, instantly return
+      );
+
+      return () => {
+        clearTimeout(timer);
+      };
     }
   }, [blueprintId, name, setUniqueName, trigger, nameValid]);
 
@@ -122,6 +134,7 @@ export function useDetailsValidation(): StepValidation {
       name: nameError,
       description: descriptionValid ? '' : 'Invalid description',
     },
-    disabledNext: !!nameError || !descriptionValid,
+    // if uniqueName is null, we are still waiting for the API response
+    disabledNext: !!nameError || !descriptionValid || uniqueName !== true,
   };
 }

src/constants.ts

@@ -214,6 +214,7 @@ export const EPEL_9_REPO_DEFINITION = {
 };
 
 export const DEBOUNCED_SEARCH_WAIT_TIME = 500;
+export const UNIQUE_VALIDATION_DELAY = 300;
 export const FIRST_BOOT_SERVICE_DATA =
   'W1VuaXRdCkRlc2NyaXB0aW9uPVJ1biBmaXJzdCBib290IHNjcmlwdApDb25kaXRpb25QYXRoRXhpc3RzPS91c3IvbG9jYWwvc2Jpbi9jdXN0b20tZmlyc3QtYm9vdApXYW50cz1uZXR3b3JrLW9ubGluZS50YXJnZXQKQWZ0ZXI9bmV0d29yay1vbmxpbmUudGFyZ2V0CkFmdGVyPW9zYnVpbGQtZmlyc3QtYm9vdC5zZXJ2aWNlCgpbU2VydmljZV0KVHlwZT1vbmVzaG90CkV4ZWNTdGFydD0vdXNyL2xvY2FsL3NiaW4vY3VzdG9tLWZpcnN0LWJvb3QKRXhlY1N0YXJ0UG9zdD1tdiAvdXNyL2xvY2FsL3NiaW4vY3VzdG9tLWZpcnN0LWJvb3QgL3Vzci9sb2NhbC9zYmluL2N1c3RvbS1maXJzdC1ib290LmRvbmUKCltJbnN0YWxsXQpXYW50ZWRCeT1tdWx0aS11c2VyLnRhcmdldAo=';
 

src/test/setup.ts

@@ -39,6 +39,15 @@ vi.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
   }),
 }));
 
+vi.mock(import('../../src/constants'), async (importOriginal) => {
+  const mod = await importOriginal(); // type is inferred
+  return {
+    ...mod,
+    // replace some exports
+    UNIQUE_VALIDATION_DELAY: 0,
+  };
+});
+
 vi.mock('@unleash/proxy-client-react', () => ({
   useUnleashContext: () => vi.fn(),
   useFlag: vi.fn((flag) => {