From 90f3778bc69fa5f7af18294c5ecb98e2e842015e Mon Sep 17 00:00:00 2001
From: Yuliia Naumenko <jo.naumenko@gmail.com>
Date: Mon, 16 Mar 2020 19:39:21 -0700
Subject: [PATCH] Added variables button for text fields in Pagerduty
 component. (#60189)

* Added variables button for text fields in Pagerduty component. Fixed bugs mentioned in https://github.com/elastic/kibana/issues/60067

* Fixed due to comments

* fixed language check issue

* Fixed tests

* Fixed due to comments
---
 .../builtin_action_types/pagerduty.test.tsx   |   1 +
 .../builtin_action_types/pagerduty.tsx        | 208 ++++++++++++++++--
 2 files changed, 193 insertions(+), 16 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..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
@@ -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,16 +176,124 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
     group,
   } = actionParams;
   const severityOptions = [
-    { value: 'critical', text: 'Critical' },
-    { value: 'info', text: 'Info' },
-    { 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,
+    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 getAddVariableComponent = (paramsProperty: string, buttonName: string) => {
+    return (
+      <EuiPopover
+        button={
+          <EuiButtonIcon
+            data-test-subj={`${paramsProperty}AddVariableButton`}
+            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>
+    );
+  };
   return (
     <Fragment>
       <EuiFlexGroup>
@@ -190,7 +303,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             label={i18n.translate(
               'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.severitySelectFieldLabel',
               {
-                defaultMessage: 'Severity (optional)',
+                defaultMessage: 'Severity',
               }
             )}
           >
@@ -211,7 +324,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 +350,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 defaultMessage: 'DedupKey (optional)',
               }
             )}
+            labelAppend={getAddVariableComponent(
+              'dedupKey',
+              i18n.translate(
+                'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton1',
+                {
+                  defaultMessage: 'Add variable',
+                }
+              )
+            )}
           >
             <EuiFieldText
               fullWidth
@@ -247,7 +369,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 editAction('dedupKey', e.target.value, index);
               }}
               onBlur={() => {
-                if (!index) {
+                if (!dedupKey) {
                   editAction('dedupKey', '', index);
                 }
               }}
@@ -263,6 +385,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 defaultMessage: 'Timestamp (optional)',
               }
             )}
+            labelAppend={getAddVariableComponent(
+              'timestamp',
+              i18n.translate(
+                'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton2',
+                {
+                  defaultMessage: 'Add variable',
+                }
+              )
+            )}
           >
             <EuiFieldText
               fullWidth
@@ -273,7 +404,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
                 editAction('timestamp', e.target.value, index);
               }}
               onBlur={() => {
-                if (!index) {
+                if (!timestamp) {
                   editAction('timestamp', '', index);
                 }
               }}
@@ -289,6 +420,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Component (optional)',
           }
         )}
+        labelAppend={getAddVariableComponent(
+          'component',
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton3',
+            {
+              defaultMessage: 'Add variable',
+            }
+          )
+        )}
       >
         <EuiFieldText
           fullWidth
@@ -299,7 +439,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             editAction('component', e.target.value, index);
           }}
           onBlur={() => {
-            if (!index) {
+            if (!component) {
               editAction('component', '', index);
             }
           }}
@@ -313,6 +453,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Group (optional)',
           }
         )}
+        labelAppend={getAddVariableComponent(
+          'group',
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton4',
+            {
+              defaultMessage: 'Add variable',
+            }
+          )
+        )}
       >
         <EuiFieldText
           fullWidth
@@ -323,7 +472,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             editAction('group', e.target.value, index);
           }}
           onBlur={() => {
-            if (!index) {
+            if (!group) {
               editAction('group', '', index);
             }
           }}
@@ -337,6 +486,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Source (optional)',
           }
         )}
+        labelAppend={getAddVariableComponent(
+          'source',
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton5',
+            {
+              defaultMessage: 'Add variable',
+            }
+          )
+        )}
       >
         <EuiFieldText
           fullWidth
@@ -347,7 +505,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             editAction('source', e.target.value, index);
           }}
           onBlur={() => {
-            if (!index) {
+            if (!source) {
               editAction('source', '', index);
             }
           }}
@@ -364,6 +522,15 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
             defaultMessage: 'Summary',
           }
         )}
+        labelAppend={getAddVariableComponent(
+          'summary',
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton6',
+            {
+              defaultMessage: 'Add variable',
+            }
+          )
+        )}
       >
         <EuiFieldText
           fullWidth
@@ -387,9 +554,18 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
         label={i18n.translate(
           'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.classFieldLabel',
           {
-            defaultMessage: 'Class',
+            defaultMessage: 'Class (optional)',
           }
         )}
+        labelAppend={getAddVariableComponent(
+          'class',
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.addVariablePopoverButton7',
+            {
+              defaultMessage: 'Add variable',
+            }
+          )
+        )}
       >
         <EuiFieldText
           fullWidth