Added variables support for all components

elastic · Jul 2, 2020 · 9d1ac4a · 9d1ac4a
1 parent 46946c0
commit 9d1ac4a
Show file tree

Hide file tree

Showing 16 changed files with 215 additions and 185 deletions.
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
@@ -47,6 +47,7 @@ export const AddMessageVariables: React.FunctionComponent<Props> = ({
     <EuiPopover
       button={
         <EuiButtonIcon
+          id={`${paramsProperty}AddVariableButton`}
           data-test-subj={`${paramsProperty}AddVariableButton`}
           title={addVariableButtonTitle}
           onClick={() => setIsVariablesPopoverOpen(true)}

diff --git a/...actions_ui/public/application/components/builtin_action_types/email/email_params.test.tsx b/...actions_ui/public/application/components/builtin_action_types/email/email_params.test.tsx
@@ -28,7 +28,7 @@ describe('EmailParamsFields renders', () => {
     expect(
       wrapper.find('[data-test-subj="toEmailAddressInput"]').first().prop('selectedOptions')
     ).toStrictEqual([{ label: 'test@test.com' }]);
-    expect(wrapper.find('[data-test-subj="emailSubjectInput"]').length > 0).toBeTruthy();
-    expect(wrapper.find('[data-test-subj="emailMessageInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="subjectInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="messageTextArea"]').length > 0).toBeTruthy();
   });
 });
diff --git a/...gers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx b/...gers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx
@@ -196,21 +196,23 @@ export const EmailParamsFields = ({
           editAction={editAction}
           messageVariables={messageVariables}
           paramsProperty={'subject'}
-          inputTargetValue={subject || ''}
+          inputTargetValue={subject}
+          errors={errors.subject as string[]}
         />
       </EuiFormRow>
       <TextAreaWithMessageVariables
         index={index}
         editAction={editAction}
         messageVariables={messageVariables}
         paramsProperty={'message'}
-        inputTargetValue={message || ''}
+        inputTargetValue={message}
         label={i18n.translate(
           'xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.messageTextAreaFieldLabel',
           {
             defaultMessage: 'Message',
           }
         )}
+        errors={errors.message as string[]}
       />
     </Fragment>
   );

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
@@ -20,7 +20,7 @@ describe('IndexParamsFields renders', () => {
         index={0}
       />
     );
-    expect(wrapper.find('[data-test-subj="actionIndexDoc"]').first().prop('value')).toBe(`{
+    expect(wrapper.find('[data-test-subj="documentsJsonEditor"]').first().prop('value')).toBe(`{
   "test": 123
 }`);
     expect(wrapper.find('[data-test-subj="documentsAddVariableButton"]').length > 0).toBeTruthy();

diff --git a/...ctions_ui/public/application/components/builtin_action_types/es_index/es_index_params.tsx b/...ctions_ui/public/application/components/builtin_action_types/es_index/es_index_params.tsx
@@ -3,13 +3,11 @@
  * 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 { EuiFormRow, EuiCodeEditor } from '@elastic/eui';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { useXJsonMode } from '../../../../../../../../src/plugins/es_ui_shared/static/ace_x_json/hooks';
 import { ActionParamsProps } from '../../../../types';
 import { IndexActionParams } from '.././types';
-import { AddMessageVariables } from '../../add_message_variables';
+import { JsonEditorWithMessageVariables } from '../../json_editor_with_message_variables';
 
 export const IndexParamsFields = ({
   actionParams,
@@ -18,62 +16,36 @@ export const IndexParamsFields = ({
   messageVariables,
 }: ActionParamsProps<IndexActionParams>) => {
   const { documents } = actionParams;
-  const { xJsonMode, convertToJson, setXJson, xJson } = useXJsonMode(
-    documents && documents.length > 0 ? documents[0] : null
-  );
-  const onSelectMessageVariable = (variable: string) => {
-    const value = !xJson ? `{{${variable}}}` : ` {{${variable}}}`;
-    setXJson(value);
-    // Keep the documents in sync with the editor content
-    onDocumentsChange(convertToJson(value));
-  };
 
-  function onDocumentsChange(updatedDocuments: string) {
+  const onDocumentsChange = (updatedDocuments: string) => {
     try {
       const documentsJSON = JSON.parse(updatedDocuments);
       editAction('documents', [documentsJSON], index);
       // eslint-disable-next-line no-empty
     } catch (e) {}
-  }
+  };
+
   return (
-    <Fragment>
-      <EuiFormRow
-        fullWidth
-        label={i18n.translate(
-          'xpack.triggersActionsUI.components.builtinActionTypes.indexAction.documentsFieldLabel',
-          {
-            defaultMessage: 'Document to index',
-          }
-        )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) => onSelectMessageVariable(variable)}
-            paramsProperty="documents"
-          />
+    <JsonEditorWithMessageVariables
+      messageVariables={messageVariables}
+      paramsProperty={'documents'}
+      inputTargetValue={
+        documents && documents.length > 0 ? ((documents[0] as unknown) as string) : ''
+      }
+      label={i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.indexAction.documentsFieldLabel',
+        {
+          defaultMessage: 'Document to index',
+        }
+      )}
+      aria-label={i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.indexAction.jsonDocAriaLabel',
+        {
+          defaultMessage: 'Code editor',
         }
-      >
-        <EuiCodeEditor
-          mode={xJsonMode}
-          width="100%"
-          height="200px"
-          theme="github"
-          data-test-subj="actionIndexDoc"
-          aria-label={i18n.translate(
-            'xpack.triggersActionsUI.components.builtinActionTypes.indexAction.jsonDocAriaLabel',
-            {
-              defaultMessage: 'Code editor',
-            }
-          )}
-          value={xJson}
-          onChange={(xjson: string) => {
-            setXJson(xjson);
-            // Keep the documents in sync with the editor content
-            onDocumentsChange(convertToJson(xjson));
-          }}
-        />
-      </EuiFormRow>
-    </Fragment>
+      )}
+      onDocumentsChange={onDocumentsChange}
+    />
   );
 };
 

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
@@ -39,7 +39,7 @@ describe('PagerDutyParamsFields renders', () => {
     expect(wrapper.find('[data-test-subj="componentInput"]').length > 0).toBeTruthy();
     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="summaryInput"]').length > 0).toBeTruthy();
     expect(wrapper.find('[data-test-subj="dedupKeyAddVariableButton"]').length > 0).toBeTruthy();
   });
 });
diff --git a/...ions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx b/...ions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx
@@ -156,7 +156,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
               editAction={editAction}
               messageVariables={messageVariables}
               paramsProperty={'dedupKey'}
-              inputTargetValue={dedupKey || ''}
+              inputTargetValue={dedupKey}
             />
           </EuiFormRow>
         </EuiFlexItem>
@@ -177,7 +177,8 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
               editAction={editAction}
               messageVariables={messageVariables}
               paramsProperty={'timestamp'}
-              inputTargetValue={timestamp || ''}
+              inputTargetValue={timestamp}
+              errors={errors.timestamp as string[]}
             />
           </EuiFormRow>
         </EuiFlexItem>
@@ -196,7 +197,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
           editAction={editAction}
           messageVariables={messageVariables}
           paramsProperty={'component'}
-          inputTargetValue={component || ''}
+          inputTargetValue={component}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -213,7 +214,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
           editAction={editAction}
           messageVariables={messageVariables}
           paramsProperty={'group'}
-          inputTargetValue={group || ''}
+          inputTargetValue={group}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -230,7 +231,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
           editAction={editAction}
           messageVariables={messageVariables}
           paramsProperty={'source'}
-          inputTargetValue={source || ''}
+          inputTargetValue={source}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -250,7 +251,8 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
           editAction={editAction}
           messageVariables={messageVariables}
           paramsProperty={'summary'}
-          inputTargetValue={summary || ''}
+          inputTargetValue={summary}
+          errors={errors.summary as string[]}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -268,7 +270,7 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
           editAction={editAction}
           messageVariables={messageVariables}
           paramsProperty={'class'}
-          inputTargetValue={actionParams.class || ''}
+          inputTargetValue={actionParams.class}
         />
       </EuiFormRow>
     </Fragment>

diff --git a/.../public/application/components/builtin_action_types/server_log/server_log_params.test.tsx b/.../public/application/components/builtin_action_types/server_log/server_log_params.test.tsx
@@ -27,7 +27,7 @@ describe('ServerLogParamsFields renders', () => {
     expect(
       wrapper.find('[data-test-subj="loggingLevelSelect"]').first().prop('value')
     ).toStrictEqual('trace');
-    expect(wrapper.find('[data-test-subj="loggingMessageInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="messageTextArea"]').length > 0).toBeTruthy();
   });
 
   test('level param field is rendered with default value if not selected', () => {
@@ -47,6 +47,6 @@ describe('ServerLogParamsFields renders', () => {
     expect(
       wrapper.find('[data-test-subj="loggingLevelSelect"]').first().prop('value')
     ).toStrictEqual('info');
-    expect(wrapper.find('[data-test-subj="loggingMessageInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="messageTextArea"]').length > 0).toBeTruthy();
   });
 });
diff --git a/...ns_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx b/...ns_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx
@@ -5,10 +5,10 @@
  */
 import React, { Fragment, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiSelect, EuiTextArea, EuiFormRow } from '@elastic/eui';
+import { EuiSelect, EuiFormRow } from '@elastic/eui';
 import { ActionParamsProps } from '../../../../types';
 import { ServerLogActionParams } from '.././types';
-import { AddMessageVariables } from '../../add_message_variables';
+import { TextAreaWithMessageVariables } from '../../text_area_with_message_variables';
 
 export const ServerLogParamsFields: React.FunctionComponent<ActionParamsProps<
   ServerLogActionParams
@@ -31,10 +31,6 @@ export const ServerLogParamsFields: React.FunctionComponent<ActionParamsProps<
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
-    editAction(paramsProperty, !message ? `{{${variable}}}` : ` {{${variable}}}`, index);
-  };
-
   return (
     <Fragment>
       <EuiFormRow
@@ -59,43 +55,20 @@ export const ServerLogParamsFields: React.FunctionComponent<ActionParamsProps<
           }}
         />
       </EuiFormRow>
-      <EuiFormRow
-        id="loggingMessage"
-        fullWidth
-        error={errors.message}
-        isInvalid={errors.message.length > 0 && message !== undefined}
+      <TextAreaWithMessageVariables
+        index={index}
+        editAction={editAction}
+        messageVariables={messageVariables}
+        paramsProperty={'message'}
+        inputTargetValue={message}
         label={i18n.translate(
           'xpack.triggersActionsUI.components.builtinActionTypes.serverLogAction.logMessageFieldLabel',
           {
             defaultMessage: 'Message',
           }
         )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) =>
-              onSelectMessageVariable('message', variable)
-            }
-            paramsProperty="message"
-          />
-        }
-      >
-        <EuiTextArea
-          fullWidth
-          isInvalid={errors.message.length > 0 && message !== undefined}
-          value={message || ''}
-          name="message"
-          data-test-subj="loggingMessageInput"
-          onChange={(e) => {
-            editAction('message', e.target.value, index);
-          }}
-          onBlur={() => {
-            if (!message) {
-              editAction('message', '', index);
-            }
-          }}
-        />
-      </EuiFormRow>
+        errors={errors.message as string[]}
+      />
     </Fragment>
   );
 };

diff --git a/...actions_ui/public/application/components/builtin_action_types/slack/slack_params.test.tsx b/...actions_ui/public/application/components/builtin_action_types/slack/slack_params.test.tsx
@@ -20,9 +20,9 @@ describe('SlackParamsFields renders', () => {
         index={0}
       />
     );
-    expect(wrapper.find('[data-test-subj="slackMessageTextArea"]').length > 0).toBeTruthy();
-    expect(
-      wrapper.find('[data-test-subj="slackMessageTextArea"]').first().prop('value')
-    ).toStrictEqual('test message');
+    expect(wrapper.find('[data-test-subj="messageTextArea"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="messageTextArea"]').first().prop('value')).toStrictEqual(
+      'test message'
+    );
   });
 });
diff --git a/...gers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.tsx b/...gers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { useEffect } from 'react';
-import { EuiTextArea, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ActionParamsProps } from '../../../../types';
 import { SlackActionParams } from '../types';
@@ -27,21 +26,20 @@ const SlackParamsFields: React.FunctionComponent<ActionParamsProps<SlackActionPa
   }, []);
 
   return (
-    <>
-      <TextAreaWithMessageVariables
-        index={index}
-        editAction={editAction}
-        messageVariables={messageVariables}
-        paramsProperty={'message'}
-        inputTargetValue={message || ''}
-        label={i18n.translate(
-          'xpack.triggersActionsUI.components.builtinActionTypes.slackAction.messageTextAreaFieldLabel',
-          {
-            defaultMessage: 'Message',
-          }
-        )}
-      />
-    </>
+    <TextAreaWithMessageVariables
+      index={index}
+      editAction={editAction}
+      messageVariables={messageVariables}
+      paramsProperty={'message'}
+      inputTargetValue={message}
+      label={i18n.translate(
+        'xpack.triggersActionsUI.components.builtinActionTypes.slackAction.messageTextAreaFieldLabel',
+        {
+          defaultMessage: 'Message',
+        }
+      )}
+      errors={errors.message as string[]}
+    />
   );
 };
 

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
@@ -20,10 +20,10 @@ describe('WebhookParamsFields renders', () => {
         index={0}
       />
     );
-    expect(wrapper.find('[data-test-subj="webhookBodyEditor"]').length > 0).toBeTruthy();
-    expect(
-      wrapper.find('[data-test-subj="webhookBodyEditor"]').first().prop('value')
-    ).toStrictEqual('test message');
+    expect(wrapper.find('[data-test-subj="bodyJsonEditor"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="bodyJsonEditor"]').first().prop('value')).toStrictEqual(
+      'test message'
+    );
     expect(wrapper.find('[data-test-subj="bodyAddVariableButton"]').length > 0).toBeTruthy();
   });
 });