fix(editor): Respect tag querystring filter when listing workflows (#11029)

cypress/e2e/1-workflows.cy.ts

@@ -73,4 +73,28 @@ describe('Workflows', () => {
 
 		WorkflowsPage.getters.newWorkflowButtonCard().should('be.visible');
 	});
+
+	it('should respect tag querystring filter when listing workflows', () => {
+		WorkflowsPage.getters.newWorkflowButtonCard().click();
+
+		cy.createFixtureWorkflow('Test_workflow_2.json', getUniqueWorkflowName('My New Workflow'));
+
+		cy.visit(WorkflowsPage.url);
+
+		WorkflowsPage.getters.createWorkflowButton().click();
+
+		cy.createFixtureWorkflow('Test_workflow_1.json', 'Empty State Card Workflow');
+
+		cy.visit(WorkflowsPage.url);
+
+		WorkflowsPage.getters.workflowFilterButton().click();
+
+		WorkflowsPage.getters.workflowTagsDropdown().click();
+
+		WorkflowsPage.getters.workflowTagItem('some-tag-1').click();
+
+		cy.reload();
+
+		WorkflowsPage.getters.workflowCards().should('have.length', 1);
+	});
 });

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

@@ -22,6 +22,7 @@ describe('WorkflowsView', () => {
 	let projectsStore: ReturnType<typeof useProjectsStore>;
 
 	const routerReplaceMock = vi.fn();
+	const routerPushMock = vi.fn();
 
 	const renderComponent = createComponentRenderer(WorkflowsView, {
 		global: {
@@ -32,6 +33,7 @@ describe('WorkflowsView', () => {
 				},
 				$router: {
 					replace: routerReplaceMock,
+					push: routerPushMock,
 				},
 			},
 		},

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

@@ -26,6 +26,8 @@ interface Filters {
 	tags: string[];
 }
 
+type QueryFilters = Partial<Filters>;
+
 const StatusFilter = {
 	ACTIVE: true,
 	DEACTIVATED: false,
@@ -152,6 +154,9 @@ const WorkflowsView = defineComponent({
 	},
 	async mounted() {
 		this.documentTitle.set(this.$locale.baseText('workflows.heading'));
+
+		await this.tagsStore.fetchAll();
+
 		await this.setFiltersFromQueryString();
 
 		void this.usersStore.showPersonalizationSurvey();
@@ -263,10 +268,20 @@ const WorkflowsView = defineComponent({
 		isValidProjectId(projectId: string) {
 			return this.projectsStore.availableProjects.some((project) => project.id === projectId);
 		},
+		async removeInvalidQueryFiltersFromUrl(filtersToApply: QueryFilters) {
+			await this.$router.push({
+				query: {
+					...(filtersToApply.tags && { tags: filtersToApply.tags?.join(',') }),
+					...(filtersToApply.status && { status: filtersToApply.status?.toString() }),
+					...(filtersToApply.search && { search: filtersToApply.search }),
+					...(filtersToApply.homeProject && { homeProject: filtersToApply.homeProject }),
+				},
+			});
+		},
 		async setFiltersFromQueryString() {
 			const { tags, status, search, homeProject } = this.$route.query;
 
-			const filtersToApply: { [key: string]: string | string[] | boolean } = {};
+			const filtersToApply: QueryFilters = {};
 
 			if (homeProject && typeof homeProject === 'string') {
 				await this.projectsStore.getAvailableProjects();
@@ -295,6 +310,8 @@ const WorkflowsView = defineComponent({
 				filtersToApply.status = status === 'true';
 			}
 
+			await this.removeInvalidQueryFiltersFromUrl(filtersToApply);
+
 			if (Object.keys(filtersToApply).length) {
 				this.filters = {
 					...this.filters,