mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-09-19 22:37:31 -07:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(editor): Stop unsaved changes popup display when navigating away from an untouched workflow (#5259)

Browse source 
* fix(editor): Stop unsaved changes popup showing up after loading a workflow

* fix(editor): Fix unsaved change confirmation display
This commit is contained in:
Csaba Tuncsik 2023-02-01 16:50:35 +01:00 committed by GitHub
parent 87ceb6f4b8
commit 6a93aed3a2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 81 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
View file

@ -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;

12
packages/editor-ui/src/stores/workflows.ts
View file

@ -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;
}

19
packages/editor-ui/src/utils/canvasUtils.ts
View file

@ -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;
};

122
packages/editor-ui/src/views/NodeView.vue
View file

@ -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) {