Removed delete confirmation timeout to avoid flaky failing because deletion to be a little slower on CI

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<boolean>(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}

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)}
       />
       <EuiSpacer size="m" />
       {/* Render the view based on if there's data or if they can save */}

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx

@@ -404,16 +404,16 @@ export const AlertsList: React.FunctionComponent = () => {
     <section data-test-subj="alertsList">
       <DeleteModalConfirmation
         onDeleted={async (deleted: string[]) => {
-          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 });
+        }}
       />
       <EuiSpacer size="m" />
       {loadedItems.length || isFilterApplied ? (

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,9 +384,12 @@ 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();
+      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);