feat: update diff loading

packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue

@@ -9,6 +9,7 @@ import type {
 import WorkflowPreview from '@/components/WorkflowPreview.vue';
 import WorkflowHistoryListItem from '@/components/WorkflowHistory/WorkflowHistoryListItem.vue';
 import { useI18n } from '@/composables/useI18n';
+import { compareWorkflows } from '@/utils/workflowDiff';
 
 const i18n = useI18n();
 
@@ -57,6 +58,14 @@ const workflowDiffPreview = computed<IWorkflowDb | undefined>(() => {
 	};
 });
 
+const workflowComparison = computed(() => {
+	if (!workflowVersionPreview.value || !workflowDiffPreview.value) {
+		return;
+	}
+
+	return compareWorkflows(workflowVersionPreview.value, workflowDiffPreview.value);
+});
+
 const actions = computed(() =>
 	props.isFirstItemShown
 		? props.actions.filter((action) => action.value !== 'restore')
@@ -82,6 +91,7 @@ const onAction = ({
 			<WorkflowPreview
 				v-if="props.workflowVersion"
 				:workflow="workflowVersionPreview"
+				:diff="workflowComparison"
 				:loading="props.isListLoading"
 				loader-type="spinner"
 			/>

packages/editor-ui/src/components/WorkflowPreview.vue

@@ -4,13 +4,14 @@ import { useI18n } from '@/composables/useI18n';
 import { useToast } from '@/composables/useToast';
 import type { IWorkflowDb, IWorkflowTemplate } from '@/Interface';
 import { useExecutionsStore } from '@/stores/executions.store';
+import type { WorkflowDiff } from '@/types/workflowDiff.types';
 
 const props = withDefaults(
 	defineProps<{
-		id?: string;
 		loading?: boolean;
 		mode?: 'workflow' | 'execution';
 		workflow?: IWorkflowDb | IWorkflowTemplate['workflow'];
+		diff?: WorkflowDiff;
 		executionId?: string;
 		executionMode?: string;
 		loaderType?: 'image' | 'spinner';
@@ -21,6 +22,7 @@ const props = withDefaults(
 		loading: false,
 		mode: 'workflow',
 		workflow: undefined,
+		diff: undefined,
 		executionId: undefined,
 		executionMode: undefined,
 		loaderType: 'image',
@@ -75,6 +77,16 @@ const loadWorkflow = () => {
 			}),
 			'*',
 		);
+
+		if (props.diff) {
+			iframeRef.value?.contentWindow?.postMessage?.(
+				JSON.stringify({
+					command: 'setDiff',
+					diff: props.diff,
+				}),
+				'*',
+			);
+		}
 	} catch (error) {
 		toast.showError(
 			error,

packages/editor-ui/src/stores/workflows.store.ts

@@ -85,6 +85,7 @@ import { TelemetryHelpers } from 'n8n-workflow';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { useRouter } from 'vue-router';
 import { useSettingsStore } from './settings.store';
+import type { WorkflowDiff } from '@/types';
 
 const defaults: Omit<IWorkflowDb, 'id'> & { settings: NonNullable<IWorkflowDb['settings']> } = {
 	name: '',
@@ -140,6 +141,8 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 	const isInDebugMode = ref(false);
 	const chatMessages = ref<string[]>([]);
 
+	const workflowDiff = ref<WorkflowDiff | undefined>();
+
 	const workflowName = computed(() => workflow.value.name);
 
 	const workflowId = computed(() => workflow.value.id);
@@ -1652,6 +1655,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		getWorkflowExecution,
 		getTotalFinishedExecutionsCount,
 		getPastChatMessages,
+		workflowDiff,
 		outgoingConnectionsByNodeName,
 		incomingConnectionsByNodeName,
 		nodeHasOutputConnection,

packages/editor-ui/src/types/index.ts

@@ -1,3 +1,4 @@
+export * from './workflowDiff.types';
 export * from './canvas';
 export * from './externalHooks';
 export * from './pushConnection';

packages/editor-ui/src/types/workflowDiff.types.ts

@@ -1,8 +1,8 @@
 export const enum NodeDiffStatus {
-	EQ,
-	MODIFIED,
-	ADDED,
-	DELETED,
+	Eq = 'equal',
+	Modified = 'modified',
+	Added = 'added',
+	Deleted = 'deleted',
 }
 
 export type WorkflowDiff = Record<string, NodeDiffStatus>;

packages/editor-ui/src/utils/__tests__/workflowDiff.test.ts

@@ -201,12 +201,12 @@ describe('workflowDiff', () => {
 		const diff = compareWorkflows(baseWf, targetWf);
 
 		expect(diff).toEqual({
-			'180ad8e0-c891-4b37-bab3-0a5b306ca48d': NodeDiffStatus.EQ,
-			'1cd4ee3f-5692-469c-a658-82483f1ef921': NodeDiffStatus.MODIFIED,
-			'9eedaa9f-7735-4fef-af11-deba888005ac': NodeDiffStatus.MODIFIED,
-			'22593885-07ce-49ea-8a6c-ad17d983cada': NodeDiffStatus.ADDED,
-			'bcf43c50-007f-4d04-a236-a3a1ef628fe2': NodeDiffStatus.ADDED,
-			'f8279104-a3e6-4663-b9bc-77fdbc615742': NodeDiffStatus.DELETED,
+			'180ad8e0-c891-4b37-bab3-0a5b306ca48d': NodeDiffStatus.Eq,
+			'1cd4ee3f-5692-469c-a658-82483f1ef921': NodeDiffStatus.Modified,
+			'9eedaa9f-7735-4fef-af11-deba888005ac': NodeDiffStatus.Modified,
+			'22593885-07ce-49ea-8a6c-ad17d983cada': NodeDiffStatus.Added,
+			'bcf43c50-007f-4d04-a236-a3a1ef628fe2': NodeDiffStatus.Added,
+			'f8279104-a3e6-4663-b9bc-77fdbc615742': NodeDiffStatus.Deleted,
 		});
 	});
 
@@ -214,12 +214,12 @@ describe('workflowDiff', () => {
 		const diff = compareWorkflows(targetWf, baseWf);
 
 		expect(diff).toEqual({
-			'180ad8e0-c891-4b37-bab3-0a5b306ca48d': NodeDiffStatus.EQ,
-			'1cd4ee3f-5692-469c-a658-82483f1ef921': NodeDiffStatus.MODIFIED,
-			'9eedaa9f-7735-4fef-af11-deba888005ac': NodeDiffStatus.MODIFIED,
-			'22593885-07ce-49ea-8a6c-ad17d983cada': NodeDiffStatus.DELETED,
-			'bcf43c50-007f-4d04-a236-a3a1ef628fe2': NodeDiffStatus.DELETED,
-			'f8279104-a3e6-4663-b9bc-77fdbc615742': NodeDiffStatus.ADDED,
+			'180ad8e0-c891-4b37-bab3-0a5b306ca48d': NodeDiffStatus.Eq,
+			'1cd4ee3f-5692-469c-a658-82483f1ef921': NodeDiffStatus.Modified,
+			'9eedaa9f-7735-4fef-af11-deba888005ac': NodeDiffStatus.Modified,
+			'22593885-07ce-49ea-8a6c-ad17d983cada': NodeDiffStatus.Deleted,
+			'bcf43c50-007f-4d04-a236-a3a1ef628fe2': NodeDiffStatus.Deleted,
+			'f8279104-a3e6-4663-b9bc-77fdbc615742': NodeDiffStatus.Added,
 		});
 	});
 });

packages/editor-ui/src/utils/workflowDiff.ts

@@ -38,17 +38,17 @@ export function compareWorkflows(
 
 	Object.keys(baseNodes).forEach((id) => {
 		if (!targetNodes[id]) {
-			diff[id] = NodeDiffStatus.DELETED;
+			diff[id] = NodeDiffStatus.Deleted;
 		} else if (!nodesEqual(baseNodes[id], targetNodes[id])) {
-			diff[id] = NodeDiffStatus.MODIFIED;
+			diff[id] = NodeDiffStatus.Modified;
 		} else {
-			diff[id] = NodeDiffStatus.EQ;
+			diff[id] = NodeDiffStatus.Eq;
 		}
 	});
 
 	Object.keys(targetNodes).forEach((id) => {
 		if (!baseNodes[id]) {
-			diff[id] = NodeDiffStatus.ADDED;
+			diff[id] = NodeDiffStatus.Added;
 		}
 	});
 

packages/editor-ui/src/views/NodeView.v2.vue

@@ -1349,6 +1349,8 @@ async function onPostMessageReceived(messageEvent: MessageEvent) {
 			executionsStore.activeExecution = (await executionsStore.fetchExecution(
 				json.executionId,
 			)) as ExecutionSummary;
+		} else if (json?.command === 'setDiff') {
+			workflowsStore.workflowDiff = json.diff;
 		}
 	} catch (e) {}
 }