From d57a180552a209971d446f7d94b82dfa6bcd5439 Mon Sep 17 00:00:00 2001
From: Jaakko Husso <jaakko@n8n.io>
Date: Thu, 8 May 2025 21:34:28 +0300
Subject: [PATCH] feat(editor): Display archived tag on WorkflowHistory
 (no-changelog) (#15220)

---
 .../src/views/WorkflowHistory.test.ts         | 33 +++++++++++++++++++
 .../editor-ui/src/views/WorkflowHistory.vue   | 13 ++++++--
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/editor-ui/src/views/WorkflowHistory.test.ts b/packages/frontend/editor-ui/src/views/WorkflowHistory.test.ts
index e101066982..17a0f23704 100644
--- a/packages/frontend/editor-ui/src/views/WorkflowHistory.test.ts
+++ b/packages/frontend/editor-ui/src/views/WorkflowHistory.test.ts
@@ -1,4 +1,5 @@
 import type { MockInstance } from 'vitest';
+import { flushPromises } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
 import { waitFor, within } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
@@ -229,4 +230,36 @@ describe('WorkflowHistory', () => {
 			});
 		});
 	});
+
+	it('should display archived tag on header if workflow is archived', async () => {
+		vi.spyOn(workflowsStore, 'fetchWorkflow').mockResolvedValue({
+			id: workflowId,
+			name: 'Test Workflow',
+			isArchived: true,
+		} as IWorkflowDb);
+
+		route.params.workflowId = workflowId;
+
+		const { container, getByTestId } = renderComponent({ pinia });
+		await flushPromises();
+
+		expect(getByTestId('workflow-archived-tag')).toBeInTheDocument();
+		expect(container.textContent).toContain('Test Workflow');
+	});
+
+	it('should not display archived tag on header if workflow is not archived', async () => {
+		vi.spyOn(workflowsStore, 'fetchWorkflow').mockResolvedValue({
+			id: workflowId,
+			name: 'Test Workflow',
+			isArchived: false,
+		} as IWorkflowDb);
+
+		route.params.workflowId = workflowId;
+
+		const { queryByTestId, container } = renderComponent({ pinia });
+		await flushPromises();
+
+		expect(queryByTestId('workflow-archived-tag')).not.toBeInTheDocument();
+		expect(container.textContent).toContain('Test Workflow');
+	});
 });
diff --git a/packages/frontend/editor-ui/src/views/WorkflowHistory.vue b/packages/frontend/editor-ui/src/views/WorkflowHistory.vue
index 792f6b9ef5..01a58a8184 100644
--- a/packages/frontend/editor-ui/src/views/WorkflowHistory.vue
+++ b/packages/frontend/editor-ui/src/views/WorkflowHistory.vue
@@ -329,9 +329,16 @@ watchEffect(async () => {
 </script>
 <template>
 	<div :class="$style.view">
-		<n8n-heading :class="$style.header" tag="h2" size="medium">
-			{{ activeWorkflow?.name }}
-		</n8n-heading>
+		<div :class="$style.header">
+			<n8n-heading tag="h2" size="medium">
+				{{ activeWorkflow?.name }}
+			</n8n-heading>
+			<span v-if="activeWorkflow?.isArchived">
+				<N8nBadge class="ml-s" theme="tertiary" bold data-test-id="workflow-archived-tag">
+					{{ i18n.baseText('workflows.item.archived') }}
+				</N8nBadge>
+			</span>
+		</div>
 		<div :class="$style.corner">
 			<n8n-heading tag="h2" size="medium" bold>
 				{{ i18n.baseText('workflowHistory.title') }}