fix(editor): Fix route component caching, incorrect use of array reduce method and enable WF history feature (#7434)

Co-authored-by: Giulio Andreini <andreini@netseven.it>

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

@@ -108,6 +108,7 @@
 			>
 				<n8n-icon-button
 					:disabled="isWorkflowHistoryButtonDisabled"
+					data-test-id="workflow-history-button"
 					type="tertiary"
 					icon="history"
 					size="medium"
@@ -349,9 +350,8 @@ export default defineComponent({
 			return actions;
 		},
 		isWorkflowHistoryFeatureEnabled(): boolean {
-			return (
-				this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowHistory) &&
-				this.settingsStore.isDevRelease
+			return this.settingsStore.isEnterpriseFeatureEnabled(
+				EnterpriseEditionFeature.WorkflowHistory,
 			);
 		},
 		workflowHistoryRoute(): { name: string; params: { workflowId: string } } {

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

@@ -17,6 +17,7 @@ const props = defineProps<{
 	workflowVersion: WorkflowVersion | null;
 	actions: UserAction[];
 	isListLoading?: boolean;
+	isFirstItemShown?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -42,6 +43,12 @@ const workflowVersionPreview = computed<IWorkflowDb | undefined>(() => {
 	};
 });
 
+const actions = computed(() =>
+	props.isFirstItemShown
+		? props.actions.filter((action) => action.value !== 'restore')
+		: props.actions,
+);
+
 const onAction = ({
 	action,
 	id,
@@ -67,11 +74,10 @@ const onAction = ({
 			<workflow-history-list-item
 				:class="$style.card"
 				v-if="props.workflowVersion"
-				:full="true"
 				:index="-1"
 				:item="props.workflowVersion"
 				:isActive="false"
-				:actions="props.actions"
+				:actions="actions"
 				@action="onAction"
 			>
 				<template #default="{ formattedCreatedAt }">
@@ -99,7 +105,7 @@ const onAction = ({
 					</section>
 				</template>
 				<template #action-toggle-button>
-					<n8n-button type="tertiary" size="small" data-test-id="action-toggle-button">
+					<n8n-button type="tertiary" size="large" data-test-id="action-toggle-button">
 						{{ i18n.baseText('workflowHistory.content.actions') }}
 						<n8n-icon class="ml-3xs" icon="chevron-down" size="small" />
 					</n8n-button>
@@ -146,8 +152,9 @@ const onAction = ({
 
 			&:first-child {
 				padding-top: var(--spacing-3xs);
-				padding-bottom: var(--spacing-3xs);
+				padding-bottom: var(--spacing-4xs);
 				* {
+					margin-top: auto;
 					font-size: var(--font-size-m);
 				}
 			}
@@ -161,6 +168,7 @@ const onAction = ({
 			}
 
 			.label {
+				color: var(--color-text-light);
 				padding-right: var(--spacing-4xs);
 			}
 

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

@@ -41,6 +41,9 @@ const listElement = ref<Element | null>(null);
 const shouldAutoScroll = ref(true);
 const observer = ref<IntersectionObserver | null>(null);
 
+const getActions = (index: number) =>
+	index === 0 ? props.actions.filter((action) => action.value !== 'restore') : props.actions;
+
 const observeElement = (element: Element) => {
 	observer.value = new IntersectionObserver(
 		([entry]) => {
@@ -109,7 +112,7 @@ const onItemMounted = ({
 			:index="index"
 			:item="item"
 			:isActive="item.versionId === props.activeItem?.versionId"
-			:actions="props.actions"
+			:actions="getActions(index)"
 			@action="onAction"
 			@preview="onPreview"
 			@mounted="onItemMounted"