Added message variables button for Webhook body form field

Author: YulNaumenko

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.test.tsx

@@ -130,6 +130,7 @@ describe('WebhookActionConnectorFields renders', () => {
     expect(wrapper.find('[data-test-subj="webhookUrlText"]').length > 0).toBeTruthy();
     expect(wrapper.find('[data-test-subj="webhookUserInput"]').length > 0).toBeTruthy();
     expect(wrapper.find('[data-test-subj="webhookPasswordInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="webhookAddVariableButton"]').length > 0).toBeTruthy();
   });
 });
 

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx

@@ -22,6 +22,9 @@ import {
   EuiCodeEditor,
   EuiSwitch,
   EuiButtonEmpty,
+  EuiContextMenuItem,
+  EuiPopover,
+  EuiContextMenuPanel,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
@@ -454,10 +457,24 @@ const WebhookParamsFields: React.FunctionComponent<ActionParamsProps<WebhookActi
   actionParams,
   editAction,
   index,
+  messageVariables,
   errors,
 }) => {
   const { body } = actionParams;
-
+  const [isVariablesPopoverOpen, setIsVariablesPopoverOpen] = useState<boolean>(false);
+  const messageVariablesItems = messageVariables?.map((variable: string, i: number) => (
+    <EuiContextMenuItem
+      key={variable}
+      data-test-subj={`variableMenuButton-${i}`}
+      icon="empty"
+      onClick={() => {
+        editAction('body', (body ?? '').concat(` {{${variable}}}`), index);
+        setIsVariablesPopoverOpen(false);
+      }}
+    >
+      {`{{${variable}}}`}
+    </EuiContextMenuItem>
+  ));
   return (
     <Fragment>
       <EuiFormRow
@@ -471,6 +488,30 @@ const WebhookParamsFields: React.FunctionComponent<ActionParamsProps<WebhookActi
         isInvalid={errors.body.length > 0 && body !== undefined}
         fullWidth
         error={errors.body}
+        labelAppend={
+          // TODO: replace this button with a proper Eui component, when it will be ready
+          <EuiPopover
+            button={
+              <EuiButtonIcon
+                data-test-subj="webhookAddVariableButton"
+                onClick={() => setIsVariablesPopoverOpen(true)}
+                iconType="indexOpen"
+                aria-label={i18n.translate(
+                  'xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.addVariablePopoverButton',
+                  {
+                    defaultMessage: 'Add variable',
+                  }
+                )}
+              />
+            }
+            isOpen={isVariablesPopoverOpen}
+            closePopover={() => setIsVariablesPopoverOpen(false)}
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+            <EuiContextMenuPanel items={messageVariablesItems} />
+          </EuiPopover>
+        }
       >
         <EuiCodeEditor
           mode="json"