From dadbd5fafe744259cfea3d368c334b0a397894f5 Mon Sep 17 00:00:00 2001 From: Michael Kret <88898367+michael-radency@users.noreply.github.com> Date: Fri, 20 Jun 2025 14:57:00 +0300 Subject: [PATCH] fix: When community node added as tool, don't show details view (#16539) --- .../Node/NodeCreator/ItemTypes/NodeItem.vue | 6 ++--- .../Node/NodeCreator/Modes/NodesMode.vue | 3 ++- .../components/Node/NodeCreator/utils.test.ts | 25 +++++++++++++++++++ .../src/components/Node/NodeCreator/utils.ts | 8 ++++++ 4 files changed, 38 insertions(+), 4 deletions(-) diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue index 278a5f40e7..92e2f85af4 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue @@ -21,7 +21,7 @@ import { N8nTooltip } from '@n8n/design-system'; import { useActions } from '../composables/useActions'; import { useViewStacks } from '../composables/useViewStacks'; import { useI18n } from '@n8n/i18n'; -import { isNodePreviewKey, removePreviewToken } from '../utils'; +import { isNodePreviewKey, removePreviewToken, shouldShowCommunityNodeDetails } from '../utils'; export interface Props { nodeType: SimplifiedNodeType; @@ -68,9 +68,9 @@ const description = computed(() => { fallback: props.nodeType.description, }); }); + const showActionArrow = computed(() => { - // show action arrow if it's a community node and the community node details are not opened - if (isCommunityNode.value && !activeViewStack.communityNodeDetails) { + if (shouldShowCommunityNodeDetails(isCommunityNode.value, activeViewStack)) { return true; } diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue index 00b931e647..f6eaa50030 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue @@ -28,6 +28,7 @@ import { prepareCommunityNodeDetailsViewStack, transformNodeType, getRootSearchCallouts, + shouldShowCommunityNodeDetails, } from '../utils'; import { useViewStacks } from '../composables/useViewStacks'; import { useKeyboardNavigation } from '../composables/useKeyboardNavigation'; @@ -140,7 +141,7 @@ function onSelected(item: INodeCreateElement) { if (item.type === 'node') { let nodeActions = getFilteredActions(item, actions); - if (isCommunityPackageName(item.key) && !activeViewStack.value.communityNodeDetails) { + if (shouldShowCommunityNodeDetails(isCommunityPackageName(item.key), activeViewStack.value)) { if (!nodeActions.length) { nodeActions = getFilteredActions(item, communityNodesAndActions.value.actions); } diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/utils.test.ts b/packages/frontend/editor-ui/src/components/Node/NodeCreator/utils.test.ts index 7e384cd0e0..ce73fbad9f 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/utils.test.ts +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/utils.test.ts @@ -11,6 +11,7 @@ import { prepareCommunityNodeDetailsViewStack, removeTrailingTrigger, sortNodeCreateElements, + shouldShowCommunityNodeDetails, } from './utils'; import { mockActionCreateElement, @@ -20,6 +21,9 @@ import { import { setActivePinia } from 'pinia'; import { createTestingPinia } from '@pinia/testing'; +import { mock } from 'vitest-mock-extended'; +import type { ViewStack } from './composables/useViewStacks'; + vi.mock('@/stores/settings.store', () => ({ useSettingsStore: vi.fn(() => ({ settings: {}, isAskAiEnabled: true })), })); @@ -354,4 +358,25 @@ describe('NodeCreator - utils', () => { expect(removeTrailingTrigger(input)).toEqual(expected); }); }); + + describe('shouldShowCommunityNodeDetails', () => { + it('should return false if rootView is "AI Other" and title is "Tools"', () => { + const viewStack = mock({ rootView: 'AI Other', title: 'Tools' }); + expect(shouldShowCommunityNodeDetails(true, viewStack)).toBe(false); + expect(shouldShowCommunityNodeDetails(false, viewStack)).toBe(false); + }); + + it('should return false if communityNode is true and communityNodeDetails is defined in viewStack', () => { + const viewStack = mock({ communityNodeDetails: { title: 'test' } }); + expect(shouldShowCommunityNodeDetails(true, viewStack)).toBe(false); + }); + + it('should return true if communityNode is true and communityNodeDetails is not defined in viewStack, and the viewStack does not have rootView "AI Other" and title "Tools"', () => { + expect(shouldShowCommunityNodeDetails(true, {})).toBe(true); + }); + + it('should return false if communityNode is false and communityNodeDetails is not defined in viewStack', () => { + expect(shouldShowCommunityNodeDetails(false, {})).toBe(false); + }); + }); }); diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/utils.ts b/packages/frontend/editor-ui/src/components/Node/NodeCreator/utils.ts index 2bd39fb035..3b9c7c2b46 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/utils.ts +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/utils.ts @@ -328,3 +328,11 @@ export function getRootSearchCallouts(search: string, { isRagStarterCalloutVisib } return results; } + +export const shouldShowCommunityNodeDetails = (communityNode: boolean, viewStack: ViewStack) => { + if (viewStack.rootView === 'AI Other' && viewStack.title === 'Tools') { + return false; + } + + return communityNode && !viewStack.communityNodeDetails; +};