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

@@ -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');
});