elastic · YulNaumenko · Apr 9, 2020 · Apr 8, 2020 · Apr 8, 2020 · Apr 8, 2020
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -15869,7 +15869,6 @@
     "xpack.triggersActionsUI.components.alertActionSecurityCallOut.enableTlsCta": "TLS を有効にする",
     "xpack.triggersActionsUI.components.alertActionSecurityCallOut.tlsDisabledTitle": "アラート {action} を実行するには Elasticsearch と Kibana の間に TLS が必要です。",
     "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 つ以上のエントリーが必要です。",
@@ -15898,14 +15897,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": "コンポーネント（任意）",
@@ -15929,14 +15920,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 チャネルにメッセージを送信します。",
@@ -15945,8 +15932,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": "削除",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -15873,7 +15873,6 @@
     "xpack.triggersActionsUI.components.alertActionSecurityCallOut.enableTlsCta": "启用 TLS",
     "xpack.triggersActionsUI.components.alertActionSecurityCallOut.tlsDisabledTitle": "告警 {action} 在 Elasticsearch 和 Kibana 之间需要 TLS。",
     "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": "未输入收件人、抄送、密送。 至少需要输入一个。",
@@ -15902,14 +15901,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": "组件（可选）",
@@ -15933,14 +15924,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 频道或用户发送消息。",
@@ -15949,8 +15936,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": "删除",

diff --git 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;
+}
diff --git 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>
+  );
+};
diff --git a/.../plugins/triggers_actions_ui/public/application/components/builtin_action_types/email.tsx b/.../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

diff --git a/.../triggers_actions_ui/public/application/components/builtin_action_types/es_index.test.tsx b/.../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();
   });
 });
diff --git a/...ugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx b/...ugins/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