[Synthetics UI] Add playwright options to synthetics ui monitor form (#140044)

* Add playwright options to synthetics ui monitor form

* Docs link to synthetics command reference

* Update packages/kbn-doc-links/src/get_doc_links.ts

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

packages/kbn-doc-links/src/get_doc_links.ts

@@ -447,6 +447,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
       monitorUptimeSynthetics: `${ELASTIC_WEBSITE_URL}guide/en/observability/${DOC_LINK_VERSION}/monitor-uptime-synthetics.html`,
       userExperience: `${ELASTIC_WEBSITE_URL}guide/en/observability/${DOC_LINK_VERSION}/user-experience.html`,
       createAlerts: `${ELASTIC_WEBSITE_URL}guide/en/observability/${DOC_LINK_VERSION}/create-alerts.html`,
+      syntheticsCommandReference: `${ELASTIC_WEBSITE_URL}guide/en/observability/${DOC_LINK_VERSION}/synthetics-configuration.html#synthetics-configuration-playwright-options`,
     },
     alerting: {
       guide: `${KIBANA_DOCS}create-and-manage-rules.html`,

packages/kbn-doc-links/src/types.ts

@@ -331,6 +331,7 @@ export interface DocLinks {
     monitorUptimeSynthetics: string;
     userExperience: string;
     createAlerts: string;
+    syntheticsCommandReference: string;
   }>;
   readonly alerting: Record<string, string>;
   readonly maps: Readonly<{

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/code_editor.tsx

@@ -58,3 +58,7 @@ const MonacoCodeContainer = euiStyled.div`
     z-index: 0;
   }
 `;
+
+export const JSONEditor = (props: any) => {
+  return <CodeEditor languageId={MonacoEditorLangId.JSON} {...props} />;
+};

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

@@ -29,6 +29,7 @@ import {
   EuiLink,
   EuiTextArea,
 } from '@elastic/eui';
+import { getDocLinks } from '../../../../../kibana_services';
 import { useMonitorName } from '../hooks/use_monitor_name';
 import { MonitorTypeRadioGroup } from '../fields/monitor_type_radio_group';
 import {
@@ -53,6 +54,7 @@ import { ComboBox } from '../fields/combo_box';
 import { SourceField } from '../fields/source_field';
 import { getDefaultFormFields } from './defaults';
 import { validate, validateHeaders, WHOLE_NUMBERS_ONLY, FLOATS_ONLY } from './validation';
+import { JSONEditor } from '../fields/code_editor';
 
 const getScheduleContent = (value: number) => {
   if (value > 60) {
@@ -1006,4 +1008,56 @@ export const FIELD: Record<string, FieldMeta> = {
       required: true,
     }),
   },
+  [ConfigKey.PLAYWRIGHT_OPTIONS]: {
+    fieldKey: ConfigKey.PLAYWRIGHT_OPTIONS,
+    component: JSONEditor,
+    label: i18n.translate('xpack.synthetics.monitorConfig.playwrightOptions.label', {
+      defaultMessage: 'Playwright options',
+    }),
+    helpText: (
+      <span>
+        {i18n.translate('xpack.synthetics.monitorConfig.playwrightOptions.helpText', {
+          defaultMessage: 'Configure Playwright agent with custom options. ',
+        })}
+        <EuiLink
+          href={getDocLinks()?.links?.observability?.syntheticsCommandReference}
+          target="_blank"
+        >
+          {i18n.translate('xpack.synthetics.monitorConfig.playwrightOptions.learnMore', {
+            defaultMessage: 'Learn more',
+          })}
+        </EuiLink>
+      </span>
+    ),
+    error: i18n.translate('xpack.synthetics.monitorConfig.playwrightOptions.error', {
+      defaultMessage: 'Invalid JSON format',
+    }),
+    ariaLabel: i18n.translate(
+      'xpack.synthetics.monitorConfig.playwrightOptions.codeEditor.json.ariaLabel',
+      {
+        defaultMessage: 'Playwright options JSON code editor',
+      }
+    ),
+    controlled: true,
+    required: false,
+    props: ({
+      field,
+      setValue,
+    }: {
+      field?: ControllerRenderProps;
+      setValue: UseFormReturn['setValue'];
+    }) => ({
+      onChange: (json: string) => setValue(ConfigKey.PLAYWRIGHT_OPTIONS, json),
+    }),
+    validation: () => ({
+      validate: (value) => {
+        const validateFn = validate[DataStream.BROWSER][ConfigKey.PLAYWRIGHT_OPTIONS];
+        if (validateFn) {
+          return !validateFn({
+            [ConfigKey.PLAYWRIGHT_OPTIONS]: value,
+          });
+        }
+      },
+    }),
+  },
 };

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

@@ -103,6 +103,21 @@ export const TCP_ADVANCED = {
   },
 };
 
+export const BROWSER_ADVANCED = [
+  {
+    title: i18n.translate('xpack.synthetics.monitorConfig.section.syntAgentOptions.title', {
+      defaultMessage: 'Synthetics agent options',
+    }),
+    description: i18n.translate(
+      'xpack.synthetics.monitorConfig.section.syntAgentOptions.description',
+      {
+        defaultMessage: 'Provide fine-tuned configuration for the synthetics agent.',
+      }
+    ),
+    components: [FIELD[`${ConfigKey.PLAYWRIGHT_OPTIONS}`]],
+  },
+];
+
 interface AdvancedFieldGroup {
   title: string;
   description: string;
@@ -197,6 +212,7 @@ export const FORM_CONFIG: FieldConfig = {
           FIELD[ConfigKey.NAMESPACE],
         ],
       },
+      ...BROWSER_ADVANCED,
     ],
   },
   [FormMonitorType.SINGLE]: {
@@ -220,6 +236,7 @@ export const FORM_CONFIG: FieldConfig = {
           FIELD[ConfigKey.NAMESPACE],
         ],
       },
+      ...BROWSER_ADVANCED,
     ],
   },
   [FormMonitorType.ICMP]: {

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

@@ -57,6 +57,21 @@ export const validateTimeout = ({
   return parseFloat(timeout) > schedule;
 };
 
+export const validJSONFormat = (value: string) => {
+  let obj;
+
+  try {
+    obj = JSON.parse(value);
+    if (!obj || typeof obj !== 'object') {
+      return false;
+    }
+  } catch (e) {
+    return false;
+  }
+
+  return true;
+};
+
 // validation functions return true when invalid
 const validateCommon: ValidationLibrary = {
   [ConfigKey.SCHEDULE]: ({ [ConfigKey.SCHEDULE]: value }) => {
@@ -145,6 +160,8 @@ const validateBrowser: ValidationLibrary = {
   [ConfigKey.UPLOAD_SPEED]: ({ [ConfigKey.UPLOAD_SPEED]: uploadSpeed }) =>
     validateThrottleValue(uploadSpeed),
   [ConfigKey.LATENCY]: ({ [ConfigKey.LATENCY]: latency }) => validateThrottleValue(latency, true),
+  [ConfigKey.PLAYWRIGHT_OPTIONS]: ({ [ConfigKey.PLAYWRIGHT_OPTIONS]: playwrightOptions }) =>
+    playwrightOptions ? !validJSONFormat(playwrightOptions) : false,
 };
 
 export type ValidateDictionary = Record<DataStream, Validation>;

x-pack/plugins/synthetics/public/kibana_services.ts

@@ -0,0 +1,15 @@
+/*
+ * 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 type { CoreStart } from '@kbn/core/public';
+
+let coreStart: CoreStart;
+export function setStartServices(core: CoreStart) {
+  coreStart = core;
+}
+
+export const getDocLinks = () => coreStart.docLinks;

x-pack/plugins/synthetics/public/plugin.ts

@@ -55,6 +55,7 @@ import {
 } from './legacy_uptime/lib/alert_types';
 import { monitorDetailNavigatorParams } from './apps/locators/monitor_detail';
 import { editMonitorNavigatorParams } from './apps/locators/edit_monitor';
+import { setStartServices } from './kibana_services';
 
 export interface ClientPluginsSetup {
   home?: HomePublicPluginSetup;
@@ -228,6 +229,7 @@ export class UptimePlugin
   public start(start: CoreStart, plugins: ClientPluginsStart): void {
     if (plugins.fleet) {
       const { registerExtension } = plugins.fleet;
+      setStartServices(start);
 
       registerExtension({
         package: 'synthetics',