[7.x] Fixed adding an extra space character on selecting alert variable in action text fields (#70028)

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: '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();
   });
 });

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