feat(editor): Split Tools and Models into sub-sections (#10159)

This commit is contained in:
oleg
2024-07-23 16:40:28 +02:00
committed by GitHub
parent 95b85dd5c1
commit 3846eb967a
28 changed files with 71 additions and 17 deletions

View File

@@ -9,7 +9,10 @@
<div :class="$style.title">
<slot name="title" />
<p v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')" />
<div :class="$style.action">
<div
v-if="rootView === REGULAR_NODE_CREATOR_VIEW || rootView === TRIGGER_NODE_CREATOR_VIEW"
:class="$style.action"
>
{{ $locale.baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }}
<n8n-link v-if="rootView === REGULAR_NODE_CREATOR_VIEW" @click="$emit('addHttpNode')">
{{ $locale.baseText('nodeCreator.noResults.httpRequest') }}

View File

@@ -93,8 +93,9 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
if (
// Filter-out AI sub-nodes if canvas has no AI nodes and the root view is not AI
!(isAiRootView(stack) || canvasHasAINodes) ||
// or if the source is a plus endpoint or a node connection drop
['plus_endpoint', 'node_connection_drop'].includes(nodeCreatorStore.openSource)
// or if the source is a plus endpoint or a node connection drop and the root view is not AI subcategory
(['plus_endpoint', 'node_connection_drop'].includes(nodeCreatorStore.openSource) &&
!isAiSubcategoryView(stack))
) {
searchBase = filterOutAiNodes(searchBase);
}
@@ -135,6 +136,10 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
return stack.searchItems.map((item) => transformNodeType(item, stack.subcategory));
});
function isAiSubcategoryView(stack: ViewStack) {
return stack.rootView === AI_OTHERS_NODE_CREATOR_VIEW;
}
function getLastActiveStack() {
return viewStacks.value[viewStacks.value.length - 1];
}
@@ -142,7 +147,7 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
// Generate a delta between the global search results(all nodes) and the stack search results
const globalSearchItemsDiff = computed<INodeCreateElement[]>(() => {
const stack = getLastActiveStack();
if (!stack?.search) return [];
if (!stack?.search || isAiSubcategoryView(stack)) return [];
const allNodes = nodeCreatorStore.mergedNodes.map((item) => transformNodeType(item));
// Apply filtering for AI nodes if the current view is not the AI root view
@@ -213,17 +218,25 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
const section = node.properties.codex?.subcategories?.[AI_SUBCATEGORY]?.[0];
if (section) {
const currentItems = sectionsMap.get(section)?.items ?? [];
const subSection = node.properties.codex?.subcategories?.[section]?.[0];
const sectionKey = subSection ?? section;
const currentItems = sectionsMap.get(sectionKey)?.items ?? [];
const isSubnodesSection =
!node.properties.codex?.subcategories?.[AI_SUBCATEGORY].includes(
AI_CATEGORY_ROOT_NODES,
);
sectionsMap.set(section, {
key: section,
title: isSubnodesSection
? `${section} (${i18n.baseText('nodeCreator.subnodes')})`
: section,
let title = section;
if (isSubnodesSection) {
title = `${section} (${i18n.baseText('nodeCreator.subnodes')})`;
}
if (subSection) {
title = subSection;
}
sectionsMap.set(sectionKey, {
key: sectionKey,
title,
items: [...currentItems, node.key],
});
}
@@ -419,6 +432,7 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
activeViewStack,
activeViewStackMode,
globalSearchItemsDiff,
isAiSubcategoryView,
gotoCompatibleConnectionView,
resetViewStacks,
updateCurrentViewStack,

View File

@@ -157,6 +157,12 @@ export function groupItemsInSections(
})
.filter((section) => section.type !== 'section' || section.children.length > 0);
result.sort((a, b) => {
if (a.key.toLowerCase().includes('recommended')) return -1;
if (b.key.toLowerCase().includes('recommended')) return 1;
return 0;
});
if (result.length <= 1) {
return items;
}