Fixed adding an extra space character on selecting alert variable in action text fields

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)}

x-pack/plugins/triggers_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: '[email protected]' }]);
- 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();
  });
 });

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx

@@ -5,11 +5,12 @@
  */
 import React, { Fragment, useState, useEffect } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiFieldText, EuiComboBox, EuiTextArea, EuiButtonEmpty, EuiFormRow } from '@elastic/eui';
+import { EuiComboBox, EuiButtonEmpty, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ActionParamsProps } from '../../../../types';
 import { EmailActionParams } from '../types';
-import { AddMessageVariables } from '../../add_message_variables';
+import { TextFieldWithMessageVariables } from '../../text_field_with_message_variables';
+import { TextAreaWithMessageVariables } from '../../text_area_with_message_variables';
 
 export const EmailParamsFields = ({
  actionParams,
@@ -33,14 +34,6 @@ export const EmailParamsFields = ({
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
- const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
- editAction(
- paramsProperty,
- ((actionParams as any)[paramsProperty] ?? '').concat(` {{${variable}}}`),
- index
- );
- };
-
  return (
  <Fragment>
  <EuiFormRow
@@ -197,68 +190,30 @@ export const EmailParamsFields = ({
  defaultMessage: 'Subject',
  }
  )}
- labelAppend={
- <AddMessageVariables
- messageVariables={messageVariables}
- onSelectEventHandler={(variable: string) =>
- onSelectMessageVariable('subject', variable)
- }
- paramsProperty="subject"
- />
- }
  >
- <EuiFieldText
- fullWidth
- isInvalid={errors.subject.length > 0 && subject !== undefined}
- name="subject"
- data-test-subj="emailSubjectInput"
- value={subject || ''}
- onChange={(e) => {
- editAction('subject', e.target.value, index);
- }}
- onBlur={() => {
- if (!subject) {
- editAction('subject', '', index);
- }
- }}
+ <TextFieldWithMessageVariables
+ index={index}
+ editAction={editAction}
+ messageVariables={messageVariables}
+ paramsProperty={'subject'}
+ inputTargetValue={subject}
+ errors={errors.subject as string[]}
  />
  </EuiFormRow>
- <EuiFormRow
- 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.sections.builtinActionTypes.emailAction.messageTextAreaFieldLabel',
  {
  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="emailMessageInput"
- onChange={(e) => {
- editAction('message', e.target.value, index);
- }}
- onBlur={() => {
- if (!message) {
- editAction('message', '', index);
- }
- }}
- />
- </EuiFormRow>
+ errors={errors.message as string[]}
+ />
  </Fragment>
  );
 };

x-pack/plugins/triggers_actions_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();

x-pack/plugins/triggers_actions_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 ?? '').concat(` {{${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}
+ />
  );
 };
 

x-pack/plugins/triggers_actions_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();
  });
 });