mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 20:24:05 -08:00
fix(editor): Stop unsaved changes popup display when navigating away from an untouched workflow (#5259)
* fix(editor): Stop unsaved changes popup showing up after loading a workflow * fix(editor): Fix unsaved change confirmation display
This commit is contained in:
parent
87ceb6f4b8
commit
6a93aed3a2
|
@ -24,6 +24,7 @@
|
|||
<script lang="ts">
|
||||
import ExecutionsSidebar from '@/components/ExecutionsView/ExecutionsSidebar.vue';
|
||||
import {
|
||||
MAIN_HEADER_TABS,
|
||||
MODAL_CANCEL,
|
||||
MODAL_CLOSE,
|
||||
MODAL_CONFIRMED,
|
||||
|
@ -121,36 +122,34 @@ export default mixins(
|
|||
},
|
||||
},
|
||||
async beforeRouteLeave(to, from, next) {
|
||||
const nextTab = getNodeViewTab(to);
|
||||
// When leaving for a page that's not a workflow view tab, ask to save changes
|
||||
if (!nextTab) {
|
||||
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 (getNodeViewTab(to) === MAIN_HEADER_TABS.WORKFLOW) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
if (this.uiStore.stateIsDirty) {
|
||||
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) this.settingsStore.fetchPromptsData();
|
||||
this.uiStore.stateIsDirty = false;
|
||||
next();
|
||||
} else if (confirmModal === MODAL_CANCEL) {
|
||||
this.uiStore.stateIsDirty = false;
|
||||
next();
|
||||
} else if (confirmModal === MODAL_CLOSE) {
|
||||
next(false);
|
||||
if (confirmModal === MODAL_CONFIRMED) {
|
||||
const saved = await this.saveCurrentWorkflow({}, false);
|
||||
if (saved) {
|
||||
await this.settingsStore.fetchPromptsData();
|
||||
}
|
||||
} else {
|
||||
this.uiStore.stateIsDirty = false;
|
||||
next();
|
||||
} else if (confirmModal === MODAL_CANCEL) {
|
||||
this.uiStore.stateIsDirty = false;
|
||||
next();
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
next();
|
||||
},
|
||||
async mounted() {
|
||||
this.loading = true;
|
||||
|
|
|
@ -315,7 +315,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
|
|||
},
|
||||
|
||||
setWorkflowName(data: { newName: string; setStateDirty: boolean }): void {
|
||||
if (data.setStateDirty === true) {
|
||||
if (data.setStateDirty) {
|
||||
const uiStore = useUIStore();
|
||||
uiStore.stateIsDirty = true;
|
||||
}
|
||||
|
@ -532,16 +532,12 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
|
|||
dataPinningEventBus.$emit('unpin-data', { [payload.node.name]: undefined });
|
||||
},
|
||||
|
||||
addConnection(data: { connection: IConnection[]; setStateDirty: boolean }): void {
|
||||
addConnection(data: { connection: IConnection[] }): void {
|
||||
if (data.connection.length !== 2) {
|
||||
// All connections need two entries
|
||||
// TODO: Check if there is an error or whatever that is supposed to be returned
|
||||
return;
|
||||
}
|
||||
const uiStore = useUIStore();
|
||||
if (data.setStateDirty === true) {
|
||||
uiStore.stateIsDirty = true;
|
||||
}
|
||||
|
||||
const sourceData: IConnection = data.connection[0];
|
||||
const destinationData: IConnection = data.connection[1];
|
||||
|
@ -626,7 +622,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
|
|||
},
|
||||
|
||||
removeAllConnections(data: { setStateDirty: boolean }): void {
|
||||
if (data && data.setStateDirty === true) {
|
||||
if (data && data.setStateDirty) {
|
||||
const uiStore = useUIStore();
|
||||
uiStore.stateIsDirty = true;
|
||||
}
|
||||
|
@ -771,7 +767,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
|
|||
},
|
||||
|
||||
removeAllNodes(data: { setStateDirty: boolean; removePinData: boolean }): void {
|
||||
if (data.setStateDirty === true) {
|
||||
if (data.setStateDirty) {
|
||||
const uiStore = useUIStore();
|
||||
uiStore.stateIsDirty = true;
|
||||
}
|
||||
|
|
|
@ -76,19 +76,14 @@ export const closestNumberDivisibleBy = (inputNumber: number, divisibleBy: numbe
|
|||
};
|
||||
|
||||
export const getNodeViewTab = (route: Route): string | null => {
|
||||
const routeMeta = route.meta;
|
||||
if (routeMeta && routeMeta.nodeView === true) {
|
||||
if (route.meta?.nodeView) {
|
||||
return MAIN_HEADER_TABS.WORKFLOW;
|
||||
} else {
|
||||
const executionTabRoutes = [
|
||||
VIEWS.WORKFLOW_EXECUTIONS.toString(),
|
||||
VIEWS.EXECUTION_PREVIEW.toString(),
|
||||
VIEWS.EXECUTION_HOME.toString(),
|
||||
];
|
||||
|
||||
if (executionTabRoutes.includes(route.name || '')) {
|
||||
return MAIN_HEADER_TABS.EXECUTIONS;
|
||||
}
|
||||
} else if (
|
||||
[VIEWS.WORKFLOW_EXECUTIONS, VIEWS.EXECUTION_PREVIEW, VIEWS.EXECUTION_HOME]
|
||||
.map(String)
|
||||
.includes(String(route.name))
|
||||
) {
|
||||
return MAIN_HEADER_TABS.EXECUTIONS;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
|
|
@ -402,55 +402,45 @@ export default mixins(
|
|||
},
|
||||
},
|
||||
async beforeRouteLeave(to, from, next) {
|
||||
const nextTab = getNodeViewTab(to);
|
||||
// Only react if leaving workflow tab and going to a separate page
|
||||
if (!nextTab) {
|
||||
// Skip check if in the middle of template import
|
||||
if (from.name === VIEWS.TEMPLATE_IMPORT) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
// Make sure workflow id is empty when leaving the editor
|
||||
this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
|
||||
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();
|
||||
this.uiStore.stateIsDirty = false;
|
||||
|
||||
if (from.name === VIEWS.NEW_WORKFLOW) {
|
||||
// Replace the current route with the new workflow route
|
||||
// before navigating to the new route when saving new workflow.
|
||||
this.$router.replace(
|
||||
{ name: VIEWS.WORKFLOW, params: { name: this.currentWorkflow } },
|
||||
() => {
|
||||
// We can't use next() here since vue-router
|
||||
// would prevent the navigation with an error
|
||||
this.$router.push(to as RawLocation);
|
||||
},
|
||||
);
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
} else if (confirmModal === MODAL_CANCEL) {
|
||||
await this.resetWorkspace();
|
||||
this.uiStore.stateIsDirty = false;
|
||||
|
||||
next();
|
||||
} else if (confirmModal === MODAL_CLOSE) {
|
||||
next(false);
|
||||
if (getNodeViewTab(to) === MAIN_HEADER_TABS.EXECUTIONS || from.name === VIEWS.TEMPLATE_IMPORT) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
// Make sure workflow id is empty when leaving the editor
|
||||
this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
|
||||
if (this.uiStore.stateIsDirty) {
|
||||
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();
|
||||
}
|
||||
} else {
|
||||
this.uiStore.stateIsDirty = false;
|
||||
|
||||
if (from.name === VIEWS.NEW_WORKFLOW) {
|
||||
// Replace the current route with the new workflow route
|
||||
// before navigating to the new route when saving new workflow.
|
||||
this.$router.replace(
|
||||
{ name: VIEWS.WORKFLOW, params: { name: this.currentWorkflow } },
|
||||
() => {
|
||||
// We can't use next() here since vue-router
|
||||
// would prevent the navigation with an error
|
||||
this.$router.push(to as RawLocation);
|
||||
},
|
||||
);
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
} else if (confirmModal === MODAL_CANCEL) {
|
||||
await this.resetWorkspace();
|
||||
this.uiStore.stateIsDirty = false;
|
||||
next();
|
||||
}
|
||||
} else {
|
||||
|
@ -1979,8 +1969,9 @@ export default mixins(
|
|||
sourceNodeOutputIndex: number,
|
||||
targetNodeName: string,
|
||||
targetNodeOuputIndex: number,
|
||||
trackHistory = false,
|
||||
) {
|
||||
this.uiStore.stateIsDirty = true;
|
||||
|
||||
if (
|
||||
this.getConnection(
|
||||
sourceNodeName,
|
||||
|
@ -2039,17 +2030,11 @@ export default mixins(
|
|||
|
||||
const targetNodeName = lastSelectedConnection.__meta.targetNodeName;
|
||||
const targetOutputIndex = lastSelectedConnection.__meta.targetOutputIndex;
|
||||
this.connectTwoNodes(
|
||||
newNodeData.name,
|
||||
0,
|
||||
targetNodeName,
|
||||
targetOutputIndex,
|
||||
trackHistory,
|
||||
);
|
||||
this.connectTwoNodes(newNodeData.name, 0, targetNodeName, targetOutputIndex);
|
||||
}
|
||||
|
||||
// Connect active node to the newly created one
|
||||
this.connectTwoNodes(lastSelectedNode.name, outputIndex, newNodeData.name, 0, trackHistory);
|
||||
this.connectTwoNodes(lastSelectedNode.name, outputIndex, newNodeData.name, 0);
|
||||
}
|
||||
this.historyStore.stopRecordingUndo();
|
||||
},
|
||||
|
@ -2102,13 +2087,7 @@ export default mixins(
|
|||
const sourceNodeName = sourceNode.name;
|
||||
const outputIndex = connection.parameters.index;
|
||||
|
||||
this.connectTwoNodes(
|
||||
sourceNodeName,
|
||||
outputIndex,
|
||||
this.pullConnActiveNodeName,
|
||||
0,
|
||||
true,
|
||||
);
|
||||
this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0);
|
||||
this.pullConnActiveNodeName = null;
|
||||
}
|
||||
return;
|
||||
|
@ -2181,10 +2160,6 @@ export default mixins(
|
|||
},
|
||||
];
|
||||
|
||||
this.workflowsStore.addConnection({
|
||||
connection: connectionData,
|
||||
setStateDirty: true,
|
||||
});
|
||||
this.dropPrevented = true;
|
||||
if (!this.suspendRecordingDetachedConnections) {
|
||||
this.historyStore.pushCommandToUndo(new AddConnectionCommand(connectionData));
|
||||
|
@ -2331,7 +2306,7 @@ export default mixins(
|
|||
if (connectionInfo) {
|
||||
this.historyStore.pushCommandToUndo(new RemoveConnectionCommand(connectionInfo));
|
||||
}
|
||||
this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0, true);
|
||||
this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0);
|
||||
this.pullConnActiveNodeName = null;
|
||||
await this.$nextTick();
|
||||
this.historyStore.stopRecordingUndo();
|
||||
|
@ -2553,7 +2528,7 @@ export default mixins(
|
|||
window.addEventListener('beforeunload', (e) => {
|
||||
if (this.isDemo) {
|
||||
return;
|
||||
} else if (this.uiStore.stateIsDirty === true) {
|
||||
} else if (this.uiStore.stateIsDirty) {
|
||||
const confirmationMessage = this.$locale.baseText(
|
||||
'nodeView.itLooksLikeYouHaveBeenEditingSomething',
|
||||
);
|
||||
|
@ -2595,12 +2570,8 @@ export default mixins(
|
|||
uuids: uuid,
|
||||
detachable: !this.isReadOnly,
|
||||
});
|
||||
} else {
|
||||
const connectionProperties = { connection, setStateDirty: false };
|
||||
// When nodes get connected it gets saved automatically to the storage
|
||||
// so if we do not connect we have to save the connection manually
|
||||
this.workflowsStore.addConnection(connectionProperties);
|
||||
}
|
||||
this.workflowsStore.addConnection({ connection });
|
||||
|
||||
setTimeout(() => {
|
||||
this.addPinDataConnections(this.workflowsStore.pinData);
|
||||
|
@ -2984,7 +2955,6 @@ export default mixins(
|
|||
sourceNodeOutputIndex,
|
||||
targetNodeName,
|
||||
targetNodeOuputIndex,
|
||||
trackHistory,
|
||||
);
|
||||
|
||||
if (waitForNewConnection) {
|
||||
|
|
Loading…
Reference in a new issue