[Synthetics] adjust private locations form (#137526) (#137610)

* adjust locations form

* fix tests

(cherry picked from commit bbe4a89e75)

Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>

x-pack/plugins/synthetics/e2e/journeys/index.ts

@@ -16,4 +16,4 @@ export * from './monitor_management.journey';
 export * from './monitor_management_enablement.journey';
 export * from './monitor_details';
 export * from './locations';
-// export * from './private_locations';
+export * from './private_locations';

x-pack/plugins/synthetics/e2e/journeys/private_locations/manage_locations.ts

@@ -33,7 +33,7 @@ journey('ManagePrivateLocation', async ({ page, params: { kibanaUrl } }) => {
     await page.click('button:has-text("Private locations")');
   });
 
-  step('Click text=Add two agent policies', async () => {
+  step('Add two agent policies', async () => {
     await page.click('text=Create agent policy');
 
     await addAgentPolicy('Fleet test policy');

x-pack/plugins/synthetics/public/hooks/use_form_wrapped.tsx

@@ -11,7 +11,7 @@ import { FieldValues, useForm, UseFormProps } from 'react-hook-form';
 export function useFormWrapped<TFieldValues extends FieldValues = FieldValues, TContext = any>(
   props?: UseFormProps<TFieldValues, TContext>
 ) {
-  const { register, ...restOfForm } = useForm(props);
+  const { register, ...restOfForm } = useForm<TFieldValues>(props);
 
   const euiRegister = useCallback(
     (name, ...registerArgs) => {
@@ -19,6 +19,7 @@ export function useFormWrapped<TFieldValues extends FieldValues = FieldValues, T
 
       return {
         inputRef: ref,
+        ref,
         ...restOfRegister,
       };
     },

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/add_location_flyout.tsx

@@ -5,7 +5,8 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
+import { FormProvider } from 'react-hook-form';
 import {
   EuiButtonEmpty,
   EuiCallOut,
@@ -27,6 +28,7 @@ import {
 } from './manage_locations_flyout';
 import { usePrivateLocationPermissions } from '../hooks/use_private_location_permission';
 import { LocationForm } from './location_form';
+import { useFormWrapped } from '../../../../hooks/use_form_wrapped';
 
 export const AddLocationFlyout = ({
   onSubmit,
@@ -37,7 +39,23 @@ export const AddLocationFlyout = ({
   setIsOpen: (val: boolean) => void;
   privateLocations: PrivateLocation[];
 }) => {
-  const [formData, setFormData] = useState<Partial<PrivateLocation>>();
+  const form = useFormWrapped({
+    mode: 'onSubmit',
+    reValidateMode: 'onChange',
+    shouldFocusError: true,
+    defaultValues: {
+      label: '',
+      agentPolicyId: '',
+      id: '',
+      geo: {
+        lat: 0,
+        lon: 0,
+      },
+      concurrentMonitors: 1,
+    },
+  });
+
+  const { handleSubmit } = form;
 
   const { canReadAgentPolicies } = usePrivateLocationPermissions();
 
@@ -46,45 +64,39 @@ export const AddLocationFlyout = ({
   };
 
   return (
-    <EuiFlyout onClose={closeFlyout} style={{ width: 540 }}>
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
-          <h2>{ADD_PRIVATE_LOCATION}</h2>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-        {!canReadAgentPolicies && (
-          <EuiCallOut title={NEED_PERMISSIONS} color="warning" iconType="help">
-            <p>{NEED_FLEET_READ_AGENT_POLICIES_PERMISSION}</p>
-          </EuiCallOut>
-        )}
+    <FormProvider {...form}>
+      <EuiFlyout onClose={closeFlyout} style={{ width: 540 }}>
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2>{ADD_PRIVATE_LOCATION}</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          {!canReadAgentPolicies && (
+            <EuiCallOut title={NEED_PERMISSIONS} color="warning" iconType="help">
+              <p>{NEED_FLEET_READ_AGENT_POLICIES_PERMISSION}</p>
+            </EuiCallOut>
+          )}
 
-        <EuiSpacer />
-        <LocationForm privateLocations={privateLocations} setFormData={setFormData} />
-      </EuiFlyoutBody>
-      <EuiFlyoutFooter>
-        <EuiFlexGroup justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
-              {CANCEL_LABEL}
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              fill
-              onClick={() => {
-                if (formData) {
-                  onSubmit(formData as PrivateLocation);
-                  closeFlyout();
-                }
-              }}
-            >
-              {SAVE_LABEL}
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlyoutFooter>
-    </EuiFlyout>
+          <EuiSpacer />
+          <LocationForm privateLocations={privateLocations} />
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
+                {CANCEL_LABEL}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton fill onClick={handleSubmit(onSubmit)}>
+                {SAVE_LABEL}
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    </FormProvider>
   );
 };
 
@@ -100,5 +112,5 @@ const CANCEL_LABEL = i18n.translate('xpack.synthetics.monitorManagement.cancelLa
 });
 
 const SAVE_LABEL = i18n.translate('xpack.synthetics.monitorManagement.saveLabel', {
-  defaultMessage: 'save',
+  defaultMessage: 'Save',
 });

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/location_form.tsx

@@ -4,55 +4,25 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useEffect } from 'react';
+import React from 'react';
 import { EuiFieldText, EuiForm, EuiFormRow, EuiSpacer } from '@elastic/eui';
 import { useSelector } from 'react-redux';
 import { i18n } from '@kbn/i18n';
+import { useFormContext, useFormState } from 'react-hook-form';
 import { AgentPolicyNeeded } from './agent_policy_needed';
-import { useFormWrapped } from '../../../../hooks/use_form_wrapped';
 import { PrivateLocation } from '../../../../../common/runtime_types';
 import { PolicyHostsField } from './policy_hosts';
 import { selectAgentPolicies } from '../../../state/private_locations';
 
 export const LocationForm = ({
-  setFormData,
   privateLocations,
 }: {
-  setFormData: (val: Partial<PrivateLocation>) => void;
   onDiscard?: () => void;
   privateLocations: PrivateLocation[];
 }) => {
   const { data } = useSelector(selectAgentPolicies);
-
-  const {
-    getValues,
-    control,
-    register,
-    formState: { errors },
-  } = useFormWrapped<PrivateLocation>({
-    mode: 'onTouched',
-    reValidateMode: 'onChange',
-    shouldFocusError: true,
-    defaultValues: {
-      label: '',
-      agentPolicyId: '',
-      id: '',
-      geo: {
-        lat: 0,
-        lon: 0,
-      },
-      concurrentMonitors: 1,
-    },
-  });
-
-  const label = getValues('label');
-  const agentPolicyId = getValues('agentPolicyId');
-
-  useEffect(() => {
-    if (label && agentPolicyId) {
-      setFormData({ label, agentPolicyId });
-    }
-  }, [label, agentPolicyId, setFormData]);
+  const { control, register } = useFormContext<PrivateLocation>();
+  const { errors } = useFormState();
 
   return (
     <>
@@ -67,7 +37,7 @@ export const LocationForm = ({
           <EuiFieldText
             fullWidth
             aria-label={LOCATION_NAME_LABEL}
-            {...register('name', {
+            {...register('label', {
               required: {
                 value: true,
                 message: NAME_REQUIRED,

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/locations_table.tsx

@@ -29,7 +29,7 @@ export const PrivateLocationsTable = ({
 
   const columns = [
     {
-      field: 'name',
+      field: 'label',
       name: LOCATION_NAME_LABEL,
     },
     {

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/manage_locations_flyout.tsx

@@ -35,6 +35,7 @@ import {
   setAddingNewPrivateLocation,
   setManageFlyoutOpen,
 } from '../../../state/private_locations';
+import { PrivateLocation } from '../../../../../common/runtime_types';
 
 export const ManageLocationsFlyout = () => {
   const dispatch = useDispatch();
@@ -69,6 +70,11 @@ export const ManageLocationsFlyout = () => {
     dispatch(getServiceLocations());
   };
 
+  const handleSubmit = (formData: PrivateLocation) => {
+    onSubmit(formData);
+    setIsAddingNew(false);
+  };
+
   const flyout = (
     <EuiFlyout onClose={closeFlyout} size="m" style={{ width: 540 }}>
       <EuiFlyoutHeader hasBorder>
@@ -127,7 +133,7 @@ export const ManageLocationsFlyout = () => {
       {isAddingNew ? (
         <AddLocationFlyout
           setIsOpen={setIsAddingNew}
-          onSubmit={onSubmit}
+          onSubmit={handleSubmit}
           privateLocations={privateLocations}
         />
       ) : null}