From ff3d8a6a485075d4ec17c9b8c487b2a2e1de8653 Mon Sep 17 00:00:00 2001 From: Yuliia Naumenko Date: Thu, 30 Apr 2020 09:37:36 -0700 Subject: [PATCH 1/3] Fixed `AddAlert` flyout does not immediately update state to reflect new props --- .../sections/alert_form/alert_edit.tsx | 7 ++- .../apps/triggers_actions_ui/details.ts | 47 +++++++++++++++++++ 2 files changed, 53 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx index 4255eca83be47..f943e7620b815 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx @@ -3,7 +3,7 @@ * 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, useCallback, useReducer, useState } from 'react'; +import React, { Fragment, useCallback, useReducer, useState, useEffect } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiTitle, @@ -43,6 +43,9 @@ export const AlertEdit = ({ const [{ alert }, dispatch] = useReducer(alertReducer, { alert: initialAlert }); const [isSaving, setIsSaving] = useState(false); const [hasActionsDisabled, setHasActionsDisabled] = useState(false); + const setAlert = (key: string, value: any) => { + dispatch({ command: { type: 'setAlert' }, payload: { key, value } }); + }; const { reloadAlerts, @@ -55,6 +58,8 @@ export const AlertEdit = ({ const closeFlyout = useCallback(() => { setEditFlyoutVisibility(false); + setAlert('alert', initialAlert); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [setEditFlyoutVisibility]); if (!editFlyoutVisible) { diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts index d0ce18bbc1c54..6ff065c1f4ab2 100644 --- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts +++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts @@ -197,6 +197,53 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { const headingText = await pageObjects.alertDetailsUI.getHeadingText(); expect(headingText).to.be(updatedAlertName); }); + + it('should reset alert when canceling an edit', async () => { + await pageObjects.common.navigateToApp('triggersActions'); + const params = { + aggType: 'count', + termSize: 5, + thresholdComparator: '>', + timeWindowSize: 5, + timeWindowUnit: 'm', + groupBy: 'all', + threshold: [1000, 5000], + index: ['.kibana_1'], + timeField: 'alert', + }; + const alert = await alerting.alerts.createAlertWithActions( + testRunUuid, + '.index-threshold', + params + ); + // refresh to see alert + await browser.refresh(); + + await pageObjects.header.waitUntilLoadingHasFinished(); + + // Verify content + await testSubjects.existOrFail('alertsList'); + + // click on first alert + await pageObjects.triggersActionsUI.clickOnAlertInAlertsList(alert.name); + + const editButton = await testSubjects.find('openEditAlertFlyoutButton'); + await editButton.click(); + + const updatedAlertName = `Changed Alert Name ${uuid.v4()}`; + await testSubjects.setValue('alertNameInput', updatedAlertName, { + clearWithKeyboard: true, + }); + + await testSubjects.click('cancelSaveEditedAlertButton'); + await find.waitForDeletedByCssSelector('[data-test-subj="cancelSaveEditedAlertButton"]'); + + await editButton.click(); + + const nameInputAfterCancel = await testSubjects.find('alertNameInput'); + const textAfterCancel = await nameInputAfterCancel.getAttribute('value'); + expect(textAfterCancel).to.eql(alert.name); + }); }); describe('View In App', function() { From 5a8d7ce6c1a9ee2802b4030088064c3b52f3581b Mon Sep 17 00:00:00 2001 From: Yuliia Naumenko Date: Thu, 30 Apr 2020 14:58:05 -0700 Subject: [PATCH 2/3] fixed add form --- .../components/builtin_action_types/es_index.tsx | 6 ++++-- .../public/application/sections/alert_form/alert_add.tsx | 9 ++++++++- .../application/sections/alert_form/alert_edit.tsx | 2 +- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx index 55a219ca94aea..5532169e293f4 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx @@ -86,7 +86,9 @@ const IndexActionConnectorFields: React.FunctionComponent([]); - const [timeFieldOptions, setTimeFieldOptions] = useState([firstFieldOption]); + const [timeFieldOptions, setTimeFieldOptions] = useState>([ + firstFieldOption, + ]); const [isIndiciesLoading, setIsIndiciesLoading] = useState(false); useEffect(() => { @@ -160,7 +162,7 @@ const IndexActionConnectorFields: React.FunctionComponent { dispatch({ command: { type: 'setAlert' }, payload: { key: 'alert', value } }); }; + const setAlertProperty = (key: string, value: any) => { + dispatch({ command: { type: 'setProperty' }, payload: { key, value } }); + }; const { reloadAlerts, @@ -70,6 +73,10 @@ export const AlertAdd = ({ docLinks, } = useAlertsContext(); + useEffect(() => { + setAlertProperty('alertTypeId', alertTypeId); + }, [alertTypeId]); + const closeFlyout = useCallback(() => { setAddFlyoutVisibility(false); setAlert(initialAlert); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx index f943e7620b815..c9cf59d87414f 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx @@ -3,7 +3,7 @@ * 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, useCallback, useReducer, useState, useEffect } from 'react'; +import React, { Fragment, useCallback, useReducer, useState } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiTitle, From a1a873ededcae50b73825ecec3be0ca9bec1c873 Mon Sep 17 00:00:00 2001 From: Yuliia Naumenko Date: Thu, 30 Apr 2020 16:17:51 -0700 Subject: [PATCH 3/3] Fixed type check --- .../application/components/builtin_action_types/es_index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx index 5532169e293f4..861d6ad7284c2 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx @@ -162,7 +162,7 @@ const IndexActionConnectorFields: React.FunctionComponent