diff --git a/packages/frontend/@n8n/i18n/src/locales/en.json b/packages/frontend/@n8n/i18n/src/locales/en.json index 3fa3e2339e0..c8e74e825b8 100644 --- a/packages/frontend/@n8n/i18n/src/locales/en.json +++ b/packages/frontend/@n8n/i18n/src/locales/en.json @@ -6125,6 +6125,7 @@ "agents.builder.header.workspaceCrumb": "Workspace", "agents.builder.header.projectFallback": "Project", "agents.builder.header.switcher.empty": "No other agents", + "agents.builder.header.switcher.newAgent": "New agent", "agents.builder.header.switcher.ariaLabel": "Switch agent", "agents.builder.header.saving": "Saving…", "agents.builder.header.saved": "Saved", diff --git a/packages/frontend/editor-ui/src/features/agents/__tests__/AgentBuilderHeader.test.ts b/packages/frontend/editor-ui/src/features/agents/__tests__/AgentBuilderHeader.test.ts index 58ea0df573f..af0ba0f8843 100644 --- a/packages/frontend/editor-ui/src/features/agents/__tests__/AgentBuilderHeader.test.ts +++ b/packages/frontend/editor-ui/src/features/agents/__tests__/AgentBuilderHeader.test.ts @@ -38,6 +38,12 @@ vi.mock('@n8n/design-system', () => ({ props: ['variant', 'size', 'icon', 'iconOnly', 'disabled'], emits: ['click'], }, + N8nDropdownMenuItem: { + name: 'N8nDropdownMenuItem', + template: '', + props: ['id', 'label', 'icon', 'testId'], + emits: ['select'], + }, N8nTooltip: { name: 'N8nTooltip', template: @@ -52,13 +58,13 @@ vi.mock('@n8n/design-system', () => ({ }, N8nDropdownMenu: { name: 'N8nDropdownMenu', - template: '
', + template: '
', props: ['items'], emits: ['select'], }, 'n8n-dropdown-menu': { name: 'N8nDropdownMenu', - template: '
', + template: '
', props: ['items'], emits: ['select'], }, @@ -305,4 +311,15 @@ describe('AgentBuilderHeader', () => { nav.vm.$emit('select', 'a2'); expect(wrapper.emitted('switch-agent')).toEqual([['a2']]); }); + + it('navigates to the new agent page from the switcher footer', async () => { + const wrapper = mountHeader(); + + await wrapper.find('[data-testid="agent-header-new-agent"]').trigger('click'); + + expect(routerPush).toHaveBeenCalledWith({ + name: 'NewAgentView', + query: { projectId: 'p1' }, + }); + }); }); diff --git a/packages/frontend/editor-ui/src/features/agents/components/AgentBuilderHeader.vue b/packages/frontend/editor-ui/src/features/agents/components/AgentBuilderHeader.vue index fe8d1f71757..32d3dc8afa3 100644 --- a/packages/frontend/editor-ui/src/features/agents/components/AgentBuilderHeader.vue +++ b/packages/frontend/editor-ui/src/features/agents/components/AgentBuilderHeader.vue @@ -13,6 +13,7 @@ import { N8nBreadcrumbs, N8nButton, N8nDropdownMenu, + N8nDropdownMenuItem, N8nIcon, N8nTooltip, } from '@n8n/design-system'; @@ -21,6 +22,7 @@ import type { DropdownMenuItemProps } from '@n8n/design-system'; import type { ActionDropdownItem } from '@n8n/design-system/types/action-dropdown'; import { useI18n, type BaseTextKey } from '@n8n/i18n'; import { VIEWS } from '@/app/constants'; +import { NEW_AGENT_VIEW } from '@/features/agents/constants'; import AgentPublishButton from './AgentPublishButton.vue'; import { useProjectAgentsList } from '../composables/useProjectAgentsList'; @@ -118,6 +120,10 @@ function onSwitcherSelect(id: string) { emit('switch-agent', id); } +function onCreateAgent() { + void router.push({ name: NEW_AGENT_VIEW, query: { projectId: props.projectId } }); +} + function onBreadcrumbSelect(item: PathItem) { if (item.id !== props.projectId) return; void router.push(projectRoute.value); @@ -137,6 +143,7 @@ function onOpenPreview() { @@ -153,6 +160,17 @@ function onOpenPreview() { +