feat(editor): Display archived tag on WorkflowHistory (no-changelog) (#15220)

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');
+	});
 });

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">
+		<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') }}