fix: When community node added as tool, don't show details view (#16539)

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<string>(() => {
 		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;
 	}
 

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

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<ViewStack>({ 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<ViewStack>({ 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);
+		});
+	});
 });

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;
+};