mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-13 16:14:07 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(editor): Improve new canvas discovery process (no-changelog) (#11349)

Browse source
This commit is contained in:
Alex Grozav 2024-10-22 17:07:07 +03:00 committed by GitHub
parent 08a7b5b742
commit 00a48b781e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
View file

@ -189,7 +189,7 @@ const workflowMenuItems = computed<ActionDropdownItem[]>(() => {
actions.push({ actions.push({
id: WORKFLOW_MENU_ACTIONS.SWITCH_NODE_VIEW_VERSION, id: WORKFLOW_MENU_ACTIONS.SWITCH_NODE_VIEW_VERSION,
...(nodeViewSwitcherDiscovered.value ...(nodeViewSwitcherDiscovered.value || nodeViewVersion.value === '2'
? {} ? {}
: { badge: locale.baseText('menuActions.badge.new') }), : { badge: locale.baseText('menuActions.badge.new') }),
label: label:
@ -398,8 +398,8 @@ async function handleFileImport(): Promise<void> {
} }
} }
function onWorkflowMenuOpen() { function onWorkflowMenuOpen(visible: boolean) {
setNodeViewSwitcherDropdownOpened(); setNodeViewSwitcherDropdownOpened(visible);
} }
async function onWorkflowMenuSelect(action: WORKFLOW_MENU_ACTIONS): Promise<void> { async function onWorkflowMenuSelect(action: WORKFLOW_MENU_ACTIONS): Promise<void> {
@ -735,7 +735,7 @@ function showCreateWorkflowSuccessToast(id?: string) {
data-test-id="workflow-import-input" data-test-id="workflow-import-input"
@change="handleFileImport()" @change="handleFileImport()"
/> />
<N8nTooltip :visible="isNodeViewDiscoveryTooltipVisible"> <N8nTooltip dismissible :visible="isNodeViewDiscoveryTooltipVisible">
<N8nActionDropdown <N8nActionDropdown
:items="workflowMenuItems" :items="workflowMenuItems"
data-test-id="workflow-menu" data-test-id="workflow-menu"
@ -744,6 +744,11 @@ function showCreateWorkflowSuccessToast(id?: string) {
/> />
<template #content> <template #content>
{{ $locale.baseText('menuActions.nodeViewDiscovery.tooltip') }} {{ $locale.baseText('menuActions.nodeViewDiscovery.tooltip') }}
<N8nIcon
:class="$style.closeNodeViewDiscovery"
icon="times-circle"
@click="setNodeViewSwitcherDiscovered"
/>
</template> </template>
</N8nTooltip> </N8nTooltip>
</div> </div>
@ -834,4 +839,11 @@ $--header-spacing: 20px;
.disabledShareButton { .disabledShareButton {
cursor: not-allowed; cursor: not-allowed;
} }
.closeNodeViewDiscovery {
position: absolute;
right: var(--spacing-xs);
top: var(--spacing-xs);
cursor: pointer;
}
</style> </style>

29
packages/editor-ui/src/composables/useNodeViewVersionSwitcher.ts
View file

@ -1,25 +1,28 @@
import { computed, ref } from 'vue'; import { computed } from 'vue';
import { useLocalStorage } from '@vueuse/core'; import { useLocalStorage, debouncedRef } from '@vueuse/core';
import { useSettingsStore } from '@/stores/settings.store'; import { useSettingsStore } from '@/stores/settings.store';
import { useTelemetry } from '@/composables/useTelemetry'; import { useTelemetry } from '@/composables/useTelemetry';
import { useWorkflowsStore } from '@/stores/workflows.store'; import { useWorkflowsStore } from '@/stores/workflows.store';
import { debouncedRef } from '@vueuse/core'; import { useNDVStore } from '@/stores/ndv.store';
export function useNodeViewVersionSwitcher() { export function useNodeViewVersionSwitcher() {
const ndvStore = useNDVStore();
const workflowsStore = useWorkflowsStore(); const workflowsStore = useWorkflowsStore();
const settingsStore = useSettingsStore(); const settingsStore = useSettingsStore();
const telemetry = useTelemetry(); const telemetry = useTelemetry();
const isNewUser = computed(() => workflowsStore.activeWorkflows.length === 0); const isNewUser = computed(() => workflowsStore.activeWorkflows.length === 0);
const isNewUserDebounced = debouncedRef(isNewUser, 3000);
const nodeViewVersion = useLocalStorage( const nodeViewVersion = useLocalStorage(
'NodeView.version', 'NodeView.version',
settingsStore.deploymentType === 'n8n-internal' ? '2' : '1', settingsStore.deploymentType === 'n8n-internal' ? '2' : '1',
); );
const nodeViewSwitcherDropdownOpened = ref(false); function setNodeViewSwitcherDropdownOpened(visible: boolean) {
function setNodeViewSwitcherDropdownOpened() { if (!visible) {
nodeViewSwitcherDropdownOpened.value = true; setNodeViewSwitcherDiscovered();
}
} }
const nodeViewSwitcherDiscovered = useLocalStorage('NodeView.switcher.discovered', false); const nodeViewSwitcherDiscovered = useLocalStorage('NodeView.switcher.discovered', false);
@ -27,19 +30,11 @@ export function useNodeViewVersionSwitcher() {
nodeViewSwitcherDiscovered.value = true; nodeViewSwitcherDiscovered.value = true;
} }
const isNodeViewDiscoveryTooltipVisibleRaw = computed( const isNodeViewDiscoveryTooltipVisible = computed(
() => () =>
!ndvStore.activeNodeName &&
nodeViewVersion.value !== '2' && nodeViewVersion.value !== '2' &&
!( !(isNewUserDebounced.value || nodeViewSwitcherDiscovered.value),
isNewUser.value ||
nodeViewSwitcherDropdownOpened.value ||
nodeViewSwitcherDiscovered.value
),
);
const isNodeViewDiscoveryTooltipVisible = debouncedRef(
isNodeViewDiscoveryTooltipVisibleRaw,
3000,
); );
function switchNodeViewVersion() { function switchNodeViewVersion() {