[Synthetics] Monitor add/edit - do not focus error via react hook form (#144756)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Shahzad <shahzad31comp@gmail.com>
Resolves https://github.com/elastic/kibana/issues/144363

x-pack/plugins/synthetics/e2e/journeys/synthetics/add_monitor.journey.ts

@@ -167,8 +167,17 @@ const createMonitorJourney = ({
         expect(isSuccessful).toBeTruthy();
       });
 
-      step(`create ${monitorName}`, async () => {
+      step('handles validation', async () => {
         await syntheticsApp.navigateToAddMonitor();
+        await syntheticsApp.ensureIsOnMonitorConfigPage();
+        await syntheticsApp.clickByTestSubj('syntheticsMonitorConfigSubmitButton');
+        await page.waitForSelector('text=Monitor name is required');
+        await page.waitForSelector('text=Monitor script is required');
+        const success = page.locator('text=Monitor added successfully.');
+        expect(await success.count()).toBe(0);
+      });
+
+      step(`create ${monitorName}`, async () => {
         await syntheticsApp.createMonitor({ monitorConfig, monitorType });
         const isSuccessful = await syntheticsApp.confirmAndSave();
         expect(isSuccessful).toBeTruthy();
@@ -190,6 +199,15 @@ const createMonitorJourney = ({
         expect(hasFailure).toBeFalsy();
       });
 
+      step('cannot save monitor with the same name', async () => {
+        await syntheticsApp.navigateToAddMonitor();
+        await syntheticsApp.createMonitor({ monitorConfig, monitorType });
+        await page.waitForSelector('text=Monitor name already exists');
+        await syntheticsApp.clickByTestSubj('syntheticsMonitorConfigSubmitButton');
+        const success = page.locator('text=Monitor added successfully.');
+        expect(await success.count()).toBe(0);
+      });
+
       step('delete monitor', async () => {
         await syntheticsApp.navigateToMonitorManagement();
         await syntheticsApp.findByText('Monitor name');

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

@@ -6,8 +6,7 @@
  */
 
 export * from './getting_started.journey';
-// TODO: Fix this test
-// export * from './add_monitor.journey';
+export * from './add_monitor.journey';
 export * from './monitor_selector.journey';
 export * from './overview_sorting.journey';
 // TODO: Fix this test

x-pack/plugins/synthetics/e2e/page_objects/synthetics_app.tsx

@@ -86,6 +86,7 @@ export function syntheticsAppPageProvider({ page, kibanaUrl }: { page: Page; kib
     },
 
     async navigateToEditMonitor() {
+      await page.waitForSelector('text=Showing');
       await this.clickByTestSubj('syntheticsMonitorListActions');
       await page.click('text=Edit', { timeout: 2 * 60 * 1000, delay: 800 });
       await this.findByText('Edit monitor');

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/form/controlled_field.tsx

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { EuiFormRow, EuiFormRowProps } from '@elastic/eui';
 import { useSelector } from 'react-redux';
 import {
@@ -44,7 +44,7 @@ export const ControlledField = ({
   dependenciesValues,
   dependenciesFieldMeta,
 }: Props) => {
-  const { setValue, reset, formState } = useFormContext();
+  const { setValue, reset, formState, setError, clearErrors } = useFormContext();
   const noop = () => {};
   let hook: Function = noop;
   let hookProps;
@@ -71,7 +71,21 @@ export const ControlledField = ({
       })
     : {};
   const isInvalid = hookResult || Boolean(fieldState.error);
+  const hookErrorContent = hookProps?.error;
   const hookError = hookResult ? hookProps?.error : undefined;
+
+  useEffect(() => {
+    if (!customHook) {
+      return;
+    }
+
+    if (hookResult && !fieldState.error) {
+      setError(fieldKey, { type: 'custom', message: hookErrorContent as string });
+    } else if (!hookResult && fieldState.error?.message === hookErrorContent) {
+      clearErrors(fieldKey);
+    }
+  }, [setError, fieldKey, clearErrors, fieldState, customHook, hookResult, hookErrorContent]);
+
   return (
     <EuiFormRow
       {...formRowProps}

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/form/index.tsx

@@ -25,7 +25,7 @@ export const MonitorForm: React.FC<{ defaultValues?: SyntheticsMonitor; space?:
     defaultValues:
       formatDefaultFormValues(defaultValues as SyntheticsMonitor) ||
       getDefaultFormFields(space)[FormMonitorType.MULTISTEP],
-    shouldFocusError: true,
+    shouldFocusError: false,
   });
 
   /* React hook form doesn't seem to register a field

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/form/submit.tsx

@@ -23,7 +23,10 @@ export const ActionBar = () => {
   const history = useHistory();
   const editRouteMatch = useRouteMatch({ path: MONITOR_EDIT_ROUTE });
   const isEdit = editRouteMatch?.isExact;
-  const { handleSubmit } = useFormContext();
+  const {
+    handleSubmit,
+    formState: { errors },
+  } = useFormContext();
 
   const [monitorData, setMonitorData] = useState<SyntheticsMonitor | undefined>(undefined);
 
@@ -60,7 +63,9 @@ export const ActionBar = () => {
   }, [data, status, monitorId, loading]);
 
   const formSubmitter = (formData: Record<string, any>) => {
-    setMonitorData(format(formData) as SyntheticsMonitor);
+    if (!Object.keys(errors).length) {
+      setMonitorData(format(formData) as SyntheticsMonitor);
+    }
   };
 
   return status === FETCH_STATUS.SUCCESS ? (