Added message variables button for Webhook body form field (#60174)

* Added message variables button for Webhook body form field * Fixed test issue
elastic · Mar 17, 2020 · 4ebdc4e · 4ebdc4e
1 parent 4a8fd0a
commit 4ebdc4e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/...s/triggers_actions_ui/public/application/components/builtin_action_types/webhook.test.tsx b/...s/triggers_actions_ui/public/application/components/builtin_action_types/webhook.test.tsx
@@ -160,6 +160,7 @@ describe('WebhookParamsFields renders', () => {
         .first()
         .prop('value')
     ).toStrictEqual('test message');
+    expect(wrapper.find('[data-test-subj="webhookAddVariableButton"]').length > 0).toBeTruthy();
   });
 
   test('params validation fails when body is not valid', () => {

diff --git a/...lugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx b/...lugins/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"