feat(editor): Add sections to create node panel (#7831)

This PR sets the stage for the node creator to handle sections within
subcategories. No visible changes result from this PR; the next PR will
define sections and assign nodes accordingly.

Sections are configurable in
`packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts`:
```
{
	type: 'subcategory',
	key: FILES_SUBCATEGORY,
	category: CORE_NODES_CATEGORY,
	properties: {
		title: FILES_SUBCATEGORY,
		icon: 'file-alt',
		sections: [
			{
				key: 'popular',
				title: i18n.baseText('nodeCreator.sectionNames.popular'),
				items: ['n8n-nodes-base.readBinaryFiles', 'n8n-nodes-base.compression'],
			},
		],
	},
},
```

For example:
<img width="302" alt="image"
src="https://github.com/n8n-io/n8n/assets/8850410/74470c07-f4ea-4306-bd4a-8d33bd769b86">

---------

Co-authored-by: Michael Kret <michael.k@radency.com>

cypress/e2e/4-node-creator.cy.ts

@@ -101,8 +101,8 @@ describe('Node Creator', () => {
 		nodeCreatorFeature.getters.searchBar().find('input').type('{rightarrow}');
 		nodeCreatorFeature.getters.activeSubcategory().should('have.text', 'FTP');
 		nodeCreatorFeature.getters.searchBar().find('input').clear().type('file');
-		// Navigate to rename action which should be the 4th item
-		nodeCreatorFeature.getters.searchBar().find('input').type('{uparrow}{rightarrow}');
+		// The 1st trigger is selected, up 1x to the collapsable header, up 2x to the last action (rename)
+		nodeCreatorFeature.getters.searchBar().find('input').type('{uparrow}{uparrow}{rightarrow}');
 		NDVModal.getters.parameterInput('operation').find('input').should('have.value', 'Rename');
 	});
 

packages/editor-ui/src/Interface.ts

@@ -902,6 +902,7 @@ export interface SubcategoryItemProps {
 	subcategory?: string;
 	defaults?: INodeParameters;
 	forceIncludeNodes?: string[];
+	sections?: string[];
 }
 export interface ViewItemProps {
 	title: string;
@@ -947,6 +948,13 @@ export interface SubcategoryCreateElement extends CreateElementBase {
 	type: 'subcategory';
 	properties: SubcategoryItemProps;
 }
+
+export interface SectionCreateElement extends CreateElementBase {
+	type: 'section';
+	title: string;
+	children: INodeCreateElement[];
+}
+
 export interface ViewCreateElement extends CreateElementBase {
 	type: 'view';
 	properties: ViewItemProps;
@@ -968,6 +976,7 @@ export type INodeCreateElement =
 	| NodeCreateElement
 	| CategoryCreateElement
 	| SubcategoryCreateElement
+	| SectionCreateElement
 	| ViewCreateElement
 	| LabelCreateElement
 	| ActionCreateElement;

packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue

@@ -16,7 +16,7 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
 
 import { TriggerView, RegularView, AIView, AINodesView } from '../viewsData';
-import { transformNodeType } from '../utils';
+import { flattenCreateElements, transformNodeType } from '../utils';
 import { useViewStacks } from '../composables/useViewStacks';
 import { useKeyboardNavigation } from '../composables/useKeyboardNavigation';
 import ItemsRenderer from '../Renderers/ItemsRenderer.vue';
@@ -71,6 +71,7 @@ function onSelected(item: INodeCreateElement) {
 			forceIncludeNodes: item.properties.forceIncludeNodes,
 			baseFilter: baseSubcategoriesFilter,
 			itemsMapper: subcategoriesMapper,
+			sections: item.properties.sections,
 		});
 
 		telemetry.trackNodesPanel('nodeCreateList.onSubcategorySelected', {
@@ -160,7 +161,8 @@ function subcategoriesMapper(item: INodeCreateElement) {
 	return item;
 }
 
-function baseSubcategoriesFilter(item: INodeCreateElement) {
+function baseSubcategoriesFilter(item: INodeCreateElement): boolean {
+	if (item.type === 'section') return item.children.every(baseSubcategoriesFilter);
 	if (item.type !== 'node') return false;
 
 	const hasTriggerGroup = item.properties.group.includes('trigger');
@@ -180,10 +182,10 @@ function arrowLeft() {
 }
 
 function onKeySelect(activeItemId: string) {
-	const mergedItems = [
-		...(activeViewStack.value.items || []),
-		...(globalSearchItemsDiff.value || []),
-	];
+	const mergedItems = flattenCreateElements([
+		...(activeViewStack.value.items ?? []),
+		...(globalSearchItemsDiff.value ?? []),
+	]);
 
 	const item = mergedItems.find((i) => i.uuid === activeItemId);
 	if (!item) return;

packages/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue

@@ -39,22 +39,36 @@ const searchPlaceholder = computed(() =>
 
 const nodeCreatorView = computed(() => useNodeCreatorStore().selectedView);
 
+function getDefaultActiveIndex(search: string = ''): number {
+	if (activeViewStack.value.activeIndex) {
+		return activeViewStack.value.activeIndex;
+	}
+
+	if (activeViewStack.value.mode === 'actions') {
+		// For actions, set the active focus to the first action, not category
+		return 1;
+	} else if (activeViewStack.value.sections) {
+		// For sections, set the active focus to the first node, not section (unless searching)
+		return search ? 0 : 1;
+	}
+
+	return 0;
+}
+
 function onSearch(value: string) {
 	if (activeViewStack.value.uuid) {
 		updateCurrentViewStack({ search: value });
-		void setActiveItemIndex(activeViewStack.value.activeIndex ?? 0);
+		void setActiveItemIndex(getDefaultActiveIndex(value));
 	}
 }
 
 function onTransitionEnd() {
-	// For actions, set the active focus to the first action, not category
-	const newStackIndex = activeViewStack.value.mode === 'actions' ? 1 : 0;
-	void setActiveItemIndex(activeViewStack.value.activeIndex || 0 || newStackIndex);
+	void setActiveItemIndex(getDefaultActiveIndex());
 }
 
 onMounted(() => {
 	attachKeydownEvent();
-	void setActiveItemIndex(activeViewStack.value.activeIndex ?? 0);
+	void setActiveItemIndex(getDefaultActiveIndex());
 });
 
 onUnmounted(() => {

packages/editor-ui/src/components/Node/NodeCreator/Renderers/ItemsRenderer.vue

@@ -8,6 +8,8 @@ import SubcategoryItem from '../ItemTypes/SubcategoryItem.vue';
 import LabelItem from '../ItemTypes/LabelItem.vue';
 import ActionItem from '../ItemTypes/ActionItem.vue';
 import ViewItem from '../ItemTypes/ViewItem.vue';
+import CategorizedItemsRenderer from './CategorizedItemsRenderer.vue';
+
 export interface Props {
 	elements: INodeCreateElement[];
 	activeIndex?: number;
@@ -110,46 +112,55 @@ watch(
 		@leave="leave"
 	>
 		<slot />
-		<div
-			v-for="item in elements"
-			:key="item.uuid"
-			data-test-id="item-iterator-item"
-			:class="{
-				clickable: !disabled,
-				[$style.active]: activeItemId === item.uuid,
-				[$style.iteratorItem]: true,
-				[$style[item.type]]: true,
-			}"
-			ref="iteratorItems"
-			:data-keyboard-nav-type="item.type !== 'label' ? item.type : undefined"
-			:data-keyboard-nav-id="item.uuid"
-			@click="wrappedEmit('selected', item)"
-		>
+		<div v-for="item in elements" :key="item.uuid">
 			<div v-if="renderedItems.includes(item)">
-				<label-item v-if="item.type === 'label'" :item="item" />
-				<subcategory-item v-if="item.type === 'subcategory'" :item="item.properties" />
-
-				<node-item
-					v-if="item.type === 'node'"
-					:nodeType="item.properties"
-					:active="true"
-					:subcategory="item.subcategory"
-				/>
-
-				<action-item
-					v-if="item.type === 'action'"
-					:nodeType="item.properties"
-					:action="item.properties"
-					:active="true"
-				/>
-
-				<view-item
-					v-else-if="item.type === 'view'"
-					:view="item.properties"
-					:class="$style.viewItem"
-				/>
+				<CategorizedItemsRenderer
+					v-if="item.type === 'section'"
+					:elements="item.children"
+					expanded
+					:category="item.title"
+					@selected="(child) => wrappedEmit('selected', child)"
+				>
+				</CategorizedItemsRenderer>
+
+				<div
+					v-else
+					:class="{
+						clickable: !disabled,
+						[$style.active]: activeItemId === item.uuid,
+						[$style.iteratorItem]: true,
+						[$style[item.type]]: true,
+					}"
+					ref="iteratorItems"
+					data-test-id="item-iterator-item"
+					:data-keyboard-nav-type="item.type !== 'label' ? item.type : undefined"
+					:data-keyboard-nav-id="item.uuid"
+					@click="wrappedEmit('selected', item)"
+				>
+					<label-item v-if="item.type === 'label'" :item="item" />
+					<subcategory-item v-if="item.type === 'subcategory'" :item="item.properties" />
+
+					<node-item
+						v-if="item.type === 'node'"
+						:nodeType="item.properties"
+						:active="true"
+						:subcategory="item.subcategory"
+					/>
+
+					<action-item
+						v-if="item.type === 'action'"
+						:nodeType="item.properties"
+						:action="item.properties"
+						:active="true"
+					/>
+
+					<view-item
+						v-else-if="item.type === 'view'"
+						:view="item.properties"
+						:class="$style.viewItem"
+					/>
+				</div>
 			</div>
-
 			<n8n-loading :loading="true" :rows="1" variant="p" :class="$style.itemSkeleton" v-else />
 		</div>
 	</div>

packages/editor-ui/src/components/Node/NodeCreator/__tests__/ItemsRenderer.test.ts

@@ -7,6 +7,7 @@ import {
 	mockNodeCreateElement,
 	mockActionCreateElement,
 	mockViewCreateElement,
+	mockSectionCreateElement,
 } from './utils';
 import ItemsRenderer from '../Renderers/ItemsRenderer.vue';
 import { createComponentRenderer } from '@/__tests__/render';
@@ -18,13 +19,29 @@ describe('ItemsRenderer', () => {
 		const items = [
 			mockSubcategoryCreateElement({ title: 'Subcategory 1' }),
 			mockLabelCreateElement('subcategory', { key: 'label1' }),
-			mockNodeCreateElement('subcategory', { displayName: 'Node 1', name: 'node1' }),
-			mockNodeCreateElement('subcategory', { displayName: 'Node 2', name: 'node2' }),
-			mockNodeCreateElement('subcategory', { displayName: 'Node 3', name: 'node3' }),
+			mockNodeCreateElement(
+				{ subcategory: 'subcategory' },
+				{ displayName: 'Node 1', name: 'node1' },
+			),
+			mockNodeCreateElement(
+				{ subcategory: 'subcategory' },
+				{ displayName: 'Node 2', name: 'node2' },
+			),
+			mockNodeCreateElement(
+				{ subcategory: 'subcategory' },
+				{ displayName: 'Node 3', name: 'node3' },
+			),
 			mockLabelCreateElement('subcategory', { key: 'label2' }),
-			mockNodeCreateElement('subcategory', { displayName: 'Node 2', name: 'node2' }),
-			mockNodeCreateElement('subcategory', { displayName: 'Node 3', name: 'node3' }),
+			mockNodeCreateElement(
+				{ subcategory: 'subcategory' },
+				{ displayName: 'Node 2', name: 'node2' },
+			),
+			mockNodeCreateElement(
+				{ subcategory: 'subcategory' },
+				{ displayName: 'Node 3', name: 'node3' },
+			),
 			mockSubcategoryCreateElement({ title: 'Subcategory 2' }),
+			mockSectionCreateElement(),
 		];
 
 		const { container } = renderComponent({
@@ -40,8 +57,10 @@ describe('ItemsRenderer', () => {
 		const nodeItems = container.querySelectorAll('.iteratorItem .nodeItem');
 		const labels = container.querySelectorAll('.iteratorItem .label');
 		const subCategories = container.querySelectorAll('.iteratorItem .subCategory');
+		const sections = container.querySelectorAll('.categoryItem');
 
-		expect(nodeItems.length).toBe(5);
+		expect(sections.length).toBe(1);
+		expect(nodeItems.length).toBe(7); // 5 nodes in subcategories | 2 nodes in a section
 		expect(labels.length).toBe(2);
 		expect(subCategories.length).toBe(2);
 	});

packages/editor-ui/src/components/Node/NodeCreator/__tests__/utils.test.ts

@@ -0,0 +1,49 @@
+import type { SectionCreateElement } from '@/Interface';
+import { groupItemsInSections } from '../utils';
+import { mockNodeCreateElement } from './utils';
+
+describe('NodeCreator - utils', () => {
+	describe('groupItemsInSections', () => {
+		it('should handle multiple sections (with "other" section)', () => {
+			const node1 = mockNodeCreateElement({ key: 'popularNode' });
+			const node2 = mockNodeCreateElement({ key: 'newNode' });
+			const node3 = mockNodeCreateElement({ key: 'otherNode' });
+			const result = groupItemsInSections(
+				[node1, node2, node3],
+				[
+					{ key: 'popular', title: 'Popular', items: [node1.key] },
+					{ key: 'new', title: 'New', items: [node2.key] },
+				],
+			) as SectionCreateElement[];
+			expect(result.length).toEqual(3);
+			expect(result[0].title).toEqual('Popular');
+			expect(result[0].children).toEqual([node1]);
+			expect(result[1].title).toEqual('New');
+			expect(result[1].children).toEqual([node2]);
+			expect(result[2].title).toEqual('Other');
+			expect(result[2].children).toEqual([node3]);
+		});
+
+		it('should handle no sections', () => {
+			const node1 = mockNodeCreateElement({ key: 'popularNode' });
+			const node2 = mockNodeCreateElement({ key: 'newNode' });
+			const node3 = mockNodeCreateElement({ key: 'otherNode' });
+			const result = groupItemsInSections([node1, node2, node3], []);
+			expect(result).toEqual([node1, node2, node3]);
+		});
+
+		it('should handle only empty sections', () => {
+			const node1 = mockNodeCreateElement({ key: 'popularNode' });
+			const node2 = mockNodeCreateElement({ key: 'newNode' });
+			const node3 = mockNodeCreateElement({ key: 'otherNode' });
+			const result = groupItemsInSections(
+				[node1, node2, node3],
+				[
+					{ key: 'popular', title: 'Popular', items: [] },
+					{ key: 'new', title: 'New', items: ['someOtherNodeType'] },
+				],
+			);
+			expect(result).toEqual([node1, node2, node3]);
+		});
+	});
+});

packages/editor-ui/src/components/Node/NodeCreator/__tests__/utils.ts

@@ -9,6 +9,7 @@ import type {
 	ViewCreateElement,
 	LabelCreateElement,
 	ActionCreateElement,
+	SectionCreateElement,
 } from '@/Interface';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -74,14 +75,15 @@ const mockLabelItemProps = (overrides?: Partial<LabelItemProps>): LabelItemProps
 });
 
 export const mockNodeCreateElement = (
-	subcategory?: string,
-	overrides?: Partial<SimplifiedNodeType>,
+	overrides?: Partial<NodeCreateElement>,
+	nodeTypeOverrides?: Partial<SimplifiedNodeType>,
 ): NodeCreateElement => ({
 	uuid: uuidv4(),
 	key: uuidv4(),
 	type: 'node',
-	subcategory: subcategory || 'sampleSubcategory',
-	properties: mockSimplifiedNodeType(overrides),
+	subcategory: 'sampleSubcategory',
+	properties: mockSimplifiedNodeType(nodeTypeOverrides),
+	...overrides,
 });
 
 export const mockSubcategoryCreateElement = (
@@ -93,6 +95,17 @@ export const mockSubcategoryCreateElement = (
 	properties: mockSubcategoryItemProps(overrides),
 });
 
+export const mockSectionCreateElement = (
+	overrides?: Partial<SectionCreateElement>,
+): SectionCreateElement => ({
+	uuid: uuidv4(),
+	key: 'popular',
+	type: 'section',
+	title: 'Popular',
+	children: [mockNodeCreateElement(), mockNodeCreateElement()],
+	...overrides,
+});
+
 export const mockViewCreateElement = (
 	overrides?: Partial<ViewCreateElement>,
 ): ViewCreateElement => ({