admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 10:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): NDV UI overhaul experiment (#14209)

Browse Source 
Co-authored-by: jakeranallo <jake.ranallo@gmail.com>
This commit is contained in:
Elias Meire
2025-07-04 17:14:17 +02:00
committed by GitHub
parent 5db122be0d
commit 6ef38411d8
33 changed files with 2528 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/frontend/editor-ui/src/views/NodeView.vue
View File

@@ -27,7 +27,6 @@ import type {
AddedNodesAndConnections,
IExecutionResponse,
INodeUi,
IUpdateInformation,
IWorkflowDb,
NodeCreatorOpenSource,
NodeFilterType,
@@ -67,11 +66,11 @@ import {
STICKY_NODE_TYPE,
VALID_WORKFLOW_IMPORT_URL_REGEX,
VIEWS,
NDV_UI_OVERHAUL_EXPERIMENT,
WORKFLOW_SETTINGS_MODAL_KEY,
} from '@/constants';
import { useSourceControlStore } from '@/stores/sourceControl.store';
import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
import { usePostHog } from '@/stores/posthog.store';
import { useExternalHooks } from '@/composables/useExternalHooks';
import {
NodeConnectionTypes,
@@ -129,6 +128,7 @@ import type { CanvasLayoutEvent } from '@/composables/useCanvasLayout';
import { useWorkflowSaving } from '@/composables/useWorkflowSaving';
import { useBuilderStore } from '@/stores/builder.store';
import { useFoldersStore } from '@/stores/folders.store';
import { usePostHog } from '@/stores/posthog.store';
import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
import { useWorkflowExtraction } from '@/composables/useWorkflowExtraction';
import { useAgentRequestStore } from '@n8n/stores/useAgentRequestStore';
@@ -149,6 +149,9 @@ const LazyNodeCreation = defineAsyncComponent(
const LazyNodeDetailsView = defineAsyncComponent(
async () => await import('@/components/NodeDetailsView.vue'),
);
const LazyNodeDetailsViewV2 = defineAsyncComponent(
async () => await import('@/components/NodeDetailsViewV2.vue'),
);
const LazySetupWorkflowCredentialsButton = defineAsyncComponent(
async () =>
@@ -191,6 +194,7 @@ const focusPanelStore = useFocusPanelStore();
const templatesStore = useTemplatesStore();
const builderStore = useBuilderStore();
const foldersStore = useFoldersStore();
const posthogStore = usePostHog();
const agentRequestStore = useAgentRequestStore();
const logsStore = useLogsStore();
@@ -278,6 +282,12 @@ const isReadOnlyRoute = computed(() => !!route?.meta?.readOnlyCanvas);
const isReadOnlyEnvironment = computed(() => {
return sourceControlStore.preferences.branchReadOnly;
});
const isNDVV2 = computed(() =>
posthogStore.isVariantEnabled(
NDV_UI_OVERHAUL_EXPERIMENT.name,
NDV_UI_OVERHAUL_EXPERIMENT.variant,
),
);
const isCanvasReadOnly = computed(() => {
return (
@@ -875,9 +885,9 @@ async function onCreateWorkflow() {
await router.push({ name: VIEWS.NEW_WORKFLOW });
}
function onRenameNode(parameterData: IUpdateInformation) {
if (parameterData.name === 'name' && parameterData.oldValue) {
void renameNode(parameterData.oldValue as string, parameterData.value as string);
function onRenameNode(name: string) {
if (ndvStore.activeNode?.name) {
void renameNode(ndvStore.activeNode.name, name);
}
}
@@ -2117,19 +2127,30 @@ onBeforeUnmount(() => {
</Suspense>
<Suspense>
<LazyNodeDetailsView
v-if="!isNDVV2"
:workflow-object="editableWorkflowObject"
:read-only="isCanvasReadOnly"
:is-production-execution-preview="isProductionExecutionPreview"
:renaming="false"
@value-changed="onRenameNode"
@value-changed="onRenameNode($event.value as string)"
@stop-execution="onStopExecution"
@switch-selected-node="onSwitchActiveNode"
@open-connection-node-creator="onOpenSelectiveNodeCreator"
@save-keyboard-shortcut="onSaveWorkflow"
/>
</Suspense>
<Suspense>
<LazyNodeDetailsViewV2
v-if="isNDVV2"
:workflow-object="editableWorkflowObject"
:read-only="isCanvasReadOnly"
:is-production-execution-preview="isProductionExecutionPreview"
@rename-node="onRenameNode"
@stop-execution="onStopExecution"
@switch-selected-node="onSwitchActiveNode"
@open-connection-node-creator="onOpenSelectiveNodeCreator"
@save-keyboard-shortcut="onSaveWorkflow"
/>
<!--
:renaming="renamingActive"
-->
</Suspense>
</WorkflowCanvas>
<FocusPanel v-if="isFocusPanelFeatureEnabled" :executable="!isCanvasReadOnly" />