[Fleet] Fix fleet server hosts client validation (#125085) (#125118)

(cherry picked from commit 153b7e135c)

Co-authored-by: Nicolas Chaulet <nicolas.chaulet@elastic.co>

x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/use_fleet_server_host_form.test.tsx

@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { act } from 'react-test-renderer';
+
+import { createFleetTestRendererMock } from '../../../../../../mock';
+
+import { useFleetServerHostsForm } from './use_fleet_server_host_form';
+
+jest.mock('../../services/agent_and_policies_count', () => ({
+  ...jest.requireActual('../../services/agent_and_policies_count'),
+  getAgentAndPolicyCount: () => ({ agentCount: 0, agentPolicyCount: 0 }),
+}));
+jest.mock('../../hooks/use_confirm_modal', () => ({
+  ...jest.requireActual('../../hooks/use_confirm_modal'),
+  useConfirmModal: () => ({ confirm: () => true }),
+}));
+
+describe('useFleetServerHostsForm', () => {
+  it('should not allow to submit an invalid form', async () => {
+    const testRenderer = createFleetTestRendererMock();
+    const onSucess = jest.fn();
+    const { result } = testRenderer.renderHook(() => useFleetServerHostsForm([], onSucess));
+
+    act(() =>
+      result.current.fleetServerHostsInput.props.onChange(['http://test.fr', 'http://test.fr'])
+    );
+
+    await act(() => result.current.submit());
+
+    expect(result.current.fleetServerHostsInput.props.errors).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "index": 0,
+          "message": "Duplicate URL",
+        },
+        Object {
+          "index": 1,
+          "message": "Duplicate URL",
+        },
+      ]
+    `);
+    expect(onSucess).not.toBeCalled();
+    expect(result.current.isDisabled).toBeTruthy();
+  });
+
+  it('should submit a valid form', async () => {
+    const testRenderer = createFleetTestRendererMock();
+    const onSucess = jest.fn();
+    testRenderer.startServices.http.post.mockResolvedValue({});
+    const { result } = testRenderer.renderHook(() => useFleetServerHostsForm([], onSucess));
+
+    act(() => result.current.fleetServerHostsInput.props.onChange(['http://test.fr']));
+
+    await act(() => result.current.submit());
+    expect(onSucess).toBeCalled();
+  });
+
+  it('should allow the user to correct and submit a invalid form', async () => {
+    const testRenderer = createFleetTestRendererMock();
+    const onSucess = jest.fn();
+    testRenderer.startServices.http.post.mockResolvedValue({});
+    const { result } = testRenderer.renderHook(() => useFleetServerHostsForm([], onSucess));
+
+    act(() =>
+      result.current.fleetServerHostsInput.props.onChange(['http://test.fr', 'http://test.fr'])
+    );
+
+    await act(() => result.current.submit());
+    expect(onSucess).not.toBeCalled();
+    expect(result.current.isDisabled).toBeTruthy();
+
+    act(() => result.current.fleetServerHostsInput.props.onChange(['http://test.fr']));
+    expect(result.current.isDisabled).toBeFalsy();
+
+    await act(() => result.current.submit());
+    expect(onSucess).toBeCalled();
+  });
+});

x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/use_fleet_server_host_form.tsx

@@ -142,7 +142,7 @@ export function useFleetServerHostsForm(
 
   const submit = useCallback(async () => {
     try {
-      if (!validate) {
+      if (!validate()) {
         return;
       }
       const { agentCount, agentPolicyCount } = await getAgentAndPolicyCount();
@@ -178,9 +178,12 @@ export function useFleetServerHostsForm(
     }
   }, [fleetServerHostsInput.value, validate, notifications, confirm, onSuccess]);
 
+  const isDisabled =
+    isLoading || !fleetServerHostsInput.hasChanged || fleetServerHostsInput.props.isInvalid;
+
   return {
     isLoading,
-    isDisabled: isLoading || !fleetServerHostsInput.hasChanged,
+    isDisabled,
     submit,
     fleetServerHostsInput,
   };

x-pack/plugins/fleet/public/hooks/use_input.ts

@@ -125,11 +125,22 @@ export function useComboInput(
 
   const isInvalid = errors !== undefined;
 
+  const validateCallback = useCallback(() => {
+    if (validate) {
+      const newErrors = validate(value);
+      setErrors(newErrors);
+
+      return newErrors === undefined;
+    }
+
+    return true;
+  }, [validate, value]);
+
   const onChange = useCallback(
     (newValues: string[]) => {
       setValue(newValues);
-      if (errors && validate && validate(newValues) === undefined) {
-        setErrors(undefined);
+      if (errors && validate) {
+        setErrors(validate(newValues));
       }
     },
     [validate, errors]
@@ -149,16 +160,7 @@ export function useComboInput(
       setValue([]);
     },
     setValue,
-    validate: () => {
-      if (validate) {
-        const newErrors = validate(value);
-        setErrors(newErrors);
-
-        return newErrors === undefined;
-      }
-
-      return true;
-    },
+    validate: validateCallback,
     hasChanged,
   };
 }