fix(editor): Add a hint for showing archived workflows when there are no active ones (#18120)

packages/frontend/@n8n/i18n/src/locales/en.json

@@ -2738,6 +2738,8 @@
 	"workflows.readyToRunWorkflows.cta": "Run a workflow",
 	"workflows.readyToRunWorkflows.folder.name": "🚀 Ready-to-run workflows",
 	"workflows.readyToRunWorkflows.error": "Error loading n8n collection. Please try again later.",
+	"workflows.archivedOnly.hint": "Archived workflows are hidden in this view. {link}",
+	"workflows.archivedOnly.hint.link": "Update filters",
 	"workflowSelectorParameterInput.createNewSubworkflow.name": "My Sub-Workflow",
 	"importCurlModal.title": "Import cURL command",
 	"importCurlModal.input.label": "cURL Command",

packages/frontend/editor-ui/src/stores/folders.store.ts

@@ -100,7 +100,7 @@ export const useFoldersStore = defineStore(STORES.FOLDERS, () => {
 	async function fetchTotalWorkflowsAndFoldersCount(projectId?: string): Promise<number> {
 		const { count } = await workflowsApi.getWorkflowsAndFolders(
 			rootStore.restApiContext,
-			{ projectId, isArchived: false },
+			{ projectId },
 			{ skip: 0, take: 1 },
 			true,
 		);
@@ -292,13 +292,13 @@ export const useFoldersStore = defineStore(STORES.FOLDERS, () => {
 
 					// Add all descendants of this child
 					if (child.children?.length) {
-						childResult.push(...processFolderWithChildren(child).slice(1));
+						childResult.push.apply(childResult, processFolderWithChildren(child).slice(1));
 					}
 
 					return childResult;
 				});
 
-				result.push(...childItems);
+				result.push.apply(result, childItems);
 			}
 			return result;
 		};

packages/frontend/editor-ui/src/views/WorkflowsView.test.ts

@@ -397,6 +397,19 @@ describe('WorkflowsView', () => {
 			await waitAllPromises();
 			await waitFor(() => expect(router.currentRoute.value.query).toStrictEqual({}));
 		});
+
+		it('should show archived only hint', async () => {
+			foldersStore.totalWorkflowCount = 1;
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
+			const { getByTestId } = renderComponent({ pinia });
+			await waitAllPromises();
+
+			const showArchivedLink = getByTestId('show-archived-link');
+			expect(showArchivedLink).toBeInTheDocument();
+
+			await userEvent.click(showArchivedLink);
+			expect(router.currentRoute.value.query).toStrictEqual({ showArchived: 'true' });
+		});
 	});
 
 	describe('source control', () => {

packages/frontend/editor-ui/src/views/WorkflowsView.vue

@@ -381,6 +381,17 @@ const hasFilters = computed(() => {
 	);
 });
 
+// When there are no visible results but the project contains archived workflows,
+// inform the user how to reveal them
+const showArchivedOnlyHint = computed(() => {
+	return (
+		workflowsAndFolders.value.length === 0 &&
+		!hasFilters.value &&
+		!filters.value.showArchived &&
+		foldersStore.totalWorkflowCount > 0
+	);
+});
+
 const isSelfHostedDeployment = computed(() => settingsStore.deploymentType === 'default');
 
 const canUserRegisterCommunityPlus = computed(
@@ -916,6 +927,11 @@ const dismissStarterCollectionCallout = () => {
 	aiStarterTemplatesStore.trackUserDismissedCallout();
 };
 
+const onShowArchived = async () => {
+	filters.value.showArchived = true;
+	await onFiltersUpdated();
+};
+
 const dismissEasyAICallout = () => {
 	easyAICalloutVisible.value = false;
 };
@@ -2130,6 +2146,12 @@ const onNameSubmit = async (name: string) => {
 				:class="$style['empty-folder-container']"
 				data-test-id="empty-folder-container"
 			>
+				<N8nInfoTip v-if="showArchivedOnlyHint" :bold="false">
+					{{ i18n.baseText('workflows.archivedOnly.hint') }}
+					<N8nLink size="small" data-test-id="show-archived-link" @click="onShowArchived">
+						{{ i18n.baseText('workflows.archivedOnly.hint.link') }}
+					</N8nLink>
+				</N8nInfoTip>
 				<EmptySharedSectionActionBox
 					v-if="projectPages.isSharedSubPage && personalProject"
 					:personal-project="personalProject"