Skip to content

Commit

Permalink
Fixed adding an extra space character on selecting alert variable in …
Browse files Browse the repository at this point in the history
…action text fields (elastic#70028)

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

* Made components for variables to be able to insert the variable by the cursor position

* cleanup

* Added variables support for all components

* update on handle selections for text

* Fixed functional tests
  • Loading branch information
YulNaumenko committed Jul 5, 2020
1 parent 169d06c commit 0a2424d
Show file tree
Hide file tree
Showing 17 changed files with 397 additions and 419 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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}
/>
);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
Loading

0 comments on commit 0a2424d

Please sign in to comment.