From 00a48b781efcea6b77d4a500adb26c55356e05cf Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 22 Oct 2024 17:07:07 +0300
Subject: [PATCH] feat(editor): Improve new canvas discovery process
 (no-changelog) (#11349)

---
 .../components/MainHeader/WorkflowDetails.vue | 20 ++++++++++---
 .../composables/useNodeViewVersionSwitcher.ts | 29 ++++++++-----------
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 81bc0033cbe..3617af417ab 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -189,7 +189,7 @@ const workflowMenuItems = computed<ActionDropdownItem[]>(() => {
 
 	actions.push({
 		id: WORKFLOW_MENU_ACTIONS.SWITCH_NODE_VIEW_VERSION,
-		...(nodeViewSwitcherDiscovered.value
+		...(nodeViewSwitcherDiscovered.value || nodeViewVersion.value === '2'
 			? {}
 			: { badge: locale.baseText('menuActions.badge.new') }),
 		label:
@@ -398,8 +398,8 @@ async function handleFileImport(): Promise<void> {
 	}
 }
 
-function onWorkflowMenuOpen() {
-	setNodeViewSwitcherDropdownOpened();
+function onWorkflowMenuOpen(visible: boolean) {
+	setNodeViewSwitcherDropdownOpened(visible);
 }
 
 async function onWorkflowMenuSelect(action: WORKFLOW_MENU_ACTIONS): Promise<void> {
@@ -735,7 +735,7 @@ function showCreateWorkflowSuccessToast(id?: string) {
 					data-test-id="workflow-import-input"
 					@change="handleFileImport()"
 				/>
-				<N8nTooltip :visible="isNodeViewDiscoveryTooltipVisible">
+				<N8nTooltip dismissible :visible="isNodeViewDiscoveryTooltipVisible">
 					<N8nActionDropdown
 						:items="workflowMenuItems"
 						data-test-id="workflow-menu"
@@ -744,6 +744,11 @@ function showCreateWorkflowSuccessToast(id?: string) {
 					/>
 					<template #content>
 						{{ $locale.baseText('menuActions.nodeViewDiscovery.tooltip') }}
+						<N8nIcon
+							:class="$style.closeNodeViewDiscovery"
+							icon="times-circle"
+							@click="setNodeViewSwitcherDiscovered"
+						/>
 					</template>
 				</N8nTooltip>
 			</div>
@@ -834,4 +839,11 @@ $--header-spacing: 20px;
 .disabledShareButton {
 	cursor: not-allowed;
 }
+
+.closeNodeViewDiscovery {
+	position: absolute;
+	right: var(--spacing-xs);
+	top: var(--spacing-xs);
+	cursor: pointer;
+}
 </style>
diff --git a/packages/editor-ui/src/composables/useNodeViewVersionSwitcher.ts b/packages/editor-ui/src/composables/useNodeViewVersionSwitcher.ts
index 8e0690d6927..336bf388b6b 100644
--- a/packages/editor-ui/src/composables/useNodeViewVersionSwitcher.ts
+++ b/packages/editor-ui/src/composables/useNodeViewVersionSwitcher.ts
@@ -1,25 +1,28 @@
-import { computed, ref } from 'vue';
-import { useLocalStorage } from '@vueuse/core';
+import { computed } from 'vue';
+import { useLocalStorage, debouncedRef } from '@vueuse/core';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { debouncedRef } from '@vueuse/core';
+import { useNDVStore } from '@/stores/ndv.store';
 
 export function useNodeViewVersionSwitcher() {
+	const ndvStore = useNDVStore();
 	const workflowsStore = useWorkflowsStore();
 	const settingsStore = useSettingsStore();
 	const telemetry = useTelemetry();
 
 	const isNewUser = computed(() => workflowsStore.activeWorkflows.length === 0);
+	const isNewUserDebounced = debouncedRef(isNewUser, 3000);
 
 	const nodeViewVersion = useLocalStorage(
 		'NodeView.version',
 		settingsStore.deploymentType === 'n8n-internal' ? '2' : '1',
 	);
 
-	const nodeViewSwitcherDropdownOpened = ref(false);
-	function setNodeViewSwitcherDropdownOpened() {
-		nodeViewSwitcherDropdownOpened.value = true;
+	function setNodeViewSwitcherDropdownOpened(visible: boolean) {
+		if (!visible) {
+			setNodeViewSwitcherDiscovered();
+		}
 	}
 
 	const nodeViewSwitcherDiscovered = useLocalStorage('NodeView.switcher.discovered', false);
@@ -27,19 +30,11 @@ export function useNodeViewVersionSwitcher() {
 		nodeViewSwitcherDiscovered.value = true;
 	}
 
-	const isNodeViewDiscoveryTooltipVisibleRaw = computed(
+	const isNodeViewDiscoveryTooltipVisible = computed(
 		() =>
+			!ndvStore.activeNodeName &&
 			nodeViewVersion.value !== '2' &&
-			!(
-				isNewUser.value ||
-				nodeViewSwitcherDropdownOpened.value ||
-				nodeViewSwitcherDiscovered.value
-			),
-	);
-
-	const isNodeViewDiscoveryTooltipVisible = debouncedRef(
-		isNodeViewDiscoveryTooltipVisibleRaw,
-		3000,
+			!(isNewUserDebounced.value || nodeViewSwitcherDiscovered.value),
 	);
 
 	function switchNodeViewVersion() {