x on edge should work, no self connecting node and * on unsaved files

Author: jsajal

src/components/atoms/Tabs.js

@@ -5,6 +5,16 @@ import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
 import { isEqual } from 'lodash';
 import { OBJ_TYPES } from 'constants/Common';
 
+const tabUnsavedChanges = (tab) => {
+  if (tab.type === OBJ_TYPES.flowtest && tab.flowDataDraft && !isEqual(tab.flowData, tab.flowDataDraft)) {
+    return true;
+  } else if (tab.type === OBJ_TYPES.environment && tab.variablesDraft && !isEqual(tab.variables, tab.variablesDraft)) {
+    return true;
+  } else {
+    false;
+  }
+};
+
 const Tabs = () => {
   const tabs = useTabStore((state) => state.tabs);
   const setFocusTab = useTabStore((state) => state.setFocusTab);
@@ -28,18 +38,10 @@ const Tabs = () => {
     setClosingTabId(tab.id);
     setClosingCollectionId(tab.collectionId);
 
-    if (tab.type === OBJ_TYPES.flowtest) {
-      if (tab.flowDataDraft && !isEqual(tab.flowData, tab.flowDataDraft)) {
-        console.debug(`Confirm close for tabId: ${tab.id} : collectionId: ${tab.collectionId}`);
-        setConfirmActionModalOpen(true);
-        return;
-      }
-    } else if (tab.type === OBJ_TYPES.environment) {
-      if (tab.variablesDraft && !isEqual(tab.variables, tab.variablesDraft)) {
-        console.debug(`Confirm close for tabId: ${tab.id} : collectionId: ${tab.collectionId}`);
-        setConfirmActionModalOpen(true);
-        return;
-      }
+    if (tabUnsavedChanges(tab)) {
+      console.debug(`Confirm close for tabId: ${tab.id} : collectionId: ${tab.collectionId}`);
+      setConfirmActionModalOpen(true);
+      return;
     }
     closeTab(tab.id, tab.collectionId);
   };
@@ -63,7 +65,10 @@ const Tabs = () => {
               data-id={tab.id}
               data-collection-id={tab.collectionId}
             >
-              <a className='text-nowrap'>{tab.name}</a>
+              <a className='text-nowrap'>
+                {tabUnsavedChanges(tab) ? '*' : ''}
+                {tab.name}
+              </a>
               {/* close needs to be a separate clickable component other wise it gets confused with above */}
               <div
                 className='flex items-center h-full px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'

src/components/molecules/flow/edges/ButtonEdge.js

@@ -1,13 +1,9 @@
 import React from 'react';
 import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath } from 'reactflow';
+import useCanvasStore from 'stores/CanvasStore';
 
 import './buttonedge.css';
 
-const onEdgeClick = (evt, id) => {
-  evt.stopPropagation();
-  alert(`remove ${id}`);
-};
-
 // eslint-disable-next-line react/prop-types
 export default function CustomEdge({
   id,
@@ -20,6 +16,8 @@ export default function CustomEdge({
   style = {},
   markerEnd,
 }) {
+  const setEdges = useCanvasStore((state) => state.setEdges);
+
   const [edgePath, labelX, labelY] = getSmoothStepPath({
     sourceX,
     sourceY,
@@ -44,7 +42,14 @@ export default function CustomEdge({
           }}
           className='nodrag nopan'
         >
-          <button className='edgebutton' onClick={(event) => onEdgeClick(event, id)}>
+          <button
+            className='edgebutton'
+            onClick={(evt) => {
+              evt.stopPropagation();
+              // alert(`remove ${id}`);
+              setEdges(useCanvasStore.getState().edges.filter((e) => e.id !== id));
+            }}
+          >
             ×
           </button>
         </div>

src/components/molecules/flow/index.js

@@ -177,26 +177,34 @@ const Flow = ({ collectionId }) => {
   );
 
   const isValidConnection = (connection) => {
-    let canConnect = true;
     // Only 1 outgoing edge from each (source, sourceHandle) is allowed
     // as we only support sequential graphs for now
     reactFlowInstance.getEdges().map((edge) => {
       if (connection.source === edge.source && connection.sourceHandle === edge.sourceHandle) {
-        canConnect = false;
+        return false;
       }
     });
 
-    // multiple incoming edges are only allowed for request nodes
     const nodes = reactFlowInstance.getNodes();
+
+    // self connecting edge not allowed
+    const sourceNode = nodes.find((node) => node.id === connection.source).id;
+    const targetNode = nodes.find((node) => node.id === connection.target).id;
+    if (sourceNode === targetNode) {
+      return false;
+    }
+
+    // multiple incoming edges are only allowed for request nodes
     const nodeType = nodes.find((node) => node.id === connection.target).type;
     if (nodeType != 'requestNode') {
       reactFlowInstance.getEdges().map((edge) => {
         if (connection.target === edge.target) {
-          canConnect = false;
+          return false;
         }
       });
     }
-    return canConnect;
+
+    return true;
   };
 
   const onGraphComplete = (result, logs) => {

src/stores/TabStore.js

@@ -50,7 +50,7 @@ export const useTabStore = create((set, get) => ({
       const existingTab = get().tabs.find((t) => t.id === get().focusTabId);
       if (existingTab) {
         if (!existingTab.flowDataDraft) {
-          existingTab.flowDataDraft = cloneDeep(existingTab.flowData);
+          existingTab.flowDataDraft = existingTab.flowData ? cloneDeep(existingTab.flowData) : {};
         }
         existingTab.flowDataDraft.edges = edges;
       }