feat(editor): Workflow history [WIP]- Improve switching between workflow history and editor (no-changelog) (#7353)

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -106,7 +106,13 @@
 				:to="workflowHistoryRoute"
 				:class="$style.workflowHistoryButton"
 			>
-				<n8n-icon icon="history" size="medium" />
+				<n8n-icon-button
+					:disabled="isWorkflowHistoryButtonDisabled"
+					type="tertiary"
+					icon="history"
+					size="medium"
+					text
+				/>
 			</router-link>
 			<div :class="$style.workflowMenuContainer">
 				<input
@@ -355,6 +361,9 @@ export default defineComponent({
 				},
 			};
 		},
+		isWorkflowHistoryButtonDisabled(): boolean {
+			return this.workflowsStore.isNewWorkflow;
+		},
 	},
 	methods: {
 		async onSaveButtonClick() {
@@ -714,5 +723,11 @@ $--header-spacing: 20px;
 .workflowHistoryButton {
 	margin-left: var(--spacing-l);
 	color: var(--color-text-dark);
+
+	:disabled {
+		background: transparent;
+		border: none;
+		opacity: 0.5;
+	}
 }
 </style>

packages/editor-ui/src/stores/__tests__/utils/workflowHistoryTestUtils.ts

@@ -1,17 +1,18 @@
 import { faker } from '@faker-js/faker';
-import type { WorkflowHistory } from '@/types/workflowHistory';
+import type { WorkflowHistory, WorkflowVersion } from '@/types/workflowHistory';
 
 export const workflowHistoryDataFactory: () => WorkflowHistory = () => ({
 	versionId: faker.string.nanoid(),
 	createdAt: faker.date.past().toDateString(),
+	updatedAt: faker.date.past().toDateString(),
 	authors: Array.from({ length: faker.number.int({ min: 2, max: 5 }) }, faker.person.fullName).join(
 		', ',
 	),
 });
 
-export const workflowVersionDataFactory: () => WorkflowHistory = () => ({
+export const workflowVersionDataFactory: () => WorkflowVersion = () => ({
 	...workflowHistoryDataFactory(),
-	workflow: {
-		name: faker.lorem.words(3),
-	},
+	workflowId: faker.string.nanoid(),
+	connections: {},
+	nodes: [],
 });

packages/editor-ui/src/stores/__tests__/workflowHistory.store.test.ts

@@ -1,36 +1,13 @@
 import { createPinia, setActivePinia } from 'pinia';
+import type { IN8nUISettings } from 'n8n-workflow';
 import { useWorkflowHistoryStore } from '@/stores/workflowHistory.store';
 import { useSettingsStore } from '@/stores/settings.store';
-import {
-	workflowHistoryDataFactory,
-	workflowVersionDataFactory,
-} from '@/stores/__tests__/utils/workflowHistoryTestUtils';
-
-const historyData = Array.from({ length: 5 }, workflowHistoryDataFactory);
-const versionData = {
-	...workflowVersionDataFactory(),
-	...historyData[0],
-};
 
 describe('Workflow history store', () => {
 	beforeEach(() => {
 		setActivePinia(createPinia());
 	});
 
-	it('should reset data', () => {
-		const workflowHistoryStore = useWorkflowHistoryStore();
-
-		workflowHistoryStore.addWorkflowHistory(historyData);
-		workflowHistoryStore.setActiveWorkflowVersion(versionData);
-
-		expect(workflowHistoryStore.workflowHistory).toEqual(historyData);
-		expect(workflowHistoryStore.activeWorkflowVersion).toEqual(versionData);
-
-		workflowHistoryStore.reset();
-		expect(workflowHistoryStore.workflowHistory).toEqual([]);
-		expect(workflowHistoryStore.activeWorkflowVersion).toEqual(null);
-	});
-
 	test.each([
 		[true, 1, 1],
 		[true, 2, 2],
@@ -49,7 +26,7 @@ describe('Workflow history store', () => {
 					pruneTime,
 					licensePruneTime,
 				},
-			};
+			} as IN8nUISettings;
 
 			expect(workflowHistoryStore.shouldUpgrade).toBe(shouldUpgrade);
 		},

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

@@ -1,4 +1,4 @@
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { defineStore } from 'pinia';
 import * as whApi from '@/api/workflowHistory';
 import { useRootStore } from '@/stores/n8nRoot.store';
@@ -13,8 +13,6 @@ export const useWorkflowHistoryStore = defineStore('workflowHistory', () => {
 	const rootStore = useRootStore();
 	const settingsStore = useSettingsStore();
 
-	const workflowHistory = ref<WorkflowHistory[]>([]);
-	const activeWorkflowVersion = ref<WorkflowVersion | null>(null);
 	const licensePruneTime = computed(() => settingsStore.settings.workflowHistory.licensePruneTime);
 	const pruneTime = computed(() => settingsStore.settings.workflowHistory.pruneTime);
 	const evaluatedPruneTime = computed(() => Math.min(pruneTime.value, licensePruneTime.value));
@@ -22,11 +20,6 @@ export const useWorkflowHistoryStore = defineStore('workflowHistory', () => {
 		() => licensePruneTime.value !== -1 && licensePruneTime.value === pruneTime.value,
 	);
 
-	const reset = () => {
-		workflowHistory.value = [];
-		activeWorkflowVersion.value = null;
-	};
-
 	const getWorkflowHistory = async (
 		workflowId: string,
 		queryParams: WorkflowHistoryRequestParams,
@@ -37,9 +30,6 @@ export const useWorkflowHistoryStore = defineStore('workflowHistory', () => {
 				console.error(error);
 				return [] as WorkflowHistory[];
 			});
-	const addWorkflowHistory = (history: WorkflowHistory[]) => {
-		workflowHistory.value = workflowHistory.value.concat(history);
-	};
 
 	const getWorkflowVersion = async (
 		workflowId: string,
@@ -49,18 +39,10 @@ export const useWorkflowHistoryStore = defineStore('workflowHistory', () => {
 			console.error(error);
 			return null;
 		});
-	const setActiveWorkflowVersion = (version: WorkflowVersion | null) => {
-		activeWorkflowVersion.value = version;
-	};
 
 	return {
-		reset,
 		getWorkflowHistory,
-		addWorkflowHistory,
 		getWorkflowVersion,
-		setActiveWorkflowVersion,
-		workflowHistory,
-		activeWorkflowVersion,
 		evaluatedPruneTime,
 		shouldUpgrade,
 	};

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

@@ -1,17 +1,19 @@
-import type { IWorkflowDb } from '@/Interface';
+import type { IConnections } from 'n8n-workflow';
+import type { INodeUi } from '@/Interface';
 
 export type WorkflowHistory = {
 	versionId: string;
 	authors: string;
 	createdAt: string;
+	updatedAt: string;
 };
 
 export type WorkflowVersionId = WorkflowHistory['versionId'];
 
 export type WorkflowVersion = WorkflowHistory & {
-	nodes: IWorkflowDb['nodes'];
-	connection: IWorkflowDb['connections'];
-	workflow: IWorkflowDb;
+	workflowId: string;
+	nodes: INodeUi[];
+	connections: IConnections;
 };
 
 export type WorkflowHistoryActionTypes = ['restore', 'clone', 'open', 'download'];

packages/editor-ui/src/views/WorkflowHistory.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { saveAs } from 'file-saver';
-import { onBeforeMount, onUnmounted, ref, watchEffect, computed } from 'vue';
+import { onBeforeMount, ref, watchEffect, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import type { IWorkflowDb } from '@/Interface';
 import { VIEWS } from '@/constants';
@@ -9,6 +9,8 @@ import type {
 	WorkflowHistoryActionTypes,
 	WorkflowVersionId,
 	WorkflowHistoryRequestParams,
+	WorkflowHistory,
+	WorkflowVersion,
 } from '@/types/workflowHistory';
 import WorkflowHistoryList from '@/components/WorkflowHistory/WorkflowHistoryList.vue';
 import WorkflowHistoryContent from '@/components/WorkflowHistory/WorkflowHistoryContent.vue';
@@ -48,12 +50,14 @@ const editorRoute = computed(() => ({
 	},
 }));
 const activeWorkflow = ref<IWorkflowDb | null>(null);
+const workflowHistory = ref<WorkflowHistory[]>([]);
+const activeWorkflowVersion = ref<WorkflowVersion | null>(null);
 const activeWorkflowVersionPreview = computed<IWorkflowDb | null>(() => {
-	if (workflowHistoryStore.activeWorkflowVersion && activeWorkflow.value) {
+	if (activeWorkflowVersion.value && activeWorkflow.value) {
 		return {
 			...activeWorkflow.value,
-			nodes: workflowHistoryStore.activeWorkflowVersion.nodes,
-			connections: workflowHistoryStore.activeWorkflowVersion.connections,
+			nodes: activeWorkflowVersion.value.nodes,
+			connections: activeWorkflowVersion.value.connections,
 		};
 	}
 	return null;
@@ -65,7 +69,7 @@ const loadMore = async (queryParams: WorkflowHistoryRequestParams) => {
 		queryParams,
 	);
 	lastReceivedItemsLength.value = history.length;
-	workflowHistoryStore.addWorkflowHistory(history);
+	workflowHistory.value.push(...history);
 };
 
 onBeforeMount(async () => {
@@ -76,21 +80,17 @@ onBeforeMount(async () => {
 	activeWorkflow.value = workflow;
 	isListLoading.value = false;
 
-	if (!route.params.versionId && workflowHistoryStore.workflowHistory.length) {
+	if (!route.params.versionId && workflowHistory.value.length) {
 		await router.replace({
 			name: VIEWS.WORKFLOW_HISTORY,
 			params: {
 				workflowId: route.params.workflowId,
-				versionId: workflowHistoryStore.workflowHistory[0].versionId,
+				versionId: workflowHistory.value[0].versionId,
 			},
 		});
 	}
 });
 
-onUnmounted(() => {
-	workflowHistoryStore.reset();
-});
-
 const openInNewTab = (id: WorkflowVersionId) => {
 	const { href } = router.resolve({
 		name: VIEWS.WORKFLOW_HISTORY,
@@ -165,7 +165,7 @@ watchEffect(async () => {
 			route.params.workflowId,
 			route.params.versionId,
 		);
-		workflowHistoryStore.setActiveWorkflowVersion(workflowVersion);
+		activeWorkflowVersion.value = workflowVersion;
 	}
 });
 </script>
@@ -187,9 +187,9 @@ watchEffect(async () => {
 		</div>
 		<div :class="$style.listComponentWrapper">
 			<workflow-history-list
-				:items="workflowHistoryStore.workflowHistory"
+				:items="workflowHistory"
 				:lastReceivedItemsLength="lastReceivedItemsLength"
-				:activeItem="workflowHistoryStore.activeWorkflowVersion"
+				:activeItem="activeWorkflowVersion"
 				:actionTypes="workflowHistoryActionTypes"
 				:requestNumberOfItems="requestNumberOfItems"
 				:shouldUpgrade="workflowHistoryStore.shouldUpgrade"

packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts

@@ -14,6 +14,7 @@ import {
 	workflowHistoryDataFactory,
 	workflowVersionDataFactory,
 } from '@/stores/__tests__/utils/workflowHistoryTestUtils';
+import type { WorkflowVersion } from '@/types/workflowHistory';
 
 vi.mock('vue-router', () => {
 	const params = {};
@@ -34,7 +35,7 @@ vi.mock('vue-router', () => {
 
 const workflowId = faker.string.nanoid();
 const historyData = Array.from({ length: 5 }, workflowHistoryDataFactory);
-const versionData = {
+const versionData: WorkflowVersion = {
 	...workflowVersionDataFactory(),
 	...historyData[0],
 };
@@ -76,8 +77,7 @@ describe('WorkflowHistory', () => {
 		router = useRouter();
 
 		vi.spyOn(workflowHistoryStore, 'getWorkflowHistory').mockResolvedValue(historyData);
-		vi.spyOn(workflowHistoryStore, 'workflowHistory', 'get').mockReturnValue(historyData);
-		vi.spyOn(workflowHistoryStore, 'activeWorkflowVersion', 'get').mockReturnValue(versionData);
+		vi.spyOn(workflowHistoryStore, 'getWorkflowVersion').mockResolvedValue(versionData);
 		windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
 	});