diff --git a/packages/response-ops/rule_form/src/rule_actions/rule_actions_connectors_modal.test.tsx b/packages/response-ops/rule_form/src/rule_actions/rule_actions_connectors_modal.test.tsx index aaf2ff0658f5d..d8c183820d3cb 100644 --- a/packages/response-ops/rule_form/src/rule_actions/rule_actions_connectors_modal.test.tsx +++ b/packages/response-ops/rule_form/src/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(); + 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( + + ); + 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(); + 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( + + ); + 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(); actionTypeRegistry.register(getActionTypeModel('1', { id: 'actionType-1' })); diff --git a/packages/response-ops/rule_form/src/rule_actions/rule_actions_connectors_modal.tsx b/packages/response-ops/rule_form/src/rule_actions/rule_actions_connectors_modal.tsx index 64db54845530a..d411e468a8a83 100644 --- a/packages/response-ops/rule_form/src/rule_actions/rule_actions_connectors_modal.tsx +++ b/packages/response-ops/rule_form/src/rule_actions/rule_actions_connectors_modal.tsx @@ -77,9 +77,7 @@ export const RuleActionsConnectorsModal = (props: RuleActionsConnectorsModalProp if (!actionType) { return false; } - if (actionTypeModel.hideInUi) { - return false; - } + if (!actionTypeModel.actionParamsFields) { return false; } @@ -92,6 +90,7 @@ export const RuleActionsConnectorsModal = (props: RuleActionsConnectorsModalProp if (!actionType.enabledInConfig && !checkEnabledResult.isEnabled) { return false; } + return true; }); }, [connectors, connectorTypes, preconfiguredConnectors, actionTypeRegistry]); @@ -119,29 +118,43 @@ export const RuleActionsConnectorsModal = (props: RuleActionsConnectorsModalProp const connectorsMap: ConnectorsMap | null = useMemo(() => { return availableConnectors.reduce((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();