fix(editor): Show workflow data in header when execution page is hard reloaded (#9529)

cypress/e2e/20-workflow-executions.cy.ts

@@ -133,6 +133,17 @@ describe('Current Workflow Executions', () => {
 		executionsTab.getters.executionListItems().first().should('be.visible');
 		executionsTab.getters.executionListItems().eq(14).should('not.be.visible');
 	});
+
+	it('should show workflow data in executions tab after hard reload', () => {
+		executionsTab.actions.switchToExecutionsTab();
+		checkMainHeaderELements();
+
+		cy.reload();
+		checkMainHeaderELements();
+
+		executionsTab.actions.switchToEditorTab();
+		checkMainHeaderELements();
+	});
 });
 
 const createMockExecutions = () => {
@@ -144,3 +155,10 @@ const createMockExecutions = () => {
 	executionsTab.actions.toggleNodeEnabled('Error');
 	executionsTab.actions.createManualExecutions(4);
 };
+
+const checkMainHeaderELements = () => {
+	workflowPage.getters.workflowNameInputContainer().should('be.visible');
+	workflowPage.getters.workflowTagsContainer().should('be.visible');
+	workflowPage.getters.workflowMenu().should('be.visible');
+	workflowPage.getters.saveButton().should('be.visible');
+};

cypress/fixtures/Test_workflow_4_executions_view.json

@@ -65,5 +65,19 @@
         ]
       ]
     }
+  },
+	"tags": [
+		{
+			"name": "some-tag-1",
+			"createdAt": "2022-11-10T13:43:34.001Z",
+			"updatedAt": "2022-11-10T13:43:34.001Z",
+			"id": "6"
+		},
+		{
+			"name": "some-tag-2",
+			"createdAt": "2022-11-10T13:43:39.778Z",
+			"updatedAt": "2022-11-10T13:43:39.778Z",
+			"id": "7"
 		}
+	]
 }

packages/editor-ui/src/components/MainHeader/MainHeader.vue

@@ -80,9 +80,6 @@ export default defineComponent({
 		workflow(): IWorkflowDb {
 			return this.workflowsStore.workflow;
 		},
-		workflowName(): string {
-			return this.workflowsStore.workflowName;
-		},
 		currentWorkflow(): string {
 			return this.$route.params.name || this.workflowsStore.workflowId;
 		},

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

@@ -3,7 +3,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import WorkflowExecutionsList from '@/components/executions/workflow/WorkflowExecutionsList.vue';
 import { useExecutionsStore } from '@/stores/executions.store';
 import { useI18n } from '@/composables/useI18n';
-import type { ExecutionFilterType, IWorkflowDb } from '@/Interface';
+import type { ExecutionFilterType, ITag, IWorkflowDb } from '@/Interface';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { NO_NETWORK_ERROR_CODE } from '@/utils/apiUtils';
@@ -14,9 +14,11 @@ import type { ExecutionSummary } from 'n8n-workflow';
 import { useDebounce } from '@/composables/useDebounce';
 import { storeToRefs } from 'pinia';
 import { useTelemetry } from '@/composables/useTelemetry';
+import { useTagsStore } from '@/stores/tags.store';
 
 const executionsStore = useExecutionsStore();
 const workflowsStore = useWorkflowsStore();
+const tagsStore = useTagsStore();
 const nodeTypesStore = useNodeTypesStore();
 const i18n = useI18n();
 const telemetry = useTelemetry();
@@ -115,14 +117,15 @@ async function initializeRoute() {
 }
 
 async function fetchWorkflow() {
-	let data: IWorkflowDb | undefined;
+	let data: IWorkflowDb | undefined = workflowsStore.workflowsById[workflowId.value];
+	if (!data) {
 		try {
-		// @TODO Retrieve from store if exists
 			data = await workflowsStore.fetchWorkflow(workflowId.value);
 		} catch (error) {
 			toast.showError(error, i18n.baseText('nodeView.showError.openWorkflow.title'));
 			return;
 		}
+	}
 
 	if (!data) {
 		throw new Error(
@@ -132,7 +135,11 @@ async function fetchWorkflow() {
 		);
 	}
 
+	const tags = (data.tags ?? []) as ITag[];
 	workflow.value = data;
+	workflowsStore.setWorkflowName({ newName: data.name, setStateDirty: false });
+	workflowsStore.setWorkflowTagIds(tags.map(({ id }) => id) ?? []);
+	tagsStore.upsertTags(tags);
 }
 
 async function onAutoRefreshToggle(value: boolean) {