mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-11 21:07:28 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Enable ctrl/cmd click in workflow editor header (#8387)

Browse source
This commit is contained in:
Tomi Turtiainen 2024-01-19 14:28:44 +02:00 committed by GitHub
parent 284d965b5a
commit e43cf2fd71
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 59 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
View file

@ -10,7 +10,7 @@
:active="modelValue === option.value" :active="modelValue === option.value"
:size="size" :size="size"
:disabled="disabled || option.disabled" :disabled="disabled || option.disabled"
@click.prevent.stop="onClick(option)" @click.prevent.stop="onClick(option, $event)"
/> />
</div> </div>
</template> </template>
@ -47,12 +47,13 @@ export default defineComponent({
type: Boolean, type: Boolean,
}, },
}, },
emits: ['update:modelValue'],
methods: { methods: {
onClick(option: { label: string; value: string; disabled?: boolean }) { onClick(option: { label: string; value: string; disabled?: boolean }, event: MouseEvent) {
if (this.disabled || option.disabled) { if (this.disabled || option.disabled) {
return; return;
} }
this.$emit('update:modelValue', option.value); this.$emit('update:modelValue', option.value, event);
}, },
}, },
}); });

89
packages/editor-ui/src/components/MainHeader/MainHeader.vue
View file

@ -16,7 +16,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import type { Route } from 'vue-router'; import type { Route, RouteLocationRaw } from 'vue-router';
import { mapStores } from 'pinia'; import { mapStores } from 'pinia';
import type { IExecutionsSummary } from 'n8n-workflow'; import type { IExecutionsSummary } from 'n8n-workflow';
import { pushConnection } from '@/mixins/pushConnection'; import { pushConnection } from '@/mixins/pushConnection';
@ -118,48 +118,69 @@ export default defineComponent({
this.workflowToReturnTo = workflowName; this.workflowToReturnTo = workflowName;
} }
}, },
onTabSelected(tab: string, event: MouseEvent) { onTabSelected(tab: MAIN_HEADER_TABS, event: MouseEvent) {
const openInNewTab = event.ctrlKey || event.metaKey;
switch (tab) { switch (tab) {
case MAIN_HEADER_TABS.WORKFLOW: case MAIN_HEADER_TABS.WORKFLOW:
if (!['', 'new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(this.workflowToReturnTo)) { void this.navigateToWorkflowView(openInNewTab);
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;
break; break;
case MAIN_HEADER_TABS.EXECUTIONS: case MAIN_HEADER_TABS.EXECUTIONS:
this.dirtyState = this.uiStore.stateIsDirty; void this.navigateToExecutionsView(openInNewTab);
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;
break; break;
default: default:
break; 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> </script>