From c442762f2cf55e2f33d5375aab1761400c774aff Mon Sep 17 00:00:00 2001 From: Yuliia Naumenko Date: Fri, 18 Sep 2020 15:46:29 -0700 Subject: [PATCH 1/2] Removed delete confirmation timeout to avoid flaky failing because deletion to be a little slower on CI --- .../apps/triggers_actions_ui/alerts.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts index 67672cb54c21b..526cb7f14e9f8 100644 --- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts +++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts @@ -40,8 +40,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { return createdAlert; } - // FLAKY: https://github.com/elastic/kibana/issues/77401 - describe.skip('alerts', function () { + describe('alerts', function () { before(async () => { await pageObjects.common.navigateToApp('triggersActions'); await testSubjects.click('alertsTab'); @@ -385,7 +384,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await testSubjects.click('deleteAll'); await testSubjects.existOrFail('deleteIdsConfirmation'); await testSubjects.click('deleteIdsConfirmation > confirmModalConfirmButton'); - await testSubjects.missingOrFail('deleteIdsConfirmation', { timeout: 5000 }); + await testSubjects.missingOrFail('deleteIdsConfirmation'); await pageObjects.common.closeToast(); From f38fba0e61e607d9be7363aed2c5fadc6831d5db Mon Sep 17 00:00:00 2001 From: Yuliia Naumenko Date: Sat, 19 Sep 2020 08:46:39 -0700 Subject: [PATCH 2/2] Changed delete flow to close confim dialog immediately and set data to the loading state --- .../components/delete_modal_confirmation.tsx | 25 +++++++++++++++---- .../components/actions_connectors_list.tsx | 1 + .../alerts_list/components/alerts_list.tsx | 9 ++++--- .../apps/triggers_actions_ui/alerts.ts | 5 +++- 4 files changed, 31 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/delete_modal_confirmation.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/delete_modal_confirmation.tsx index 5862a567f71ba..a093b9c511970 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/delete_modal_confirmation.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/delete_modal_confirmation.tsx @@ -5,7 +5,7 @@ */ import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { HttpSetup } from 'kibana/public'; import { useAppDependencies } from '../app_context'; @@ -17,6 +17,7 @@ export const DeleteModalConfirmation = ({ onErrors, singleTitle, multipleTitle, + setIsLoadingState, }: { idsToDelete: string[]; apiDeleteCall: ({ @@ -31,10 +32,17 @@ export const DeleteModalConfirmation = ({ onErrors: () => void; singleTitle: string; multipleTitle: string; + setIsLoadingState: (isLoading: boolean) => void; }) => { + const [deleteModalFlyoutVisible, setDeleteModalVisibility] = useState(false); + + useEffect(() => { + setDeleteModalVisibility(idsToDelete.length > 0); + }, [idsToDelete]); + const { http, toastNotifications } = useAppDependencies(); const numIdsToDelete = idsToDelete.length; - if (!numIdsToDelete) { + if (!deleteModalFlyoutVisible) { return null; } const confirmModalText = i18n.translate( @@ -65,12 +73,18 @@ export const DeleteModalConfirmation = ({ buttonColor="danger" data-test-subj="deleteIdsConfirmation" title={confirmButtonText} - onCancel={() => onCancel()} + onCancel={() => { + setDeleteModalVisibility(false); + onCancel(); + }} onConfirm={async () => { + setDeleteModalVisibility(false); + setIsLoadingState(true); const { successes, errors } = await apiDeleteCall({ ids: idsToDelete, http }); + setIsLoadingState(false); + const numSuccesses = successes.length; const numErrors = errors.length; - onDeleted(successes); if (numSuccesses > 0) { toastNotifications.addSuccess( i18n.translate( @@ -95,8 +109,9 @@ export const DeleteModalConfirmation = ({ } ) ); - onErrors(); + await onErrors(); } + await onDeleted(successes); }} cancelButtonText={cancelButtonText} confirmButtonText={confirmButtonText} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx index 837529bfc938d..449e8a23b097a 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx @@ -397,6 +397,7 @@ export const ActionsConnectorsList: React.FunctionComponent = () => { 'xpack.triggersActionsUI.sections.actionsConnectorsList.multipleTitle', { defaultMessage: 'connectors' } )} + setIsLoadingState={(isLoading: boolean) => setIsLoadingActionTypes(isLoading)} /> {/* Render the view based on if there's data or if they can save */} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx index 3d55c51e45281..7d0354589ecb8 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx @@ -404,16 +404,16 @@ export const AlertsList: React.FunctionComponent = () => {
{ - loadAlertsData(); - setSelectedIds([]); setAlertsToDelete([]); + setSelectedIds([]); + await loadAlertsData(); }} onErrors={async () => { // Refresh the alerts from the server, some alerts may have beend deleted await loadAlertsData(); setAlertsToDelete([]); }} - onCancel={async () => { + onCancel={() => { setAlertsToDelete([]); }} apiDeleteCall={deleteAlerts} @@ -424,6 +424,9 @@ export const AlertsList: React.FunctionComponent = () => { multipleTitle={i18n.translate('xpack.triggersActionsUI.sections.alertsList.multipleTitle', { defaultMessage: 'alerts', })} + setIsLoadingState={(isLoading: boolean) => { + setAlertsState({ ...alertsState, isLoading }); + }} /> {loadedItems.length || isFilterApplied ? ( diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts index 526cb7f14e9f8..359be662b0216 100644 --- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts +++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts @@ -386,7 +386,10 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await testSubjects.click('deleteIdsConfirmation > confirmModalConfirmButton'); await testSubjects.missingOrFail('deleteIdsConfirmation'); - await pageObjects.common.closeToast(); + await retry.try(async () => { + const toastTitle = await pageObjects.common.closeToast(); + expect(toastTitle).to.eql('Deleted 10 alerts'); + }); await pageObjects.common.navigateToApp('triggersActions'); await pageObjects.triggersActionsUI.searchAlerts(namePrefix);