[Feature] Prompt user to save requests before exiting app (#1317)

* Starting quit flow and focusing in draft
* Finishing app if there is no draft to save
* Automatically opening request after creation through event queue
* Fix remove events from queue using pathname to find item
* Removing updateNextAction
* Listening via predicate
* Confirm close dialog toggle moved to store
* Draft operations as tab actions
* Complete quit flow
* Fixing close app/window hooks
* Breaking the chain when dismissing dialog
* Displaying request name in ConfirmRequestClose modal
* Added disableEscapeKey and disableCloseOnOutsideClick props to Modal (passed in ConfirmRequestClose)
* Removing logs
* Refactor
* listenerMiddleware module
* ipc events listeners names
* Update next action
* Helpful comments
* Eventually handle events to close request even if is no draft
* Request name in bold

packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js

@@ -1,7 +1,7 @@
 import Modal from 'components/Modal';
 import React from 'react';
 
-const ConfirmRequestClose = ({ onCancel, onCloseWithoutSave, onSaveAndClose }) => {
+const ConfirmRequestClose = ({ item, onCancel, onCloseWithoutSave, onSaveAndClose }) => {
   const _handleCancel = ({ type }) => {
     if (type === 'button') {
       return onCloseWithoutSave();
@@ -22,7 +22,9 @@ const ConfirmRequestClose = ({ onCancel, onCloseWithoutSave, onSaveAndClose }) =
       disableCloseOnOutsideClick={true}
       closeModalFadeTimeout={150}
     >
-      <div className="font-normal">You have unsaved changes in your request.</div>
+      <div className="font-normal">
+        You have unsaved changes in request <span className="font-semibold">{item.name}</span>.
+      </div>
     </Modal>
   );
 };

packages/bruno-app/src/components/RequestTabs/RequestTab/index.js

@@ -1,22 +1,25 @@
-import React, { useState } from 'react';
 import get from 'lodash/get';
-import { closeTabs } from 'providers/ReduxStore/slices/tabs';
-import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { deleteRequestDraft } from 'providers/ReduxStore/slices/collections';
-import { useDispatch } from 'react-redux';
-import { findItemInCollection } from 'utils/collections';
-import StyledWrapper from './StyledWrapper';
-import RequestTabNotFound from './RequestTabNotFound';
-import ConfirmRequestClose from './ConfirmRequestClose';
-import SpecialTab from './SpecialTab';
+import {
+  cancelCloseDraft,
+  closeAndSaveDraft,
+  closeTabs,
+  closeWithoutSavingDraft,
+  setShowConfirmClose
+} from 'providers/ReduxStore/slices/tabs';
 import { useTheme } from 'providers/Theme';
+import React from 'react';
+import { useDispatch } from 'react-redux';
 import darkTheme from 'themes/dark';
 import lightTheme from 'themes/light';
+import { findItemInCollection } from 'utils/collections';
+import ConfirmRequestClose from './ConfirmRequestClose';
+import RequestTabNotFound from './RequestTabNotFound';
+import SpecialTab from './SpecialTab';
+import StyledWrapper from './StyledWrapper';
 
 const RequestTab = ({ tab, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
-  const [showConfirmClose, setShowConfirmClose] = useState(false);
 
   const handleCloseClick = (event) => {
     event.stopPropagation();
@@ -28,6 +31,15 @@ const RequestTab = ({ tab, collection }) => {
     );
   };
 
+  const showConfirmClose = () => {
+    dispatch(
+      setShowConfirmClose({
+        tabUid: tab.uid,
+        showConfirmClose: true
+      })
+    );
+  };
+
   const getMethodColor = (method = '') => {
     const theme = storedTheme === 'dark' ? darkTheme : lightTheme;
 
@@ -90,37 +102,12 @@ const RequestTab = ({ tab, collection }) => {
 
   return (
     <StyledWrapper className="flex items-center justify-between tab-container px-1">
-      {showConfirmClose && (
+      {tab.showConfirmClose && (
         <ConfirmRequestClose
-          onCancel={() => setShowConfirmClose(false)}
-          onCloseWithoutSave={() => {
-            dispatch(
-              deleteRequestDraft({
-                itemUid: item.uid,
-                collectionUid: collection.uid
-              })
-            );
-            dispatch(
-              closeTabs({
-                tabUids: [tab.uid]
-              })
-            );
-            setShowConfirmClose(false);
-          }}
-          onSaveAndClose={() => {
-            dispatch(saveRequest(item.uid, collection.uid))
-              .then(() => {
-                dispatch(
-                  closeTabs({
-                    tabUids: [tab.uid]
-                  })
-                );
-                setShowConfirmClose(false);
-              })
-              .catch((err) => {
-                console.log('err', err);
-              });
-          }}
+          item={item}
+          onCancel={() => dispatch(cancelCloseDraft(item.uid))}
+          onCloseWithoutSave={() => dispatch(closeWithoutSavingDraft(item.uid, collection.uid))}
+          onSaveAndClose={() => dispatch(closeAndSaveDraft(item.uid, collection.uid))}
         />
       )}
       <div className="flex items-baseline tab-label pl-2">
@@ -135,8 +122,7 @@ const RequestTab = ({ tab, collection }) => {
         className="flex px-2 close-icon-container"
         onClick={(e) => {
           if (!item.draft) return handleCloseClick(e);
-
-          setShowConfirmClose(true);
+          showConfirmClose();
         }}
       >
         {!item.draft ? (