n8n-editor-ui 2.1.1 → 2.2.0

package/dist/assets/{WorkflowHistory-_npGuIvZ.js → WorkflowHistory-DDwFxfgs.js}

@@ -1,40 +1,27 @@
-import { o as __toESM } from "./chunk-6z4oVpB-.js";
-import { C as computed, Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, Gt as unref, It as ref, L as h, M as createVNode, P as defineComponent, T as createBlock, Z as onMounted, _ as Fragment, _t as watch, at as renderSlot, bt as withCtx, et as openBlock, h as withModifiers, it as renderList, j as createTextVNode, ot as resolveComponent, q as onBeforeMount, vn as normalizeClass, vt as watchEffect, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
-import { _t as I18nT, gt as useI18n } from "./_MapCache-BXj4WgHo.js";
-import { Bn as N8nHeading_default, Gn as N8nIcon_default, Hn as N8nText_default, Un as N8nButton_default, at as N8nLoading_default, ht as N8nTooltip_default, it as N8nActionToggle_default, lt as N8nBadge_default, mt as N8nLink_default } from "./src-RwnQoRPP.js";
-import "./en-b3uD8cvU.js";
+import { C as computed, Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, Gt as unref, It as ref, L as h, M as createVNode, P as defineComponent, Pt as reactive, T as createBlock, Z as onMounted, _ as Fragment, _t as watch, bt as withCtx, et as openBlock, h as withModifiers, it as renderList, j as createTextVNode, ot as resolveComponent, q as onBeforeMount, vn as normalizeClass, vt as watchEffect, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { _t as useI18n, vt as I18nT } from "./_MapCache-0zNxISSG.js";
+import { Sn as N8nButton_default, at as N8nLoading_default, ht as N8nTooltip_default, it as N8nActionToggle_default, lt as N8nBadge_default, mt as N8nLink_default, wn as N8nIcon_default, xn as N8nText_default, yn as N8nHeading_default } from "./src-DTY1hJHs.js";
+import "./en-CF30SCh2.js";
 import "./preload-helper-CR0ecmWK.js";
 import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
-import { T as createEventBus, b as useRouter, y as useRoute } from "./truncate-BmR9EyjG.js";
-import "./overlay-Bil1NnPh.js";
+import { T as createEventBus, b as useRouter, y as useRoute } from "./truncate-ByNK2lRy.js";
+import { A as telemetry, Dr as useUsersStore, N as useWorkflowsStore, g as useWorkflowHistoryStore, oa as useUIStore, v as useToast } from "./builder.store-YujiPssa.js";
 import "./empty-BuGRxzl4.js";
-import "./useMessage-DIJ5qCTv.js";
-import { $o as useSettingsStore, Wi as useUIStore, dr as useUsersStore, es as getWorkflowHistory, h as telemetry, n as useToast, qo as getNewWorkflow, ts as getWorkflowVersion, v as useWorkflowsStore } from "./builder.store--AJ05qsa.js";
-import "./sanitize-html-Cft-jOcY.js";
-import "./CalendarDate-B-JEhNYg.js";
-import "./path-browserify-BgjP7RyT.js";
-import { Cs as WORKFLOW_HISTORY_VERSION_UNPUBLISH, Ss as WORKFLOW_HISTORY_VERSION_RESTORE, Vo as VIEWS, a as IS_DRAFT_PUBLISH_ENABLED, jo as getResourcePermissions, xs as WORKFLOW_HISTORY_PUBLISH_MODAL_KEY } from "./constants-B6Jp7SZD.js";
-import "./merge-BfSiz1ty.js";
-import { k as defineStore, r as useRootStore } from "./_baseOrderBy-GjkKJVvF.js";
-import "./dateformat-hG8NERse.js";
-import "./useDebounce-Cisb25yt.js";
-import "./npsSurvey.store-DF2xZcCA.js";
-import "./cloudPlan.store-Dad6qPdn.js";
-import "./templates.store-C3DEfML8.js";
-import "./focusPanel.store-C5r79FXL.js";
-import "./useWorkflowSaving-B1uc1ePR.js";
-import "./executions.store-Di5hWapE.js";
-import "./versions.store-BIIVPCEy.js";
-import { t as usePageRedirectionHelper } from "./usePageRedirectionHelper-D0ob2A1J.js";
-import { t as require_FileSaver_min } from "./FileSaver.min--9uV1QmK.js";
-import { t as useWorkflowActivate } from "./useWorkflowActivate-B3DYQS1P.js";
-import { n as generateVersionName, r as getLastPublishedVersion, t as formatTimestamp } from "./utils-BLHsa_NJ.js";
-import { t as WorkflowPreview_default } from "./WorkflowPreview-CVFW6eRL.js";
-import { t as useIntersectionObserver } from "./useIntersectionObserver-BZ6Jqnr3.js";
-var _hoisted_1$3 = ["datetime"];
-var _hoisted_2$1 = ["datetime"];
-var _hoisted_3 = ["value"];
-var _hoisted_4 = { key: 0 };
+import "./sanitize-html-Cc45ZKm8.js";
+import "./CalendarDate-zWqgZMlk.js";
+import "./path-browserify-BtCDmZ3_.js";
+import { Oo as getResourcePermissions, Ro as VIEWS, _s as WORKFLOW_HISTORY_PUBLISH_MODAL_KEY, a as IS_DRAFT_PUBLISH_ENABLED, vs as WORKFLOW_HISTORY_VERSION_RESTORE, ys as WORKFLOW_HISTORY_VERSION_UNPUBLISH } from "./constants-D52YoOSp.js";
+import "./merge-BmWPLD5Q.js";
+import { r as useRootStore } from "./_baseOrderBy-CesQfsb9.js";
+import "./dateformat-CM9k0--B.js";
+import "./useDebounce-DGSOfe85.js";
+import "./executions.store-Dodf4hZt.js";
+import "./versions.store-qQUmfjg3.js";
+import { t as usePageRedirectionHelper } from "./usePageRedirectionHelper-TzgTKFxt.js";
+import { t as useWorkflowActivate } from "./useWorkflowActivate-DocAQ9u8.js";
+import { i as getLastPublishedVersion, n as formatTimestamp, r as generateVersionName, t as computeTimelineEntries } from "./utils-C2GPI2gK.js";
+import { t as WorkflowPreview_default } from "./WorkflowPreview-C2LPnLG1.js";
+import { t as useIntersectionObserver } from "./useIntersectionObserver-DXKoRNFj.js";
 var WorkflowHistoryListItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "WorkflowHistoryListItem",
 	props: {
@@ -48,6 +35,10 @@ var WorkflowHistoryListItem_vue_vue_type_script_setup_true_lang_default = /* @__
 		isVersionActive: {
 			type: Boolean,
 			default: false
+		},
+		isGrouped: {
+			type: Boolean,
+			default: false
 		}
 	},
 	emits: [
@@ -60,11 +51,14 @@ var WorkflowHistoryListItem_vue_vue_type_script_setup_true_lang_default = /* @__
 		const emit = __emit;
 		const i18n = useI18n();
 		const usersStore = useUsersStore();
-		const actionsVisible$1 = ref(false);
+		const actionsVisible = ref(false);
 		const itemElement = ref(null);
 		const authorElement = ref(null);
 		const isAuthorElementTruncated = ref(false);
-		const isDraftPublishEnabled = true;
+		const checkAuthorTruncation = () => {
+			const el = authorElement.value?.$el;
+			if (el instanceof HTMLElement) isAuthorElementTruncated.value = el.scrollWidth > el.clientWidth;
+		};
 		const formattedCreatedAt = computed(() => {
 			const { date, time } = formatTimestamp(props.item.createdAt);
 			return i18n.baseText("workflowHistory.item.createdAt", { interpolate: {
@@ -105,7 +99,6 @@ var WorkflowHistoryListItem_vue_vue_type_script_setup_true_lang_default = /* @__
 			const user = usersStore.usersById[userId];
 			return user?.fullName ?? user?.email ?? null;
 		});
-		const idLabel = computed(() => i18n.baseText("workflowHistory.item.id", { interpolate: { id: props.item.versionId } }));
 		const onAction = (value) => {
 			emit("action", {
 				action: value,
@@ -118,7 +111,7 @@ var WorkflowHistoryListItem_vue_vue_type_script_setup_true_lang_default = /* @__
 			});
 		};
 		const onVisibleChange = (visible) => {
-			actionsVisible$1.value = visible;
+			actionsVisible.value = visible;
 		};
 		const onItemClick = (event) => {
 			emit("preview", {
@@ -132,109 +125,149 @@ var WorkflowHistoryListItem_vue_vue_type_script_setup_true_lang_default = /* @__
 				offsetTop: itemElement.value?.offsetTop ?? 0,
 				isSelected: props.isSelected
 			});
-			isAuthorElementTruncated.value = (authorElement.value?.scrollWidth ?? 0) > (authorElement.value?.clientWidth ?? 0);
+			checkAuthorTruncation();
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("li", {
 				ref_key: "itemElement",
 				ref: itemElement,
 				"data-test-id": "workflow-history-list-item",
+				role: "button",
 				class: normalizeClass({
 					[_ctx.$style.item]: true,
 					[_ctx.$style.selected]: props.isSelected,
-					[_ctx.$style.actionsVisible]: actionsVisible$1.value
-				})
-			}, [renderSlot(_ctx.$slots, "default", { formattedCreatedAt: formattedCreatedAt.value }, () => [unref(isDraftPublishEnabled) ? (openBlock(), createElementBlock("p", {
-				key: 0,
+					[_ctx.$style.actionsVisible]: actionsVisible.value,
+					[_ctx.$style.grouped]: props.isGrouped
+				}),
 				onClick: onItemClick
-			}, [
-				versionName.value ? (openBlock(), createElementBlock("span", {
+			}, [createBaseVNode("span", { class: normalizeClass(_ctx.$style.timelineColumn) }, [!props.isGrouped ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [props.isVersionActive ? (openBlock(), createBlock(unref(N8nIcon_default), {
+				key: 0,
+				size: "large",
+				icon: "circle-check",
+				color: "success"
+			})) : (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(_ctx.$style.timelineMarker)
+			}, null, 2))], 64)) : (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(_ctx.$style.timelineLine)
+			}, null, 2))], 2), createBaseVNode("div", { class: normalizeClass(_ctx.$style.wrapper) }, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.content) }, [versionName.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.mainRow) }, [createVNode(unref(N8nText_default), {
+				size: "small",
+				bold: true,
+				color: "text-dark",
+				class: normalizeClass(_ctx.$style.mainLine)
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(versionName.value), 1)]),
+				_: 1
+			}, 8, ["class"]), props.isVersionActive ? (openBlock(), createBlock(unref(N8nTooltip_default), {
+				key: 0,
+				placement: "top",
+				disabled: !publishedAt.value
+			}, {
+				content: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.tooltipContent) }, [createVNode(unref(N8nText_default), { size: "small" }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("workflowHistory.item.publishedAtLabel")) + " " + toDisplayString(publishedAt.value), 1)]),
+					_: 1
+				}), publishedByUserName.value ? (openBlock(), createBlock(unref(N8nText_default), {
 					key: 0,
-					class: normalizeClass(_ctx.$style.mainLine)
-				}, toDisplayString(versionName.value), 3)) : createCommentVNode("", true),
-				createBaseVNode("time", {
-					datetime: _ctx.item.createdAt,
-					class: normalizeClass(_ctx.$style.metaItem)
-				}, toDisplayString(unref(i18n).baseText("workflowHistory.item.savedAtLabel")) + " " + toDisplayString(formattedCreatedAt.value), 11, _hoisted_1$3),
-				createVNode(unref(N8nTooltip_default), {
-					placement: "right-end",
-					disabled: authors.value.size < 2 && !isAuthorElementTruncated.value
+					size: "small"
 				}, {
-					content: withCtx(() => [createTextVNode(toDisplayString(props.item.authors), 1)]),
-					default: withCtx(() => [createBaseVNode("span", {
-						ref_key: "authorElement",
-						ref: authorElement,
-						class: normalizeClass(_ctx.$style.metaItem)
-					}, toDisplayString(authors.value.label), 3)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(publishedByUserName.value), 1)]),
 					_: 1
-				}, 8, ["disabled"])
-			])) : (openBlock(), createElementBlock("p", {
-				key: 1,
-				onClick: onItemClick
-			}, [
-				createBaseVNode("time", { datetime: _ctx.item.createdAt }, toDisplayString(formattedCreatedAt.value), 9, _hoisted_2$1),
-				createVNode(unref(N8nTooltip_default), {
-					placement: "right-end",
-					disabled: authors.value.size < 2 && !isAuthorElementTruncated.value
+				})) : createCommentVNode("", true)], 2)]),
+				default: withCtx(() => [createVNode(unref(N8nBadge_default), {
+					size: "xsmall",
+					class: normalizeClass(_ctx.$style.publishedBadge),
+					"show-border": false
 				}, {
-					content: withCtx(() => [createTextVNode(toDisplayString(props.item.authors), 1)]),
-					default: withCtx(() => [createBaseVNode("span", {
-						ref_key: "authorElement",
-						ref: authorElement
-					}, toDisplayString(authors.value.label), 513)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("workflowHistory.item.active")), 1)]),
 					_: 1
-				}, 8, ["disabled"]),
-				createBaseVNode("data", { value: _ctx.item.versionId }, toDisplayString(idLabel.value), 9, _hoisted_3)
-			]))]), createBaseVNode("div", { class: normalizeClass(_ctx.$style.tail) }, [
-				unref(isDraftPublishEnabled) && props.isVersionActive ? (openBlock(), createBlock(unref(N8nTooltip_default), {
-					key: 0,
-					placement: "top",
-					disabled: !publishedAt.value
+				}, 8, ["class"])]),
+				_: 1
+			}, 8, ["disabled"])) : createCommentVNode("", true)], 2), createBaseVNode("div", { class: normalizeClass(_ctx.$style.metaRow) }, [createVNode(unref(N8nTooltip_default), {
+				placement: "right-end",
+				disabled: !isAuthorElementTruncated.value
+			}, {
+				content: withCtx(() => [createTextVNode(toDisplayString(props.item.authors), 1)]),
+				default: withCtx(() => [createVNode(unref(N8nText_default), {
+					ref_key: "authorElement",
+					ref: authorElement,
+					size: "small",
+					color: "text-base",
+					class: normalizeClass(_ctx.$style.metaItem)
 				}, {
-					content: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.tooltipContent) }, [createBaseVNode("span", null, toDisplayString(unref(i18n).baseText("workflowHistory.item.publishedAtLabel")) + " " + toDisplayString(publishedAt.value), 1), publishedByUserName.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(publishedByUserName.value), 1)) : createCommentVNode("", true)], 2)]),
-					default: withCtx(() => [createVNode(unref(N8nBadge_default), {
-						size: "medium",
-						class: normalizeClass(_ctx.$style.publishedBadge),
-						"show-border": false
-					}, {
-						default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("workflowHistory.item.active")), 1)]),
-						_: 1
-					}, 8, ["class"])]),
-					_: 1
-				}, 8, ["disabled"])) : createCommentVNode("", true),
-				!unref(isDraftPublishEnabled) && props.index === 0 ? (openBlock(), createBlock(unref(N8nBadge_default), { key: 1 }, {
-					default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("workflowHistory.item.latest")), 1)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(authors.value.label) + ", ", 1)]),
 					_: 1
-				})) : createCommentVNode("", true),
-				createVNode(unref(N8nActionToggle_default), {
-					theme: "dark",
-					class: normalizeClass(_ctx.$style.actions),
-					actions: props.actions,
-					placement: "bottom-end",
-					onAction,
-					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
-					onVisibleChange
+				}, 8, ["class"])]),
+				_: 1
+			}, 8, ["disabled"]), createVNode(unref(N8nText_default), {
+				tag: "time",
+				size: "small",
+				color: "text-base",
+				class: normalizeClass(_ctx.$style.metaItem)
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(formattedCreatedAt.value), 1)]),
+				_: 1
+			}, 8, ["class"])], 2)], 64)) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(_ctx.$style.unnamedRow)
+			}, [createVNode(unref(N8nTooltip_default), {
+				placement: "right-end",
+				disabled: !isAuthorElementTruncated.value
+			}, {
+				content: withCtx(() => [createTextVNode(toDisplayString(props.item.authors), 1)]),
+				default: withCtx(() => [createVNode(unref(N8nText_default), {
+					ref_key: "authorElement",
+					ref: authorElement,
+					size: "small",
+					color: "text-base",
+					class: normalizeClass(_ctx.$style.unnamedAuthor)
 				}, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "action-toggle-button")]),
-					_: 3
-				}, 8, ["class", "actions"])
-			], 2)], 2);
+					default: withCtx(() => [createTextVNode(toDisplayString(authors.value.label) + ", ", 1)]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 1
+			}, 8, ["disabled"]), createVNode(unref(N8nText_default), {
+				tag: "time",
+				size: "small",
+				color: "text-base",
+				class: normalizeClass(_ctx.$style.unnamedTime)
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(formattedCreatedAt.value), 1)]),
+				_: 1
+			}, 8, ["class"])], 2))], 2), createVNode(unref(N8nActionToggle_default), {
+				class: normalizeClass(_ctx.$style.actions),
+				actions: props.actions,
+				placement: "bottom-end",
+				onAction,
+				onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+				onVisibleChange
+			}, null, 8, ["class", "actions"])], 2)], 2);
 		};
 	}
 });
 var WorkflowHistoryListItem_vue_vue_type_style_index_0_lang_module_default = {
-	item: "_item_hpps2_123",
-	mainLine: "_mainLine_hpps2_155",
-	metaItem: "_metaItem_hpps2_161",
-	tail: "_tail_hpps2_173",
-	selected: "_selected_hpps2_178",
-	actionsVisible: "_actionsVisible_hpps2_185",
-	actions: "_actions_hpps2_185",
-	publishedBadge: "_publishedBadge_hpps2_194",
-	tooltipContent: "_tooltipContent_hpps2_203"
+	item: "_item_18356_123",
+	grouped: "_grouped_18356_134",
+	selected: "_selected_18356_134",
+	wrapper: "_wrapper_18356_152",
+	timelineColumn: "_timelineColumn_18356_165",
+	timelineMarker: "_timelineMarker_18356_176",
+	timelineLine: "_timelineLine_18356_184",
+	content: "_content_18356_192",
+	mainRow: "_mainRow_18356_200",
+	mainLine: "_mainLine_18356_206",
+	metaRow: "_metaRow_18356_212",
+	metaItem: "_metaItem_18356_219",
+	unnamedRow: "_unnamedRow_18356_226",
+	unnamedAuthor: "_unnamedAuthor_18356_231",
+	unnamedTime: "_unnamedTime_18356_238",
+	actions: "_actions_18356_242",
+	publishedBadge: "_publishedBadge_18356_247",
+	tooltipContent: "_tooltipContent_18356_252"
 };
 var WorkflowHistoryListItem_default = /* @__PURE__ */ __plugin_vue_export_helper_default(WorkflowHistoryListItem_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": WorkflowHistoryListItem_vue_vue_type_style_index_0_lang_module_default }]]);
-var _hoisted_1$2 = ["aria-label"];
+var _hoisted_1$2 = ["aria-expanded", "onClick"];
+var _hoisted_2$1 = ["aria-label"];
 var WorkflowHistoryList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "WorkflowHistoryList",
 	props: {
@@ -259,15 +292,35 @@ var WorkflowHistoryList_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		const emit = __emit;
 		const i18n = useI18n();
 		const listElement = ref(null);
+		const loadMoreSentinel = ref(null);
 		const shouldAutoScroll = ref(true);
+		const expandedGroups = reactive(/* @__PURE__ */ new Set());
+		const timelineEntries = computed(() => {
+			return computeTimelineEntries(props.items);
+		});
+		const toggleGroup = (groupId) => {
+			if (expandedGroups.has(groupId)) expandedGroups.delete(groupId);
+			else expandedGroups.add(groupId);
+		};
+		const hasMoreItems = computed(() => props.lastReceivedItemsLength === props.requestNumberOfItems);
 		const { observe: observeForLoadMore } = useIntersectionObserver({
 			root: listElement,
 			threshold: .01,
-			onIntersect: () => emit("loadMore", {
-				take: props.requestNumberOfItems,
-				skip: props.items.length
-			})
+			onIntersect: () => {
+				shouldAutoScroll.value = false;
+				emit("loadMore", {
+					take: props.requestNumberOfItems,
+					skip: props.items.length
+				});
+			}
 		});
+		watch([
+			loadMoreSentinel,
+			hasMoreItems,
+			() => props.items.length
+		], ([sentinel$1, canLoadMore]) => {
+			if (sentinel$1 && canLoadMore) observeForLoadMore(sentinel$1);
+		}, { immediate: true });
 		const getActions = (item$1, index) => {
 			let filteredActions = props.actions;
 			if (index === 0) filteredActions = filteredActions.filter((action) => action.value !== "restore");
@@ -290,7 +343,7 @@ var WorkflowHistoryList_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				id
 			});
 		};
-		const onItemMounted = ({ index, offsetTop, isSelected }) => {
+		const onItemMounted = ({ offsetTop, isSelected }) => {
 			if (isSelected && shouldAutoScroll.value) {
 				shouldAutoScroll.value = false;
 				listElement.value?.scrollTo({
@@ -298,7 +351,6 @@ var WorkflowHistoryList_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 					behavior: "smooth"
 				});
 			}
-			if (index === props.items.length - 1 && props.lastReceivedItemsLength === props.requestNumberOfItems) observeForLoadMore(listElement.value?.children[index]);
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("ul", {
@@ -307,33 +359,75 @@ var WorkflowHistoryList_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				class: normalizeClass(_ctx.$style.list),
 				"data-test-id": "workflow-history-list"
 			}, [
-				(openBlock(true), createElementBlock(Fragment, null, renderList(props.items, (item$1, index) => {
-					return openBlock(), createBlock(WorkflowHistoryListItem_default, {
-						key: item$1.versionId,
-						index,
-						item: item$1,
-						"is-selected": item$1.versionId === props.selectedItem?.versionId,
-						"is-version-active": item$1.versionId === props.activeVersionId,
-						actions: getActions(item$1, index),
-						onAction,
-						onPreview,
-						onMounted: onItemMounted
-					}, null, 8, [
-						"index",
-						"item",
-						"is-selected",
-						"is-version-active",
-						"actions"
-					]);
+				(openBlock(true), createElementBlock(Fragment, null, renderList(timelineEntries.value, (entry) => {
+					return openBlock(), createElementBlock(Fragment, { key: entry.type === "version" ? entry.item.versionId : entry.groupId }, [
+						entry.type === "group-header" ? (openBlock(), createElementBlock("li", {
+							key: 0,
+							class: normalizeClass(_ctx.$style.groupHeader),
+							"aria-expanded": expandedGroups.has(entry.groupId),
+							role: "button",
+							"data-test-id": "workflow-history-group-header",
+							onClick: ($event) => toggleGroup(entry.groupId)
+						}, [createVNode(unref(N8nIcon_default), {
+							class: normalizeClass([_ctx.$style.groupTimelineColumn, _ctx.$style.groupChevron]),
+							icon: expandedGroups.has(entry.groupId) ? "chevron-down" : "chevron-right",
+							size: "small"
+						}, null, 8, ["class", "icon"]), createVNode(unref(N8nText_default), {
+							color: "text-base",
+							size: "small"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("workflowHistory.group.unnamedVersions", {
+								adjustToNumber: entry.count,
+								interpolate: { count: String(entry.count) }
+							})), 1)]),
+							_: 2
+						}, 1024)], 10, _hoisted_1$2)) : createCommentVNode("", true),
+						entry.type === "group-header" && expandedGroups.has(entry.groupId) ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(entry.versions, (versionEntry) => {
+							return openBlock(), createBlock(WorkflowHistoryListItem_default, {
+								key: versionEntry.item.versionId,
+								index: versionEntry.originalIndex,
+								item: versionEntry.item,
+								"is-selected": versionEntry.item.versionId === props.selectedItem?.versionId,
+								"is-version-active": versionEntry.item.versionId === props.activeVersionId,
+								actions: getActions(versionEntry.item, versionEntry.originalIndex),
+								"is-grouped": true,
+								onAction,
+								onPreview,
+								onMounted: onItemMounted
+							}, null, 8, [
+								"index",
+								"item",
+								"is-selected",
+								"is-version-active",
+								"actions"
+							]);
+						}), 128)) : createCommentVNode("", true),
+						entry.type === "version" ? (openBlock(), createBlock(WorkflowHistoryListItem_default, {
+							key: 2,
+							index: entry.originalIndex,
+							item: entry.item,
+							"is-selected": entry.item.versionId === props.selectedItem?.versionId,
+							"is-version-active": entry.item.versionId === props.activeVersionId,
+							actions: getActions(entry.item, entry.originalIndex),
+							onAction,
+							onPreview,
+							onMounted: onItemMounted
+						}, null, 8, [
+							"index",
+							"item",
+							"is-selected",
+							"is-version-active",
+							"actions"
+						])) : createCommentVNode("", true)
+					], 64);
 				}), 128)),
-				!props.items.length && !props.isListLoading ? (openBlock(), createElementBlock("li", {
+				props.items.length && hasMoreItems.value ? (openBlock(), createElementBlock("li", {
 					key: 0,
-					class: normalizeClass(_ctx.$style.empty)
-				}, [
-					createTextVNode(toDisplayString(unref(i18n).baseText("workflowHistory.empty")) + " ", 1),
-					_cache[1] || (_cache[1] = createBaseVNode("br", null, null, -1)),
-					createTextVNode(" " + toDisplayString(unref(i18n).baseText("workflowHistory.hint")), 1)
-				], 2)) : createCommentVNode("", true),
+					ref_key: "loadMoreSentinel",
+					ref: loadMoreSentinel,
+					class: normalizeClass(_ctx.$style.sentinel),
+					"aria-hidden": "true"
+				}, null, 2)) : createCommentVNode("", true),
 				props.isListLoading ? (openBlock(), createElementBlock("li", {
 					key: 1,
 					class: normalizeClass(_ctx.$style.loader),
@@ -354,7 +448,7 @@ var WorkflowHistoryList_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 						rows: 3,
 						class: "mb-xs"
 					})
-				], 10, _hoisted_1$2)) : createCommentVNode("", true),
+				], 10, _hoisted_2$1)) : createCommentVNode("", true),
 				props.shouldUpgrade ? (openBlock(), createElementBlock("li", {
 					key: 2,
 					class: normalizeClass(_ctx.$style.retention)
@@ -374,10 +468,13 @@ var WorkflowHistoryList_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 	}
 });
 var WorkflowHistoryList_vue_vue_type_style_index_0_lang_module_default = {
-	list: "_list_1i94b_123",
-	empty: "_empty_1i94b_132",
-	loader: "_loader_1i94b_145",
-	retention: "_retention_1i94b_149"
+	list: "_list_1dkdi_123",
+	loader: "_loader_1dkdi_133",
+	sentinel: "_sentinel_1dkdi_137",
+	retention: "_retention_1dkdi_141",
+	groupHeader: "_groupHeader_1dkdi_149",
+	groupTimelineColumn: "_groupTimelineColumn_1dkdi_168",
+	groupChevron: "_groupChevron_1dkdi_172"
 };
 var WorkflowHistoryList_default = /* @__PURE__ */ __plugin_vue_export_helper_default(WorkflowHistoryList_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": WorkflowHistoryList_vue_vue_type_style_index_0_lang_module_default }]]);
 var _hoisted_1$1 = ["datetime"];
@@ -430,18 +527,23 @@ var WorkflowHistoryContent_vue_vue_type_script_setup_true_lang_default = /* @__P
 		const toggleDescription = () => {
 			isDescriptionExpanded.value = !isDescriptionExpanded.value;
 		};
-		const actions$1 = computed(() => {
+		const actions$2 = computed(() => {
 			let filteredActions = props.actions;
 			if (props.isFirstItemShown) filteredActions = filteredActions.filter((action) => action.value !== "restore");
 			if (props.isVersionActive) filteredActions = filteredActions.filter((action) => action.value !== "publish");
 			else filteredActions = filteredActions.filter((action) => action.value !== "unpublish");
 			return filteredActions;
 		});
-		const onAction = ({ action, id, data }) => {
+		const onAction = (value) => {
+			if (!props.workflowVersion) return;
 			emit("action", {
-				action,
-				id,
-				data
+				action: value,
+				id: props.workflowVersion.versionId,
+				data: {
+					formattedCreatedAt: formattedCreatedAt.value,
+					versionName: versionNameDisplay.value,
+					description: description.value
+				}
 			});
 		};
 		watch(() => props.workflowVersion, () => {
@@ -453,54 +555,54 @@ var WorkflowHistoryContent_vue_vue_type_script_setup_true_lang_default = /* @__P
 				workflow: workflowVersionPreview.value,
 				loading: props.isListLoading,
 				"loader-type": "spinner"
-			}, null, 8, ["workflow", "loading"])) : createCommentVNode("", true), createBaseVNode("ul", { class: normalizeClass(_ctx.$style.info) }, [props.workflowVersion ? (openBlock(), createBlock(WorkflowHistoryListItem_default, {
+			}, null, 8, ["workflow", "loading"])) : createCommentVNode("", true), props.workflowVersion ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(_ctx.$style.info)
+			}, [createBaseVNode("div", { class: normalizeClass(_ctx.$style.card) }, [unref(isDraftPublishEnabled) ? (openBlock(), createElementBlock("div", {
 				key: 0,
-				class: normalizeClass(_ctx.$style.card),
-				index: -1,
-				item: props.workflowVersion,
-				"is-selected": false,
-				actions: actions$1.value,
-				onAction
+				class: normalizeClass(_ctx.$style.descriptionBox)
+			}, [versionNameDisplay.value ? (openBlock(), createBlock(unref(N8nTooltip_default), {
+				key: 0,
+				content: versionNameDisplay.value
 			}, {
-				default: withCtx(({ formattedCreatedAt: formattedCreatedAt$1 }) => [unref(isDraftPublishEnabled) ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					class: normalizeClass(_ctx.$style.descriptionBox)
-				}, [versionNameDisplay.value ? (openBlock(), createBlock(unref(N8nTooltip_default), {
-					key: 0,
-					content: versionNameDisplay.value
+				default: withCtx(() => [createVNode(unref(N8nText_default), {
+					class: normalizeClass(_ctx.$style.mainLine),
+					bold: "",
+					color: "text-dark"
 				}, {
-					default: withCtx(() => [createVNode(unref(N8nText_default), {
-						class: normalizeClass(_ctx.$style.mainLine),
-						bold: "",
-						color: "text-dark"
-					}, {
-						default: withCtx(() => [createTextVNode(toDisplayString(versionNameDisplay.value), 1)]),
-						_: 1
-					}, 8, ["class"])]),
+					default: withCtx(() => [createTextVNode(toDisplayString(versionNameDisplay.value), 1)]),
 					_: 1
-				}, 8, ["content"])) : createCommentVNode("", true), description.value ? (openBlock(), createBlock(unref(N8nText_default), {
-					key: 1,
+				}, 8, ["class"])]),
+				_: 1
+			}, 8, ["content"])) : createCommentVNode("", true), description.value ? (openBlock(), createBlock(unref(N8nText_default), {
+				key: 1,
+				size: "small",
+				color: "text-base"
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(displayDescription.value) + " ", 1), isDescriptionLong.value ? (openBlock(), createBlock(unref(N8nLink_default), {
+					key: 0,
 					size: "small",
-					color: "text-base"
+					onClick: toggleDescription
 				}, {
-					default: withCtx(() => [createTextVNode(toDisplayString(displayDescription.value) + " ", 1), isDescriptionLong.value ? (openBlock(), createBlock(unref(N8nLink_default), {
-						key: 0,
-						size: "small",
-						onClick: toggleDescription
-					}, {
-						default: withCtx(() => [createTextVNode(toDisplayString(isDescriptionExpanded.value ? unref(i18n).baseText("generic.showLess") : unref(i18n).baseText("generic.showMore")), 1)]),
-						_: 1
-					})) : createCommentVNode("", true)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(isDescriptionExpanded.value ? unref(i18n).baseText("generic.showLess") : unref(i18n).baseText("generic.showMore")), 1)]),
 					_: 1
-				})) : createCommentVNode("", true)], 2)) : (openBlock(), createElementBlock("section", {
-					key: 1,
-					class: normalizeClass(_ctx.$style.textOld)
-				}, [
-					createBaseVNode("p", null, [createBaseVNode("span", { class: normalizeClass(_ctx.$style.label) }, toDisplayString(unref(i18n).baseText("workflowHistory.content.title")) + ": ", 3), createBaseVNode("time", { datetime: props.workflowVersion.createdAt }, toDisplayString(formattedCreatedAt$1), 9, _hoisted_1$1)]),
-					createBaseVNode("p", null, [createBaseVNode("span", { class: normalizeClass(_ctx.$style.label) }, toDisplayString(unref(i18n).baseText("workflowHistory.content.editedBy")) + ": ", 3), createBaseVNode("span", null, toDisplayString(props.workflowVersion.authors), 1)]),
-					createBaseVNode("p", null, [createBaseVNode("span", { class: normalizeClass(_ctx.$style.label) }, toDisplayString(unref(i18n).baseText("workflowHistory.content.versionId")) + ": ", 3), createBaseVNode("data", { value: props.workflowVersion.versionId }, toDisplayString(props.workflowVersion.versionId), 9, _hoisted_2)])
-				], 2))]),
-				"action-toggle-button": withCtx(() => [createVNode(unref(N8nButton_default), {
+				})) : createCommentVNode("", true)]),
+				_: 1
+			})) : createCommentVNode("", true)], 2)) : (openBlock(), createElementBlock("section", {
+				key: 1,
+				class: normalizeClass(_ctx.$style.textOld)
+			}, [
+				createBaseVNode("p", null, [createBaseVNode("span", { class: normalizeClass(_ctx.$style.label) }, toDisplayString(unref(i18n).baseText("workflowHistory.content.title")) + ": ", 3), createBaseVNode("time", { datetime: props.workflowVersion.createdAt }, toDisplayString(formattedCreatedAt.value), 9, _hoisted_1$1)]),
+				createBaseVNode("p", null, [createBaseVNode("span", { class: normalizeClass(_ctx.$style.label) }, toDisplayString(unref(i18n).baseText("workflowHistory.content.editedBy")) + ": ", 3), createBaseVNode("span", null, toDisplayString(props.workflowVersion.authors), 1)]),
+				createBaseVNode("p", null, [createBaseVNode("span", { class: normalizeClass(_ctx.$style.label) }, toDisplayString(unref(i18n).baseText("workflowHistory.content.versionId")) + ": ", 3), createBaseVNode("data", { value: props.workflowVersion.versionId }, toDisplayString(props.workflowVersion.versionId), 9, _hoisted_2)])
+			], 2)), createVNode(unref(N8nActionToggle_default), {
+				class: normalizeClass(_ctx.$style.actions),
+				actions: actions$2.value,
+				placement: "bottom-end",
+				"data-test-id": "workflow-history-content-actions",
+				onAction
+			}, {
+				default: withCtx(() => [createVNode(unref(N8nButton_default), {
 					type: "tertiary",
 					size: "large",
 					"data-test-id": "action-toggle-button"
@@ -513,76 +615,21 @@ var WorkflowHistoryContent_vue_vue_type_script_setup_true_lang_default = /* @__P
 					_: 1
 				})]),
 				_: 1
-			}, 8, [
-				"class",
-				"item",
-				"actions"
-			])) : createCommentVNode("", true)], 2)], 2);
+			}, 8, ["class", "actions"])], 2)], 2)) : createCommentVNode("", true)], 2);
 		};
 	}
 });
 var WorkflowHistoryContent_vue_vue_type_style_index_0_lang_module_default = {
-	content: "_content_1x7a8_123",
-	info: "_info_1x7a8_133",
-	card: "_card_1x7a8_141",
-	descriptionBox: "_descriptionBox_1x7a8_146",
-	mainLine: "_mainLine_1x7a8_157",
-	textOld: "_textOld_1x7a8_163",
-	label: "_label_1x7a8_188"
+	content: "_content_1m14m_123",
+	info: "_info_1m14m_133",
+	card: "_card_1m14m_141",
+	descriptionBox: "_descriptionBox_1m14m_148",
+	mainLine: "_mainLine_1m14m_160",
+	textOld: "_textOld_1m14m_167",
+	label: "_label_1m14m_202",
+	actions: "_actions_1m14m_207"
 };
 var WorkflowHistoryContent_default = /* @__PURE__ */ __plugin_vue_export_helper_default(WorkflowHistoryContent_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": WorkflowHistoryContent_vue_vue_type_style_index_0_lang_module_default }]]);
-var import_FileSaver_min = /* @__PURE__ */ __toESM(require_FileSaver_min());
-const useWorkflowHistoryStore = defineStore("workflowHistory", () => {
-	const rootStore = useRootStore();
-	const settingsStore = useSettingsStore();
-	const workflowsStore = useWorkflowsStore();
-	const licensePruneTime = computed(() => settingsStore.settings.workflowHistory.licensePruneTime);
-	const evaluatedPruneTime = computed(() => settingsStore.settings.workflowHistory.pruneTime);
-	const shouldUpgrade = computed(() => licensePruneTime.value !== -1 && licensePruneTime.value === evaluatedPruneTime.value);
-	const getWorkflowHistory$1 = async (workflowId, queryParams) => await getWorkflowHistory(rootStore.restApiContext, workflowId, queryParams);
-	const getWorkflowVersion$1 = async (workflowId, versionId) => await getWorkflowVersion(rootStore.restApiContext, workflowId, versionId);
-	const downloadVersion = async (workflowId, workflowVersionId, data) => {
-		const [workflow, workflowVersion] = await Promise.all([workflowsStore.fetchWorkflow(workflowId), getWorkflowVersion$1(workflowId, workflowVersionId)]);
-		const { connections, nodes } = workflowVersion;
-		(0, import_FileSaver_min.saveAs)(new Blob([JSON.stringify({
-			...workflow,
-			nodes,
-			connections
-		}, null, 2)], { type: "application/json;charset=utf-8" }), `${workflow.name}(${data.formattedCreatedAt}).json`);
-	};
-	const cloneIntoNewWorkflow = async (workflowId, workflowVersionId, data) => {
-		const [workflow, workflowVersion] = await Promise.all([workflowsStore.fetchWorkflow(workflowId), getWorkflowVersion$1(workflowId, workflowVersionId)]);
-		const { connections, nodes } = workflowVersion;
-		const { name } = workflow;
-		const newWorkflowData = {
-			nodes,
-			connections,
-			name: (await getNewWorkflow(rootStore.restApiContext, { name: `${name} (${data.formattedCreatedAt})` })).name
-		};
-		return await workflowsStore.createNewWorkflow(newWorkflowData);
-	};
-	const restoreWorkflow = async (workflowId, workflowVersionId, shouldDeactivate) => {
-		const { connections, nodes } = await getWorkflowVersion$1(workflowId, workflowVersionId);
-		const updateData = {
-			connections,
-			nodes
-		};
-		if (shouldDeactivate) updateData.active = false;
-		return await workflowsStore.updateWorkflow(workflowId, updateData, true).catch(async (error) => {
-			if (error.httpStatusCode === 400 && typeof error.message === "string" && error.message.includes("can not be activated")) return await workflowsStore.fetchWorkflow(workflowId);
-			else throw new Error(error);
-		});
-	};
-	return {
-		getWorkflowHistory: getWorkflowHistory$1,
-		getWorkflowVersion: getWorkflowVersion$1,
-		downloadVersion,
-		cloneIntoNewWorkflow,
-		restoreWorkflow,
-		evaluatedPruneTime,
-		shouldUpgrade
-	};
-});
 var _hoisted_1 = { key: 0 };
 var WorkflowHistoryVersionRestoreModalActions = /* @__PURE__ */ function(WorkflowHistoryVersionRestoreModalActions$1) {
 	WorkflowHistoryVersionRestoreModalActions$1["restore"] = "restore";
@@ -631,7 +678,7 @@ var WorkflowHistory_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		const workflowActiveVersionId = computed(() => {
 			return workflowsStore.getWorkflowById(workflowId.value)?.activeVersion?.versionId;
 		});
-		const actions$1 = computed(() => workflowHistoryActionTypes.filter((value) => !(value === "publish" && activeWorkflow.value?.isArchived)).map((value) => ({
+		const actions$2 = computed(() => workflowHistoryActionTypes.filter((value) => !(value === "publish" && activeWorkflow.value?.isArchived)).map((value) => ({
 			label: i18n.baseText(`workflowHistory.item.actions.${value}`),
 			disabled: value === "clone" && !workflowPermissions.value.create || value === "restore" && !workflowPermissions.value.update || (value === "publish" || value === "unpublish") && !workflowPermissions.value.update,
 			value
@@ -699,8 +746,17 @@ var WorkflowHistory_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			});
 		};
 		const restoreWorkflowVersion = async (id, data) => {
-			await workflowsStore.fetchWorkflow(workflowId.value);
-			activeWorkflow.value = await workflowHistoryStore.restoreWorkflow(workflowId.value, id, false);
+			const workflow = await workflowsStore.fetchWorkflow(workflowId.value);
+			let deactivateAndRestore = false;
+			const versionIdBeforeRestore = workflow.versionId;
+			activeWorkflow.value = await workflowHistoryStore.restoreWorkflow(workflowId.value, id, deactivateAndRestore);
+			if (activeWorkflow.value.versionId === versionIdBeforeRestore) {
+				toast.showMessage({
+					title: i18n.baseText("workflowHistory.action.restore.alreadyRestored"),
+					type: "info"
+				});
+				return;
+			}
 			workflowHistory.value = (await workflowHistoryStore.getWorkflowHistory(workflowId.value, { take: 1 })).concat(workflowHistory.value);
 			toast.showMessage({
 				title: i18n.baseText("workflowHistory.action.restore.success.title"),
@@ -862,7 +918,7 @@ var WorkflowHistory_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					items: workflowHistory.value,
 					"last-received-items-length": lastReceivedItemsLength.value,
 					"selected-item": selectedWorkflowVersion.value,
-					actions: actions$1.value,
+					actions: actions$2.value,
 					"request-number-of-items": requestNumberOfItems.value,
 					"should-upgrade": unref(workflowHistoryStore).shouldUpgrade,
 					"evaluated-prune-days": evaluatedPruneDays.value,
@@ -888,7 +944,7 @@ var WorkflowHistory_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					workflow: activeWorkflow.value,
 					"workflow-version": selectedWorkflowVersion.value,
 					"is-version-active": selectedWorkflowVersion.value?.versionId === workflowActiveVersionId.value,
-					actions: actions$1.value,
+					actions: actions$2.value,
 					"is-list-loading": isListLoading.value,
 					"is-first-item-shown": isFirstItemShown.value,
 					onAction
@@ -905,11 +961,11 @@ var WorkflowHistory_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 	}
 });
 var WorkflowHistory_vue_vue_type_style_index_0_lang_module_default = {
-	view: "_view_ley84_123",
-	header: "_header_ley84_133",
-	corner: "_corner_ley84_141",
-	contentComponentWrapper: "_contentComponentWrapper_ley84_152",
-	listComponentWrapper: "_listComponentWrapper_ley84_157"
+	view: "_view_1q9dy_123",
+	header: "_header_1q9dy_133",
+	corner: "_corner_1q9dy_141",
+	contentComponentWrapper: "_contentComponentWrapper_1q9dy_152",
+	listComponentWrapper: "_listComponentWrapper_1q9dy_157"
 };
 var WorkflowHistory_default = /* @__PURE__ */ __plugin_vue_export_helper_default(WorkflowHistory_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": WorkflowHistory_vue_vue_type_style_index_0_lang_module_default }]]);
 export { WorkflowHistory_default as default };