From 74bf12fb211970bb532f7a1f20b1c23fc85a5dc8 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Mon, 9 Oct 2023 07:09:41 +0200
Subject: [PATCH 01/16] feat(editor): Load workflow history version to canvas

---
 .../WorkflowHistory/WorkflowHistoryContent.vue        | 11 ++++++++---
 packages/editor-ui/src/components/WorkflowPreview.vue |  5 +++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
index 0f8e594552787..e95385ee30bc5 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import type { WorkflowVersion } from '@/types/workflowHistory';
+import type { IWorkflowDb } from '@/Interface';
+import WorkflowPreview from '@/components/WorkflowPreview.vue';
 
 const props = defineProps<{
-	workflowVersion: WorkflowVersion | null;
+	workflowVersion: IWorkflowDb | null;
 }>();
 </script>
 
 <template>
 	<div :class="$style.content">
-		{{ props.workflowVersion }}
+		<WorkflowPreview
+			v-if="props.workflowVersion"
+			:workflow="props.workflowVersion"
+			:loading="false"
+		/>
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue
index c50f7d849d906..d7ecd49ae2a91 100644
--- a/packages/editor-ui/src/components/WorkflowPreview.vue
+++ b/packages/editor-ui/src/components/WorkflowPreview.vue
@@ -189,6 +189,11 @@ export default defineComponent({
 				this.loadExecution();
 			}
 		},
+		workflow() {
+			if (this.mode === 'workflow' && this.workflow) {
+				this.loadWorkflow();
+			}
+		},
 	},
 	mounted() {
 		window.addEventListener('message', this.receiveMessage);

From fe2fb563c5669417aee89c4d8d2ba47475fc5ec9 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Mon, 9 Oct 2023 14:37:13 +0200
Subject: [PATCH 02/16] fix(editor): Reuse list item card in content area

---
 .../WorkflowHistoryContent.vue                | 68 +++++++++++++++++-
 .../WorkflowHistory/WorkflowHistoryList.vue   | 16 ++---
 .../WorkflowHistoryListItem.vue               | 71 +++++++++++++++----
 .../__tests__/WorkflowHistoryList.test.ts     | 18 +++--
 .../src/plugins/i18n/locales/en.json          |  4 ++
 .../editor-ui/src/views/WorkflowHistory.vue   | 28 ++++----
 6 files changed, 156 insertions(+), 49 deletions(-)

diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
index e95385ee30bc5..a93324d22d47d 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
@@ -1,17 +1,69 @@
 <script setup lang="ts">
-import type { IWorkflowDb } from '@/Interface';
+import { computed } from 'vue';
+import type { IWorkflowDb, UserAction } from '@/Interface';
+import type {
+	WorkflowVersion,
+	WorkflowHistoryActionTypes,
+	WorkflowVersionId,
+} from '@/types/workflowHistory';
 import WorkflowPreview from '@/components/WorkflowPreview.vue';
+import WorkflowHistoryListItem from '@/components/WorkflowHistory/WorkflowHistoryListItem.vue';
 
 const props = defineProps<{
-	workflowVersion: IWorkflowDb | null;
+	workflow: IWorkflowDb | null;
+	workflowVersion: WorkflowVersion | null;
+	actions: UserAction[];
 }>();
+
+const emit = defineEmits<{
+	(
+		event: 'action',
+		value: {
+			action: WorkflowHistoryActionTypes[number];
+			id: WorkflowVersionId;
+			data: { formattedCreatedAt: string };
+		},
+	): void;
+}>();
+
+const workflowVersionPreview = computed<IWorkflowDb | undefined>(() => {
+	if (!props.workflowVersion || !props.workflow) {
+		return;
+	}
+	return {
+		...props.workflow,
+		nodes: props.workflowVersion.nodes,
+		connections: props.workflowVersion.connections,
+	};
+});
+
+const onAction = ({
+	action,
+	id,
+	data,
+}: {
+	action: WorkflowHistoryActionTypes[number];
+	id: WorkflowVersionId;
+	data: { formattedCreatedAt: string };
+}) => {
+	emit('action', { action, id, data });
+};
 </script>
 
 <template>
 	<div :class="$style.content">
+		<workflow-history-list-item
+			v-if="props.workflowVersion"
+			:full="true"
+			:index="-1"
+			:item="props.workflowVersion"
+			:isActive="false"
+			:actions="props.actions"
+			@action="onAction"
+		/>
 		<WorkflowPreview
 			v-if="props.workflowVersion"
-			:workflow="props.workflowVersion"
+			:workflow="workflowVersionPreview"
 			:loading="false"
 		/>
 	</div>
@@ -26,4 +78,14 @@ const props = defineProps<{
 	width: 100%;
 	height: 100%;
 }
+
+.info {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
 </style>
diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue
index d49472831cd25..5a306ae848b33 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import type { UserAction } from 'n8n-design-system';
 import { useI18n } from '@/composables';
 import type {
@@ -13,7 +13,7 @@ import WorkflowHistoryListItem from '@/components/WorkflowHistory/WorkflowHistor
 const props = defineProps<{
 	items: WorkflowHistory[];
 	activeItem: WorkflowHistory | null;
-	actionTypes: WorkflowHistoryActionTypes;
+	actions: UserAction[];
 	requestNumberOfItems: number;
 	lastReceivedItemsLength: number;
 	evaluatedPruneTime: number;
@@ -37,14 +37,6 @@ const listElement = ref<Element | null>(null);
 const shouldAutoScroll = ref(true);
 const observer = ref<IntersectionObserver | null>(null);
 
-const actions = computed<UserAction[]>(() =>
-	props.actionTypes.map((value) => ({
-		label: i18n.baseText(`workflowHistory.item.actions.${value}`),
-		disabled: false,
-		value,
-	})),
-);
-
 const observeElement = (element: Element) => {
 	observer.value = new IntersectionObserver(
 		([entry]) => {
@@ -110,8 +102,8 @@ const onItemMounted = ({
 			:key="item.versionId"
 			:index="index"
 			:item="item"
-			:is-active="item.versionId === props.activeItem?.versionId"
-			:actions="actions"
+			:isActive="item.versionId === props.activeItem?.versionId"
+			:actions="props.actions"
 			@action="onAction"
 			@preview="onPreview"
 			@mounted="onItemMounted"
diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
index 0e555de1daf73..3318839b2f5ba 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
@@ -14,6 +14,7 @@ const props = defineProps<{
 	index: number;
 	actions: UserAction[];
 	isActive: boolean;
+	full?: boolean;
 }>();
 const emit = defineEmits<{
 	(
@@ -87,18 +88,31 @@ onMounted(() => {
 		data-test-id="workflow-history-list-item"
 		:class="{
 			[$style.item]: true,
+			[$style.full]: props.full,
 			[$style.active]: props.isActive,
 			[$style.actionsVisible]: actionsVisible,
 		}"
 	>
-		<p @click="onItemClick">
-			<time :datetime="item.createdAt">{{ formattedCreatedAtDate }}</time>
-			<n8n-tooltip placement="right-end" :disabled="authors.size < 2 && !isAuthorElementTruncated">
-				<template #content>{{ props.item.authors }}</template>
-				<span ref="authorElement">{{ authors.label }}</span>
-			</n8n-tooltip>
-			<data :value="item.versionId">{{ idLabel }}</data>
-		</p>
+		<section @click="onItemClick">
+			<p>
+				<span :class="$style.label">{{ i18n.baseText('workflowHistory.content.title') }}:</span>
+				<time :datetime="item.createdAt">{{ formattedCreatedAtDate }}</time>
+			</p>
+			<p>
+				<span :class="$style.label">{{ i18n.baseText('workflowHistory.content.editedBy') }}:</span>
+				<n8n-tooltip
+					placement="right-end"
+					:disabled="authors.size < 2 && !isAuthorElementTruncated"
+				>
+					<template #content>{{ props.item.authors }}</template>
+					<span ref="authorElement">{{ authors.label }}</span>
+				</n8n-tooltip>
+			</p>
+			<p>
+				<span :class="$style.label">{{ i18n.baseText('workflowHistory.content.title') }}</span>
+				<data :value="item.versionId">{{ idLabel }}</data>
+			</p>
+		</section>
 		<div :class="$style.tail">
 			<n8n-badge v-if="props.index === 0">
 				{{ i18n.baseText('workflowHistory.item.latest') }}
@@ -117,35 +131,62 @@ onMounted(() => {
 <style module lang="scss">
 .item {
 	display: flex;
-	position: relative;
+	position: absolute;
 	align-items: center;
 	justify-content: space-between;
-	border-left: 2px var(--border-style-base) transparent;
-	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 	color: var(--color-text-base);
 	font-size: var(--font-size-2xs);
 
-	p {
+	&:not(.full) {
+		position: relative;
+		border-left: 2px var(--border-style-base) transparent;
+		border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+
+		p {
+			padding: var(--spacing-4xs) 0 0;
+
+			&:first-child {
+				padding: 0 0 var(--spacing-3xs);
+			}
+		}
+
+		.label {
+			display: none;
+		}
+	}
+
+	section {
 		display: grid;
 		padding: var(--spacing-s);
 		line-height: unset;
 		cursor: pointer;
 
+		p {
+			display: flex;
+			align-items: center;
+			margin: 0;
+			padding: 0;
+			line-height: unset;
+		}
+
+		.label {
+			display: inline-block;
+			padding: 0 var(--spacing-3xs) 0 0;
+		}
+
 		time {
-			padding: 0 0 var(--spacing-3xs);
 			color: var(--color-text-dark);
 			font-size: var(--font-size-s);
 			font-weight: var(--font-weight-bold);
 		}
 
-		span,
+		span:not(.label),
 		data {
 			justify-self: start;
 			max-width: 160px;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			padding-top: var(--spacing-4xs);
 			font-size: var(--font-size-2xs);
 		}
 	}
diff --git a/packages/editor-ui/src/components/WorkflowHistory/__tests__/WorkflowHistoryList.test.ts b/packages/editor-ui/src/components/WorkflowHistory/__tests__/WorkflowHistoryList.test.ts
index a5d8d45899ed0..1b9bdfea9a328 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/__tests__/WorkflowHistoryList.test.ts
+++ b/packages/editor-ui/src/components/WorkflowHistory/__tests__/WorkflowHistoryList.test.ts
@@ -2,6 +2,7 @@ import { within } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { createPinia, setActivePinia } from 'pinia';
 import { faker } from '@faker-js/faker';
+import type { UserAction } from 'n8n-design-system';
 import { createComponentRenderer } from '@/__tests__/render';
 import WorkflowHistoryList from '@/components/WorkflowHistory/WorkflowHistoryList.vue';
 import type { WorkflowHistoryActionTypes } from '@/types/workflowHistory';
@@ -18,6 +19,11 @@ vi.stubGlobal(
 );
 
 const actionTypes: WorkflowHistoryActionTypes = ['restore', 'clone', 'open', 'download'];
+const actions: UserAction[] = actionTypes.map((value) => ({
+	label: value,
+	disabled: false,
+	value,
+}));
 
 const renderComponent = createComponentRenderer(WorkflowHistoryList);
 
@@ -38,7 +44,7 @@ describe('WorkflowHistoryList', () => {
 			pinia,
 			props: {
 				items: [],
-				actionTypes,
+				actions,
 				activeItem: null,
 				requestNumberOfItems: 20,
 				lastReceivedItemsLength: 0,
@@ -55,7 +61,7 @@ describe('WorkflowHistoryList', () => {
 			pinia,
 			props: {
 				items: [],
-				actionTypes,
+				actions,
 				activeItem: null,
 				requestNumberOfItems: 20,
 				lastReceivedItemsLength: 0,
@@ -76,7 +82,7 @@ describe('WorkflowHistoryList', () => {
 			pinia,
 			props: {
 				items,
-				actionTypes,
+				actions,
 				activeItem: null,
 				requestNumberOfItems: 20,
 				lastReceivedItemsLength: 20,
@@ -108,7 +114,7 @@ describe('WorkflowHistoryList', () => {
 			pinia,
 			props: {
 				items,
-				actionTypes,
+				actions,
 				activeItem: items[0],
 				requestNumberOfItems: 20,
 				lastReceivedItemsLength: 20,
@@ -126,7 +132,7 @@ describe('WorkflowHistoryList', () => {
 			pinia,
 			props: {
 				items,
-				actionTypes,
+				actions,
 				activeItem: null,
 				requestNumberOfItems: 20,
 				lastReceivedItemsLength: 20,
@@ -151,7 +157,7 @@ describe('WorkflowHistoryList', () => {
 			pinia,
 			props: {
 				items,
-				actionTypes,
+				actions,
 				activeItem: items[0],
 				requestNumberOfItems: 20,
 				lastReceivedItemsLength: 20,
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 4fbdad1452a8d..a7860d6e4948f 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1847,6 +1847,10 @@
 	"workflowSettings.timeoutWorkflow": "Timeout Workflow",
 	"workflowSettings.timezone": "Timezone",
 	"workflowHistory.title": "Version History",
+	"workflowHistory.content.title": "Version",
+	"workflowHistory.content.editedBy": "Edited by",
+	"workflowHistory.content.versionId": "Version ID",
+	"workflowHistory.content.actions": "Actions",
 	"workflowHistory.item.id": "ID: {id}",
 	"workflowHistory.item.createdAt": "{date} at {time}",
 	"workflowHistory.item.actions.restore": "Restore this version",
diff --git a/packages/editor-ui/src/views/WorkflowHistory.vue b/packages/editor-ui/src/views/WorkflowHistory.vue
index f87db967cbe59..e70bd9c9f6574 100644
--- a/packages/editor-ui/src/views/WorkflowHistory.vue
+++ b/packages/editor-ui/src/views/WorkflowHistory.vue
@@ -2,7 +2,7 @@
 import { saveAs } from 'file-saver';
 import { onBeforeMount, ref, watchEffect, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import type { IWorkflowDb } from '@/Interface';
+import type { IWorkflowDb, UserAction } from '@/Interface';
 import { VIEWS } from '@/constants';
 import { useI18n } from '@/composables';
 import type {
@@ -52,16 +52,13 @@ 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 (activeWorkflowVersion.value && activeWorkflow.value) {
-		return {
-			...activeWorkflow.value,
-			nodes: activeWorkflowVersion.value.nodes,
-			connections: activeWorkflowVersion.value.connections,
-		};
-	}
-	return null;
-});
+const actions = computed<UserAction[]>(() =>
+	workflowHistoryActionTypes.map((value) => ({
+		label: i18n.baseText(`workflowHistory.item.actions.${value}`),
+		disabled: false,
+		value,
+	})),
+);
 
 const loadMore = async (queryParams: WorkflowHistoryRequestParams) => {
 	const history = await workflowHistoryStore.getWorkflowHistory(
@@ -183,14 +180,19 @@ watchEffect(async () => {
 			</router-link>
 		</div>
 		<div :class="$style.contentComponentWrapper">
-			<workflow-history-content :workflow-version="activeWorkflowVersionPreview" />
+			<workflow-history-content
+				:workflow="activeWorkflow"
+				:workflow-version="activeWorkflowVersion"
+				:actions="actions"
+				@action="onAction"
+			/>
 		</div>
 		<div :class="$style.listComponentWrapper">
 			<workflow-history-list
 				:items="workflowHistory"
 				:lastReceivedItemsLength="lastReceivedItemsLength"
 				:activeItem="activeWorkflowVersion"
-				:actionTypes="workflowHistoryActionTypes"
+				:actions="actions"
 				:requestNumberOfItems="requestNumberOfItems"
 				:shouldUpgrade="workflowHistoryStore.shouldUpgrade"
 				:evaluatedPruneTime="workflowHistoryStore.evaluatedPruneTime"

From 39ce7341f66bd66d4b99651b11b0c9642af47981 Mon Sep 17 00:00:00 2001
From: Giulio Andreini <g.andreini@gmail.com>
Date: Mon, 9 Oct 2023 17:13:57 +0200
Subject: [PATCH 03/16] Version button spacing and hover. ellipsis button hover
 and size (height 30px).

---
 .../components/N8nActionDropdown/ActionDropdown.vue    |  9 +++++++--
 .../src/components/MainHeader/WorkflowDetails.vue      | 10 +++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index e37ddfa1e8c1d..f8d82dc45b83b 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -122,7 +122,11 @@ export default defineComponent({
 
 .activator {
 	cursor: pointer;
-	padding: var(--spacing-2xs);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
 	margin: 0;
 	border-radius: var(--border-radius-base);
 	line-height: normal !important;
@@ -133,7 +137,8 @@ export default defineComponent({
 
 	&:hover {
 		background-color: var(--color-background-base);
-		color: initial !important;
+		// color: initial !important;
+		color: var(--color-primary);
 	}
 }
 
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 554ebabe7a3fb..1f6004c26faf0 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -721,8 +721,16 @@ $--header-spacing: 20px;
 }
 
 .workflowHistoryButton {
-	margin-left: var(--spacing-l);
+	width: 30px;
+	height: 30px;
+	margin-left: var(--spacing-m);
+	margin-right: var(--spacing-4xs);
 	color: var(--color-text-dark);
+	border-radius: var(--border-radius-base);
+
+	&:hover {
+		background-color: var(--color-background-base);
+	}
 
 	:disabled {
 		background: transparent;

From 1a6af1b1fa92f1ea5e9bfc38341c852e544dc00f Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Mon, 9 Oct 2023 17:20:51 +0200
Subject: [PATCH 04/16] fix(editor): Adding slots to action toggle design
 system component and workflow history list item component for better reuse

---
 .../N8nActionToggle/ActionToggle.vue          | 14 +--
 .../WorkflowHistoryContent.vue                | 99 ++++++++++++++++---
 .../WorkflowHistoryListItem.vue               | 61 +++---------
 .../editor-ui/src/views/WorkflowHistory.vue   |  1 +
 4 files changed, 109 insertions(+), 66 deletions(-)

diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
index f555db6eb1df2..29087d9b6a1f5 100644
--- a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
+++ b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
@@ -7,12 +7,14 @@
 			@command="onCommand"
 			@visible-change="onVisibleChange"
 		>
-			<span :class="{ [$style.button]: true, [$style[theme]]: !!theme }">
-				<n8n-icon
-					:icon="iconOrientation === 'horizontal' ? 'ellipsis-h' : 'ellipsis-v'"
-					:size="iconSize"
-				/>
-			</span>
+			<slot>
+				<span :class="{ [$style.button]: true, [$style[theme]]: !!theme }">
+					<n8n-icon
+						:icon="iconOrientation === 'horizontal' ? 'ellipsis-h' : 'ellipsis-v'"
+						:size="iconSize"
+					/>
+				</span>
+			</slot>
 
 			<template #dropdown>
 				<el-dropdown-menu data-test-id="action-toggle-dropdown">
diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
index a93324d22d47d..dca1f229f5e01 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
@@ -8,11 +8,15 @@ import type {
 } from '@/types/workflowHistory';
 import WorkflowPreview from '@/components/WorkflowPreview.vue';
 import WorkflowHistoryListItem from '@/components/WorkflowHistory/WorkflowHistoryListItem.vue';
+import { useI18n } from '@/composables';
+
+const i18n = useI18n();
 
 const props = defineProps<{
 	workflow: IWorkflowDb | null;
 	workflowVersion: WorkflowVersion | null;
 	actions: UserAction[];
+	isListLoading?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -52,20 +56,55 @@ const onAction = ({
 
 <template>
 	<div :class="$style.content">
-		<workflow-history-list-item
-			v-if="props.workflowVersion"
-			:full="true"
-			:index="-1"
-			:item="props.workflowVersion"
-			:isActive="false"
-			:actions="props.actions"
-			@action="onAction"
-		/>
 		<WorkflowPreview
 			v-if="props.workflowVersion"
 			:workflow="workflowVersionPreview"
-			:loading="false"
+			:loading="props.isListLoading"
+			loaderType="spinner"
 		/>
+		<ul :class="$style.info">
+			<workflow-history-list-item
+				:class="$style.card"
+				v-if="props.workflowVersion"
+				:full="true"
+				:index="-1"
+				:item="props.workflowVersion"
+				:isActive="false"
+				:actions="props.actions"
+				@action="onAction"
+			>
+				<template #default="{ formattedCreatedAt }">
+					<section :class="$style.text">
+						<p>
+							<span :class="$style.label">
+								{{ i18n.baseText('workflowHistory.content.title') }}:
+							</span>
+							<time :datetime="props.workflowVersion.createdAt">{{ formattedCreatedAt }}</time>
+						</p>
+						<p>
+							<span :class="$style.label">
+								{{ i18n.baseText('workflowHistory.content.editedBy') }}:
+							</span>
+							<span>{{ props.workflowVersion.authors }}</span>
+						</p>
+						<p>
+							<span :class="$style.label">
+								{{ i18n.baseText('workflowHistory.content.versionId') }}:
+							</span>
+							<data :value="props.workflowVersion.versionId">{{
+								props.workflowVersion.versionId
+							}}</data>
+						</p>
+					</section>
+				</template>
+				<template #action-toggle-button>
+					<n8n-button type="tertiary" size="small">
+						{{ i18n.baseText('workflowHistory.content.actions') }}
+						<n8n-icon class="ml-3xs" icon="chevron-down" size="small" />
+					</n8n-button>
+				</template>
+			</workflow-history-list-item>
+		</ul>
 	</div>
 </template>
 
@@ -81,11 +120,45 @@ const onAction = ({
 
 .info {
 	position: absolute;
+	z-index: 1;
 	top: 0;
 	left: 0;
 	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+}
+
+.card {
+	padding: 0;
+	border: 0;
+
+	.text {
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 auto;
+
+		p {
+			display: flex;
+			align-items: center;
+			padding: 0;
+			cursor: default;
+
+			&:first-child * {
+				font-size: var(--font-size-m);
+			}
+
+			&:last-child * {
+				font-size: var(--font-size-2xs);
+			}
+
+			.label {
+				padding-right: var(--spacing-3xs);
+			}
+
+			* {
+				max-width: unset;
+				padding: 0;
+				font-size: var(--font-size-s);
+			}
+		}
+	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
index 6970ab25d1a2b..d13d5e75bd59b 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
@@ -14,7 +14,6 @@ const props = defineProps<{
 	index: number;
 	actions: UserAction[];
 	isActive: boolean;
-	full?: boolean;
 }>();
 const emit = defineEmits<{
 	(
@@ -96,18 +95,13 @@ onMounted(() => {
 		data-test-id="workflow-history-list-item"
 		:class="{
 			[$style.item]: true,
-			[$style.full]: props.full,
 			[$style.active]: props.isActive,
 			[$style.actionsVisible]: actionsVisible,
 		}"
 	>
-		<section @click="onItemClick">
-			<p>
-				<span :class="$style.label">{{ i18n.baseText('workflowHistory.content.title') }}:</span>
+		<slot :formattedCreatedAt="formattedCreatedAt">
+			<p @click="onItemClick">
 				<time :datetime="item.createdAt">{{ formattedCreatedAt }}</time>
-			</p>
-			<p>
-				<span :class="$style.label">{{ i18n.baseText('workflowHistory.content.editedBy') }}:</span>
 				<n8n-tooltip
 					placement="right-end"
 					:disabled="authors.size < 2 && !isAuthorElementTruncated"
@@ -115,12 +109,9 @@ onMounted(() => {
 					<template #content>{{ props.item.authors }}</template>
 					<span ref="authorElement">{{ authors.label }}</span>
 				</n8n-tooltip>
-			</p>
-			<p>
-				<span :class="$style.label">{{ i18n.baseText('workflowHistory.content.title') }}</span>
 				<data :value="item.versionId">{{ idLabel }}</data>
 			</p>
-		</section>
+		</slot>
 		<div :class="$style.tail">
 			<n8n-badge v-if="props.index === 0">
 				{{ i18n.baseText('workflowHistory.item.latest') }}
@@ -129,72 +120,48 @@ onMounted(() => {
 				theme="dark"
 				:class="$style.actions"
 				:actions="props.actions"
+				placement="bottom-end"
 				@action="onAction"
 				@click.stop
 				@visible-change="onVisibleChange"
-			/>
+			>
+				<slot name="action-toggle-button" />
+			</n8n-action-toggle>
 		</div>
 	</li>
 </template>
 <style module lang="scss">
 .item {
 	display: flex;
-	position: absolute;
+	position: relative;
 	align-items: center;
 	justify-content: space-between;
+	border-left: 2px var(--border-style-base) transparent;
+	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 	color: var(--color-text-base);
 	font-size: var(--font-size-2xs);
 
-	&:not(.full) {
-		position: relative;
-		border-left: 2px var(--border-style-base) transparent;
-		border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
-
-		p {
-			padding: var(--spacing-4xs) 0 0;
-
-			&:first-child {
-				padding: 0 0 var(--spacing-3xs);
-			}
-		}
-
-		.label {
-			display: none;
-		}
-	}
-
-	section {
+	p {
 		display: grid;
 		padding: var(--spacing-s);
 		line-height: unset;
 		cursor: pointer;
 
-		p {
-			display: flex;
-			align-items: center;
-			margin: 0;
-			padding: 0;
-			line-height: unset;
-		}
-
-		.label {
-			display: inline-block;
-			padding: 0 var(--spacing-3xs) 0 0;
-		}
-
 		time {
+			padding: 0 0 var(--spacing-3xs);
 			color: var(--color-text-dark);
 			font-size: var(--font-size-s);
 			font-weight: var(--font-weight-bold);
 		}
 
-		span:not(.label),
+		span,
 		data {
 			justify-self: start;
 			max-width: 160px;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
+			padding-top: var(--spacing-4xs);
 			font-size: var(--font-size-2xs);
 		}
 	}
diff --git a/packages/editor-ui/src/views/WorkflowHistory.vue b/packages/editor-ui/src/views/WorkflowHistory.vue
index 8f701a47483e5..7b920aa58b04b 100644
--- a/packages/editor-ui/src/views/WorkflowHistory.vue
+++ b/packages/editor-ui/src/views/WorkflowHistory.vue
@@ -256,6 +256,7 @@ watchEffect(async () => {
 				:workflow="activeWorkflow"
 				:workflow-version="activeWorkflowVersion"
 				:actions="actions"
+				:isListLoading="isListLoading"
 				@action="onAction"
 			/>
 		</div>

From b384b8e44bbd66c1057dbb64023b619d2abc95ec Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Mon, 9 Oct 2023 20:31:13 +0200
Subject: [PATCH 05/16] fix(editor): Update content data styles

---
 .../WorkflowHistoryContent.vue                | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
index dca1f229f5e01..ec09d705a525b 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
@@ -127,8 +127,9 @@ const onAction = ({
 }
 
 .card {
-	padding: 0;
+	padding: var(--spacing-s) var(--spacing-l) 0 var(--spacing-xl);
 	border: 0;
+	align-items: start;
 
 	.text {
 		display: flex;
@@ -141,16 +142,24 @@ const onAction = ({
 			padding: 0;
 			cursor: default;
 
-			&:first-child * {
-				font-size: var(--font-size-m);
+			&:first-child {
+				padding-top: var(--spacing-2xs);
+				padding-bottom: var(--spacing-xs);
+				* {
+					font-size: var(--font-size-m);
+				}
 			}
 
-			&:last-child * {
-				font-size: var(--font-size-2xs);
+			&:last-child {
+				padding-top: var(--spacing-xs);
+
+				* {
+					font-size: var(--font-size-2xs);
+				}
 			}
 
 			.label {
-				padding-right: var(--spacing-3xs);
+				padding-right: var(--spacing-4xs);
 			}
 
 			* {

From 2601cd885f469422850adb4139fc6c50af265862 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 10 Oct 2023 09:21:22 +0200
Subject: [PATCH 06/16] fix(editor): Add tests

---
 .../WorkflowHistoryContent.vue                |  2 +-
 .../__tests__/WorkflowHistoryContent.test.ts  | 59 +++++++++++++++++++
 .../__tests__/WorkflowHistoryListItem.test.ts |  6 +-
 3 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 packages/editor-ui/src/components/WorkflowHistory/__tests__/WorkflowHistoryContent.test.ts

diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
index ec09d705a525b..e55decd57ff7b 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
@@ -98,7 +98,7 @@ const onAction = ({
 					</section>
 				</template>
 				<template #action-toggle-button>
-					<n8n-button type="tertiary" size="small">
+					<n8n-button type="tertiary" size="small" data-test-id="action-toggle-button">
 						{{ i18n.baseText('workflowHistory.content.actions') }}
 						<n8n-icon class="ml-3xs" icon="chevron-down" size="small" />
 					</n8n-button>
diff --git a/packages/editor-ui/src/components/WorkflowHistory/__tests__/WorkflowHistoryContent.test.ts b/packages/editor-ui/src/components/WorkflowHistory/__tests__/WorkflowHistoryContent.test.ts
new file mode 100644
index 0000000000000..cc3864c82fe7d
--- /dev/null
+++ b/packages/editor-ui/src/components/WorkflowHistory/__tests__/WorkflowHistoryContent.test.ts
@@ -0,0 +1,59 @@
+import { createPinia, setActivePinia } from 'pinia';
+import userEvent from '@testing-library/user-event';
+import type { UserAction } from 'n8n-design-system';
+import { createComponentRenderer } from '@/__tests__/render';
+import WorkflowHistoryContent from '@/components/WorkflowHistory/WorkflowHistoryContent.vue';
+import type { WorkflowHistoryActionTypes } from '@/types/workflowHistory';
+import { workflowHistoryDataFactory } from '@/stores/__tests__/utils/workflowHistoryTestUtils';
+
+const actionTypes: WorkflowHistoryActionTypes = ['restore', 'clone', 'open', 'download'];
+const actions: UserAction[] = actionTypes.map((value) => ({
+	label: value,
+	disabled: false,
+	value,
+}));
+
+const renderComponent = createComponentRenderer(WorkflowHistoryContent);
+
+let pinia: ReturnType<typeof createPinia>;
+
+describe('WorkflowHistoryContent', () => {
+	beforeEach(() => {
+		pinia = createPinia();
+		setActivePinia(pinia);
+	});
+
+	it('should use the list item component to render version data', () => {
+		const workflowVersion = workflowHistoryDataFactory();
+		const { getByTestId } = renderComponent({
+			pinia,
+			props: {
+				workflow: null,
+				workflowVersion,
+				actions,
+			},
+		});
+
+		expect(getByTestId('workflow-history-list-item')).toBeInTheDocument();
+	});
+
+	test.each(actionTypes)('should emit %s event', async (action) => {
+		const workflowVersion = workflowHistoryDataFactory();
+		const { getByTestId, emitted } = renderComponent({
+			pinia,
+			props: {
+				workflow: null,
+				workflowVersion,
+				actions,
+			},
+		});
+
+		await userEvent.click(getByTestId('action-toggle-button'));
+		expect(getByTestId('action-toggle-dropdown')).toBeInTheDocument();
+
+		await userEvent.click(getByTestId(`action-${action}`));
+		expect(emitted().action).toEqual([
+			[{ action, id: workflowVersion.versionId, data: { formattedCreatedAt: expect.any(String) } }],
+		]);
+	});
+});
diff --git a/packages/editor-ui/src/components/WorkflowHistory/__tests__/WorkflowHistoryListItem.test.ts b/packages/editor-ui/src/components/WorkflowHistory/__tests__/WorkflowHistoryListItem.test.ts
index 6e88ed9256e14..ab84d2c535dfc 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/__tests__/WorkflowHistoryListItem.test.ts
+++ b/packages/editor-ui/src/components/WorkflowHistory/__tests__/WorkflowHistoryListItem.test.ts
@@ -36,10 +36,10 @@ describe('WorkflowHistoryListItem', () => {
 			},
 		});
 
-		await userEvent.hover(container.querySelector('.el-tooltip__trigger'));
+		await userEvent.hover(container.querySelector('.el-tooltip__trigger')!);
 		expect(queryByRole('tooltip')).not.toBeInTheDocument();
 
-		await userEvent.click(container.querySelector('p'));
+		await userEvent.click(container.querySelector('p')!);
 		expect(emitted().preview).toEqual([
 			[expect.objectContaining({ id: item.versionId, event: expect.any(MouseEvent) })],
 		]);
@@ -61,7 +61,7 @@ describe('WorkflowHistoryListItem', () => {
 			},
 		});
 
-		const authorsTag = container.querySelector('.el-tooltip__trigger');
+		const authorsTag = container.querySelector('.el-tooltip__trigger')!;
 		expect(authorsTag).toHaveTextContent(`${authors[0]} + ${authors.length - 1}`);
 		await userEvent.hover(authorsTag);
 		expect(getByRole('tooltip')).toBeInTheDocument();

From ccb1299e4097c86cb6b805b6cb41fb31b5f7976f Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 10 Oct 2023 15:12:17 +0200
Subject: [PATCH 07/16] fix(editor): Address review results

---
 .../WorkflowHistoryContent.vue                | 11 +++--
 .../WorkflowHistoryListItem.vue               |  7 ++-
 .../src/stores/workflowHistory.store.ts       |  2 +-
 .../editor-ui/src/views/WorkflowHistory.vue   | 45 ++++++++++++-------
 4 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
index e55decd57ff7b..fb70484a921d9 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue
@@ -116,6 +116,7 @@ const onAction = ({
 	top: 0;
 	width: 100%;
 	height: 100%;
+	overflow: auto;
 }
 
 .info {
@@ -143,15 +144,15 @@ const onAction = ({
 			cursor: default;
 
 			&:first-child {
-				padding-top: var(--spacing-2xs);
-				padding-bottom: var(--spacing-xs);
+				padding-top: var(--spacing-3xs);
+				padding-bottom: var(--spacing-3xs);
 				* {
 					font-size: var(--font-size-m);
 				}
 			}
 
 			&:last-child {
-				padding-top: var(--spacing-xs);
+				padding-top: var(--spacing-3xs);
 
 				* {
 					font-size: var(--font-size-2xs);
@@ -164,6 +165,10 @@ const onAction = ({
 
 			* {
 				max-width: unset;
+				justify-self: unset;
+				white-space: unset;
+				overflow: hidden;
+				text-overflow: unset;
 				padding: 0;
 				font-size: var(--font-size-s);
 			}
diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
index d13d5e75bd59b..f97aa509028de 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
@@ -39,7 +39,7 @@ const formattedCreatedAt = computed<string>(() => {
 	const currentYear = new Date().getFullYear().toString();
 	const [date, time] = dateformat(
 		props.item.createdAt,
-		`${props.item.createdAt.startsWith(currentYear) ? '' : 'yyyy '}mmm d"#"HH:MM`,
+		`${props.item.createdAt.startsWith(currentYear) ? '' : 'yyyy '}mmm d"#"HH:MM:ss`,
 	).split('#');
 
 	return i18n.baseText('workflowHistory.item.createdAt', { interpolate: { date, time } });
@@ -144,11 +144,10 @@ onMounted(() => {
 	p {
 		display: grid;
 		padding: var(--spacing-s);
-		line-height: unset;
 		cursor: pointer;
 
 		time {
-			padding: 0 0 var(--spacing-3xs);
+			padding: 0 0 var(--spacing-5xs);
 			color: var(--color-text-dark);
 			font-size: var(--font-size-s);
 			font-weight: var(--font-weight-bold);
@@ -161,7 +160,7 @@ onMounted(() => {
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			padding-top: var(--spacing-4xs);
+			margin-top: calc(var(--spacing-4xs) * -1);
 			font-size: var(--font-size-2xs);
 		}
 	}
diff --git a/packages/editor-ui/src/stores/workflowHistory.store.ts b/packages/editor-ui/src/stores/workflowHistory.store.ts
index c883fc20c87fb..142e44e778a9e 100644
--- a/packages/editor-ui/src/stores/workflowHistory.store.ts
+++ b/packages/editor-ui/src/stores/workflowHistory.store.ts
@@ -55,7 +55,7 @@ export const useWorkflowHistoryStore = defineStore('workflowHistory', () => {
 			const blob = new Blob([JSON.stringify({ ...workflow, nodes, connections }, null, 2)], {
 				type: 'application/json;charset=utf-8',
 			});
-			saveAs(blob, `${workflow.name}-${workflowVersionId}.json`);
+			saveAs(blob, `${workflow.name}-${workflow.versionId}.json`);
 		}
 	};
 
diff --git a/packages/editor-ui/src/views/WorkflowHistory.vue b/packages/editor-ui/src/views/WorkflowHistory.vue
index 7b920aa58b04b..347c0e20ae731 100644
--- a/packages/editor-ui/src/views/WorkflowHistory.vue
+++ b/packages/editor-ui/src/views/WorkflowHistory.vue
@@ -46,6 +46,7 @@ const workflowHistoryStore = useWorkflowHistoryStore();
 const uiStore = useUIStore();
 const workflowsStore = useWorkflowsStore();
 
+const canRender = ref(true);
 const isListLoading = ref(true);
 const requestNumberOfItems = ref(20);
 const lastReceivedItemsLength = ref(0);
@@ -76,21 +77,26 @@ const loadMore = async (queryParams: WorkflowHistoryRequestParams) => {
 };
 
 onBeforeMount(async () => {
-	const [workflow] = await Promise.all([
-		workflowsStore.fetchWorkflow(route.params.workflowId),
-		loadMore({ take: requestNumberOfItems.value }),
-	]);
-	activeWorkflow.value = workflow;
-	isListLoading.value = false;
+	try {
+		const [workflow] = await Promise.all([
+			workflowsStore.fetchWorkflow(route.params.workflowId),
+			loadMore({ take: requestNumberOfItems.value }),
+		]);
+		activeWorkflow.value = workflow;
+		isListLoading.value = false;
 
-	if (!route.params.versionId && workflowHistory.value.length) {
-		await router.replace({
-			name: VIEWS.WORKFLOW_HISTORY,
-			params: {
-				workflowId: route.params.workflowId,
-				versionId: workflowHistory.value[0].versionId,
-			},
-		});
+		if (!route.params.versionId && workflowHistory.value.length) {
+			await router.replace({
+				name: VIEWS.WORKFLOW_HISTORY,
+				params: {
+					workflowId: route.params.workflowId,
+					versionId: workflowHistory.value[0].versionId,
+				},
+			});
+		}
+	} catch (error) {
+		canRender.value = false;
+		toast.showError(error, i18n.baseText('workflowHistory.title'));
 	}
 });
 
@@ -228,13 +234,16 @@ const onUpgrade = () => {
 };
 
 watchEffect(async () => {
-	if (route.params.versionId) {
+	try {
 		const [workflow, workflowVersion] = await Promise.all([
 			workflowsStore.fetchWorkflow(route.params.workflowId),
 			workflowHistoryStore.getWorkflowVersion(route.params.workflowId, route.params.versionId),
 		]);
 		activeWorkflow.value = workflow;
 		activeWorkflowVersion.value = workflowVersion;
+	} catch (error) {
+		canRender.value = false;
+		toast.showError(error, i18n.baseText('workflowHistory.title'));
 	}
 });
 </script>
@@ -253,6 +262,7 @@ watchEffect(async () => {
 		</div>
 		<div :class="$style.contentComponentWrapper">
 			<workflow-history-content
+				v-if="canRender"
 				:workflow="activeWorkflow"
 				:workflow-version="activeWorkflowVersion"
 				:actions="actions"
@@ -262,6 +272,7 @@ watchEffect(async () => {
 		</div>
 		<div :class="$style.listComponentWrapper">
 			<workflow-history-list
+				v-if="canRender"
 				:items="workflowHistory"
 				:lastReceivedItemsLength="lastReceivedItemsLength"
 				:activeItem="activeWorkflowVersion"
@@ -311,13 +322,13 @@ watchEffect(async () => {
 .contentComponentWrapper {
 	grid-area: content;
 	position: relative;
-	z-index: 1;
+	z-index: 2;
 }
 
 .listComponentWrapper {
 	grid-area: list;
 	position: relative;
-	z-index: 2;
+	z-index: 1;
 
 	&::before {
 		content: '';

From 80050580e39349ff0f3b9b43534569923f89ce4f Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 10 Oct 2023 15:44:15 +0200
Subject: [PATCH 08/16] fix(editor): Adding last version on top of the list
 after restoring

---
 packages/editor-ui/src/views/WorkflowHistory.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/views/WorkflowHistory.vue b/packages/editor-ui/src/views/WorkflowHistory.vue
index 347c0e20ae731..54c02abce7404 100644
--- a/packages/editor-ui/src/views/WorkflowHistory.vue
+++ b/packages/editor-ui/src/views/WorkflowHistory.vue
@@ -73,7 +73,7 @@ const loadMore = async (queryParams: WorkflowHistoryRequestParams) => {
 		queryParams,
 	);
 	lastReceivedItemsLength.value = history.length;
-	workflowHistory.value.push(...history);
+	workflowHistory.value = workflowHistory.value.concat(history);
 };
 
 onBeforeMount(async () => {
@@ -197,6 +197,10 @@ const onAction = async ({
 					id,
 					modalAction === WorkflowHistoryVersionRestoreModalActions.deactivateAndRestore,
 				);
+				const history = await workflowHistoryStore.getWorkflowHistory(route.params.workflowId, {
+					take: 1,
+				});
+				workflowHistory.value = history.concat(workflowHistory.value);
 				toast.showMessage({
 					title: i18n.baseText('workflowHistory.action.restore.success.title'),
 					type: 'success',
@@ -234,6 +238,9 @@ const onUpgrade = () => {
 };
 
 watchEffect(async () => {
+	if (!route.params.versionId) {
+		return;
+	}
 	try {
 		const [workflow, workflowVersion] = await Promise.all([
 			workflowsStore.fetchWorkflow(route.params.workflowId),

From b667262c443aa6f53111494522251eaab5d7ef94 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 10 Oct 2023 16:18:44 +0200
Subject: [PATCH 09/16] fix(editor): Remove errors from console in unit tests

---
 .../editor-ui/src/views/__tests__/WorkflowHistory.test.ts     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts b/packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts
index 30a6f1e793083..32d823d6b4990 100644
--- a/packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts
+++ b/packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts
@@ -9,6 +9,7 @@ import { createComponentRenderer } from '@/__tests__/render';
 import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
 import WorkflowHistoryPage from '@/views/WorkflowHistory.vue';
 import { useWorkflowHistoryStore } from '@/stores/workflowHistory.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
 import { STORES, VIEWS } from '@/constants';
 import {
 	workflowHistoryDataFactory,
@@ -63,6 +64,7 @@ let pinia: ReturnType<typeof createTestingPinia>;
 let router: ReturnType<typeof useRouter>;
 let route: ReturnType<typeof useRoute>;
 let workflowHistoryStore: ReturnType<typeof useWorkflowHistoryStore>;
+let workflowsStore: ReturnType<typeof useWorkflowsStore>;
 let windowOpenSpy: SpyInstance;
 
 describe('WorkflowHistory', () => {
@@ -73,9 +75,11 @@ describe('WorkflowHistory', () => {
 			},
 		});
 		workflowHistoryStore = useWorkflowHistoryStore();
+		workflowsStore = useWorkflowsStore();
 		route = useRoute();
 		router = useRouter();
 
+		vi.spyOn(workflowsStore, 'fetchWorkflow').mockResolvedValue(null);
 		vi.spyOn(workflowHistoryStore, 'getWorkflowHistory').mockResolvedValue(historyData);
 		vi.spyOn(workflowHistoryStore, 'getWorkflowVersion').mockResolvedValue(versionData);
 		windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);

From 155aae30fba76e0b60ee90ccd010a412f199a6cc Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 10 Oct 2023 16:20:32 +0200
Subject: [PATCH 10/16] fix(editor): Remove errors from console in unit tests

---
 packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts b/packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts
index 32d823d6b4990..d189a79c65688 100644
--- a/packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts
+++ b/packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts
@@ -16,6 +16,7 @@ import {
 	workflowVersionDataFactory,
 } from '@/stores/__tests__/utils/workflowHistoryTestUtils';
 import type { WorkflowVersion } from '@/types/workflowHistory';
+import type { IWorkflowDb } from '@/Interface';
 
 vi.mock('vue-router', () => {
 	const params = {};
@@ -79,7 +80,7 @@ describe('WorkflowHistory', () => {
 		route = useRoute();
 		router = useRouter();
 
-		vi.spyOn(workflowsStore, 'fetchWorkflow').mockResolvedValue(null);
+		vi.spyOn(workflowsStore, 'fetchWorkflow').mockResolvedValue({} as IWorkflowDb);
 		vi.spyOn(workflowHistoryStore, 'getWorkflowHistory').mockResolvedValue(historyData);
 		vi.spyOn(workflowHistoryStore, 'getWorkflowVersion').mockResolvedValue(versionData);
 		windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);

From 676752040225802eef452c2b12bcf8f188f47d85 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 10 Oct 2023 16:49:47 +0200
Subject: [PATCH 11/16] fix(editor): Increase workflow history list item
 clickable area

---
 .../src/components/WorkflowHistory/WorkflowHistoryListItem.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
index f97aa509028de..282ff421e5a10 100644
--- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
+++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue
@@ -145,6 +145,7 @@ onMounted(() => {
 		display: grid;
 		padding: var(--spacing-s);
 		cursor: pointer;
+		flex: 1 1 auto;
 
 		time {
 			padding: 0 0 var(--spacing-5xs);

From 7400029c54cc6dd0eac9a6f017cbdab06f05c54c Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 10 Oct 2023 21:22:44 +0200
Subject: [PATCH 12/16] fix(editor): Prevent repeated error toasts

---
 .../editor-ui/src/stores/workflowHistory.store.ts    | 12 ++----------
 packages/editor-ui/src/views/WorkflowHistory.vue     | 11 +++++------
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/editor-ui/src/stores/workflowHistory.store.ts b/packages/editor-ui/src/stores/workflowHistory.store.ts
index 142e44e778a9e..aae2951093b62 100644
--- a/packages/editor-ui/src/stores/workflowHistory.store.ts
+++ b/packages/editor-ui/src/stores/workflowHistory.store.ts
@@ -29,21 +29,13 @@ export const useWorkflowHistoryStore = defineStore('workflowHistory', () => {
 		workflowId: string,
 		queryParams: WorkflowHistoryRequestParams,
 	): Promise<WorkflowHistory[]> =>
-		whApi
-			.getWorkflowHistory(rootStore.getRestApiContext, workflowId, queryParams)
-			.catch((error) => {
-				console.error(error);
-				return [] as WorkflowHistory[];
-			});
+		whApi.getWorkflowHistory(rootStore.getRestApiContext, workflowId, queryParams);
 
 	const getWorkflowVersion = async (
 		workflowId: string,
 		versionId: string,
 	): Promise<WorkflowVersion | null> =>
-		whApi.getWorkflowVersion(rootStore.getRestApiContext, workflowId, versionId).catch((error) => {
-			console.error(error);
-			return null;
-		});
+		whApi.getWorkflowVersion(rootStore.getRestApiContext, workflowId, versionId);
 
 	const downloadVersion = async (workflowId: string, workflowVersionId: WorkflowVersionId) => {
 		const [workflow, workflowVersion] = await Promise.all([
diff --git a/packages/editor-ui/src/views/WorkflowHistory.vue b/packages/editor-ui/src/views/WorkflowHistory.vue
index 54c02abce7404..ece25eba5be3e 100644
--- a/packages/editor-ui/src/views/WorkflowHistory.vue
+++ b/packages/editor-ui/src/views/WorkflowHistory.vue
@@ -242,12 +242,11 @@ watchEffect(async () => {
 		return;
 	}
 	try {
-		const [workflow, workflowVersion] = await Promise.all([
-			workflowsStore.fetchWorkflow(route.params.workflowId),
-			workflowHistoryStore.getWorkflowVersion(route.params.workflowId, route.params.versionId),
-		]);
-		activeWorkflow.value = workflow;
-		activeWorkflowVersion.value = workflowVersion;
+		activeWorkflowVersion.value = await workflowHistoryStore.getWorkflowVersion(
+			route.params.workflowId,
+			route.params.versionId,
+		);
+		activeWorkflow.value = await workflowsStore.fetchWorkflow(route.params.workflowId);
 	} catch (error) {
 		canRender.value = false;
 		toast.showError(error, i18n.baseText('workflowHistory.title'));

From 143e7cc79746c3abe3127a752f61dd9624e71ae9 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 10 Oct 2023 21:24:05 +0200
Subject: [PATCH 13/16] fix(editor): Prevent overlapping of NDV opened from
 iframe

---
 .../editor-ui/src/views/WorkflowHistory.vue   | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/editor-ui/src/views/WorkflowHistory.vue b/packages/editor-ui/src/views/WorkflowHistory.vue
index ece25eba5be3e..a8a0c24683861 100644
--- a/packages/editor-ui/src/views/WorkflowHistory.vue
+++ b/packages/editor-ui/src/views/WorkflowHistory.vue
@@ -266,16 +266,6 @@ watchEffect(async () => {
 				<n8n-button type="tertiary" icon="times" size="small" text square />
 			</router-link>
 		</div>
-		<div :class="$style.contentComponentWrapper">
-			<workflow-history-content
-				v-if="canRender"
-				:workflow="activeWorkflow"
-				:workflow-version="activeWorkflowVersion"
-				:actions="actions"
-				:isListLoading="isListLoading"
-				@action="onAction"
-			/>
-		</div>
 		<div :class="$style.listComponentWrapper">
 			<workflow-history-list
 				v-if="canRender"
@@ -293,6 +283,16 @@ watchEffect(async () => {
 				@upgrade="onUpgrade"
 			/>
 		</div>
+		<div :class="$style.contentComponentWrapper">
+			<workflow-history-content
+				v-if="canRender"
+				:workflow="activeWorkflow"
+				:workflow-version="activeWorkflowVersion"
+				:actions="actions"
+				:isListLoading="isListLoading"
+				@action="onAction"
+			/>
+		</div>
 	</div>
 </template>
 <style module lang="scss">
@@ -328,13 +328,11 @@ watchEffect(async () => {
 .contentComponentWrapper {
 	grid-area: content;
 	position: relative;
-	z-index: 2;
 }
 
 .listComponentWrapper {
 	grid-area: list;
 	position: relative;
-	z-index: 1;
 
 	&::before {
 		content: '';

From dbc5c924bd5a40a05e5856a3763f5506f13441d6 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 10 Oct 2023 21:26:22 +0200
Subject: [PATCH 14/16] fix(editor): Remove commented out style

---
 .../src/components/N8nActionDropdown/ActionDropdown.vue          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index f8d82dc45b83b..a9c9612a7eb32 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -137,7 +137,6 @@ export default defineComponent({
 
 	&:hover {
 		background-color: var(--color-background-base);
-		// color: initial !important;
 		color: var(--color-primary);
 	}
 }

From c9a74b317abbac866fe2f0327b0a2d8290a5a5ad Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Wed, 11 Oct 2023 09:04:32 +0200
Subject: [PATCH 15/16] fix(editor): Use formatted date in downloadable file
 name

---
 packages/editor-ui/src/stores/workflowHistory.store.ts | 8 ++++++--
 packages/editor-ui/src/views/WorkflowHistory.vue       | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/stores/workflowHistory.store.ts b/packages/editor-ui/src/stores/workflowHistory.store.ts
index aae2951093b62..7a488ae3caf13 100644
--- a/packages/editor-ui/src/stores/workflowHistory.store.ts
+++ b/packages/editor-ui/src/stores/workflowHistory.store.ts
@@ -37,7 +37,11 @@ export const useWorkflowHistoryStore = defineStore('workflowHistory', () => {
 	): Promise<WorkflowVersion | null> =>
 		whApi.getWorkflowVersion(rootStore.getRestApiContext, workflowId, versionId);
 
-	const downloadVersion = async (workflowId: string, workflowVersionId: WorkflowVersionId) => {
+	const downloadVersion = async (
+		workflowId: string,
+		workflowVersionId: WorkflowVersionId,
+		data: { formattedCreatedAt: string },
+	) => {
 		const [workflow, workflowVersion] = await Promise.all([
 			workflowsStore.fetchWorkflow(workflowId),
 			getWorkflowVersion(workflowId, workflowVersionId),
@@ -47,7 +51,7 @@ export const useWorkflowHistoryStore = defineStore('workflowHistory', () => {
 			const blob = new Blob([JSON.stringify({ ...workflow, nodes, connections }, null, 2)], {
 				type: 'application/json;charset=utf-8',
 			});
-			saveAs(blob, `${workflow.name}-${workflow.versionId}.json`);
+			saveAs(blob, `${workflow.name}(${data.formattedCreatedAt}).json`);
 		}
 	};
 
diff --git a/packages/editor-ui/src/views/WorkflowHistory.vue b/packages/editor-ui/src/views/WorkflowHistory.vue
index a8a0c24683861..5493ff295d6ae 100644
--- a/packages/editor-ui/src/views/WorkflowHistory.vue
+++ b/packages/editor-ui/src/views/WorkflowHistory.vue
@@ -177,7 +177,7 @@ const onAction = async ({
 				openInNewTab(id);
 				break;
 			case WORKFLOW_HISTORY_ACTIONS.DOWNLOAD:
-				await workflowHistoryStore.downloadVersion(route.params.workflowId, id);
+				await workflowHistoryStore.downloadVersion(route.params.workflowId, id, data);
 				break;
 			case WORKFLOW_HISTORY_ACTIONS.CLONE:
 				await workflowHistoryStore.cloneIntoNewWorkflow(route.params.workflowId, id, data);

From 861239a91001d0962308285903aa98b51b1a14ff Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Wed, 11 Oct 2023 09:15:51 +0200
Subject: [PATCH 16/16] fix(editor): Show list if everything is correct except
 the version ID in URL

---
 packages/editor-ui/src/views/WorkflowHistory.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/editor-ui/src/views/WorkflowHistory.vue b/packages/editor-ui/src/views/WorkflowHistory.vue
index 5493ff295d6ae..0a0a98cb37697 100644
--- a/packages/editor-ui/src/views/WorkflowHistory.vue
+++ b/packages/editor-ui/src/views/WorkflowHistory.vue
@@ -246,6 +246,14 @@ watchEffect(async () => {
 			route.params.workflowId,
 			route.params.versionId,
 		);
+	} catch (error) {
+		toast.showError(
+			new Error(`${error.message} "${route.params.versionId}"&nbsp;`),
+			i18n.baseText('workflowHistory.title'),
+		);
+	}
+
+	try {
 		activeWorkflow.value = await workflowsStore.fetchWorkflow(route.params.workflowId);
 	} catch (error) {
 		canRender.value = false;