fix(editor): Handling router errors when navigation is canceled by user (#5271)

* 🔨 Handling router errors in main sidebar, removing unused code
* 🔨 Handling router errors in modals
This commit is contained in:
Milorad FIlipović 2023-01-30 09:32:04 +01:00 committed by GitHub
parent 731ce96621
commit 911d656f99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 63 deletions

View file

@ -104,15 +104,7 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
import { workflowRun } from '@/mixins/workflowRun';
import mixins from 'vue-typed-mixins';
import {
MODAL_CANCEL,
MODAL_CLOSE,
MODAL_CONFIRMED,
ABOUT_MODAL_KEY,
VERSIONS_MODAL_KEY,
VIEWS,
PLACEHOLDER_EMPTY_WORKFLOW_ID,
} from '@/constants';
import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
import { userHelpers } from '@/mixins/userHelpers';
import { debounceHelper } from '@/mixins/debounce';
import Vue from 'vue';
@ -123,6 +115,7 @@ import { useUsersStore } from '@/stores/users';
import { useWorkflowsStore } from '@/stores/workflows';
import { useRootStore } from '@/stores/n8nRootStore';
import { useVersionsStore } from '@/stores/versions';
import { isNavigationFailure, NavigationFailureType, Route } from 'vue-router';
export default mixins(
genericHelpers,
@ -371,25 +364,25 @@ export default mixins(
switch (key) {
case 'workflows': {
if (this.$router.currentRoute.name !== VIEWS.WORKFLOWS) {
this.$router.push({ name: VIEWS.WORKFLOWS });
this.goToRoute({ name: VIEWS.WORKFLOWS });
}
break;
}
case 'templates': {
if (this.$router.currentRoute.name !== VIEWS.TEMPLATES) {
this.$router.push({ name: VIEWS.TEMPLATES });
this.goToRoute({ name: VIEWS.TEMPLATES });
}
break;
}
case 'credentials': {
if (this.$router.currentRoute.name !== VIEWS.CREDENTIALS) {
this.$router.push({ name: VIEWS.CREDENTIALS });
this.goToRoute({ name: VIEWS.CREDENTIALS });
}
break;
}
case 'executions': {
if (this.$router.currentRoute.name !== VIEWS.EXECUTIONS) {
this.$router.push({ name: VIEWS.EXECUTIONS });
this.goToRoute({ name: VIEWS.EXECUTIONS });
}
break;
}
@ -398,7 +391,7 @@ export default mixins(
if (defaultRoute) {
const routeProps = this.$router.resolve({ name: defaultRoute });
if (this.$router.currentRoute.name !== defaultRoute) {
this.$router.push(routeProps.route.path);
this.goToRoute(routeProps.route.path);
}
}
break;
@ -419,55 +412,13 @@ export default mixins(
break;
}
},
async createNewWorkflow(): Promise<void> {
const result = this.uiStore.stateIsDirty;
if (result) {
const confirmModal = await this.confirmModal(
this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
'warning',
this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
true,
);
if (confirmModal === MODAL_CONFIRMED) {
const saved = await this.saveCurrentWorkflow({}, false);
if (saved) await this.settingsStore.fetchPromptsData();
if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
this.$root.$emit('newWorkflow');
} else {
this.$router.push({ name: VIEWS.NEW_WORKFLOW });
}
this.$showMessage({
title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
type: 'success',
});
} else if (confirmModal === MODAL_CANCEL) {
this.uiStore.stateIsDirty = false;
if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
this.$root.$emit('newWorkflow');
} else {
this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
this.$router.push({ name: VIEWS.NEW_WORKFLOW });
}
this.$showMessage({
title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
type: 'success',
});
} else if (confirmModal === MODAL_CLOSE) {
return;
goToRoute(route: string | { name: string }) {
this.$router.push(route).catch((failure) => {
// Catch navigation failures caused by route guards
if (!isNavigationFailure(failure)) {
console.error(failure);
}
} else {
if (this.$router.currentRoute.name !== VIEWS.NEW_WORKFLOW) {
this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
this.$router.push({ name: VIEWS.NEW_WORKFLOW });
}
this.$showMessage({
title: this.$locale.baseText('mainSidebar.showMessage.handleSelect3.title'),
type: 'success',
});
}
this.$titleReset();
});
},
findFirstAccessibleSettingsRoute() {
// Get all settings rotes by filtering them by pageCategory property

View file

@ -155,6 +155,7 @@ import { useWorkflowsEEStore } from '@/stores/workflows.ee';
import { ITelemetryTrackProperties } from 'n8n-workflow';
import { useUsageStore } from '@/stores/usage';
import { BaseTextKey } from '@/plugins/i18n';
import { isNavigationFailure } from 'vue-router';
export default mixins(showMessage).extend({
name: 'workflow-share-modal',
@ -427,7 +428,11 @@ export default mixins(showMessage).extend({
await this.usersStore.fetchUsers();
},
goToUsersSettings() {
this.$router.push({ name: VIEWS.USERS_SETTINGS });
this.$router.push({ name: VIEWS.USERS_SETTINGS }).catch((failure) => {
if (!isNavigationFailure(failure)) {
console.error(failure);
}
});
this.modalBus.$emit('close');
},
trackTelemetry(data: ITelemetryTrackProperties) {