robust isSaveNeeded conditions for flow canvas

Author: jsajal

src/components/atoms/Tabs.js

@@ -4,29 +4,16 @@ import { useTabStore } from 'stores/TabStore';
 import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
 import { isEqual } from 'lodash';
 import { OBJ_TYPES } from 'constants/Common';
-import { compare } from './util';
+import { isSaveNeeded } from './util';
 import { saveHandle } from 'components/molecules/modals/SaveFlowModal';
 
 const tabUnsavedChanges = (tab) => {
   if (tab.type === OBJ_TYPES.flowtest && tab.flowDataDraft) {
-    const draftNodesSansOutput = tab.flowDataDraft.nodes.map((node) => {
-      if (node.type === 'outputNode' && node.data.output) {
-        const { ['output']: _, ...data } = node.data;
-        return {
-          ...node,
-          data,
-        };
-      }
-      return node;
-    });
-    if (!isEqual(tab.flowData.nodes, draftNodesSansOutput) || !isEqual(tab.flowData.edges, tab.flowDataDraft.edges)) {
-      console.log('Detected unsaved changes: ', compare(tab.flowData, tab.flowDataDraft));
-      return true;
-    }
+    return isSaveNeeded(tab.flowData, tab.flowDataDraft);
   } else if (tab.type === OBJ_TYPES.environment && tab.variablesDraft && !isEqual(tab.variables, tab.variablesDraft)) {
     return true;
   } else {
-    false;
+    return false;
   }
 };
 

src/components/atoms/util.js

@@ -63,3 +63,50 @@ export const compare = (a, b) => {
 
   return result;
 };
+
+export const isSaveNeeded = (flowData, flowDataDraft) => {
+  if (flowData.nodes.length != flowDataDraft.nodes.length) {
+    console.log('Detected unsaved changes: node count');
+    return true;
+  }
+
+  if (flowData.edges.length != flowDataDraft.edges.length) {
+    console.log('Detected unsaved changes: edges count');
+    return true;
+  }
+
+  const unwrapEdge = function ({ source, sourceHandle, target, targetHandle }) {
+    return { source, sourceHandle, target, targetHandle };
+  };
+
+  const edges = flowData.edges.map((e) => unwrapEdge(e));
+  const edgesDraft = flowDataDraft.edges.map((e) => unwrapEdge(e));
+
+  if (!isEqual(edges, edgesDraft)) {
+    console.log('Detected unsaved changes: ', compare(edges, edgesDraft));
+    return true;
+  }
+
+  const unwrapNode = function ({ id, type, data, position }) {
+    return { id, type, data, position };
+  };
+
+  const nodes = flowData.nodes.map((e) => unwrapNode(e));
+  const nodesDraft = flowDataDraft.nodes.map((node) => {
+    if (node.type === 'outputNode' && node.data.output) {
+      const { ['output']: _, ...data } = node.data;
+      return unwrapNode({
+        ...node,
+        data,
+      });
+    }
+    return unwrapNode(node);
+  });
+
+  if (!isEqual(nodes, nodesDraft)) {
+    console.log('Detected unsaved changes: ', compare(nodes, nodesDraft));
+    return true;
+  }
+
+  return false;
+};

src/service/collection.js

@@ -216,7 +216,6 @@ export const deleteEnvironmentFile = (name, collectionId) => {
 
 export const addOrUpdateDotEnvironmentFile = (collectionId, variables) => {
   const { ipcRenderer } = window;
-  console.log(variables);
 
   const collection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);