From bc1fd6ceb867e2f5026eaf4ea1054c46689f4050 Mon Sep 17 00:00:00 2001 From: Gidi Meir Morris Date: Mon, 30 Nov 2020 17:16:04 +0000 Subject: [PATCH] [Alerting] fixes buggy default message behaviour (#84202) This PR addresses some weird UX we've identified with default values in Action Params components and their inferred defaults when placed inside of an Alerts flyout. Key changes: 1. Typing of these components has been corrected to reflect that we expect these parameters to only be _partial_, as the form is used to set these values (for example, the `message` field of the Server Log action, might or might not be set, so it should be nullable, but in the typing we treated it as the _final_ valid state, which is message not being nullable). 2. When a default message is set by the params components, the are tracked against the value of the default, which means that if the default changes, then so will the value in the field. Custom values provided by the user will not be overridden when the default changes. This has to be handled by the component itself at the moment (hopefully in the future we can make this a concern of the flyout and not each component). 3. The concept of the "Recovered" action group has been removed from these components - that's an Alerting concern, not actions, and shouldn't appear in the action components' code. --- .../email/email_params.test.tsx | 93 +++++++++++++++++ .../email/email_params.tsx | 17 ++-- .../jira/search_issues.tsx | 2 +- .../jira/use_get_fields_by_issue_type.tsx | 2 +- .../jira/use_get_single_issue.tsx | 2 +- .../server_log/server_log_params.test.tsx | 99 +++++++++++++++++-- .../server_log/server_log_params.tsx | 22 ++--- .../slack/slack_params.tsx | 19 ++-- .../triggers_actions_ui/public/types.ts | 2 +- 9 files changed, 218 insertions(+), 40 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.test.tsx index 3cd54b58bf29ac..6ead65d958bd50 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.test.tsx @@ -33,4 +33,97 @@ describe('EmailParamsFields renders', () => { expect(wrapper.find('[data-test-subj="subjectInput"]').length > 0).toBeTruthy(); expect(wrapper.find('[data-test-subj="messageTextArea"]').length > 0).toBeTruthy(); }); + + test('message param field is rendered with default value if not set', () => { + const actionParams = { + cc: [], + bcc: [], + to: ['test@test.com'], + subject: 'test', + }; + + const editAction = jest.fn(); + mountWithIntl( + + ); + + expect(editAction).toHaveBeenCalledWith('message', 'Some default message', 0); + }); + + test('when the default message changes, so is the underlying message if it was set by the previous default', () => { + const actionParams = { + cc: [], + bcc: [], + to: ['test@test.com'], + subject: 'test', + }; + + const editAction = jest.fn(); + const wrapper = mountWithIntl( + + ); + + expect(editAction).toHaveBeenCalledWith('message', 'Some default message', 0); + + wrapper.setProps({ + defaultMessage: 'Some different default message', + }); + + expect(editAction).toHaveBeenCalledWith('message', 'Some different default message', 0); + }); + + test('when the default message changes, it doesnt change the underlying message if it wasnt set by a previous default', () => { + const actionParams = { + cc: [], + bcc: [], + to: ['test@test.com'], + subject: 'test', + }; + + const editAction = jest.fn(); + const wrapper = mountWithIntl( + + ); + + expect(editAction).toHaveBeenCalledWith('message', 'Some default message', 0); + + // simulate value being updated + const valueToSimulate = 'some new value'; + wrapper + .find('[data-test-subj="messageTextArea"]') + .first() + .simulate('change', { target: { value: valueToSimulate } }); + expect(editAction).toHaveBeenCalledWith('message', valueToSimulate, 0); + wrapper.setProps({ + actionParams: { + ...actionParams, + message: valueToSimulate, + }, + }); + + // simulate default changing + wrapper.setProps({ + defaultMessage: 'Some different default message', + }); + + expect(editAction).not.toHaveBeenCalledWith('message', 'Some different default message', 0); + }); }); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx index eacdf20747fdcf..1030ce34d2569c 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email/email_params.tsx @@ -11,7 +11,6 @@ import { ActionParamsProps } from '../../../../types'; import { EmailActionParams } from '../types'; import { TextFieldWithMessageVariables } from '../../text_field_with_message_variables'; import { TextAreaWithMessageVariables } from '../../text_area_with_message_variables'; -import { resolvedActionGroupMessage } from '../../../constants'; export const EmailParamsFields = ({ actionParams, @@ -28,17 +27,19 @@ export const EmailParamsFields = ({ const [addCC, setAddCC] = useState(false); const [addBCC, setAddBCC] = useState(false); + const [[isUsingDefault, defaultMessageUsed], setDefaultMessageUsage] = useState< + [boolean, string | undefined] + >([false, defaultMessage]); useEffect(() => { - if (defaultMessage === resolvedActionGroupMessage) { - editAction('message', defaultMessage, index); - } else if ( - (!message || message === resolvedActionGroupMessage) && - defaultMessage && - defaultMessage.length > 0 + if ( + !actionParams?.message || + (isUsingDefault && + actionParams?.message === defaultMessageUsed && + defaultMessageUsed !== defaultMessage) ) { + setDefaultMessageUsage([true, defaultMessage]); editAction('message', defaultMessage, index); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultMessage]); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/search_issues.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/search_issues.tsx index fff606982677aa..8a98a9eb7bb75e 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/search_issues.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/search_issues.tsx @@ -14,7 +14,7 @@ import { useGetSingleIssue } from './use_get_single_issue'; import * as i18n from './translations'; interface Props { - selectedValue: string | null; + selectedValue?: string | null; http: HttpSetup; toastNotifications: Pick< ToastsApi, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_fields_by_issue_type.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_fields_by_issue_type.tsx index 8685ee1e615b05..6129f42923e45a 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_fields_by_issue_type.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_fields_by_issue_type.tsx @@ -23,7 +23,7 @@ interface Props { ToastsApi, 'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError' >; - issueType: string; + issueType: string | undefined; actionConnector?: ActionConnector; } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_single_issue.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_single_issue.tsx index c0d2eae14beadd..85fc94733e8a82 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_single_issue.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/use_get_single_issue.tsx @@ -22,7 +22,7 @@ interface Props { ToastsApi, 'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError' >; - id: string | null; + id?: string | null; actionConnector?: ActionConnector; } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.test.tsx index 0552a126ca66fb..86dd304bf6b12b 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.test.tsx @@ -9,8 +9,8 @@ import { ServerLogLevelOptions } from '.././types'; import ServerLogParamsFields from './server_log_params'; describe('ServerLogParamsFields renders', () => { - const editAction = jest.fn(); test('all params fields is rendered', () => { + const editAction = jest.fn(); const actionParams = { level: ServerLogLevelOptions.TRACE, message: 'test', @@ -35,20 +35,103 @@ describe('ServerLogParamsFields renders', () => { test('level param field is rendered with default value if not selected', () => { const actionParams = { message: 'test message', - level: ServerLogLevelOptions.INFO, }; + const editAction = jest.fn(); + + mountWithIntl( + + ); + + expect(editAction).toHaveBeenCalledWith('level', 'info', 0); + }); + + test('message param field is rendered with default value if not set', () => { + const actionParams = { + level: ServerLogLevelOptions.TRACE, + }; + + const editAction = jest.fn(); + + mountWithIntl( + + ); + + expect(editAction).toHaveBeenCalledWith('message', 'Some default message', 0); + }); + + test('when the default message changes, so is the underlying message if it was set by the previous default', () => { + const actionParams = { + level: ServerLogLevelOptions.TRACE, + }; + + const editAction = jest.fn(); const wrapper = mountWithIntl( {}} + editAction={editAction} index={0} /> ); - expect(wrapper.find('[data-test-subj="loggingLevelSelect"]').length > 0).toBeTruthy(); - expect( - wrapper.find('[data-test-subj="loggingLevelSelect"]').first().prop('value') - ).toStrictEqual('info'); - expect(wrapper.find('[data-test-subj="messageTextArea"]').length > 0).toBeTruthy(); + + expect(editAction).toHaveBeenCalledWith('message', 'Some default message', 0); + + wrapper.setProps({ + defaultMessage: 'Some different default message', + }); + + expect(editAction).toHaveBeenCalledWith('message', 'Some different default message', 0); + }); + + test('when the default message changes, it doesnt change the underlying message if it wasnt set by a previous default', () => { + const actionParams = { + level: ServerLogLevelOptions.TRACE, + }; + + const editAction = jest.fn(); + const wrapper = mountWithIntl( + + ); + + expect(editAction).toHaveBeenCalledWith('message', 'Some default message', 0); + + // simulate value being updated + const valueToSimulate = 'some new value'; + wrapper + .find('[data-test-subj="messageTextArea"]') + .first() + .simulate('change', { target: { value: valueToSimulate } }); + expect(editAction).toHaveBeenCalledWith('message', valueToSimulate, 0); + wrapper.setProps({ + actionParams: { + ...actionParams, + message: valueToSimulate, + }, + }); + + // simulate default changing + wrapper.setProps({ + defaultMessage: 'Some different default message', + }); + + expect(editAction).not.toHaveBeenCalledWith('message', 'Some different default message', 0); }); }); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx index e8c427371c4a54..ce426c72b64b44 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/server_log/server_log_params.tsx @@ -3,13 +3,12 @@ * 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, useEffect } from 'react'; +import React, { Fragment, useEffect, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiSelect, EuiFormRow } from '@elastic/eui'; import { ActionParamsProps } from '../../../../types'; import { ServerLogActionParams } from '.././types'; import { TextAreaWithMessageVariables } from '../../text_area_with_message_variables'; -import { resolvedActionGroupMessage } from '../../../constants'; export const ServerLogParamsFields: React.FunctionComponent< ActionParamsProps @@ -23,25 +22,26 @@ export const ServerLogParamsFields: React.FunctionComponent< { value: 'error', text: 'Error' }, { value: 'fatal', text: 'Fatal' }, ]; - useEffect(() => { - if (!actionParams?.level) { + if (!actionParams.level) { editAction('level', 'info', index); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + const [[isUsingDefault, defaultMessageUsed], setDefaultMessageUsage] = useState< + [boolean, string | undefined] + >([false, defaultMessage]); useEffect(() => { - if (defaultMessage === resolvedActionGroupMessage) { - editAction('message', defaultMessage, index); - } else if ( - (!message || message === resolvedActionGroupMessage) && - defaultMessage && - defaultMessage.length > 0 + if ( + !actionParams?.message || + (isUsingDefault && + actionParams?.message === defaultMessageUsed && + defaultMessageUsed !== defaultMessage) ) { + setDefaultMessageUsage([true, defaultMessage]); editAction('message', defaultMessage, index); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultMessage]); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.tsx index d1498567218d3a..40818c327af60f 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/slack/slack_params.tsx @@ -3,12 +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, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { ActionParamsProps } from '../../../../types'; import { SlackActionParams } from '../types'; import { TextAreaWithMessageVariables } from '../../text_area_with_message_variables'; -import { resolvedActionGroupMessage } from '../../../constants'; const SlackParamsFields: React.FunctionComponent> = ({ actionParams, @@ -19,17 +18,19 @@ const SlackParamsFields: React.FunctionComponent { const { message } = actionParams; + const [[isUsingDefault, defaultMessageUsed], setDefaultMessageUsage] = useState< + [boolean, string | undefined] + >([false, defaultMessage]); useEffect(() => { - if (defaultMessage === resolvedActionGroupMessage) { - editAction('message', defaultMessage, index); - } else if ( - (!message || message === resolvedActionGroupMessage) && - defaultMessage && - defaultMessage.length > 0 + if ( + !actionParams?.message || + (isUsingDefault && + actionParams?.message === defaultMessageUsed && + defaultMessageUsed !== defaultMessage) ) { + setDefaultMessageUsage([true, defaultMessage]); editAction('message', defaultMessage, index); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultMessage]); diff --git a/x-pack/plugins/triggers_actions_ui/public/types.ts b/x-pack/plugins/triggers_actions_ui/public/types.ts index be8b7b9757e9e7..a4eac1ab1da216 100644 --- a/x-pack/plugins/triggers_actions_ui/public/types.ts +++ b/x-pack/plugins/triggers_actions_ui/public/types.ts @@ -48,7 +48,7 @@ export interface ActionConnectorFieldsProps { } export interface ActionParamsProps { - actionParams: TParams; + actionParams: Partial; index: number; editAction: (key: string, value: AlertActionParam, index: number) => void; errors: IErrorObject;