Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 14 commits into from
Dec 4, 2023
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/editor-ui/src/Interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -892,6 +892,7 @@ export interface SubcategoryItemProps {
subcategory?: string;
defaults?: INodeParameters;
forceIncludeNodes?: string[];
sections?: string[];
}
export interface ViewItemProps {
title: string;
Expand Down Expand Up @@ -937,6 +938,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;
Expand All @@ -958,6 +966,7 @@ export type INodeCreateElement =
| NodeCreateElement
| CategoryCreateElement
| SubcategoryCreateElement
| SectionCreateElement
| ViewCreateElement
| LabelCreateElement
| ActionCreateElement;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -71,6 +71,7 @@ function onSelected(item: INodeCreateElement) {
forceIncludeNodes: item.properties.forceIncludeNodes,
baseFilter: baseSubcategoriesFilter,
itemsMapper: subcategoriesMapper,
sections: item.properties.sections,
});

telemetry.trackNodesPanel('nodeCreateList.onSubcategorySelected', {
Expand Down Expand Up @@ -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');
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
mockNodeCreateElement,
mockActionCreateElement,
mockViewCreateElement,
mockSectionCreateElement,
} from './utils';
import ItemsRenderer from '../Renderers/ItemsRenderer.vue';
import { createComponentRenderer } from '@/__tests__/render';
Expand All @@ -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({
Expand All @@ -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);
});
Expand Down
Original file line number Diff line number Diff line change
@@ -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]);
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import type {
ViewCreateElement,
LabelCreateElement,
ActionCreateElement,
SectionCreateElement,
} from '@/Interface';
import { v4 as uuidv4 } from 'uuid';

Expand Down Expand Up @@ -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 = (
Expand All @@ -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 => ({
Expand Down
Loading