[7.7] [Alerting] Fixed issue when connectors dropdown not showing all available connectors (#63636)

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.test.tsx

@@ -11,6 +11,10 @@ import { act } from 'react-dom/test-utils';
 import { actionTypeRegistryMock } from '../../action_type_registry.mock';
 import { ValidationResult, Alert, AlertAction } from '../../../types';
 import { ActionForm } from './action_form';
+jest.mock('../../lib/action_connector_api', () => ({
+  loadAllActions: jest.fn(),
+  loadActionTypes: jest.fn(),
+}));
 const actionTypeRegistry = actionTypeRegistryMock.create();
 describe('action_form', () => {
   let deps: any;
@@ -73,6 +77,18 @@ describe('action_form', () => {
     let wrapper: ReactWrapper<any>;
 
     async function setup() {
+      const { loadAllActions } = jest.requireMock('../../lib/action_connector_api');
+      loadAllActions.mockResolvedValueOnce({
+        data: [
+          {
+            secrets: {},
+            id: 'test',
+            actionTypeId: actionType.id,
+            name: 'Test connector',
+            config: {},
+          },
+        ],
+      });
       const mockes = coreMock.createSetup();
       deps = {
         toastNotifications: mockes.notifications.toasts,
@@ -85,6 +101,7 @@ describe('action_form', () => {
         disabledByLicenseActionType,
       ]);
       actionTypeRegistry.has.mockReturnValue(true);
+      actionTypeRegistry.get.mockReturnValue(actionType);
 
       const initialAlert = ({
         name: 'test',
@@ -191,6 +208,24 @@ describe('action_form', () => {
       expect(actionOption.exists()).toBeFalsy();
     });
 
+    it(`renders available connectors for the selected action type`, async () => {
+      await setup();
+      const actionOption = wrapper.find(
+        `[data-test-subj="${actionType.id}-ActionTypeSelectOption"]`
+      );
+      actionOption.first().simulate('click');
+      const combobox = wrapper.find(`[data-test-subj="selectActionConnector"]`);
+      expect((combobox.first().props() as any).options).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "id": "test",
+          "key": "test",
+          "label": "Test connector",
+        },
+      ]
+      `);
+    });
+
     it('renders action types disabled by license', async () => {
       await setup();
       const actionOption = wrapper.find(

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx

@@ -104,49 +104,61 @@ export const ActionForm = ({
           index[actionTypeItem.id] = actionTypeItem;
         }
         setActionTypesIndex(index);
-        const hasActionsDisabled = actions.some(action => !index[action.actionTypeId].enabled);
-        if (setHasActionsDisabled) {
-          setHasActionsDisabled(hasActionsDisabled);
-        }
       } catch (e) {
-        if (toastNotifications) {
-          toastNotifications.addDanger({
-            title: i18n.translate(
-              'xpack.triggersActionsUI.sections.alertForm.unableToLoadActionTypesMessage',
-              { defaultMessage: 'Unable to load action types' }
-            ),
-          });
-        }
+        toastNotifications.addDanger({
+          title: i18n.translate(
+            'xpack.triggersActionsUI.sections.alertForm.unableToLoadActionTypesMessage',
+            { defaultMessage: 'Unable to load action types' }
+          ),
+        });
       } finally {
         setIsLoadingActionTypes(false);
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // load connectors
   useEffect(() => {
-    loadConnectors();
+    (async () => {
+      try {
+        setIsLoadingConnectors(true);
+        const loadedConnectors = await loadAllActions({ http });
+        setConnectors(loadedConnectors.data);
+      } catch (e) {
+        toastNotifications.addDanger({
+          title: i18n.translate(
+            'xpack.triggersActionsUI.sections.alertForm.unableToLoadActionsMessage',
+            {
+              defaultMessage: 'Unable to load connectors',
+            }
+          ),
+        });
+      } finally {
+        setIsLoadingConnectors(false);
+      }
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  async function loadConnectors() {
-    try {
-      setIsLoadingConnectors(true);
-      const actionsResponse = await loadAllActions({ http });
-      setConnectors(actionsResponse.data);
-    } catch (e) {
-      toastNotifications.addDanger({
-        title: i18n.translate(
-          'xpack.triggersActionsUI.sections.alertForm.unableToLoadActionsMessage',
-          {
-            defaultMessage: 'Unable to load connectors',
-          }
-        ),
-      });
-    } finally {
-      setIsLoadingConnectors(false);
+  useEffect(() => {
+    const setActionTypesAvalilability = () => {
+      const hasActionsDisabled = actions.some(
+        action =>
+          actionTypesIndex &&
+          !actionTypesIndex[action.actionTypeId].enabled &&
+          !checkActionTypeEnabled(actionTypesIndex[action.actionTypeId]).isEnabled
+      );
+      if (setHasActionsDisabled) {
+        setHasActionsDisabled(hasActionsDisabled);
+      }
+    };
+    if (connectors.length > 0 && actionTypesIndex) {
+      setActionTypesAvalilability();
     }
-  }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connectors, actionTypesIndex]);
+
   const getSelectedOptions = (actionItemId: string) => {
     const val = connectors.find(connector => connector.id === actionItemId);
     if (!val) {
@@ -157,6 +169,7 @@ export const ActionForm = ({
         label: val.name,
         value: val.name,
         id: actionItemId,
+        'data-test-subj': 'itemActionConnector',
       },
     ];
   };
@@ -170,13 +183,9 @@ export const ActionForm = ({
     index: number
   ) => {
     const optionsList = connectors
-      .filter(
-        connectorItem =>
-          connectorItem.actionTypeId === actionItem.actionTypeId &&
-          connectorItem.id === actionItem.id
-      )
+      .filter(connectorItem => connectorItem.actionTypeId === actionItem.actionTypeId)
       .map(({ name, id }) => ({
-        label: name,
+        label: `${name}`,
         key: id,
         id,
       }));
@@ -224,6 +233,8 @@ export const ActionForm = ({
                 fullWidth
                 singleSelection={{ asPlainText: true }}
                 options={optionsList}
+                id={`selectActionConnector-${actionItem.id}`}
+                data-test-subj="selectActionConnector"
                 selectedOptions={getSelectedOptions(actionItem.id)}
                 onChange={selectedOptions => {
                   setActionIdByIndex(selectedOptions[0].id ?? '', index);
@@ -439,6 +450,7 @@ export const ActionForm = ({
     const actionTypeConnectors = connectors.filter(
       field => field.actionTypeId === actionTypeModel.id
     );
+
     if (actionTypeConnectors.length > 0) {
       actions.push({
         id: '',
@@ -473,6 +485,7 @@ export const ActionForm = ({
       .sort((a, b) => actionTypeCompare(actionTypesIndex[a.id], actionTypesIndex[b.id]))
       .map(function(item, index) {
         const actionType = actionTypesIndex[item.id];
+
         const checkEnabledResult = checkActionTypeEnabled(actionTypesIndex[item.id]);
         if (!actionType.enabledInLicense) {
           hasDisabledByLicenseActionTypes = true;