From 3b94530d46dd2ee63cb56170ad01f1c10f1f0ac3 Mon Sep 17 00:00:00 2001
From: Yuliia Naumenko <yuliia.naumenko@elastic.com>
Date: Fri, 13 Mar 2020 19:31:09 -0700
Subject: [PATCH 1/5] Added variables button for text fields in Pagerduty
 component. Fixed bugs mentioned in
 https://github.com/elastic/kibana/issues/60067

---
 .../builtin_action_types/pagerduty.test.tsx   |   1 +
 .../builtin_action_types/pagerduty.tsx        | 241 +++++++++++++++++-
 2 files changed, 232 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.test.tsx
index 31a69f9fd94acd..bb06f7961b20bb 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty.test.tsx
@@ -183,5 +183,6 @@ describe('PagerDutyParamsFields renders', () => {
     expect(wrapper.find('[data-test-subj="groupInput"]').length > 0).toBeTruthy();
     expect(wrapper.find('[data-test-subj="sourceInput"]').length > 0).toBeTruthy();
     expect(wrapper.find('[data-test-subj="pagerdutySummaryInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="dedupKeyAddVariableButton"]').length > 0).toBeTruthy();
   });
 });
diff --git 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
index 3c1b1d258cfe22..041d2456a1779e 100644
--- 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 } from 'react';
+import React, { Fragment, useState } from 'react';
 import {
   EuiFieldText,
   EuiFlexGroup,
@@ -11,6 +11,10 @@ import {
   EuiFormRow,
   EuiSelect,
   EuiLink,
+  EuiContextMenuItem,
+  EuiPopover,
+  EuiButtonIcon,
+  EuiContextMenuPanel,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -158,6 +162,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
   actionParams,
   editAction,
   index,
+  messageVariables,
   errors,
 }) => {
   const {
@@ -171,8 +176,8 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
     group,
   } = actionParams;
   const severityOptions = [
-    { value: 'critical', text: 'Critical' },
     { value: 'info', text: 'Info' },
+    { value: 'critical', text: 'Critical' },
     { value: 'warning', text: 'Warning' },
     { value: 'error', text: 'Error' },
   ];
@@ -181,6 +186,33 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
     { value: 'resolve', text: 'Resolve' },
     { value: 'acknowledge', text: 'Acknowledge' },
   ];
+  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, i: number) => (
+      <EuiContextMenuItem
+        key={variable}
+        icon="empty"
+        onClick={() => {
+          editAction(
+            paramsProperty,
+            ((actionParams as any)[paramsProperty] ?? '').concat(` {{${variable}}}`),
+            index
+          );
+          setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, [paramsProperty]: false });
+        }}
+      >
+        {`{{${variable}}}`}
+      </EuiContextMenuItem>
+    ));
   return (
     <Fragment>
       <EuiFlexGroup>
@@ -190,7 +222,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             label={i18n.translate(
               'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.severitySelectFieldLabel',
               {
-                defaultMessage: 'Severity (optional)',
+                defaultMessage: 'Severity',
               }
             )}
           >
@@ -211,7 +243,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             label={i18n.translate(
               'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.eventActionSelectFieldLabel',
               {
-                defaultMessage: 'Event action (optional)',
+                defaultMessage: 'Event action',
               }
             )}
           >
@@ -237,6 +269,33 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 defaultMessage: 'DedupKey (optional)',
               }
             )}
+            labelAppend={
+              <EuiPopover
+                button={
+                  <EuiButtonIcon
+                    data-test-subj="dedupKeyAddVariableButton"
+                    onClick={() =>
+                      setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, dedupKey: true })
+                    }
+                    iconType="indexOpen"
+                    aria-label={i18n.translate(
+                      'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton1',
+                      {
+                        defaultMessage: 'Add variable',
+                      }
+                    )}
+                  />
+                }
+                isOpen={isVariablesPopoverOpen.dedupKey}
+                closePopover={() =>
+                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, dedupKey: false })
+                }
+                panelPaddingSize="none"
+                anchorPosition="downLeft"
+              >
+                <EuiContextMenuPanel items={getMessageVariables('dedupKey')} />
+              </EuiPopover>
+            }
           >
             <EuiFieldText
               fullWidth
@@ -247,7 +306,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 editAction('dedupKey', e.target.value, index);
               }}
               onBlur={() => {
-                if (!index) {
+                if (!dedupKey) {
                   editAction('dedupKey', '', index);
                 }
               }}
@@ -263,6 +322,33 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 defaultMessage: 'Timestamp (optional)',
               }
             )}
+            labelAppend={
+              <EuiPopover
+                button={
+                  <EuiButtonIcon
+                    data-test-subj="timestampAddVariableButton"
+                    onClick={() =>
+                      setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, timestamp: true })
+                    }
+                    iconType="indexOpen"
+                    aria-label={i18n.translate(
+                      'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton2',
+                      {
+                        defaultMessage: 'Add variable',
+                      }
+                    )}
+                  />
+                }
+                isOpen={isVariablesPopoverOpen.timestamp}
+                closePopover={() =>
+                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, timestamp: false })
+                }
+                panelPaddingSize="none"
+                anchorPosition="downLeft"
+              >
+                <EuiContextMenuPanel items={getMessageVariables('timestamp')} />
+              </EuiPopover>
+            }
           >
             <EuiFieldText
               fullWidth
@@ -273,7 +359,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 editAction('timestamp', e.target.value, index);
               }}
               onBlur={() => {
-                if (!index) {
+                if (!timestamp) {
                   editAction('timestamp', '', index);
                 }
               }}
@@ -289,6 +375,33 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Component (optional)',
           }
         )}
+        labelAppend={
+          <EuiPopover
+            button={
+              <EuiButtonIcon
+                data-test-subj="componentAddVariableButton"
+                onClick={() =>
+                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, component: true })
+                }
+                iconType="indexOpen"
+                aria-label={i18n.translate(
+                  'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton3',
+                  {
+                    defaultMessage: 'Add variable',
+                  }
+                )}
+              />
+            }
+            isOpen={isVariablesPopoverOpen.component}
+            closePopover={() =>
+              setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, component: false })
+            }
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+            <EuiContextMenuPanel items={getMessageVariables('component')} />
+          </EuiPopover>
+        }
       >
         <EuiFieldText
           fullWidth
@@ -299,7 +412,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             editAction('component', e.target.value, index);
           }}
           onBlur={() => {
-            if (!index) {
+            if (!component) {
               editAction('component', '', index);
             }
           }}
@@ -313,6 +426,33 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Group (optional)',
           }
         )}
+        labelAppend={
+          <EuiPopover
+            button={
+              <EuiButtonIcon
+                data-test-subj="groupAddVariableButton"
+                onClick={() =>
+                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, group: true })
+                }
+                iconType="indexOpen"
+                aria-label={i18n.translate(
+                  'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton4',
+                  {
+                    defaultMessage: 'Add variable',
+                  }
+                )}
+              />
+            }
+            isOpen={isVariablesPopoverOpen.group}
+            closePopover={() =>
+              setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, group: false })
+            }
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+            <EuiContextMenuPanel items={getMessageVariables('group')} />
+          </EuiPopover>
+        }
       >
         <EuiFieldText
           fullWidth
@@ -323,7 +463,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             editAction('group', e.target.value, index);
           }}
           onBlur={() => {
-            if (!index) {
+            if (!group) {
               editAction('group', '', index);
             }
           }}
@@ -337,6 +477,33 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Source (optional)',
           }
         )}
+        labelAppend={
+          <EuiPopover
+            button={
+              <EuiButtonIcon
+                data-test-subj="sourceAddVariableButton"
+                onClick={() =>
+                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, source: true })
+                }
+                iconType="indexOpen"
+                aria-label={i18n.translate(
+                  'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton5',
+                  {
+                    defaultMessage: 'Add variable',
+                  }
+                )}
+              />
+            }
+            isOpen={isVariablesPopoverOpen.source}
+            closePopover={() =>
+              setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, source: false })
+            }
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+            <EuiContextMenuPanel items={getMessageVariables('source')} />
+          </EuiPopover>
+        }
       >
         <EuiFieldText
           fullWidth
@@ -347,7 +514,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             editAction('source', e.target.value, index);
           }}
           onBlur={() => {
-            if (!index) {
+            if (!source) {
               editAction('source', '', index);
             }
           }}
@@ -364,6 +531,33 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Summary',
           }
         )}
+        labelAppend={
+          <EuiPopover
+            button={
+              <EuiButtonIcon
+                data-test-subj="summaryAddVariableButton"
+                onClick={() =>
+                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, summary: true })
+                }
+                iconType="indexOpen"
+                aria-label={i18n.translate(
+                  'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton6',
+                  {
+                    defaultMessage: 'Add variable',
+                  }
+                )}
+              />
+            }
+            isOpen={isVariablesPopoverOpen.summary}
+            closePopover={() =>
+              setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, summary: false })
+            }
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+            <EuiContextMenuPanel items={getMessageVariables('summary')} />
+          </EuiPopover>
+        }
       >
         <EuiFieldText
           fullWidth
@@ -387,9 +581,36 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
         label={i18n.translate(
           'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.classFieldLabel',
           {
-            defaultMessage: 'Class',
+            defaultMessage: 'Class (optional)',
           }
         )}
+        labelAppend={
+          <EuiPopover
+            button={
+              <EuiButtonIcon
+                data-test-subj="classAddVariableButton"
+                onClick={() =>
+                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, class: true })
+                }
+                iconType="indexOpen"
+                aria-label={i18n.translate(
+                  'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton7',
+                  {
+                    defaultMessage: 'Add variable',
+                  }
+                )}
+              />
+            }
+            isOpen={isVariablesPopoverOpen.class}
+            closePopover={() =>
+              setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, class: false })
+            }
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+            <EuiContextMenuPanel items={getMessageVariables('class')} />
+          </EuiPopover>
+        }
       >
         <EuiFieldText
           fullWidth

From 6ab94879993409335bd9576fb2d525d89470624f Mon Sep 17 00:00:00 2001
From: Yuliia Naumenko <yuliia.naumenko@elastic.com>
Date: Mon, 16 Mar 2020 11:23:57 -0700
Subject: [PATCH 2/5] Fixed due to comments

---
 .../builtin_action_types/pagerduty.tsx        | 226 +++---------------
 1 file changed, 36 insertions(+), 190 deletions(-)

diff --git 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
index 041d2456a1779e..9017ff50410a5a 100644
--- 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
@@ -197,7 +197,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
   });
   // TODO: replace this button with a proper Eui component, when it will be ready
   const getMessageVariables = (paramsProperty: string) =>
-    messageVariables?.map((variable: string, i: number) => (
+    messageVariables?.map((variable: string) => (
       <EuiContextMenuItem
         key={variable}
         icon="empty"
@@ -213,6 +213,34 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
         {`{{${variable}}}`}
       </EuiContextMenuItem>
     ));
+
+  const getAddVariableComponent = (paramsProperty: string, buttonName: string) => {
+    return (
+      <EuiPopover
+        button={
+          <EuiButtonIcon
+            data-test-subj="dedupKeyAddVariableButton"
+            onClick={() => setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, dedupKey: true })}
+            iconType="indexOpen"
+            aria-label={i18n.translate(
+              `xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.${buttonName}`,
+              {
+                defaultMessage: 'Add variable',
+              }
+            )}
+          />
+        }
+        isOpen={isVariablesPopoverOpen[paramsProperty]}
+        closePopover={() =>
+          setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, [paramsProperty]: false })
+        }
+        panelPaddingSize="none"
+        anchorPosition="downLeft"
+      >
+        <EuiContextMenuPanel items={getMessageVariables(paramsProperty)} />
+      </EuiPopover>
+    );
+  };
   return (
     <Fragment>
       <EuiFlexGroup>
@@ -269,33 +297,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 defaultMessage: 'DedupKey (optional)',
               }
             )}
-            labelAppend={
-              <EuiPopover
-                button={
-                  <EuiButtonIcon
-                    data-test-subj="dedupKeyAddVariableButton"
-                    onClick={() =>
-                      setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, dedupKey: true })
-                    }
-                    iconType="indexOpen"
-                    aria-label={i18n.translate(
-                      'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton1',
-                      {
-                        defaultMessage: 'Add variable',
-                      }
-                    )}
-                  />
-                }
-                isOpen={isVariablesPopoverOpen.dedupKey}
-                closePopover={() =>
-                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, dedupKey: false })
-                }
-                panelPaddingSize="none"
-                anchorPosition="downLeft"
-              >
-                <EuiContextMenuPanel items={getMessageVariables('dedupKey')} />
-              </EuiPopover>
-            }
+            labelAppend={getAddVariableComponent('dedupKey', 'addVariablePopoverButton1')}
           >
             <EuiFieldText
               fullWidth
@@ -322,33 +324,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 defaultMessage: 'Timestamp (optional)',
               }
             )}
-            labelAppend={
-              <EuiPopover
-                button={
-                  <EuiButtonIcon
-                    data-test-subj="timestampAddVariableButton"
-                    onClick={() =>
-                      setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, timestamp: true })
-                    }
-                    iconType="indexOpen"
-                    aria-label={i18n.translate(
-                      'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton2',
-                      {
-                        defaultMessage: 'Add variable',
-                      }
-                    )}
-                  />
-                }
-                isOpen={isVariablesPopoverOpen.timestamp}
-                closePopover={() =>
-                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, timestamp: false })
-                }
-                panelPaddingSize="none"
-                anchorPosition="downLeft"
-              >
-                <EuiContextMenuPanel items={getMessageVariables('timestamp')} />
-              </EuiPopover>
-            }
+            labelAppend={getAddVariableComponent('timestamp', 'addVariablePopoverButton2')}
           >
             <EuiFieldText
               fullWidth
@@ -375,33 +351,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Component (optional)',
           }
         )}
-        labelAppend={
-          <EuiPopover
-            button={
-              <EuiButtonIcon
-                data-test-subj="componentAddVariableButton"
-                onClick={() =>
-                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, component: true })
-                }
-                iconType="indexOpen"
-                aria-label={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton3',
-                  {
-                    defaultMessage: 'Add variable',
-                  }
-                )}
-              />
-            }
-            isOpen={isVariablesPopoverOpen.component}
-            closePopover={() =>
-              setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, component: false })
-            }
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-          >
-            <EuiContextMenuPanel items={getMessageVariables('component')} />
-          </EuiPopover>
-        }
+        labelAppend={getAddVariableComponent('component', 'addVariablePopoverButton7')}
       >
         <EuiFieldText
           fullWidth
@@ -426,33 +376,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Group (optional)',
           }
         )}
-        labelAppend={
-          <EuiPopover
-            button={
-              <EuiButtonIcon
-                data-test-subj="groupAddVariableButton"
-                onClick={() =>
-                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, group: true })
-                }
-                iconType="indexOpen"
-                aria-label={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton4',
-                  {
-                    defaultMessage: 'Add variable',
-                  }
-                )}
-              />
-            }
-            isOpen={isVariablesPopoverOpen.group}
-            closePopover={() =>
-              setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, group: false })
-            }
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-          >
-            <EuiContextMenuPanel items={getMessageVariables('group')} />
-          </EuiPopover>
-        }
+        labelAppend={getAddVariableComponent('group', 'addVariablePopoverButton3')}
       >
         <EuiFieldText
           fullWidth
@@ -477,33 +401,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Source (optional)',
           }
         )}
-        labelAppend={
-          <EuiPopover
-            button={
-              <EuiButtonIcon
-                data-test-subj="sourceAddVariableButton"
-                onClick={() =>
-                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, source: true })
-                }
-                iconType="indexOpen"
-                aria-label={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton5',
-                  {
-                    defaultMessage: 'Add variable',
-                  }
-                )}
-              />
-            }
-            isOpen={isVariablesPopoverOpen.source}
-            closePopover={() =>
-              setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, source: false })
-            }
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-          >
-            <EuiContextMenuPanel items={getMessageVariables('source')} />
-          </EuiPopover>
-        }
+        labelAppend={getAddVariableComponent('source', 'addVariablePopoverButton6')}
       >
         <EuiFieldText
           fullWidth
@@ -531,33 +429,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Summary',
           }
         )}
-        labelAppend={
-          <EuiPopover
-            button={
-              <EuiButtonIcon
-                data-test-subj="summaryAddVariableButton"
-                onClick={() =>
-                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, summary: true })
-                }
-                iconType="indexOpen"
-                aria-label={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton6',
-                  {
-                    defaultMessage: 'Add variable',
-                  }
-                )}
-              />
-            }
-            isOpen={isVariablesPopoverOpen.summary}
-            closePopover={() =>
-              setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, summary: false })
-            }
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-          >
-            <EuiContextMenuPanel items={getMessageVariables('summary')} />
-          </EuiPopover>
-        }
+        labelAppend={getAddVariableComponent('summary', 'addVariablePopoverButton4')}
       >
         <EuiFieldText
           fullWidth
@@ -584,33 +456,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Class (optional)',
           }
         )}
-        labelAppend={
-          <EuiPopover
-            button={
-              <EuiButtonIcon
-                data-test-subj="classAddVariableButton"
-                onClick={() =>
-                  setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, class: true })
-                }
-                iconType="indexOpen"
-                aria-label={i18n.translate(
-                  'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton7',
-                  {
-                    defaultMessage: 'Add variable',
-                  }
-                )}
-              />
-            }
-            isOpen={isVariablesPopoverOpen.class}
-            closePopover={() =>
-              setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, class: false })
-            }
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-          >
-            <EuiContextMenuPanel items={getMessageVariables('class')} />
-          </EuiPopover>
-        }
+        labelAppend={getAddVariableComponent('class', 'addVariablePopoverButton5')}
       >
         <EuiFieldText
           fullWidth

From 433a4e8d8e7d8907da076297b48c5c7d428d9989 Mon Sep 17 00:00:00 2001
From: Yuliia Naumenko <yuliia.naumenko@elastic.com>
Date: Mon, 16 Mar 2020 14:19:18 -0700
Subject: [PATCH 3/5] fixed language check issue

---
 .../builtin_action_types/pagerduty.tsx        | 79 +++++++++++++++----
 1 file changed, 65 insertions(+), 14 deletions(-)

diff --git 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
index 9017ff50410a5a..f7432b504b6c09 100644
--- 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
@@ -219,15 +219,10 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
       <EuiPopover
         button={
           <EuiButtonIcon
-            data-test-subj="dedupKeyAddVariableButton"
+            data-test-subj={`${buttonName}AddVariableButton`}
             onClick={() => setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, dedupKey: true })}
             iconType="indexOpen"
-            aria-label={i18n.translate(
-              `xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.${buttonName}`,
-              {
-                defaultMessage: 'Add variable',
-              }
-            )}
+            aria-label={buttonName}
           />
         }
         isOpen={isVariablesPopoverOpen[paramsProperty]}
@@ -297,7 +292,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 defaultMessage: 'DedupKey (optional)',
               }
             )}
-            labelAppend={getAddVariableComponent('dedupKey', 'addVariablePopoverButton1')}
+            labelAppend={getAddVariableComponent(
+              'dedupKey',
+              i18n.translate(
+                'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton1',
+                {
+                  defaultMessage: 'Add variable',
+                }
+              )
+            )}
           >
             <EuiFieldText
               fullWidth
@@ -324,7 +327,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 defaultMessage: 'Timestamp (optional)',
               }
             )}
-            labelAppend={getAddVariableComponent('timestamp', 'addVariablePopoverButton2')}
+            labelAppend={getAddVariableComponent(
+              'timestamp',
+              i18n.translate(
+                'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton2',
+                {
+                  defaultMessage: 'Add variable',
+                }
+              )
+            )}
           >
             <EuiFieldText
               fullWidth
@@ -351,7 +362,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Component (optional)',
           }
         )}
-        labelAppend={getAddVariableComponent('component', 'addVariablePopoverButton7')}
+        labelAppend={getAddVariableComponent(
+          'component',
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton3',
+            {
+              defaultMessage: 'Add variable',
+            }
+          )
+        )}
       >
         <EuiFieldText
           fullWidth
@@ -376,7 +395,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Group (optional)',
           }
         )}
-        labelAppend={getAddVariableComponent('group', 'addVariablePopoverButton3')}
+        labelAppend={getAddVariableComponent(
+          'group',
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton4',
+            {
+              defaultMessage: 'Add variable',
+            }
+          )
+        )}
       >
         <EuiFieldText
           fullWidth
@@ -401,7 +428,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Source (optional)',
           }
         )}
-        labelAppend={getAddVariableComponent('source', 'addVariablePopoverButton6')}
+        labelAppend={getAddVariableComponent(
+          'source',
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton5',
+            {
+              defaultMessage: 'Add variable',
+            }
+          )
+        )}
       >
         <EuiFieldText
           fullWidth
@@ -429,7 +464,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Summary',
           }
         )}
-        labelAppend={getAddVariableComponent('summary', 'addVariablePopoverButton4')}
+        labelAppend={getAddVariableComponent(
+          'summary',
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton6',
+            {
+              defaultMessage: 'Add variable',
+            }
+          )
+        )}
       >
         <EuiFieldText
           fullWidth
@@ -456,7 +499,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Class (optional)',
           }
         )}
-        labelAppend={getAddVariableComponent('class', 'addVariablePopoverButton5')}
+        labelAppend={getAddVariableComponent(
+          'class',
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton7',
+            {
+              defaultMessage: 'Add variable',
+            }
+          )
+        )}
       >
         <EuiFieldText
           fullWidth

From 56deadce05ad70ba6750e2b34622dcd190a3974a Mon Sep 17 00:00:00 2001
From: Yuliia Naumenko <yuliia.naumenko@elastic.com>
Date: Mon, 16 Mar 2020 17:39:21 -0700
Subject: [PATCH 4/5] Fixed tests

---
 .../application/components/builtin_action_types/pagerduty.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git 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
index f7432b504b6c09..769ff26a2b6874 100644
--- 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
@@ -219,7 +219,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
       <EuiPopover
         button={
           <EuiButtonIcon
-            data-test-subj={`${buttonName}AddVariableButton`}
+            data-test-subj={`${paramsProperty}AddVariableButton`}
             onClick={() => setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, dedupKey: true })}
             iconType="indexOpen"
             aria-label={buttonName}

From ff35ccd3f4c9f362497763b400b0105b6e3964a6 Mon Sep 17 00:00:00 2001
From: Yuliia Naumenko <yuliia.naumenko@elastic.com>
Date: Mon, 16 Mar 2020 17:48:32 -0700
Subject: [PATCH 5/5] Fixed due to comments

---
 .../builtin_action_types/pagerduty.tsx        | 74 +++++++++++++++++--
 1 file changed, 66 insertions(+), 8 deletions(-)

diff --git 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
index 769ff26a2b6874..7666129e4abdc3 100644
--- 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
@@ -176,15 +176,71 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
     group,
   } = actionParams;
   const severityOptions = [
-    { value: 'info', text: 'Info' },
-    { value: 'critical', text: 'Critical' },
-    { value: 'warning', text: 'Warning' },
-    { value: 'error', text: 'Error' },
+    {
+      value: 'info',
+      text: i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.severitySelectInfoOptionLabel',
+        {
+          defaultMessage: 'Info',
+        }
+      ),
+    },
+    {
+      value: 'critical',
+      text: i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.severitySelectCriticalOptionLabel',
+        {
+          defaultMessage: 'Critical',
+        }
+      ),
+    },
+    {
+      value: 'warning',
+      text: i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.severitySelectWarningOptionLabel',
+        {
+          defaultMessage: 'Warning',
+        }
+      ),
+    },
+    {
+      value: 'error',
+      text: i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.severitySelectErrorOptionLabel',
+        {
+          defaultMessage: 'Error',
+        }
+      ),
+    },
   ];
   const eventActionOptions = [
-    { value: 'trigger', text: 'Trigger' },
-    { value: 'resolve', text: 'Resolve' },
-    { value: 'acknowledge', text: 'Acknowledge' },
+    {
+      value: 'trigger',
+      text: i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.eventSelectTriggerOptionLabel',
+        {
+          defaultMessage: 'Trigger',
+        }
+      ),
+    },
+    {
+      value: 'resolve',
+      text: i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.eventSelectResolveOptionLabel',
+        {
+          defaultMessage: 'Resolve',
+        }
+      ),
+    },
+    {
+      value: 'acknowledge',
+      text: i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.eventSelectAcknowledgeOptionLabel',
+        {
+          defaultMessage: 'Acknowledge',
+        }
+      ),
+    },
   ];
   const [isVariablesPopoverOpen, setIsVariablesPopoverOpen] = useState<Record<string, boolean>>({
     dedupKey: false,
@@ -220,7 +276,9 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
         button={
           <EuiButtonIcon
             data-test-subj={`${paramsProperty}AddVariableButton`}
-            onClick={() => setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, dedupKey: true })}
+            onClick={() =>
+              setIsVariablesPopoverOpen({ ...isVariablesPopoverOpen, [paramsProperty]: true })
+            }
             iconType="indexOpen"
             aria-label={buttonName}
           />