Exposed AddMessageVariables as separate component (#63007)

* Exposed AddMessageVariables as separate component and added styles to allow to handle bigger list of messageVariables * Fixed failing tests and styles * Fixed due to comments
2025-04-23 17:28:26 -04:00 · 2020-04-09 07:50:11 -07:00 · 2020-04-09 07:50:11 -07:00 · 80384c3209
commit 80384c3209
parent 90d2b18bc5
12 changed files with 211 additions and 387 deletions
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -15846,7 +15846,6 @@
    "xpack.triggersActionsUI.common.expressionItems.threshold.descriptionLabel": "タイミング",
    "xpack.triggersActionsUI.common.expressionItems.threshold.popoverTitle": "タイミング",
    "xpack.triggersActionsUI.components.builtinActionTypes.emailAction.actionTypeTitle": "メールに送信",
-    "xpack.triggersActionsUI.components.builtinActionTypes.emailAction.addVariablePopoverButton": "変数を追加",
    "xpack.triggersActionsUI.components.builtinActionTypes.emailAction.selectMessageText": "サーバーからメールを送信します。",
    "xpack.triggersActionsUI.components.builtinActionTypes.error.formatFromText": "送信元は有効なメールアドレスではありません。",
    "xpack.triggersActionsUI.components.builtinActionTypes.error.requiredEntryText": "To、Cc、または Bcc のエントリーがありません。 1 つ以上のエントリーが必要です。",
@ -15875,14 +15874,6 @@
    "xpack.triggersActionsUI.components.builtinActionTypes.indexAction.refreshTooltip": "このチェックボックスは更新インデックス値を設定します。",
    "xpack.triggersActionsUI.components.builtinActionTypes.indexAction.selectMessageText": "データを Elasticsearch にインデックスしてください。",
    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.actionTypeTitle": "PagerDuty に送信",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton1": "変数を追加",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton2": "変数を追加",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton3": "変数を追加",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton4": "変数を追加",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton5": "変数を追加",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton6": "変数を追加",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton7": "変数を追加",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariableTitle": "アラート変数を追加",
    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.apiUrlTextFieldLabel": "API URL",
    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.classFieldLabel": "クラス (任意)",
    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.componentTextFieldLabel": "コンポーネント（任意）",
@ -15906,14 +15897,10 @@
    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.summaryFieldLabel": "まとめ",
    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.timestampTextFieldLabel": "タイムスタンプ (任意)",
    "xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.actionTypeTitle": "サーバーログに送信",
-    "xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.addVariablePopoverButton": "変数を追加",
-    "xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.addVariableTitle": "変数を追加",
    "xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.logLevelFieldLabel": "レベル",
    "xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.logMessageFieldLabel": "メッセージ",
    "xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.selectMessageText": "Kibana ログにメッセージを追加します。",
    "xpack.triggersActionsUI.components.builtinActionTypes.slackAction.actionTypeTitle": "Slack に送信",
-    "xpack.triggersActionsUI.components.builtinActionTypes.slackAction.addVariablePopoverButton": "アラート変数を追加",
-    "xpack.triggersActionsUI.components.builtinActionTypes.slackAction.addVariableTitle": "アラート変数を追加",
    "xpack.triggersActionsUI.components.builtinActionTypes.slackAction.error.requiredWebhookUrlText": "Web フック URL が必要です。",
    "xpack.triggersActionsUI.components.builtinActionTypes.slackAction.messageTextAreaFieldLabel": "メッセージ",
    "xpack.triggersActionsUI.components.builtinActionTypes.slackAction.selectMessageText": "Slack チャネルにメッセージを送信します。",
@ -15922,8 +15909,6 @@
    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.actionTypeTitle": "Web フックデータ",
    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.addHeader": "ヘッダーを追加",
    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.addHeaderButton": "追加",
-    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.addVariablePopoverButton": "変数を追加",
-    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.addVariableTitle": "変数を追加",
    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.bodyCodeEditorAriaLabel": "コードエディター",
    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.bodyFieldLabel": "本文",
    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.deleteHeaderButton": "削除",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -15850,7 +15850,6 @@
    "xpack.triggersActionsUI.common.expressionItems.threshold.descriptionLabel": "当",
    "xpack.triggersActionsUI.common.expressionItems.threshold.popoverTitle": "当",
    "xpack.triggersActionsUI.components.builtinActionTypes.emailAction.actionTypeTitle": "发送到电子邮件",
-    "xpack.triggersActionsUI.components.builtinActionTypes.emailAction.addVariablePopoverButton": "添加变量",
    "xpack.triggersActionsUI.components.builtinActionTypes.emailAction.selectMessageText": "从您的服务器发送电子邮件。",
    "xpack.triggersActionsUI.components.builtinActionTypes.error.formatFromText": "发送者电子邮件地址无效。",
    "xpack.triggersActionsUI.components.builtinActionTypes.error.requiredEntryText": "未输入收件人、抄送、密送。 至少需要输入一个。",
@ -15879,14 +15878,6 @@
    "xpack.triggersActionsUI.components.builtinActionTypes.indexAction.refreshTooltip": "此复选框设置刷新索引值。",
    "xpack.triggersActionsUI.components.builtinActionTypes.indexAction.selectMessageText": "将数据索引到 Elasticsearch 中。",
    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.actionTypeTitle": "发送到 PagerDuty",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton1": "添加变量",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton2": "添加变量",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton3": "添加变量",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton4": "添加变量",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton5": "添加变量",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton6": "添加变量",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton7": "添加变量",
-    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariableTitle": "添加告警变量",
    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.apiUrlTextFieldLabel": "API URL",
    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.classFieldLabel": "类（可选）",
    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.componentTextFieldLabel": "组件（可选）",
@ -15910,14 +15901,10 @@
    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.summaryFieldLabel": "摘要",
    "xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.timestampTextFieldLabel": "时间戳（可选）",
    "xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.actionTypeTitle": "发送到服务器日志",
-    "xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.addVariablePopoverButton": "添加变量",
-    "xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.addVariableTitle": "添加变量",
    "xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.logLevelFieldLabel": "级别",
    "xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.logMessageFieldLabel": "消息",
    "xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.selectMessageText": "将消息添加到 Kibana 日志。",
    "xpack.triggersActionsUI.components.builtinActionTypes.slackAction.actionTypeTitle": "发送到 Slack",
-    "xpack.triggersActionsUI.components.builtinActionTypes.slackAction.addVariablePopoverButton": "添加告警变量",
-    "xpack.triggersActionsUI.components.builtinActionTypes.slackAction.addVariableTitle": "添加告警变量",
    "xpack.triggersActionsUI.components.builtinActionTypes.slackAction.error.requiredWebhookUrlText": "Webhook URL 必填。",
    "xpack.triggersActionsUI.components.builtinActionTypes.slackAction.messageTextAreaFieldLabel": "消息",
    "xpack.triggersActionsUI.components.builtinActionTypes.slackAction.selectMessageText": "向 Slack 频道或用户发送消息。",
@ -15926,8 +15913,6 @@
    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.actionTypeTitle": "Webhook 数据",
    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.addHeader": "添加标头",
    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.addHeaderButton": "添加",
-    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.addVariablePopoverButton": "添加变量",
-    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.addVariableTitle": "添加变量",
    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.bodyCodeEditorAriaLabel": "代码编辑器",
    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.bodyFieldLabel": "正文",
    "xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.deleteHeaderButton": "删除",
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.scss
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.scss
@ -0,0 +1,4 @@
+.messageVariablesPanel {
+  @include euiYScrollWithShadows;
+  max-height: $euiSize * 20;
+}
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx
@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiPopover, EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
+import './add_message_variables.scss';
+
+interface Props {
+  messageVariables: string[] | undefined;
+  paramsProperty: string;
+  onSelectEventHandler: (variable: string) => void;
+}
+
+export const AddMessageVariables: React.FunctionComponent<Props> = ({
+  messageVariables,
+  paramsProperty,
+  onSelectEventHandler,
+}) => {
+  const [isVariablesPopoverOpen, setIsVariablesPopoverOpen] = useState<boolean>(false);
+
+  const getMessageVariables = () =>
+    messageVariables?.map((variable: string) => (
+      <EuiContextMenuItem
+        key={variable}
+        icon="empty"
+        onClick={() => {
+          onSelectEventHandler(variable);
+          setIsVariablesPopoverOpen(false);
+        }}
+      >
+        {`{{${variable}}}`}
+      </EuiContextMenuItem>
+    ));
+
+  const addVariableButtonTitle = i18n.translate(
+    'xpack.triggersActionsUI.components.addMessageVariables.addVariableTitle',
+    {
+      defaultMessage: 'Add alert variable',
+    }
+  );
+
+  return (
+    <EuiPopover
+      button={
+        <EuiButtonIcon
+          data-test-subj={`${paramsProperty}AddVariableButton`}
+          title={addVariableButtonTitle}
+          onClick={() => setIsVariablesPopoverOpen(true)}
+          iconType="indexOpen"
+          aria-label={i18n.translate(
+            'xpack.triggersActionsUI.components.addMessageVariables.addVariablePopoverButton',
+            {
+              defaultMessage: 'Add variable',
+            }
+          )}
+        />
+      }
+      isOpen={isVariablesPopoverOpen}
+      closePopover={() => setIsVariablesPopoverOpen(false)}
+      panelPaddingSize="none"
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenuPanel className="messageVariablesPanel" items={getMessageVariables()} />
+    </EuiPopover>
+  );
+};
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email.tsx
@ -16,10 +16,6 @@ import {
  EuiButtonEmpty,
  EuiSwitch,
  EuiFormRow,
-  EuiContextMenuItem,
-  EuiButtonIcon,
-  EuiContextMenuPanel,
-  EuiPopover,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
@ -29,6 +25,7 @@ import {
  ActionParamsProps,
 } from '../../../types';
 import { EmailActionParams, EmailActionConnector } from './types';
+import { AddMessageVariables } from '../add_message_variables';

 export function getActionType(): ActionTypeModel {
  const mailformat = /^[^@\s]+@[^@\s]+$/;
@ -368,25 +365,21 @@ const EmailParamsFields: React.FunctionComponent<ActionParamsProps<EmailActionPa
  const [addCC, setAddCC] = useState<boolean>(false);
  const [addBCC, setAddBCC] = useState<boolean>(false);

-  const [isVariablesPopoverOpen, setIsVariablesPopoverOpen] = useState<boolean>(false);
  useEffect(() => {
    if (!message && defaultMessage && defaultMessage.length > 0) {
      editAction('message', defaultMessage, index);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
-  const messageVariablesItems = messageVariables?.map((variable: string) => (
-    <EuiContextMenuItem
-      key={variable}
-      icon="empty"
-      onClick={() => {
-        editAction('message', (message ?? '').concat(` {{${variable}}}`), index);
-        setIsVariablesPopoverOpen(false);
-      }}
-    >
-      {`{{${variable}}}`}
-    </EuiContextMenuItem>
-  ));
+
+  const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
+    editAction(
+      paramsProperty,
+      ((actionParams as any)[paramsProperty] ?? '').concat(` {{${variable}}}`),
+      index
+    );
+  };
+
  return (
    <Fragment>
      <EuiFormRow
@ -543,6 +536,15 @@ const EmailParamsFields: React.FunctionComponent<ActionParamsProps<EmailActionPa
            defaultMessage: 'Subject',
          }
        )}
+        labelAppend={
+          <AddMessageVariables
+            messageVariables={messageVariables}
+            onSelectEventHandler={(variable: string) =>
+              onSelectMessageVariable('subject', variable)
+            }
+            paramsProperty="subject"
+          />
+        }
      >
        <EuiFieldText
          fullWidth
@ -571,27 +573,13 @@ const EmailParamsFields: React.FunctionComponent<ActionParamsProps<EmailActionPa
          }
        )}
        labelAppend={
-          <EuiPopover
-            id="singlePanel"
-            button={
-              <EuiButtonIcon
-                onClick={() => setIsVariablesPopoverOpen(true)}
-                iconType="indexOpen"
-                aria-label={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.emailAction.addVariablePopoverButton',
-                  {
-                    defaultMessage: 'Add variable',
-                  }
-                )}
-              />
+          <AddMessageVariables
+            messageVariables={messageVariables}
+            onSelectEventHandler={(variable: string) =>
+              onSelectMessageVariable('message', variable)
            }
-            isOpen={isVariablesPopoverOpen}
-            closePopover={() => setIsVariablesPopoverOpen(false)}
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-          >
-            <EuiContextMenuPanel items={messageVariablesItems} />
-          </EuiPopover>
+            paramsProperty="message"
+          />
        }
      >
        <EuiTextArea
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.test.tsx
@ -152,8 +152,6 @@ describe('IndexParamsFields renders', () => {
    ).toBe(`{
  "test": 123
 }`);
-    expect(
-      wrapper.find('[data-test-subj="indexDocumentAddVariableButton"]').length > 0
-    ).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="documentsAddVariableButton"]').length > 0).toBeTruthy();
  });
 });
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx
@ -14,10 +14,6 @@ import {
  EuiSelect,
  EuiTitle,
  EuiIconTip,
-  EuiPopover,
-  EuiButtonIcon,
-  EuiContextMenuPanel,
-  EuiContextMenuItem,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@ -36,6 +32,7 @@ import {
  getIndexPatterns,
 } from '../../../common/index_controls';
 import { useXJsonMode } from '../../lib/use_x_json_mode';
+import { AddMessageVariables } from '../add_message_variables';

 export function getActionType(): ActionTypeModel {
  return {
@ -282,23 +279,13 @@ const IndexParamsFields: React.FunctionComponent<ActionParamsProps<IndexActionPa
  const { xJsonMode, convertToJson, setXJson, xJson } = useXJsonMode(
    documents && documents.length > 0 ? documents[0] : null
  );
-  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={() => {
-        const value = (xJson ?? '').concat(` {{${variable}}}`);
-        setXJson(value);
-        // Keep the documents in sync with the editor content
-        onDocumentsChange(convertToJson(value));
-        setIsVariablesPopoverOpen(false);
-      }}
-    >
-      {`{{${variable}}}`}
-    </EuiContextMenuItem>
-  ));
+  const onSelectMessageVariable = (variable: string) => {
+    const value = (xJson ?? '').concat(` {{${variable}}}`);
+    setXJson(value);
+    // Keep the documents in sync with the editor content
+    onDocumentsChange(convertToJson(value));
+  };
+
  function onDocumentsChange(updatedDocuments: string) {
    try {
      const documentsJSON = JSON.parse(updatedDocuments);
@ -317,34 +304,11 @@ const IndexParamsFields: React.FunctionComponent<ActionParamsProps<IndexActionPa
          }
        )}
        labelAppend={
-          // TODO: replace this button with a proper Eui component, when it will be ready
-          <EuiPopover
-            button={
-              <EuiButtonIcon
-                data-test-subj="indexDocumentAddVariableButton"
-                onClick={() => setIsVariablesPopoverOpen(true)}
-                iconType="indexOpen"
-                title={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.indexAction.addVariableTitle',
-                  {
-                    defaultMessage: 'Add variable',
-                  }
-                )}
-                aria-label={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.indexAction.addVariablePopoverButton',
-                  {
-                    defaultMessage: 'Add variable',
-                  }
-                )}
-              />
-            }
-            isOpen={isVariablesPopoverOpen}
-            closePopover={() => setIsVariablesPopoverOpen(false)}
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-          >
-            <EuiContextMenuPanel items={messageVariablesItems} />
-          </EuiPopover>
+          <AddMessageVariables
+            messageVariables={messageVariables}
+            onSelectEventHandler={(variable: string) => onSelectMessageVariable(variable)}
+            paramsProperty="documents"
+          />
        }
      >
        <EuiCodeEditor
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.tsx
@ -3,7 +3,7 @@
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */
-import React, { Fragment, useState } from 'react';
+import React, { Fragment } from 'react';
 import {
  EuiFieldText,
  EuiFlexGroup,
@ -11,10 +11,6 @@ import {
  EuiFormRow,
  EuiSelect,
  EuiLink,
-  EuiContextMenuItem,
-  EuiPopover,
-  EuiButtonIcon,
-  EuiContextMenuPanel,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@ -26,6 +22,7 @@ import {
 } from '../../../types';
 import { PagerDutyActionParams, PagerDutyActionConnector } from './types';
 import pagerDutySvg from './pagerduty.svg';
+import { AddMessageVariables } from '../add_message_variables';

 export function getActionType(): ActionTypeModel {
  return {
@ -243,66 +240,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
      ),
    },
  ];
-  const [isVariablesPopoverOpen, setIsVariablesPopoverOpen] = useState<Record<string, boolean>>({
-    dedupKey: false,
-    summary: false,
-    source: false,
-    timestamp: false,
-    component: false,
-    group: false,
-    class: false,
-  });
-  // TODO: replace this button with a proper Eui component, when it will be ready
-  const getMessageVariables = (paramsProperty: string) =>
-    messageVariables?.map((variable: string) => (
-      <EuiContextMenuItem
-        key={variable}
-        icon="empty"
-        onClick={() => {
-          editAction(
-            paramsProperty,
-            ((actionParams as any)[paramsProperty] ?? '').concat(` {{${variable}}}`),
-            index
-          );
-          setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, [paramsProperty]: false });
-        }}
-      >
-        {`{{${variable}}}`}
-      </EuiContextMenuItem>
-    ));

-  const addVariableButtonTitle = i18n.translate(
-    'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariableTitle',
-    {
-      defaultMessage: 'Add alert variable',
-    }
-  );
-
-  const getAddVariableComponent = (paramsProperty: string, buttonName: string) => {
-    return (
-      <EuiPopover
-        button={
-          <EuiButtonIcon
-            data-test-subj={`${paramsProperty}AddVariableButton`}
-            title={addVariableButtonTitle}
-            onClick={() =>
-              setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, [paramsProperty]: true })
-            }
-            iconType="indexOpen"
-            aria-label={buttonName}
-          />
-        }
-        isOpen={isVariablesPopoverOpen[paramsProperty]}
-        closePopover={() =>
-          setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, [paramsProperty]: false })
-        }
-        panelPaddingSize="none"
-        anchorPosition="downLeft"
-      >
-        <EuiContextMenuPanel items={getMessageVariables(paramsProperty)} />
-      </EuiPopover>
+  const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
+    editAction(
+      paramsProperty,
+      ((actionParams as any)[paramsProperty] ?? '').concat(` {{${variable}}}`),
+      index
    );
  };
+
  return (
    <Fragment>
      <EuiFlexGroup>
@ -359,15 +305,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                defaultMessage: 'DedupKey (optional)',
              }
            )}
-            labelAppend={getAddVariableComponent(
-              'dedupKey',
-              i18n.translate(
-                'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton1',
-                {
-                  defaultMessage: 'Add variable',
+            labelAppend={
+              <AddMessageVariables
+                messageVariables={messageVariables}
+                onSelectEventHandler={(variable: string) =>
+                  onSelectMessageVariable('dedupKey', variable)
                }
-              )
-            )}
+                paramsProperty="dedupKey"
+              />
+            }
          >
            <EuiFieldText
              fullWidth
@ -394,15 +340,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                defaultMessage: 'Timestamp (optional)',
              }
            )}
-            labelAppend={getAddVariableComponent(
-              'timestamp',
-              i18n.translate(
-                'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton2',
-                {
-                  defaultMessage: 'Add variable',
+            labelAppend={
+              <AddMessageVariables
+                messageVariables={messageVariables}
+                onSelectEventHandler={(variable: string) =>
+                  onSelectMessageVariable('timestamp', variable)
                }
-              )
-            )}
+                paramsProperty="timestamp"
+              />
+            }
          >
            <EuiFieldText
              fullWidth
@ -429,15 +375,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
            defaultMessage: 'Component (optional)',
          }
        )}
-        labelAppend={getAddVariableComponent(
-          'component',
-          i18n.translate(
-            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton3',
-            {
-              defaultMessage: 'Add variable',
+        labelAppend={
+          <AddMessageVariables
+            messageVariables={messageVariables}
+            onSelectEventHandler={(variable: string) =>
+              onSelectMessageVariable('component', variable)
            }
-          )
-        )}
+            paramsProperty="component"
+          />
+        }
      >
        <EuiFieldText
          fullWidth
@ -462,15 +408,13 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
            defaultMessage: 'Group (optional)',
          }
        )}
-        labelAppend={getAddVariableComponent(
-          'group',
-          i18n.translate(
-            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton4',
-            {
-              defaultMessage: 'Add variable',
-            }
-          )
-        )}
+        labelAppend={
+          <AddMessageVariables
+            messageVariables={messageVariables}
+            onSelectEventHandler={(variable: string) => onSelectMessageVariable('group', variable)}
+            paramsProperty="group"
+          />
+        }
      >
        <EuiFieldText
          fullWidth
@ -495,15 +439,13 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
            defaultMessage: 'Source (optional)',
          }
        )}
-        labelAppend={getAddVariableComponent(
-          'source',
-          i18n.translate(
-            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton5',
-            {
-              defaultMessage: 'Add variable',
-            }
-          )
-        )}
+        labelAppend={
+          <AddMessageVariables
+            messageVariables={messageVariables}
+            onSelectEventHandler={(variable: string) => onSelectMessageVariable('source', variable)}
+            paramsProperty="source"
+          />
+        }
      >
        <EuiFieldText
          fullWidth
@ -531,15 +473,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
            defaultMessage: 'Summary',
          }
        )}
-        labelAppend={getAddVariableComponent(
-          'summary',
-          i18n.translate(
-            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton6',
-            {
-              defaultMessage: 'Add variable',
+        labelAppend={
+          <AddMessageVariables
+            messageVariables={messageVariables}
+            onSelectEventHandler={(variable: string) =>
+              onSelectMessageVariable('summary', variable)
            }
-          )
-        )}
+            paramsProperty="summary"
+          />
+        }
      >
        <EuiFieldText
          fullWidth
@ -566,15 +508,13 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
            defaultMessage: 'Class (optional)',
          }
        )}
-        labelAppend={getAddVariableComponent(
-          'class',
-          i18n.translate(
-            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton7',
-            {
-              defaultMessage: 'Add variable',
-            }
-          )
-        )}
+        labelAppend={
+          <AddMessageVariables
+            messageVariables={messageVariables}
+            onSelectEventHandler={(variable: string) => onSelectMessageVariable('class', variable)}
+            paramsProperty="class"
+          />
+        }
      >
        <EuiFieldText
          fullWidth
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log.tsx
@ -3,19 +3,12 @@
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { Fragment, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
-import {
-  EuiSelect,
-  EuiTextArea,
-  EuiFormRow,
-  EuiContextMenuItem,
-  EuiPopover,
-  EuiButtonIcon,
-  EuiContextMenuPanel,
-} from '@elastic/eui';
+import { EuiSelect, EuiTextArea, EuiFormRow } from '@elastic/eui';
 import { ActionTypeModel, ValidationResult, ActionParamsProps } from '../../../types';
 import { ServerLogActionParams } from './types';
+import { AddMessageVariables } from '../add_message_variables';

 export function getActionType(): ActionTypeModel {
  return {
@ -71,7 +64,6 @@ export const ServerLogParamsFields: React.FunctionComponent<ActionParamsProps<
    { value: 'error', text: 'Error' },
    { value: 'fatal', text: 'Fatal' },
  ];
-  const [isVariablesPopoverOpen, setIsVariablesPopoverOpen] = useState<boolean>(false);

  useEffect(() => {
    editAction('level', 'info', index);
@ -80,18 +72,11 @@ export const ServerLogParamsFields: React.FunctionComponent<ActionParamsProps<
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
-  const messageVariablesItems = messageVariables?.map((variable: string) => (
-    <EuiContextMenuItem
-      key={variable}
-      icon="empty"
-      onClick={() => {
-        editAction('message', (message ?? '').concat(` {{${variable}}}`), index);
-        setIsVariablesPopoverOpen(false);
-      }}
-    >
-      {`{{${variable}}}`}
-    </EuiContextMenuItem>
-  ));
+
+  const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
+    editAction(paramsProperty, (message ?? '').concat(` {{${variable}}}`), index);
+  };
+
  return (
    <Fragment>
      <EuiFormRow
@ -128,33 +113,13 @@ export const ServerLogParamsFields: React.FunctionComponent<ActionParamsProps<
          }
        )}
        labelAppend={
-          <EuiPopover
-            id="singlePanel"
-            button={
-              <EuiButtonIcon
-                onClick={() => setIsVariablesPopoverOpen(true)}
-                iconType="indexOpen"
-                title={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.addVariableTitle',
-                  {
-                    defaultMessage: 'Add variable',
-                  }
-                )}
-                aria-label={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.addVariablePopoverButton',
-                  {
-                    defaultMessage: 'Add variable',
-                  }
-                )}
-              />
+          <AddMessageVariables
+            messageVariables={messageVariables}
+            onSelectEventHandler={(variable: string) =>
+              onSelectMessageVariable('message', variable)
            }
-            isOpen={isVariablesPopoverOpen}
-            closePopover={() => setIsVariablesPopoverOpen(false)}
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-          >
-            <EuiContextMenuPanel items={messageVariablesItems} />
-          </EuiPopover>
+            paramsProperty="message"
+          />
        }
      >
        <EuiTextArea
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack.tsx
@ -3,17 +3,8 @@
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */
-import React, { Fragment, useState, useEffect } from 'react';
-import {
-  EuiFieldText,
-  EuiTextArea,
-  EuiButtonIcon,
-  EuiFormRow,
-  EuiLink,
-  EuiPopover,
-  EuiContextMenuPanel,
-  EuiContextMenuItem,
-} from '@elastic/eui';
+import React, { Fragment, useEffect } from 'react';
+import { EuiFieldText, EuiTextArea, EuiFormRow, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@ -23,6 +14,7 @@ import {
  ActionParamsProps,
 } from '../../../types';
 import { SlackActionParams, SlackActionConnector } from './types';
+import { AddMessageVariables } from '../add_message_variables';

 export function getActionType(): ActionTypeModel {
  return {
@ -141,26 +133,17 @@ const SlackParamsFields: React.FunctionComponent<ActionParamsProps<SlackActionPa
  defaultMessage,
 }) => {
  const { message } = actionParams;
-  const [isVariablesPopoverOpen, setIsVariablesPopoverOpen] = useState<boolean>(false);
  useEffect(() => {
    if (!message && defaultMessage && defaultMessage.length > 0) {
      editAction('message', defaultMessage, index);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
-  const messageVariablesItems = messageVariables?.map((variable: string, i: number) => (
-    <EuiContextMenuItem
-      key={variable}
-      data-test-subj={`variableMenuButton-${i}`}
-      icon="empty"
-      onClick={() => {
-        editAction('message', (message ?? '').concat(` {{${variable}}}`), index);
-        setIsVariablesPopoverOpen(false);
-      }}
-    >
-      {`{{${variable}}}`}
-    </EuiContextMenuItem>
-  ));
+
+  const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
+    editAction(paramsProperty, (message ?? '').concat(` {{${variable}}}`), index);
+  };
+
  return (
    <Fragment>
      <EuiFormRow
@ -175,34 +158,13 @@ const SlackParamsFields: React.FunctionComponent<ActionParamsProps<SlackActionPa
          }
        )}
        labelAppend={
-          <EuiPopover
-            id="singlePanel"
-            button={
-              <EuiButtonIcon
-                data-test-subj="slackAddVariableButton"
-                onClick={() => setIsVariablesPopoverOpen(true)}
-                iconType="indexOpen"
-                title={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.slackAction.addVariableTitle',
-                  {
-                    defaultMessage: 'Add alert variable',
-                  }
-                )}
-                aria-label={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.slackAction.addVariablePopoverButton',
-                  {
-                    defaultMessage: 'Add alert variable',
-                  }
-                )}
-              />
+          <AddMessageVariables
+            messageVariables={messageVariables}
+            onSelectEventHandler={(variable: string) =>
+              onSelectMessageVariable('message', variable)
            }
-            isOpen={isVariablesPopoverOpen}
-            closePopover={() => setIsVariablesPopoverOpen(false)}
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-          >
-            <EuiContextMenuPanel items={messageVariablesItems} />
-          </EuiPopover>
+            paramsProperty="message"
+          />
        }
      >
        <EuiTextArea
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.test.tsx
@ -162,7 +162,7 @@ describe('WebhookParamsFields renders', () => {
        .first()
        .prop('value')
    ).toStrictEqual('test message');
-    expect(wrapper.find('[data-test-subj="webhookAddVariableButton"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="bodyAddVariableButton"]').length > 0).toBeTruthy();
  });

  test('params validation fails when body is not valid', () => {
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook.tsx
@ -22,9 +22,6 @@ import {
  EuiCodeEditor,
  EuiSwitch,
  EuiButtonEmpty,
-  EuiContextMenuItem,
-  EuiPopover,
-  EuiContextMenuPanel,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
@ -34,6 +31,7 @@ import {
  ActionParamsProps,
 } from '../../../types';
 import { WebhookActionParams, WebhookActionConnector } from './types';
+import { AddMessageVariables } from '../add_message_variables';

 const HTTP_VERBS = ['post', 'put'];

@ -467,20 +465,9 @@ const WebhookParamsFields: React.FunctionComponent<ActionParamsProps<WebhookActi
  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>
-  ));
+  const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
+    editAction(paramsProperty, (body ?? '').concat(` {{${variable}}}`), index);
+  };
  return (
    <Fragment>
      <EuiFormRow
@ -495,34 +482,11 @@ const WebhookParamsFields: React.FunctionComponent<ActionParamsProps<WebhookActi
        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"
-                title={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.addVariableTitle',
-                  {
-                    defaultMessage: 'Add variable',
-                  }
-                )}
-                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>
+          <AddMessageVariables
+            messageVariables={messageVariables}
+            onSelectEventHandler={(variable: string) => onSelectMessageVariable('body', variable)}
+            paramsProperty="body"
+          />
        }
      >
        <EuiCodeEditor