From e43cf2fd715e21fd4e454c9e6b6d874306472360 Mon Sep 17 00:00:00 2001
From: Tomi Turtiainen <10324676+tomi@users.noreply.github.com>
Date: Fri, 19 Jan 2024 14:28:44 +0200
Subject: [PATCH] fix(editor): Enable ctrl/cmd click in workflow editor header
 (#8387)

---
 .../N8nRadioButtons/RadioButtons.vue          |  7 +-
 .../src/components/MainHeader/MainHeader.vue  | 89 ++++++++++++-------
 2 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
index b4cdb732b5..83acba928e 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
@@ -10,7 +10,7 @@
 			:active="modelValue === option.value"
 			:size="size"
 			:disabled="disabled || option.disabled"
-			@click.prevent.stop="onClick(option)"
+			@click.prevent.stop="onClick(option, $event)"
 		/>
 	</div>
 </template>
@@ -47,12 +47,13 @@ export default defineComponent({
 			type: Boolean,
 		},
 	},
+	emits: ['update:modelValue'],
 	methods: {
-		onClick(option: { label: string; value: string; disabled?: boolean }) {
+		onClick(option: { label: string; value: string; disabled?: boolean }, event: MouseEvent) {
 			if (this.disabled || option.disabled) {
 				return;
 			}
-			this.$emit('update:modelValue', option.value);
+			this.$emit('update:modelValue', option.value, event);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index e4b171555b..f7cffe5f16 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import type { Route } from 'vue-router';
+import type { Route, RouteLocationRaw } from 'vue-router';
 import { mapStores } from 'pinia';
 import type { IExecutionsSummary } from 'n8n-workflow';
 import { pushConnection } from '@/mixins/pushConnection';
@@ -118,48 +118,69 @@ export default defineComponent({
 				this.workflowToReturnTo = workflowName;
 			}
 		},
-		onTabSelected(tab: string, event: MouseEvent) {
+		onTabSelected(tab: MAIN_HEADER_TABS, event: MouseEvent) {
+			const openInNewTab = event.ctrlKey || event.metaKey;
+
 			switch (tab) {
 				case MAIN_HEADER_TABS.WORKFLOW:
-					if (!['', 'new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(this.workflowToReturnTo)) {
-						if (this.$route.name !== VIEWS.WORKFLOW) {
-							void this.$router.push({
-								name: VIEWS.WORKFLOW,
-								params: { name: this.workflowToReturnTo },
-							});
-						}
-					} else {
-						if (this.$route.name !== VIEWS.NEW_WORKFLOW) {
-							void this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-							this.uiStore.stateIsDirty = this.dirtyState;
-						}
-					}
-					this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
+					void this.navigateToWorkflowView(openInNewTab);
 					break;
+
 				case MAIN_HEADER_TABS.EXECUTIONS:
-					this.dirtyState = this.uiStore.stateIsDirty;
-					this.workflowToReturnTo = this.currentWorkflow;
-					const routeWorkflowId =
-						this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID ? 'new' : this.currentWorkflow;
-					if (this.activeExecution) {
-						this.$router
-							.push({
-								name: VIEWS.EXECUTION_PREVIEW,
-								params: { name: routeWorkflowId, executionId: this.activeExecution.id },
-							})
-							.catch(() => {});
-					} else {
-						void this.$router.push({
-							name: VIEWS.EXECUTION_HOME,
-							params: { name: routeWorkflowId },
-						});
-					}
-					this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;
+					void this.navigateToExecutionsView(openInNewTab);
 					break;
+
 				default:
 					break;
 			}
 		},
+
+		async navigateToWorkflowView(openInNewTab: boolean) {
+			let routeToNavigateTo: RouteLocationRaw;
+			if (!['', 'new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(this.workflowToReturnTo)) {
+				routeToNavigateTo = {
+					name: VIEWS.WORKFLOW,
+					params: { name: this.workflowToReturnTo },
+				};
+			} else {
+				routeToNavigateTo = { name: VIEWS.NEW_WORKFLOW };
+			}
+
+			if (openInNewTab) {
+				const { href } = this.$router.resolve(routeToNavigateTo);
+				window.open(href, '_blank');
+			} else if (this.$route.name !== routeToNavigateTo.name) {
+				if (this.$route.name === VIEWS.NEW_WORKFLOW) {
+					this.uiStore.stateIsDirty = this.dirtyState;
+				}
+				this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
+				await this.$router.push(routeToNavigateTo);
+			}
+		},
+
+		async navigateToExecutionsView(openInNewTab: boolean) {
+			const routeWorkflowId =
+				this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID ? 'new' : this.currentWorkflow;
+			const routeToNavigateTo: RouteLocationRaw = this.activeExecution
+				? {
+						name: VIEWS.EXECUTION_PREVIEW,
+						params: { name: routeWorkflowId, executionId: this.activeExecution.id },
+				  }
+				: {
+						name: VIEWS.EXECUTION_HOME,
+						params: { name: routeWorkflowId },
+				  };
+
+			if (openInNewTab) {
+				const { href } = this.$router.resolve(routeToNavigateTo);
+				window.open(href, '_blank');
+			} else if (this.$route.name !== routeToNavigateTo.name) {
+				this.dirtyState = this.uiStore.stateIsDirty;
+				this.workflowToReturnTo = this.currentWorkflow;
+				this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;
+				await this.$router.push(routeToNavigateTo);
+			}
+		},
 	},
 });
 </script>