Fixed AddAlert
flyout does not immediately update state to reflect new props (#64927)
* Fixed `AddAlert` flyout does not immediately update state to reflect new props * fixed add form * Fixed type check
This commit is contained in:
parent
8128b91193
commit
7e5be981d8
|
@ -86,7 +86,9 @@ const IndexActionConnectorFields: React.FunctionComponent<ActionConnectorFieldsP
|
|||
|
||||
const [indexPatterns, setIndexPatterns] = useState([]);
|
||||
const [indexOptions, setIndexOptions] = useState<EuiComboBoxOptionOption[]>([]);
|
||||
const [timeFieldOptions, setTimeFieldOptions] = useState([firstFieldOption]);
|
||||
const [timeFieldOptions, setTimeFieldOptions] = useState<Array<{ value: string; text: string }>>([
|
||||
firstFieldOption,
|
||||
]);
|
||||
const [isIndiciesLoading, setIsIndiciesLoading] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
@ -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, { useCallback, useReducer, useState } from 'react';
|
||||
import React, { useCallback, useReducer, useState, useEffect } from 'react';
|
||||
import { isObject } from 'lodash';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import {
|
||||
|
@ -60,6 +60,9 @@ export const AlertAdd = ({
|
|||
const setAlert = (value: any) => {
|
||||
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);
|
||||
|
|
|
@ -43,6 +43,9 @@ export const AlertEdit = ({
|
|||
const [{ alert }, dispatch] = useReducer(alertReducer, { alert: initialAlert });
|
||||
const [isSaving, setIsSaving] = useState<boolean>(false);
|
||||
const [hasActionsDisabled, setHasActionsDisabled] = useState<boolean>(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) {
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in a new issue