fix(editor): Add workflows to the store when fetching current page (n8n-io#13583)

Author: MiloradFilipovic

cypress/e2e/1-workflows.cy.ts

@@ -1,9 +1,11 @@
+import { WorkflowSharingModal } from '../pages';
 import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
 import { WorkflowsPage as WorkflowsPageClass } from '../pages/workflows';
 import { getUniqueWorkflowName } from '../utils/workflowUtils';
 
 const WorkflowsPage = new WorkflowsPageClass();
 const WorkflowPage = new WorkflowPageClass();
+const workflowSharingModal = new WorkflowSharingModal();
 
 const multipleWorkflowsCount = 5;
 
@@ -138,4 +140,10 @@ describe('Workflows', () => {
 		cy.url().should('include', 'sort=lastCreated');
 		cy.url().should('include', 'pageSize=25');
 	});
+
+	it('should be able to share workflows from workflows list', () => {
+		WorkflowsPage.getters.workflowCardActions('Empty State Card Workflow').click();
+		WorkflowsPage.getters.workflowActionItem('share').click();
+		workflowSharingModal.getters.modal().should('be.visible');
+	});
 });

cypress/pages/workflows.ts

@@ -35,6 +35,7 @@ export class WorkflowsPage extends BasePage {
 			this.getters.workflowActivator(workflowName).findChildByTestId('workflow-activator-status'),
 		workflowCardActions: (workflowName: string) =>
 			this.getters.workflowCard(workflowName).findChildByTestId('workflow-card-actions'),
+		workflowActionItem: (action: string) => cy.getByTestId(`action-${action}`).filter(':visible'),
 		workflowDeleteButton: () =>
 			cy.getByTestId('action-toggle-dropdown').filter(':visible').contains('Delete'),
 		workflowMoveButton: () =>

packages/editor-ui/src/stores/workflows.store.ts

@@ -517,6 +517,19 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		);
 
 		totalWorkflowCount.value = count;
+		// Also set fetched workflows to store
+		// When fetching workflows from overview page, they don't have resource property
+		// so in order to filter out folders, we need to check if resource is not folder
+		data
+			.filter((item) => item.resource !== 'folder')
+			.forEach((item) => {
+				addWorkflow({
+					...item,
+					nodes: [],
+					connections: {},
+					versionId: '',
+				});
+			});
 		return data;
 	}