fix(editor): Fix workflows list status filter (#13621)

Co-authored-by: Charlie Kolb <charlie@n8n.io>

cypress/e2e/1-workflows.cy.ts

@@ -64,14 +64,18 @@ describe('Workflows', () => {
 	it('should delete all the workflows', () => {
 		WorkflowsPage.getters.workflowCards().should('have.length', multipleWorkflowsCount + 1);
 
-		WorkflowsPage.getters.workflowCards().each(($el) => {
+		WorkflowsPage.getters.workflowCards().then(($cards) => {
-			const workflowName = $el.find('[data-test-id="workflow-card-name"]').text();
+			const workflowNames = $cards
+				.map((_, $el) => Cypress.$($el).find('[data-test-id="workflow-card-name"]').text())
+				.get();
 
+			workflowNames.forEach((workflowName) => {
 				WorkflowsPage.getters.workflowCardActions(workflowName).click();
 				WorkflowsPage.getters.workflowDeleteButton().click();
 
 				cy.get('button').contains('delete').click();
 			});
+		});
 
 		WorkflowsPage.getters.newWorkflowButtonCard().should('be.visible');
 	});

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

@@ -177,7 +177,7 @@ describe('WorkflowsView', () => {
 			);
 		});
 
-		it('should set status filter based on query parameters', async () => {
+		it('should set active status filter based on query parameters', async () => {
 			await router.replace({ query: { status: 'true' } });
 
 			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
@@ -197,6 +197,26 @@ describe('WorkflowsView', () => {
 			);
 		});
 
+		it('should set deactivated status filter based on query parameters', async () => {
+			await router.replace({ query: { status: 'false' } });
+
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
+
+			renderComponent({ pinia });
+			await waitAllPromises();
+
+			expect(workflowsStore.fetchWorkflowsPage).toHaveBeenCalledWith(
+				expect.any(String),
+				expect.any(Number),
+				expect.any(Number),
+				expect.any(String),
+				expect.objectContaining({
+					active: false,
+				}),
+				expect.any(Boolean),
+			);
+		});
+
 		it('should reset filters', async () => {
 			await router.replace({ query: { status: 'true' } });
 

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

@@ -64,8 +64,8 @@ interface Filters extends BaseFilters {
 }
 
 const StatusFilter = {
-	ACTIVE: true,
+	ACTIVE: 'active',
-	DEACTIVATED: false,
+	DEACTIVATED: 'deactivated',
 	ALL: '',
 };
 
@@ -364,7 +364,10 @@ const fetchWorkflows = async () => {
 		currentSort.value,
 		{
 			name: filters.value.search || undefined,
-			active: filters.value.status ? Boolean(filters.value.status) : undefined,
+			active:
+				filters.value.status === StatusFilter.ALL
+					? undefined
+					: filters.value.status === StatusFilter.ACTIVE,
 			tags: filters.value.tags.map((tagId) => tagsStore.tagsById[tagId]?.name),
 			parentFolderId: parentFolder ?? '0', // 0 is the root folder in the API
 		},
@@ -453,8 +456,8 @@ const saveFiltersOnQueryString = () => {
 		delete currentQuery.search;
 	}
 
-	if (typeof filters.value.status !== 'string') {
+	if (filters.value.status !== StatusFilter.ALL) {
-		currentQuery.status = filters.value.status.toString();
+		currentQuery.status = (filters.value.status === StatusFilter.ACTIVE).toString();
 	} else {
 		delete currentQuery.status;
 	}
@@ -523,10 +526,10 @@ const setFiltersFromQueryString = async () => {
 	}
 
 	// Handle status
-	const validStatusValues = [StatusFilter.ACTIVE.toString(), StatusFilter.DEACTIVATED.toString()];
+	const validStatusValues = ['true', 'false'];
 	if (isValidString(status) && validStatusValues.includes(status)) {
 		newQuery.status = status;
-		filters.value.status = status === 'true';
+		filters.value.status = status === 'true' ? StatusFilter.ACTIVE : StatusFilter.DEACTIVATED;
 	} else {
 		delete newQuery.status;
 	}