Skip to content

Commit

Permalink
fix(editor): Stop unsaved changes popup display when navigating away …
Browse files Browse the repository at this point in the history 
…from an untouched workflow (#5259)

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

* fix(editor): Fix unsaved change confirmation display
  • Loading branch information
@cstuncsik
cstuncsik authored Feb 1, 2023
1 parent 87ceb6f commit 6a93aed
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 119 deletions.
49 changes: 24 additions & 25 deletions packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
<script lang="ts">
import ExecutionsSidebar from '@/components/ExecutionsView/ExecutionsSidebar.vue';
import {
MAIN_HEADER_TABS,
MODAL_CANCEL,
MODAL_CLOSE,
MODAL_CONFIRMED,
Expand Down Expand Up @@ -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;
Expand Down
12 changes: 4 additions & 8 deletions packages/editor-ui/src/stores/workflows.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down
19 changes: 7 additions & 12 deletions packages/editor-ui/src/utils/canvasUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand Down
118 changes: 44 additions & 74 deletions packages/editor-ui/src/views/NodeView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
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();
}
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_CLOSE) {
next(false);
}
} else {
} else if (confirmModal === MODAL_CANCEL) {
await this.resetWorkspace();
this.uiStore.stateIsDirty = false;
next();
}
} else {
Expand Down Expand Up @@ -1979,8 +1969,9 @@ export default mixins(
sourceNodeOutputIndex: number,
targetNodeName: string,
targetNodeOuputIndex: number,
trackHistory = false,
) {
this.uiStore.stateIsDirty = true;
if (
this.getConnection(
sourceNodeName,
Expand Down Expand Up @@ -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();
},
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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',
);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -2984,7 +2955,6 @@ export default mixins(
sourceNodeOutputIndex,
targetNodeName,
targetNodeOuputIndex,
trackHistory,
);
if (waitForNewConnection) {
Expand Down

0 comments on commit 6a93aed

Please sign in to comment.