feat(editor): Workflow history [WIP]- Create workflow history item preview component (no-changelog)

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,7 @@ export default defineComponent({
 
 	&:hover {
 		background-color: var(--color-background-base);
-		color: initial !important;
+		color: var(--color-primary);
 	}
 }
 

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">

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;

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

@@ -1,14 +1,110 @@
 <script setup lang="ts">
-import type { WorkflowVersion } from '@/types/workflowHistory';
+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';
+import { useI18n } from '@/composables';
+
+const i18n = useI18n();
 
 const props = defineProps<{
+	workflow: IWorkflowDb | null;
 	workflowVersion: WorkflowVersion | null;
+	actions: UserAction[];
+	isListLoading?: boolean;
+}>();
+
+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">
-		{{ props.workflowVersion }}
+		<WorkflowPreview
+			v-if="props.workflowVersion"
+			:workflow="workflowVersionPreview"
+			: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" data-test-id="action-toggle-button">
+						{{ 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>
 
@@ -20,5 +116,63 @@ const props = defineProps<{
 	top: 0;
 	width: 100%;
 	height: 100%;
+	overflow: auto;
+}
+
+.info {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	width: 100%;
+}
+
+.card {
+	padding: var(--spacing-s) var(--spacing-l) 0 var(--spacing-xl);
+	border: 0;
+	align-items: start;
+
+	.text {
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 auto;
+
+		p {
+			display: flex;
+			align-items: center;
+			padding: 0;
+			cursor: default;
+
+			&:first-child {
+				padding-top: var(--spacing-3xs);
+				padding-bottom: var(--spacing-3xs);
+				* {
+					font-size: var(--font-size-m);
+				}
+			}
+
+			&:last-child {
+				padding-top: var(--spacing-3xs);
+
+				* {
+					font-size: var(--font-size-2xs);
+				}
+			}
+
+			.label {
+				padding-right: var(--spacing-4xs);
+			}
+
+			* {
+				max-width: unset;
+				justify-self: unset;
+				white-space: unset;
+				overflow: hidden;
+				text-overflow: unset;
+				padding: 0;
+				font-size: var(--font-size-s);
+			}
+		}
+	}
 }
 </style>

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;
@@ -41,14 +41,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]) => {
@@ -116,8 +108,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"

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 } });
@@ -99,14 +99,19 @@ onMounted(() => {
 			[$style.actionsVisible]: actionsVisible,
 		}"
 	>
-		<p @click="onItemClick">
-			<time :datetime="item.createdAt">{{ formattedCreatedAt }}</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>
+		<slot :formattedCreatedAt="formattedCreatedAt">
+			<p @click="onItemClick">
+				<time :datetime="item.createdAt">{{ formattedCreatedAt }}</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>
+		</slot>
 		<div :class="$style.tail">
 			<n8n-badge v-if="props.index === 0">
 				{{ i18n.baseText('workflowHistory.item.latest') }}
@@ -115,10 +120,13 @@ 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>
@@ -136,11 +144,11 @@ onMounted(() => {
 	p {
 		display: grid;
 		padding: var(--spacing-s);
-		line-height: unset;
 		cursor: pointer;
+		flex: 1 1 auto;
 
 		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);
@@ -153,7 +161,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);
 		}
 	}