diff --git a/packages/frontend/@n8n/design-system/src/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.test.ts index 8d9f74380ab..a4b4a08c36b 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.test.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.test.ts @@ -121,6 +121,53 @@ describe('N8nAiModelSelectorDropdown', () => { expect(getByText('Connected')).toBeVisible(); }); + it('shows the restricted badge in the trigger instead of the credential name', () => { + const { getByTestId, queryByTestId } = render(N8nAiModelSelectorDropdown, { + props: { + ...defaultProps, + selectedCredentialName: 'Production OpenAI credential', + restrictedLabel: 'Restricted', + }, + }); + + expect(getByTestId('ai-model-selector-restricted-badge')).toHaveTextContent('Restricted'); + expect(queryByTestId('ai-model-selector-credential')).not.toBeInTheDocument(); + }); + + it('hides the restricted badge while loading', () => { + const { queryByTestId } = render(N8nAiModelSelectorDropdown, { + props: { ...defaultProps, restrictedLabel: 'Restricted', isLoading: true }, + }); + + expect(queryByTestId('ai-model-selector-restricted-badge')).not.toBeInTheDocument(); + }); + + it('renders the scope line and lock on a restricted item', async () => { + const { getByTestId } = render(N8nAiModelSelectorDropdown, { + props: { + ...defaultProps, + items: [ + ...baseItems, + { + id: 'anthropic', + label: 'Anthropic', + disabled: true, + data: { restrictedLabel: 'Restricted on this instance' }, + }, + ], + }, + }); + + await userEvent.click(getByTestId('ai-model-selector')); + + await waitFor(() => + expect(getByTestId('ai-model-selector-restriction')).toHaveTextContent( + 'Restricted on this instance', + ), + ); + expect(getByTestId('ai-model-selector-restricted-icon')).toBeInTheDocument(); + }); + it('emits select and search events', async () => { const { getByTestId, getByText, emitted } = render(N8nAiModelSelectorDropdown, { props: { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.types.ts b/packages/frontend/@n8n/design-system/src/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.types.ts index a4c9954d0e2..a106035097a 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.types.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.types.ts @@ -16,6 +16,8 @@ export interface AiModelSelectorMenuItemData { loading?: boolean; /** Trailing "✓