fix(editor): Universal button snags

packages/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.test.ts

@@ -33,7 +33,7 @@ describe('N8nNavigationDropdown', () => {
 	it('default slot should trigger first level', async () => {
 		const { getByTestId, queryByTestId } = render(NavigationDropdown, {
 			slots: { default: h('button', { 'data-test-id': 'test-trigger' }) },
-			props: { menu: [{ id: 'aaa', title: 'aaa', route: { name: 'projects' } }] },
+			props: { menu: [{ id: 'first', title: 'first', route: { name: 'projects' } }] },
 			global: {
 				plugins: [router],
 			},
@@ -51,9 +51,9 @@ describe('N8nNavigationDropdown', () => {
 			props: {
 				menu: [
 					{
-						id: 'aaa',
-						title: 'aaa',
-						submenu: [{ id: 'bbb', title: 'bbb', route: { name: 'projects' } }],
+						id: 'first',
+						title: 'first',
+						submenu: [{ id: 'nested', title: 'nested', route: { name: 'projects' } }],
 					},
 				],
 			},
@@ -80,9 +80,9 @@ describe('N8nNavigationDropdown', () => {
 			props: {
 				menu: [
 					{
-						id: 'aaa',
-						title: 'aaa',
-						submenu: [{ id: 'bbb', title: 'bbb', route: { name: 'projects' }, icon: 'user' }],
+						id: 'first',
+						title: 'first',
+						submenu: [{ id: 'nested', title: 'nested', route: { name: 'projects' }, icon: 'user' }],
 					},
 				],
 			},
@@ -100,9 +100,9 @@ describe('N8nNavigationDropdown', () => {
 			props: {
 				menu: [
 					{
-						id: 'aaa',
-						title: 'aaa',
-						submenu: [{ id: 'bbb', title: 'bbb', route: { name: 'projects' }, icon: 'user' }],
+						id: 'first',
+						title: 'first',
+						submenu: [{ id: 'nested', title: 'nested', route: { name: 'projects' }, icon: 'user' }],
 					},
 				],
 			},
@@ -114,8 +114,53 @@ describe('N8nNavigationDropdown', () => {
 		await userEvent.click(getByTestId('navigation-submenu-item'));
 
 		expect(emitted('itemClick')).toStrictEqual([
-			[{ active: true, index: 'bbb', indexPath: ['-1', 'aaa', 'bbb'] }],
+			[{ active: true, index: 'nested', indexPath: ['-1', 'first', 'nested'] }],
 		]);
-		expect(emitted('select')).toStrictEqual([['bbb']]);
+		expect(emitted('select')).toStrictEqual([['nested']]);
+	});
+
+	it('should open first level on click', async () => {
+		const { getByTestId, getByText } = render(NavigationDropdown, {
+			slots: { default: h('button', { 'data-test-id': 'test-trigger' }) },
+			props: {
+				menu: [
+					{
+						id: 'first',
+						title: 'first',
+					},
+				],
+			},
+		});
+		expect(getByText('first')).not.toBeVisible();
+		await userEvent.click(getByTestId('test-trigger'));
+		expect(getByText('first')).toBeVisible();
+	});
+
+	it('should toggle nested level on mouseenter / mouseleave', async () => {
+		const { getByTestId, getByText } = render(NavigationDropdown, {
+			slots: { default: h('button', { 'data-test-id': 'test-trigger' }) },
+			props: {
+				menu: [
+					{
+						id: 'first',
+						title: 'first',
+						submenu: [{ id: 'nested', title: 'nested' }],
+					},
+				],
+			},
+		});
+		expect(getByText('first')).not.toBeVisible();
+		await userEvent.click(getByTestId('test-trigger'));
+		expect(getByText('first')).toBeVisible();
+
+		expect(getByText('nested')).not.toBeVisible();
+		await userEvent.hover(getByTestId('navigation-submenu'));
+		await waitFor(() => expect(getByText('nested')).toBeVisible());
+
+		await userEvent.pointer([
+			{ target: getByTestId('navigation-submenu') },
+			{ target: getByTestId('test-trigger') },
+		]);
+		await waitFor(() => expect(getByText('nested')).not.toBeVisible());
 	});
 });

packages/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue

@@ -29,15 +29,26 @@ defineProps<{
 }>();
 
 const menuRef = ref<typeof ElMenu | null>(null);
-const menuIndex = ref('-1');
+const ROOT_MENU_INDEX = '-1';
 
 const emit = defineEmits<{
 	itemClick: [item: MenuItemRegistered];
 	select: [id: Item['id']];
 }>();
 
 const close = () => {
-	menuRef.value?.close(menuIndex.value);
+	menuRef.value?.close(ROOT_MENU_INDEX);
+};
+
+const menuTrigger = ref<'click' | 'hover'>('click');
+const onOpen = (index: string) => {
+	if (index !== ROOT_MENU_INDEX) return;
+	menuTrigger.value = 'hover';
+};
+
+const onClose = (index: string) => {
+	if (index !== ROOT_MENU_INDEX) return;
+	menuTrigger.value = 'click';
 };
 
 defineExpose({
@@ -50,14 +61,16 @@ defineExpose({
 		ref="menuRef"
 		mode="horizontal"
 		unique-opened
-		menu-trigger="click"
+		:menu-trigger="menuTrigger"
 		:ellipsis="false"
 		:class="$style.dropdown"
 		@select="emit('select', $event)"
 		@keyup.escape="close"
+		@open="onOpen"
+		@close="onClose"
 	>
 		<ElSubMenu
-			:index="menuIndex"
+			:index="ROOT_MENU_INDEX"
 			:class="$style.trigger"
 			:popper-offset="-10"
 			:popper-class="$style.submenu"
@@ -70,10 +83,15 @@ defineExpose({
 
 			<template v-for="item in menu" :key="item.id">
 				<template v-if="item.submenu">
-					<ElSubMenu :index="item.id" :popper-offset="-10" data-test-id="navigation-submenu">
+					<ElSubMenu
+						:popper-class="$style.nestedSubmenu"
+						:index="item.id"
+						:popper-offset="-10"
+						data-test-id="navigation-submenu"
+					>
 						<template #title>{{ item.title }}</template>
 						<template v-for="subitem in item.submenu" :key="subitem.id">
-							<ConditionalRouterLink :to="!subitem.disabled && subitem.route">
+							<ConditionalRouterLink :to="(!subitem.disabled && subitem.route) || undefined">
 								<ElMenuItem
 									data-test-id="navigation-submenu-item"
 									:index="subitem.id"
@@ -82,18 +100,20 @@ defineExpose({
 								>
 									<N8nIcon v-if="subitem.icon" :icon="subitem.icon" :class="$style.submenu__icon" />
 									{{ subitem.title }}
+									<slot :name="`item.append.${item.id}`" v-bind="{ item }" />
 								</ElMenuItem>
 							</ConditionalRouterLink>
 						</template>
 					</ElSubMenu>
 				</template>
-				<ConditionalRouterLink v-else :to="!item.disabled && item.route">
+				<ConditionalRouterLink v-else :to="(!item.disabled && item.route) || undefined">
 					<ElMenuItem
 						:index="item.id"
 						:disabled="item.disabled"
 						data-test-id="navigation-menu-item"
 					>
 						{{ item.title }}
+						<slot :name="`item.append.${item.id}`" v-bind="{ item }" />
 					</ElMenuItem>
 				</ConditionalRouterLink>
 			</template>
@@ -125,17 +145,25 @@ defineExpose({
 	}
 }
 
+.nestedSubmenu {
+	:global(.el-menu) {
+		max-height: 450px;
+		overflow: auto;
+	}
+}
+
 .submenu {
 	padding: 5px 0 !important;
 
 	:global(.el-menu--horizontal .el-menu .el-menu-item),
 	:global(.el-menu--horizontal .el-menu .el-sub-menu__title) {
 		color: var(--color-text-dark);
+		background-color: var(--color-menu-background);
 	}
 
 	:global(.el-menu--horizontal .el-menu .el-menu-item:not(.is-disabled):hover),
 	:global(.el-menu--horizontal .el-menu .el-sub-menu__title:not(.is-disabled):hover) {
-		background-color: var(--color-foreground-base);
+		background-color: var(--color-menu-hover-background);
 	}
 
 	:global(.el-popper) {

packages/design-system/src/css/_tokens.dark.scss

@@ -462,6 +462,10 @@
 	--color-configurable-node-name: var(--color-text-dark);
 	--color-secondary-link: var(--prim-color-secondary-tint-200);
 	--color-secondary-link-hover: var(--prim-color-secondary-tint-100);
+
+	--color-menu-background: var(--prim-gray-740);
+	--color-menu-hover-background: var(--prim-gray-670);
+	--color-menu-active-background: var(--prim-gray-670);
 }
 
 body[data-theme='dark'] {

packages/design-system/src/css/_tokens.scss

@@ -533,6 +533,11 @@
 	--color-secondary-link: var(--color-secondary);
 	--color-secondary-link-hover: var(--color-secondary-shade-1);
 
+	// Menu
+	--color-menu-background: var(--prim-gray-0);
+	--color-menu-hover-background: var(--prim-gray-120);
+	--color-menu-active-background: var(--prim-gray-120);
+
 	// Generated Color Shades from 50 to 950
 	// Not yet used in design system
 	@each $color in ('neutral', 'success', 'warning', 'danger') {

packages/editor-ui/src/components/MainSidebar.vue

@@ -291,7 +291,12 @@ const checkWidthAndAdjustSidebar = async (width: number) => {
 	}
 };
 
-const { menu, handleSelect: handleMenuSelect } = useGlobalEntityCreation();
+const {
+	menu,
+	handleSelect: handleMenuSelect,
+	CREATE_PROJECT_ID,
+	projectsLimitReachedMessage,
+} = useGlobalEntityCreation();
 onClickOutside(createBtn as Ref<VueInstance>, () => {
 	createBtn.value?.close();
 });
@@ -322,7 +327,23 @@ onClickOutside(createBtn as Ref<VueInstance>, () => {
 				:menu="menu"
 				@select="handleMenuSelect"
 			>
-				<N8nIconButton icon="plus" type="secondary" outline />
+				<n8n-icon-button icon="plus" type="secondary" outline />
+				<template #[`item.append.${CREATE_PROJECT_ID}`]="{ item }">
+					<n8n-tooltip
+						v-if="item.disabled"
+						placement="right"
+						:content="projectsLimitReachedMessage"
+					>
+						<N8nButton
+							:size="'mini'"
+							style="margin-left: auto"
+							type="tertiary"
+							@click="handleMenuSelect(item.id)"
+						>
+							Upgrade
+						</N8nButton>
+					</n8n-tooltip>
+				</template>
 			</N8nNavigationDropdown>
 		</div>
 		<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">

packages/editor-ui/src/components/Projects/ProjectHeader.test.ts

@@ -3,11 +3,13 @@ import { within } from '@testing-library/dom';
 import { createComponentRenderer } from '@/__tests__/render';
 import { mockedStore } from '@/__tests__/utils';
 import { createTestProject } from '@/__tests__/data/projects';
-import { useRoute } from 'vue-router';
+import * as router from 'vue-router';
+import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
 import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 import { useProjectsStore } from '@/stores/projects.store';
 import type { Project } from '@/types/projects.types';
 import { ProjectTypes } from '@/types/projects.types';
+import { VIEWS } from '@/constants';
 
 vi.mock('vue-router', async () => {
 	const actual = await vi.importActual('vue-router');
@@ -35,13 +37,13 @@ const renderComponent = createComponentRenderer(ProjectHeader, {
 	},
 });
 
-let route: ReturnType<typeof useRoute>;
+let route: ReturnType<typeof router.useRoute>;
 let projectsStore: ReturnType<typeof mockedStore<typeof useProjectsStore>>;
 
 describe('ProjectHeader', () => {
 	beforeEach(() => {
 		createTestingPinia();
-		route = useRoute();
+		route = router.useRoute();
 		projectsStore = mockedStore(useProjectsStore);
 
 		projectsStore.teamProjectsLimit = -1;
@@ -159,4 +161,21 @@ describe('ProjectHeader', () => {
 
 		expect(within(getByTestId('resource-add')).getByRole('button', { name: label })).toBeVisible();
 	});
+
+	it('should not render creation button in setting page', async () => {
+		projectsStore.currentProject = createTestProject({ type: ProjectTypes.Personal });
+		vi.spyOn(router, 'useRoute').mockReturnValueOnce({
+			name: VIEWS.PROJECT_SETTINGS,
+		} as RouteLocationNormalizedLoadedGeneric);
+		const { queryByTestId } = renderComponent({
+			global: {
+				stubs: {
+					N8nNavigationDropdown: {
+						template: '<div><slot></slot></div>',
+					},
+				},
+			},
+		});
+		expect(queryByTestId('resource-add')).not.toBeInTheDocument();
+	});
 });