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>
This commit is contained in:
Elias Meire
2023-12-04 10:02:07 +01:00
committed by GitHub
parent 485a0c73cb
commit 39fa8d21bb
12 changed files with 271 additions and 80 deletions

View File

@@ -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;