[ResponseOps][Alerting] Provide indication of how many rules are using connector on Connector List view (#137181)

* Adding warning message to delete connector pop up

* Adding tests

* Fixing check types error

* Removing field in delete modal

* Cleaning up some of the code

* Updating the text and adding a callout

* Updating copy

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/triggers_actions_ui/public/application/components/delete_modal_confirmation.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiConfirmModal } from '@elastic/eui';
+import { EuiCallOut, EuiConfirmModal } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useState } from 'react';
 import { HttpSetup } from '@kbn/core/public';
@@ -19,6 +19,8 @@ export const DeleteModalConfirmation = ({
   onErrors,
   singleTitle,
   multipleTitle,
+  showWarningText,
+  warningText,
   setIsLoadingState,
 }: {
   idsToDelete: string[];
@@ -35,6 +37,8 @@ export const DeleteModalConfirmation = ({
   singleTitle: string;
   multipleTitle: string;
   setIsLoadingState: (isLoading: boolean) => void;
+  showWarningText?: boolean;
+  warningText?: string;
 }) => {
   const [deleteModalFlyoutVisible, setDeleteModalVisibility] = useState<boolean>(false);
 
@@ -120,7 +124,10 @@ export const DeleteModalConfirmation = ({
       cancelButtonText={cancelButtonText}
       confirmButtonText={confirmButtonText}
     >
-      {confirmModalText}
+      <p>{confirmModalText}</p>
+      {showWarningText && (
+        <EuiCallOut title={<>{warningText}</>} color="warning" iconType="alert" />
+      )}
     </EuiConfirmModal>
   );
 };

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

@@ -273,6 +273,18 @@ describe('actions_connectors_list component with items', () => {
     await wrapper.find('[data-test-subj="edit1"]').first().find('button').simulate('click');
     expect(wrapper.find('[data-test-subj="edit-connector-flyout"]').exists()).toBeTruthy();
   });
+
+  test('if delete item that is used in a rule should show a warning in the popup', async () => {
+    await setup();
+    await wrapper.find('.euiButtonIcon').last().simulate('click');
+    expect(wrapper.find('[data-test-subj="deleteConnectorsConfirmation"]').exists()).toBeTruthy();
+    expect(
+      wrapper
+        .find('[data-test-subj="deleteConnectorsConfirmation"]')
+        .text()
+        .includes('This connector is used in a rule')
+    );
+  });
 });
 
 describe('actions_connectors_list component empty with show only capability', () => {

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

@@ -105,6 +105,7 @@ const ActionsConnectorsList: React.FunctionComponent = () => {
     loadActions();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const [showWarningText, setShowWarningText] = useState<boolean>(false);
 
   useEffect(() => {
     (async () => {
@@ -153,6 +154,20 @@ const ActionsConnectorsList: React.FunctionComponent = () => {
         .sort((a, b) => a.name.localeCompare(b.name))
     : [];
 
+  function setDeleteConnectorWarning(connectors: string[]) {
+    const show = connectors.some((c) => {
+      const action = actions.find((a) => a.id === c);
+      return (action && action.referencedByCount ? action.referencedByCount : 0) > 0;
+    });
+    setShowWarningText(show);
+  }
+
+  function onDelete(items: ActionConnectorTableItem[]) {
+    const itemIds = items.map((item: any) => item.id);
+    setConnectorsToDelete(itemIds);
+    setDeleteConnectorWarning(itemIds);
+  }
+
   async function loadActions() {
     setIsLoadingActions(true);
     try {
@@ -285,11 +300,7 @@ const ActionsConnectorsList: React.FunctionComponent = () => {
       render: (item: ActionConnectorTableItem) => {
         return (
           <EuiFlexGroup justifyContent="flexEnd" alignItems="flexEnd">
-            <DeleteOperation
-              canDelete={canDelete}
-              item={item}
-              onDelete={() => setConnectorsToDelete([item.id])}
-            />
+            <DeleteOperation canDelete={canDelete} item={item} onDelete={() => onDelete([item])} />
             {item.isMissingSecrets ? (
               <>
                 {actionTypesIndex && actionTypesIndex[item.actionTypeId]?.enabled ? (
@@ -392,9 +403,7 @@ const ActionsConnectorsList: React.FunctionComponent = () => {
                   iconType="trash"
                   color="danger"
                   data-test-subj="bulkDelete"
-                  onClick={() => {
-                    setConnectorsToDelete(selectedItems.map((selected: any) => selected.id));
-                  }}
+                  onClick={() => onDelete(selectedItems)}
                   title={
                     canDelete
                       ? undefined
@@ -435,6 +444,7 @@ const ActionsConnectorsList: React.FunctionComponent = () => {
   return (
     <section data-test-subj="actionsList">
       <DeleteModalConfirmation
+        data-test-subj="deleteConnectorsConfirmation"
         onDeleted={(deleted: string[]) => {
           if (selectedItems.length === 0 || selectedItems.length === deleted.length) {
             const updatedActions = actions.filter(
@@ -463,6 +473,17 @@ const ActionsConnectorsList: React.FunctionComponent = () => {
           'xpack.triggersActionsUI.sections.actionsConnectorsList.multipleTitle',
           { defaultMessage: 'connectors' }
         )}
+        showWarningText={showWarningText}
+        warningText={i18n.translate(
+          'xpack.triggersActionsUI.sections.actionsConnectorsList.warningText',
+          {
+            defaultMessage:
+              '{connectors, plural, one {This connector is} other {Some connectors are}} currently in use.',
+            values: {
+              connectors: connectorsToDelete.length,
+            },
+          }
+        )}
         setIsLoadingState={(isLoading: boolean) => setIsLoadingActionTypes(isLoading)}
       />