[Synthetics UI] Add missing configuration options to the add/edit monitor forms

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

@@ -25,9 +25,18 @@ interface Props {
   onChange: (value: string) => void;
   value: string;
   placeholder?: string;
+  height?: string;
 }
 
-export const CodeEditor = ({ ariaLabel, id, languageId, onChange, value, placeholder }: Props) => {
+export const CodeEditor = ({
+  ariaLabel,
+  id,
+  languageId,
+  onChange,
+  value,
+  placeholder,
+  height = '250px',
+}: Props) => {
   return (
     <CodeEditorContainer borderRadius="none" hasShadow={false} hasBorder={true}>
       <MonacoCodeContainer
@@ -38,7 +47,7 @@ export const CodeEditor = ({ ariaLabel, id, languageId, onChange, value, placeho
         <MonacoCodeEditor
           languageId={languageId}
           width="100%"
-          height="250px"
+          height={height}
           value={value}
           onChange={onChange}
           options={{

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

@@ -814,6 +814,42 @@ export const FIELD: Record<string, FieldMeta> = {
       defaultMessage: 'Monitor script is required',
     }),
   },
+  [ConfigKey.PARAMS]: {
+    fieldKey: ConfigKey.PARAMS,
+    label: i18n.translate('xpack.synthetics.monitorConfig.params.label', {
+      defaultMessage: 'Parameters',
+    }),
+    component: JSONEditor,
+    props: ({ setValue }) => ({
+      id: 'syntheticsMonitorConfigParams',
+      height: '100px',
+      onChange: (json: string) => {
+        setValue(ConfigKey.PARAMS, json);
+      },
+    }),
+    error: i18n.translate('xpack.synthetics.monitorConfig.params.error', {
+      defaultMessage: 'Invalid JSON format',
+    }),
+    helpText: (
+      <FormattedMessage
+        id="xpack.synthetics.monitorConfig.params.helpText"
+        defaultMessage="Use JSON to define parameters that can be referenced in your script with {paramsValue}"
+        values={{
+          paramsValue: <EuiCode>params.value</EuiCode>,
+        }}
+      />
+    ),
+    validation: () => ({
+      validate: (value) => {
+        const validateFn = validate[DataStream.BROWSER][ConfigKey.PARAMS];
+        if (validateFn) {
+          return !validateFn({
+            [ConfigKey.PARAMS]: value,
+          });
+        }
+      },
+    }),
+  },
   isTLSEnabled: {
     fieldKey: 'isTLSEnabled',
     component: EuiSwitch,
@@ -1058,4 +1094,48 @@ export const FIELD: Record<string, FieldMeta> = {
       },
     }),
   },
+  [ConfigKey.IGNORE_HTTPS_ERRORS]: {
+    fieldKey: ConfigKey.IGNORE_HTTPS_ERRORS,
+    component: EuiSwitch,
+    controlled: true,
+    helpText: (
+      <span>
+        {i18n.translate('xpack.synthetics.monitorConfig.ignoreHttpsErrors.helpText', {
+          defaultMessage:
+            'Turns off TLS/SSL validation in the synthetics browser. This is useful for testing sites that use self-signed certificates.',
+        })}
+      </span>
+    ),
+    props: ({ setValue }) => ({
+      id: 'syntheticsMontiorConfigIgnoreHttpsErrors',
+      label: i18n.translate('xpack.synthetics.monitorConfig.ignoreHttpsErrors.label', {
+        defaultMessage: 'Ignore HTTPS errors',
+      }),
+      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(ConfigKey.IGNORE_HTTPS_ERRORS, !!event.target.checked);
+      },
+    }),
+  },
+  [ConfigKey.SYNTHETICS_ARGS]: {
+    fieldKey: ConfigKey.SYNTHETICS_ARGS,
+    component: EuiFieldText,
+    controlled: true,
+    label: i18n.translate('xpack.synthetics.monitorConfig.syntheticsArgs.label', {
+      defaultMessage: 'Synthetics args',
+    }),
+    helpText: (
+      <span>
+        {i18n.translate('xpack.synthetics.monitorConfig.syntheticsArgs.helpText', {
+          defaultMessage:
+            'Extra arguments to pass to the synthetics agent package. Takes a list of strings. This is useful in rare scenarios, and should not ordinarily need to be set.',
+        })}
+      </span>
+    ),
+    props: ({ setValue }) => ({
+      id: 'syntheticsMontiorConfigSyntheticsArgs',
+      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(ConfigKey.SYNTHETICS_ARGS, event.target.value);
+      },
+    }),
+  },
 };

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

@@ -114,7 +114,11 @@ export const BROWSER_ADVANCED = [
         defaultMessage: 'Provide fine-tuned configuration for the synthetics agent.',
       }
     ),
-    components: [FIELD[`${ConfigKey.PLAYWRIGHT_OPTIONS}`]],
+    components: [
+      FIELD[ConfigKey.IGNORE_HTTPS_ERRORS],
+      FIELD[ConfigKey.SYNTHETICS_ARGS],
+      FIELD[ConfigKey.PLAYWRIGHT_OPTIONS],
+    ],
   },
 ];
 
@@ -200,7 +204,7 @@ export const FORM_CONFIG: FieldConfig = {
       FIELD[ConfigKey.THROTTLING_CONFIG],
       FIELD[ConfigKey.ENABLED],
     ],
-    step3: [FIELD[ConfigKey.SOURCE_INLINE]],
+    step3: [FIELD[ConfigKey.SOURCE_INLINE], FIELD[ConfigKey.PARAMS]],
     scriptEdit: [FIELD[ConfigKey.SOURCE_INLINE]],
     advanced: [
       {

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

@@ -162,6 +162,8 @@ const validateBrowser: ValidationLibrary = {
   [ConfigKey.LATENCY]: ({ [ConfigKey.LATENCY]: latency }) => validateThrottleValue(latency, true),
   [ConfigKey.PLAYWRIGHT_OPTIONS]: ({ [ConfigKey.PLAYWRIGHT_OPTIONS]: playwrightOptions }) =>
     playwrightOptions ? !validJSONFormat(playwrightOptions) : false,
+  [ConfigKey.PARAMS]: ({ [ConfigKey.PARAMS]: params }) =>
+    params ? !validJSONFormat(params) : false,
 };
 
 export type ValidateDictionary = Record<DataStream, Validation>;