[Synthetics] HTTP monitors - adjust request body field to remove hard…

…coded readonly value (#153702)

## Summary
Resolves #153698

Prevents hardcoded read-only value for the request body field when
configuring HTTP monitors.

[Create-Monitor-Synthetics---Kibana
(2).webm](https://user-images.githubusercontent.com/11356435/227623928-645c3369-8222-4247-b47d-feaf361056a9.webm)

### Testing

1. Click edit monitor
2. Attempt to create an HTTP monitor and add the request body field.
Ensure each request body type (json, xml, text, form) can be edited
3. Save the monitor
4. Navigate to edit monitor
5. Ensure that the request body fields can still be interacted with

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

@@ -8,6 +8,7 @@
 import 'jest-canvas-mock';
 
 import React, { useState, useCallback } from 'react';
+import userEvent from '@testing-library/user-event';
 import { fireEvent, waitFor } from '@testing-library/react';
 import { render } from '../../../utils/testing/rtl_helpers';
 import { RequestBodyField } from './request_body_field';
@@ -29,6 +30,7 @@ jest.mock('@kbn/kibana-react-plugin/public', () => {
         onChange={(e: any) => {
           props.onChange(e.jsonContent);
         }}
+        readOnly={props.readOnly}
       />
     ),
   };
@@ -37,7 +39,7 @@ jest.mock('@kbn/kibana-react-plugin/public', () => {
 describe('<RequestBodyField />', () => {
   const defaultMode = Mode.PLAINTEXT;
   const defaultValue = 'sample value';
-  const WrappedComponent = () => {
+  const WrappedComponent = ({ readOnly }: { readOnly?: boolean }) => {
     const [config, setConfig] = useState({
       type: defaultMode,
       value: defaultValue,
@@ -53,6 +55,7 @@ describe('<RequestBodyField />', () => {
           (code) => setConfig({ type: code.type as Mode, value: code.value }),
           [setConfig]
         )}
+        readOnly={readOnly}
       />
     );
   };
@@ -85,4 +88,79 @@ describe('<RequestBodyField />', () => {
       expect(queryByLabelText('Text code editor')).not.toBeInTheDocument();
     });
   });
+
+  it('handles updating input', async () => {
+    const { getByText, getByRole, getAllByRole, getByLabelText } = render(<WrappedComponent />);
+
+    expect(getByLabelText('Text code editor')).toBeInTheDocument();
+    const textbox = getByRole('textbox');
+    userEvent.type(textbox, 'text');
+    expect(textbox).toHaveValue('text');
+
+    const xmlButton = getByText('XML').closest('button');
+    if (xmlButton) {
+      fireEvent.click(xmlButton);
+    }
+
+    expect(xmlButton).toHaveAttribute('aria-selected', 'true');
+    userEvent.type(textbox, 'xml');
+    expect(textbox).toHaveValue('textxml');
+
+    const jsonButton = getByText('JSON').closest('button');
+    if (jsonButton) {
+      fireEvent.click(jsonButton);
+    }
+
+    expect(jsonButton).toHaveAttribute('aria-selected', 'true');
+    userEvent.type(textbox, 'json');
+    expect(textbox).toHaveValue('textxmljson');
+
+    const formButton = getByText('Form').closest('button');
+    if (formButton) {
+      fireEvent.click(formButton);
+    }
+
+    expect(formButton).toHaveAttribute('aria-selected', 'true');
+    userEvent.click(getByText('Add form field'));
+    expect(getByText('Key')).toBeInTheDocument();
+    expect(getByText('Value')).toBeInTheDocument();
+    const keyValueTextBox = getAllByRole('textbox')[0];
+    userEvent.type(keyValueTextBox, 'formfield');
+    expect(keyValueTextBox).toHaveValue('formfield');
+  });
+
+  it('handles read only', async () => {
+    const { getByText, getByRole, getByLabelText } = render(<WrappedComponent readOnly={true} />);
+
+    expect(getByLabelText('Text code editor')).toBeInTheDocument();
+    const textbox = getByRole('textbox');
+    userEvent.type(textbox, 'text');
+    expect(textbox).toHaveValue('');
+
+    const xmlButton = getByText('XML').closest('button');
+    if (xmlButton) {
+      fireEvent.click(xmlButton);
+    }
+
+    expect(xmlButton).toHaveAttribute('aria-selected', 'true');
+    userEvent.type(textbox, 'xml');
+    expect(textbox).toHaveValue('');
+
+    const jsonButton = getByText('JSON').closest('button');
+    if (jsonButton) {
+      fireEvent.click(jsonButton);
+    }
+
+    expect(jsonButton).toHaveAttribute('aria-selected', 'true');
+    userEvent.type(textbox, 'json');
+    expect(textbox).toHaveValue('');
+
+    const formButton = getByText('Form').closest('button');
+    if (formButton) {
+      fireEvent.click(formButton);
+    }
+
+    expect(formButton).toHaveAttribute('aria-selected', 'true');
+    expect(getByRole('button', { name: 'Add form field' })).toBeDisabled();
+  });
 });

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

@@ -107,7 +107,7 @@ export const RequestBodyField = ({
             onBlur?.();
           }}
           value={values[ResponseBodyType.CODE]}
-          readOnly
+          readOnly={readOnly}
         />
       ),
     },
@@ -130,7 +130,7 @@ export const RequestBodyField = ({
             onBlur?.();
           }}
           value={values[ResponseBodyType.CODE]}
-          readOnly
+          readOnly={readOnly}
         />
       ),
     },
@@ -153,7 +153,7 @@ export const RequestBodyField = ({
             onBlur?.();
           }}
           value={values[ResponseBodyType.CODE]}
-          readOnly
+          readOnly={readOnly}
         />
       ),
     },
@@ -169,10 +169,11 @@ export const RequestBodyField = ({
               defaultMessage="Add form field"
             />
           }
+          data-test-subj={'syntheticsFormField'}
           defaultPairs={defaultFormPairs}
           onChange={onChangeFormFields}
           onBlur={() => onBlur?.()}
-          readOnly
+          readOnly={readOnly}
         />
       ),
     },