Skip to content

Commit

Permalink
fix(editor): Enable ctrl/cmd click in workflow editor header (#8387)
Browse files Browse the repository at this point in the history
  • Loading branch information
tomi authored and ivov committed Jan 22, 2024
1 parent 66e0810 commit 6aefab6
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 37 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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);
},
},
});
Expand Down
89 changes: 55 additions & 34 deletions packages/editor-ui/src/components/MainHeader/MainHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 6aefab6

Please sign in to comment.