save and close functionality for tabs

Author: jsajal

src/components/atoms/Tabs.js

@@ -5,6 +5,7 @@ import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
 import { isEqual } from 'lodash';
 import { OBJ_TYPES } from 'constants/Common';
 import { compare } from './util';
+import { saveHandle } from 'components/molecules/modals/SaveFlowModal';
 
 const tabUnsavedChanges = (tab) => {
   if (tab.type === OBJ_TYPES.flowtest && tab.flowDataDraft) {
@@ -36,7 +37,7 @@ const Tabs = () => {
   const focusTab = tabs.find((t) => t.id === focusTabId);
   const [confirmActionModalOpen, setConfirmActionModalOpen] = useState(false);
   const closeTab = useTabStore((state) => state.closeTab);
-  const [closingTabId, setClosingTabId] = useState('');
+  const [closingTab, setClosingTab] = useState('');
   const [closingCollectionId, setClosingCollectionId] = useState('');
   // ToDo: change color according to theme
   const activeTabStyles = 'bg-cyan-900 text-white';
@@ -48,7 +49,7 @@ const Tabs = () => {
     event.stopPropagation();
     event.preventDefault();
 
-    setClosingTabId(tab.id);
+    setClosingTab(tab);
     setClosingCollectionId(tab.collectionId);
 
     if (tabUnsavedChanges(tab)) {
@@ -94,13 +95,19 @@ const Tabs = () => {
           );
         })}
       <ConfirmActionModal
-        closeFn={() => setConfirmActionModalOpen(false)}
+        closeFn={() => {
+          closeTab(closingTab.id, closingCollectionId);
+          setConfirmActionModalOpen(false);
+        }}
         open={confirmActionModalOpen}
         message={messageForConfirmActionModal}
         actionFn={() => {
-          closeTab(closingTabId, closingCollectionId);
+          saveHandle(closingTab);
+          closeTab(closingTab.id, closingCollectionId);
           setConfirmActionModalOpen(false);
         }}
+        leftButtonMessage={'Close Withuout Saving'}
+        rightButtonMessage={'Save And Close'}
       />
     </div>
   );

src/components/molecules/modals/ConfirmActionModal.js

@@ -4,7 +4,14 @@ import { Dialog, Transition } from '@headlessui/react';
 import Button from 'components/atoms/common/Button';
 import { BUTTON_TYPES, BUTTON_INTENT_TYPES } from 'constants/Common';
 
-const ConfirmActionModal = ({ message, actionFn = () => null, closeFn = () => null, open = false }) => {
+const ConfirmActionModal = ({
+  message,
+  actionFn = () => null,
+  closeFn = () => null,
+  open = false,
+  leftButtonMessage = 'Cancel',
+  rightButtonMessage = 'Continue',
+}) => {
   return (
     <Transition appear show={open} as={Fragment}>
       <Dialog as='div' className='relative z-10' onClose={closeFn}>
@@ -46,7 +53,7 @@ const ConfirmActionModal = ({ message, actionFn = () => null, closeFn = () => nu
                     onClickHandle={closeFn}
                     fullWidth={true}
                   >
-                    Cancel
+                    {leftButtonMessage}
                   </Button>
                   <Button
                     btnType={BUTTON_TYPES.secondary}
@@ -55,7 +62,7 @@ const ConfirmActionModal = ({ message, actionFn = () => null, closeFn = () => nu
                     fullWidth={true}
                     onClickHandle={actionFn}
                   >
-                    Continue
+                    {rightButtonMessage}
                   </Button>
                 </div>
               </Dialog.Panel>