Skip rendering empty add action variables button as disabled (#96342) (…

…#96541) * Skip rendering empty add action variables button * Fix jest tests Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Mike Côté <[email protected]>
elastic · Apr 8, 2021 · ed3d8b5 · ed3d8b5
1 parent 8589455
commit ed3d8b5
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 2 deletions.
diff --git a/.../plugins/triggers_actions_ui/public/application/components/add_message_variables.test.tsx b/.../plugins/triggers_actions_ui/public/application/components/add_message_variables.test.tsx
@@ -117,4 +117,16 @@ describe('AddMessageVariables', () => {
       wrapper.find('button[data-test-subj="variableMenuButton-deprecatedVar"]').getDOMNode()
     ).toBeDisabled();
   });
+
+  test(`it does't render when no variables exist`, () => {
+    const wrapper = mountWithIntl(
+      <AddMessageVariables
+        messageVariables={[]}
+        paramsProperty="foo"
+        onSelectEventHandler={jest.fn()}
+      />
+    );
+
+    expect(wrapper.find('[data-test-subj="fooAddVariableButton"]')).toHaveLength(0);
+  });
 });
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
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useState, Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
   EuiPopover,
@@ -61,13 +61,16 @@ export const AddMessageVariables: React.FunctionComponent<Props> = ({
     }
   );
 
+  if ((messageVariables?.length ?? 0) === 0) {
+    return <Fragment />;
+  }
+
   return (
     <EuiPopover
       button={
         <EuiButtonIcon
           id={`${paramsProperty}AddVariableButton`}
           data-test-subj={`${paramsProperty}AddVariableButton`}
-          isDisabled={(messageVariables?.length ?? 0) === 0}
           title={addVariableButtonTitle}
           onClick={() => setIsVariablesPopoverOpen(true)}
           iconType="indexOpen"

diff --git a/...s_ui/public/application/components/builtin_action_types/es_index/es_index_params.test.tsx b/...s_ui/public/application/components/builtin_action_types/es_index/es_index_params.test.tsx
@@ -22,6 +22,13 @@ describe('IndexParamsFields renders', () => {
         errors={{ index: [] }}
         editAction={() => {}}
         index={0}
+        messageVariables={[
+          {
+            name: 'myVar',
+            description: 'My variable description',
+            useWithTripleBracesInTemplates: true,
+          },
+        ]}
       />
     );
     expect(wrapper.find('[data-test-subj="documentsJsonEditor"]').first().prop('value')).toBe(`{

diff --git a/...ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.test.tsx b/...ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.test.tsx
@@ -30,6 +30,13 @@ describe('PagerDutyParamsFields renders', () => {
         errors={{ summary: [], timestamp: [], dedupKey: [] }}
         editAction={() => {}}
         index={0}
+        messageVariables={[
+          {
+            name: 'myVar',
+            description: 'My variable description',
+            useWithTripleBracesInTemplates: true,
+          },
+        ]}
       />
     );
     expect(wrapper.find('[data-test-subj="severitySelect"]').length > 0).toBeTruthy();

diff --git a/...ons_ui/public/application/components/builtin_action_types/webhook/webhook_params.test.tsx b/...ons_ui/public/application/components/builtin_action_types/webhook/webhook_params.test.tsx
@@ -21,6 +21,13 @@ describe('WebhookParamsFields renders', () => {
         errors={{ body: [] }}
         editAction={() => {}}
         index={0}
+        messageVariables={[
+          {
+            name: 'myVar',
+            description: 'My variable description',
+            useWithTripleBracesInTemplates: true,
+          },
+        ]}
       />
     );
     expect(wrapper.find('[data-test-subj="bodyJsonEditor"]').length > 0).toBeTruthy();