[8.x] [ResponseOps][Alerting] Show missing Slack connectors in the new rule form (#202315)

packages/kbn-alerts-ui-shared/src/rule_form/rule_actions/rule_actions_connectors_modal.test.tsx

@@ -195,6 +195,92 @@ describe('ruleActionsConnectorsModal', () => {
     expect(screen.queryByText('connector2')).not.toBeInTheDocument();
   });
 
+  test('should not render connector filter if hideInUi is true', async () => {
+    const actionTypeRegistry = new TypeRegistry<ActionTypeModel>();
+    actionTypeRegistry.register(
+      getActionTypeModel('1', {
+        id: 'actionType-1',
+        subtype: [
+          { id: 'actionType-1', name: 'connector-1' },
+          { id: 'actionType-2', name: 'connector-2' },
+        ],
+      })
+    );
+    actionTypeRegistry.register(
+      getActionTypeModel('2', {
+        id: 'actionType-2',
+        hideInUi: true,
+        subtype: [
+          { id: 'actionType-1', name: 'connector-1' },
+          { id: 'actionType-2', name: 'connector-2' },
+        ],
+      })
+    );
+    useRuleFormState.mockReturnValue({
+      plugins: {
+        actionTypeRegistry,
+      },
+      formData: {
+        actions: [],
+      },
+      connectors: mockConnectors,
+      connectorTypes: mockActionTypes,
+    });
+
+    render(
+      <RuleActionsConnectorsModal onClose={mockOnClose} onSelectConnector={mockOnSelectConnector} />
+    );
+    const filterButtonGroup = screen.getByTestId('ruleActionsConnectorsModalFilterButtonGroup');
+    expect(within(filterButtonGroup).getByText('actionType: 1')).toBeInTheDocument();
+    expect(within(filterButtonGroup).queryByText('actionType: 2')).not.toBeInTheDocument();
+    expect(within(filterButtonGroup).getByText('All')).toBeInTheDocument();
+
+    expect(screen.getAllByTestId('ruleActionsConnectorsModalFilterButton').length).toEqual(2);
+  });
+
+  test('should display connectors if hideInUi is true and it has subtype', async () => {
+    const actionTypeRegistry = new TypeRegistry<ActionTypeModel>();
+    actionTypeRegistry.register(
+      getActionTypeModel('1', {
+        id: 'actionType-1',
+        subtype: [
+          { id: 'actionType-1', name: 'connector-1' },
+          { id: 'actionType-2', name: 'connector-2' },
+        ],
+      })
+    );
+    actionTypeRegistry.register(
+      getActionTypeModel('2', {
+        id: 'actionType-2',
+        hideInUi: true,
+        subtype: [
+          { id: 'actionType-1', name: 'connector-1' },
+          { id: 'actionType-2', name: 'connector-2' },
+        ],
+      })
+    );
+    useRuleFormState.mockReturnValue({
+      plugins: {
+        actionTypeRegistry,
+      },
+      formData: {
+        actions: [],
+      },
+      connectors: mockConnectors,
+      connectorTypes: mockActionTypes,
+    });
+
+    render(
+      <RuleActionsConnectorsModal onClose={mockOnClose} onSelectConnector={mockOnSelectConnector} />
+    );
+    const filterButtonGroup = screen.getByTestId('ruleActionsConnectorsModalFilterButtonGroup');
+
+    await userEvent.click(within(filterButtonGroup).getByText('actionType: 1'));
+    expect(screen.getAllByTestId('ruleActionsConnectorsModalCard').length).toEqual(2);
+    expect(screen.getByText('connector-1')).toBeInTheDocument();
+    expect(screen.getByText('connector-2')).toBeInTheDocument();
+  });
+
   test('should not render connector if actionsParamsField doesnt exist', () => {
     const actionTypeRegistry = new TypeRegistry<ActionTypeModel>();
     actionTypeRegistry.register(getActionTypeModel('1', { id: 'actionType-1' }));

packages/kbn-alerts-ui-shared/src/rule_form/rule_actions/rule_actions_connectors_modal.tsx

@@ -78,9 +78,7 @@ export const RuleActionsConnectorsModal = (props: RuleActionsConnectorsModalProp
       if (!actionType) {
         return false;
       }
-      if (actionTypeModel.hideInUi) {
-        return false;
-      }
+
       if (!actionTypeModel.actionParamsFields) {
         return false;
       }
@@ -93,6 +91,7 @@ export const RuleActionsConnectorsModal = (props: RuleActionsConnectorsModalProp
       if (!actionType.enabledInConfig && !checkEnabledResult.isEnabled) {
         return false;
       }
+
       return true;
     });
   }, [connectors, connectorTypes, preconfiguredConnectors, actionTypeRegistry]);
@@ -120,29 +119,43 @@ export const RuleActionsConnectorsModal = (props: RuleActionsConnectorsModalProp
 
   const connectorsMap: ConnectorsMap | null = useMemo(() => {
     return availableConnectors.reduce<ConnectorsMap>((result, { actionTypeId }) => {
-      if (result[actionTypeId]) {
-        result[actionTypeId].total += 1;
+      const actionTypeModel = actionTypeRegistry.get(actionTypeId);
+      const subtype = actionTypeModel.subtype;
+
+      const shownActionTypeId = actionTypeModel.hideInUi
+        ? subtype?.filter((type) => type.id !== actionTypeId)[0].id
+        : undefined;
+
+      const currentActionTypeId = shownActionTypeId ? shownActionTypeId : actionTypeId;
+
+      if (result[currentActionTypeId]) {
+        result[currentActionTypeId].total += 1;
       } else {
-        result[actionTypeId] = {
-          actionTypeId,
+        result[currentActionTypeId] = {
+          actionTypeId: currentActionTypeId,
           total: 1,
-          name: connectorTypes.find(({ id }) => actionTypeId === id)?.name || '',
+          name: connectorTypes.find(({ id }) => id === currentActionTypeId)?.name || '',
         };
       }
+
       return result;
     }, {});
-  }, [availableConnectors, connectorTypes]);
+  }, [availableConnectors, connectorTypes, actionTypeRegistry]);
 
   const filteredConnectors = useMemo(() => {
     return availableConnectors
       .filter(({ actionTypeId }) => {
+        const subtype = actionTypeRegistry.get(actionTypeId).subtype?.map((type) => type.id);
+
         if (selectedConnectorType === 'all' || selectedConnectorType === '') {
           return true;
         }
-        if (selectedConnectorType === actionTypeId) {
-          return true;
+
+        if (subtype?.includes(selectedConnectorType)) {
+          return subtype.includes(actionTypeId);
         }
-        return false;
+
+        return selectedConnectorType === actionTypeId;
       })
       .filter(({ actionTypeId, name }) => {
         const trimmedSearchValue = searchValue.trim().toLocaleLowerCase();