rely on flowdata draft for save

Author: jsajal

src/components/atoms/Tabs.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { useTabStore } from 'stores/TabStore';
 import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
+import { isEqual } from 'lodash';
 
 const Tabs = () => {
   const tabs = useTabStore((state) => state.tabs);
@@ -12,28 +13,31 @@ const Tabs = () => {
   const closeTab = useTabStore((state) => state.closeTab);
   const [closingTabId, setClosingTabId] = useState('');
   const [closingCollectionId, setClosingCollectionId] = useState('');
+
   const activeTabStyles =
     'before:absolute before:h-[0.25rem] before:w-full before:bg-slate-300 before:content-[""] before:bottom-0 before:left-0';
   const tabCommonStyles =
     'tab flex items-center gap-x-2 border-r border-neutral-300 bg-transparent pr-0 tracking-[0.15em] transition duration-500 ease-in text-sm';
   const messageForConfirmActionModal = 'You have unsaved changes in the flowtest, are you sure you want to close it?';
-  const handleCloseTab = (event) => {
+
+  const handleCloseTab = (event, tab) => {
     event.stopPropagation();
     event.preventDefault();
-    const tabId = event.currentTarget.dataset.tabId;
-    const { isDirty, collectionId } = tabs.find((tab) => {
-      if (tab.id === tabId) return tab;
-    });
-    setClosingTabId(tabId);
-    setClosingCollectionId(collectionId);
+    // const tabId = event.currentTarget.dataset.tabId;
+    // const { isDirty, collectionId } = tabs.find((tab) => {
+    //   if (tab.id === tabId) return tab;
+    // });
+    setClosingTabId(tab.id);
+    setClosingCollectionId(tab.collectionId);
 
-    if (isDirty) {
-      console.debug(`Confirm close for tabId: ${tabId} : collectionId: ${collectionId}`);
+    if (tab.flowDataDraft && !isEqual(tab.flowData, tab.flowDataDraft)) {
+      console.debug(`Confirm close for tabId: ${tab.id} : collectionId: ${tab.collectionId}`);
       setConfirmActionModalOpen(true);
       return;
     }
-    closeTab(tabId, collectionId);
+    closeTab(tab.id, tab.collectionId);
   };
+
   return (
     <div role='tablist' className='tabs tabs-lg'>
       {tabs
@@ -55,11 +59,11 @@ const Tabs = () => {
               <a>{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'
+                className='flex h-full items-center px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'
                 data-tab-id={tab.id}
-                onClick={handleCloseTab}
+                onClick={(e) => handleCloseTab(e, tab)}
               >
-                <XMarkIcon className='w-4 h-4' />
+                <XMarkIcon className='h-4 w-4' />
               </div>
             </div>
           );

src/components/molecules/modals/SaveFlowModal.js

@@ -15,7 +15,7 @@ const SaveFlowModal = ({ tab }) => {
   }
 
   function saveHandle() {
-    updateFlowTest(tab.pathname, tab.flowData, tab.collectionId)
+    updateFlowTest(tab.pathname, tab.flowDataDraft, tab.collectionId)
       .then((result) => {
         console.log(`Updated flowtest: path = ${tab.pathname}, collectionId = ${tab.collectionId}, result: ${result}`);
         toast.success(`Updated the flowtest: ${tab.pathname}`);

src/stores/CollectionStore.js

@@ -10,6 +10,7 @@ import {
 import { useEventStore } from './EventListenerStore.js';
 import { useTabStore } from './TabStore.js';
 import { OBJ_TYPES } from 'constants/Common.js';
+import { cloneDeep } from 'lodash';
 
 const useCollectionStore = create((set, get) => ({
   collections: [],
@@ -269,8 +270,9 @@ const useCollectionStore = create((set, get) => ({
 
             // check if there are any open tabs, if yes mark them saved
             const tab = useTabStore.getState().tabs.find((t) => t.id === item.id);
-            if (tab) {
-              tab.isDirty = false;
+            if (tab && tab.flowDataDraft) {
+              tab.flowData = cloneDeep(tab.flowDataDraft);
+              tab.flowDataDraft = null;
             }
           }
         }

src/stores/tabstore.test.js

@@ -42,7 +42,6 @@ describe('Tab store', () => {
     expect(tabs[0].type).toEqual('flowtest');
     expect(tabs[0].name).toEqual(flowtest.name);
     expect(tabs[0].pathname).toEqual(flowtest.pathname);
-    expect(tabs[0].isDirty).toEqual(false);
     expect(tabs[0].flowData).toEqual(undefined);
     expect(result.current.focusTabId).toEqual(flowtest.id);