mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-12 15:44:06 -08:00
Code Issues Actions 1 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({
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>

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

@ -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() {