Exposed AddMessageVariables as separate component and added styles to…

… allow to handle bigger list of messageVariables

x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.scss

@@ -0,0 +1,4 @@
+.messageVariablesPanel {
+  max-height: 400px;
+  overflow-y: scroll;
+}

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.builtinActionTypes.pagerDutyAction.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.builtinActionTypes.pagerDutyAction.addVariablePopoverButton5',
+            {
+              defaultMessage: 'Add variable',
+            }
+          )}
+        />
+      }
+      isOpen={isVariablesPopoverOpen}
+      closePopover={() => setIsVariablesPopoverOpen(false)}
+      panelPaddingSize="none"
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenuPanel className="messageVariablesPanel" items={getMessageVariables()} />
+    </EuiPopover>
+  );
+};

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

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