Adding loading when form is submitted and added unit tests

Samiul-TheSoccerFan · Samiul-TheSoccerFan · commit 77bfeb232f11 · 2024-12-19T15:54:58.000-05:00
diff --git a/x-pack/plugins/search_inference_endpoints/public/components/add_inference_endpoints/inference_form.tsx b/x-pack/plugins/search_inference_endpoints/public/components/add_inference_endpoints/inference_form.tsx
@@ -6,7 +6,7 @@
  */
 
 import { Form, useForm } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { InferenceServices } from '@kbn/inference-endpoint-ui-common';
 import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { useProviders } from '../../hooks/use_providers';
@@ -18,17 +18,30 @@ interface InferenceFormProps {
   onSubmitSuccess: (state: boolean) => void;
 }
 export const InferenceForm: React.FC<InferenceFormProps> = ({ onSubmitSuccess }) => {
-  const { mutate: addEndpoint } = useAddEndpoint(() => onSubmitSuccess(false));
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const onSuccess = useCallback(() => {
+    setIsLoading(false);
+    onSubmitSuccess(false);
+  }, [onSubmitSuccess]);
+  const onError = useCallback(() => {
+    setIsLoading(false);
+  }, []);
+  const { mutate: addEndpoint } = useAddEndpoint(
+    () => onSuccess(),
+    () => onError()
+  );
   const { data: providers } = useProviders();
   const { form } = useForm();
   const handleSubmit = useCallback(async () => {
+    setIsLoading(true);
     const { isValid, data } = await form.submit();
 
     if (isValid) {
       addEndpoint({
         inferenceEndpoint: data as InferenceEndpoint,
       });
-      return;
+    } else {
+      setIsLoading(false);
     }
   }, [addEndpoint, form]);
 
@@ -42,8 +55,8 @@ export const InferenceForm: React.FC<InferenceFormProps> = ({ onSubmitSuccess })
             fill
             color="success"
             size="m"
-            isLoading={form.isSubmitting}
-            disabled={!form.isValid && form.isSubmitted}
+            isLoading={form.isSubmitting || isLoading}
+            disabled={(!form.isValid && form.isSubmitted) || isLoading}
             data-test-subj="add-inference-endpoint-submit-button"
             onClick={handleSubmit}
           >
diff --git a/x-pack/plugins/search_inference_endpoints/public/hooks/use_add_endpoint.test.tsx b/x-pack/plugins/search_inference_endpoints/public/hooks/use_add_endpoint.test.tsx
@@ -41,24 +41,32 @@ const mockUseKibana = useKibana as jest.Mock;
 const mockAdd = jest.fn();
 const mockAddSuccess = jest.fn();
 const mockAddError = jest.fn();
+const mockOnSuccess = jest.fn();
+const mockOnError = jest.fn();
 
 describe('useAddEndpoint', () => {
-  mockUseKibana.mockReturnValue({
-    services: {
-      http: {
-        put: mockAdd,
-      },
-      notifications: {
-        toasts: {
-          addSuccess: mockAddSuccess,
-          addError: mockAddError,
+  beforeEach(() => {
+    mockUseKibana.mockReturnValue({
+      services: {
+        http: {
+          put: mockAdd,
+        },
+        notifications: {
+          toasts: {
+            addSuccess: mockAddSuccess,
+            addError: mockAddError,
+          },
         },
       },
-    },
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
   });
 
   it('show call add inference endpoint and show success toast', async () => {
-    const { result } = renderHook(() => useAddEndpoint(), { wrapper });
+    const { result } = renderHook(() => useAddEndpoint(mockOnSuccess, mockOnError), { wrapper });
 
     result.current.mutate({ inferenceEndpoint: mockInferenceEndpoint });
 
@@ -73,15 +81,21 @@ describe('useAddEndpoint', () => {
     expect(mockAddSuccess).toHaveBeenCalledWith({
       title: i18n.ENDPOINT_ADDED_SUCCESS,
     });
+    expect(mockOnSuccess).toHaveBeenCalled();
+    expect(mockOnError).not.toHaveBeenCalled();
   });
 
   it('should show error toast on failure', async () => {
     const error = { body: { message: 'error' } };
     mockAdd.mockRejectedValue(error);
-    const { result } = renderHook(() => useAddEndpoint(), { wrapper });
+    const { result } = renderHook(() => useAddEndpoint(mockOnSuccess, mockOnError), { wrapper });
 
     result.current.mutate({ inferenceEndpoint: mockInferenceEndpoint });
 
-    await waitFor(() => expect(mockAddError).toHaveBeenCalled());
+    await waitFor(() => {
+      expect(mockAddError).toHaveBeenCalled();
+      expect(mockOnSuccess).not.toHaveBeenCalled();
+      expect(mockOnError).toHaveBeenCalled();
+    });
   });
 });
diff --git a/x-pack/plugins/search_inference_endpoints/public/hooks/use_add_endpoint.ts b/x-pack/plugins/search_inference_endpoints/public/hooks/use_add_endpoint.ts
@@ -17,7 +17,7 @@ interface MutationArgs {
   inferenceEndpoint: InferenceEndpoint;
 }
 
-export const useAddEndpoint = (onSuccess?: () => void) => {
+export const useAddEndpoint = (onSuccess?: () => void, onError?: () => void) => {
   const queryClient = useQueryClient();
   const { services } = useKibana();
   const toasts = services.notifications?.toasts;
@@ -46,6 +46,9 @@ export const useAddEndpoint = (onSuccess?: () => void) => {
           title: i18n.ENDPOINT_CREATION_FAILED,
           toastMessage: error.body.message,
         });
+        if (onError) {
+          onError();
+        }
       },
     }
   );
