add: folder draft

usebruno · Jan 3, 2025 · 872223f · 872223f
1 parent 10757ac
commit 872223f
Show file tree

Hide file tree

Showing 11 changed files with 220 additions and 50 deletions.
diff --git a/packages/bruno-app/src/components/FolderSettings/Documentation/index.js b/packages/bruno-app/src/components/FolderSettings/Documentation/index.js
@@ -15,7 +15,7 @@ const Documentation = ({ collection, folder }) => {
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
   const [isEditing, setIsEditing] = useState(false);
-  const docs = get(folder, 'root.docs', '');
+  const docs = folder.draft ? get(folder, 'draft.docs', '') : get(folder, 'root.docs', '');
   const { theme } = useTheme();
 
 

diff --git a/packages/bruno-app/src/components/FolderSettings/Headers/index.js b/packages/bruno-app/src/components/FolderSettings/Headers/index.js
@@ -14,7 +14,7 @@ const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 const Headers = ({ collection, folder }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
-  const headers = get(folder, 'root.request.headers', []);
+  const headers = folder.draft ? get(folder, 'draft.request.headers', []) : get(folder, 'root.request.headers', []);
 
   const addHeader = () => {
     dispatch(

diff --git a/packages/bruno-app/src/components/FolderSettings/Script/index.js b/packages/bruno-app/src/components/FolderSettings/Script/index.js
@@ -9,8 +9,8 @@ import StyledWrapper from './StyledWrapper';
 
 const Script = ({ collection, folder }) => {
   const dispatch = useDispatch();
-  const requestScript = get(folder, 'root.request.script.req', '');
-  const responseScript = get(folder, 'root.request.script.res', '');
+  const requestScript = folder.draft ? get(folder, 'draft.request.script.req', '') : get(folder, 'root.request.script.req', '');
+  const responseScript = folder.draft ? get(folder, 'draft.request.script.res', '') : get(folder, 'root.request.script.res', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);

diff --git a/packages/bruno-app/src/components/FolderSettings/Tests/index.js b/packages/bruno-app/src/components/FolderSettings/Tests/index.js
@@ -9,7 +9,7 @@ import StyledWrapper from './StyledWrapper';
 
 const Tests = ({ collection, folder }) => {
   const dispatch = useDispatch();
-  const tests = get(folder, 'root.request.tests', '');
+  const tests = folder.draft ? get(folder, 'draft.request.tests', '') : get(folder, 'root.request.tests', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);

diff --git a/packages/bruno-app/src/components/FolderSettings/Vars/index.js b/packages/bruno-app/src/components/FolderSettings/Vars/index.js
@@ -7,8 +7,8 @@ import { useDispatch } from 'react-redux';
 
 const Vars = ({ collection, folder }) => {
   const dispatch = useDispatch();
-  const requestVars = get(folder, 'root.request.vars.req', []);
-  const responseVars = get(folder, 'root.request.vars.res', []);
+  const requestVars = folder.draft ? get(folder, 'draft.request.vars.req', []) : get(folder, 'root.request.vars.req', []);
+  const responseVars = folder.draft ? get(folder,  'draft.request.vars.res', []) : get(folder, 'root.request.vars.res', []);
   const handleSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
   return (
     <StyledWrapper className="w-full flex flex-col">

diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import { IconAlertTriangle } from '@tabler/icons';
+import Modal from 'components/Modal';
+import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+import { useDispatch } from 'react-redux';
+import { deleteFolderDraft } from 'providers/ReduxStore/slices/collections/index';
+import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
+
+const ConfirmFolderClose = ({ onCancel, collection, folder, tab }) => {
+  const dispatch = useDispatch();
+
+  return (
+    <Modal
+      size="md"
+      title="Unsaved changes"
+      confirmText="Save and Close"
+      cancelText="Close without saving"
+      disableEscapeKey={true}
+      disableCloseOnOutsideClick={true}
+      closeModalFadeTimeout={150}
+      handleCancel={onCancel}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+      hideFooter={true}
+    >
+      <div className="flex items-center font-normal">
+        <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
+        <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+      </div>
+      <div className="font-normal mt-4">
+        You have unsaved changes in folder <span className="font-semibold">{folder.name}</span>.
+      </div>
+
+      <div className="flex justify-between mt-6">
+        <div>
+          <button className="btn btn-sm btn-danger" onClick={() => {
+              dispatch(deleteFolderDraft({ collectionUid: collection.uid, folderUid: folder.uid }));
+              dispatch(
+                closeTabs({
+                  tabUids: [tab.uid]
+                })
+              );
+          }}>
+            Don't Save
+          </button>
+        </div>
+        <div>
+          <button className="btn btn-close btn-sm mr-2" onClick={onCancel}>
+            Cancel
+          </button>
+          <button className="btn btn-secondary btn-sm" onClick={() => {
+            dispatch(saveFolderRoot(collection.uid, folder.uid));
+              dispatch(
+                closeTabs({
+                  tabUids: [tab.uid]
+                })
+              );
+            }}
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ConfirmFolderClose;
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js
@@ -3,7 +3,7 @@ import CloseTabIcon from './CloseTabIcon';
 import { IconVariable, IconSettings, IconRun, IconFolder, IconShieldLock } from '@tabler/icons';
 import DraftTabIcon from './DraftTabIcon';
 
-const SpecialTab = ({ handleCloseClick, type, tabName, collection }) => {
+const SpecialTab = ({ handleCloseClick, type, tabName, collection, folder }) => {
   const getTabInfo = (type, tabName) => {
     switch (type) {
       case 'collection-settings': {
@@ -53,10 +53,11 @@ const SpecialTab = ({ handleCloseClick, type, tabName, collection }) => {
     <>
       <div className="flex items-center tab-label pl-2">{getTabInfo(type, tabName)}</div>
       <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e)}>
-       {type === 'collection-settings' && collection?.draft !== null ? 
+      {(type === 'folder-settings' && folder.draft !== null) || 
+         (type === 'collection-settings' && collection.draft !== null) ? 
           <DraftTabIcon />
         : <CloseTabIcon />
-        }
+      }
       </div>
     </>
   );

diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -19,12 +19,14 @@ import CloseTabIcon from './CloseTabIcon';
 import DraftTabIcon from './DraftTabIcon';
 import { flattenItems } from 'utils/collections/index';
 import ConfirmCollectionClose from './ConfirmCollectionClose/index';
+import ConfirmFolderClose from './ConfirmFolderClose/index';
 
 const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUid }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const [showConfirmClose, setShowConfirmClose] = useState(false);
   const [showConfirmCloseCollection, setShowConfirmCloseCollection] = useState(false);
+  const [showConfirmCloseFolder, setShowConfirmCloseFolder] = useState(false);
 
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
@@ -49,6 +51,16 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
     setShowConfirmCloseCollection(true);
   }
 
+  const handleCloseFolderSettings = (event) => {
+    if(!folder.draft) {
+      return handleCloseClick(event);
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+    setShowConfirmCloseFolder(true);
+  }
+
   const handleRightClick = (_event) => {
     const menuDropdown = dropdownTippyRef.current;
     if (!menuDropdown) {
@@ -97,17 +109,27 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
     );
   }
 
-  if (['folder-settings', 'variables', 'collection-runner', 'security-settings'].includes(tab.type)) {
+  if(tab.type === 'folder-settings') {
     return (
       <StyledWrapper
         className="flex items-center justify-between tab-container px-1"
-        onMouseUp={handleMouseUp} // Add middle-click behavior here
+        onMouseUp={handleMouseUp}
       >
-        {tab.type === 'folder-settings' ? (
-          <SpecialTab handleCloseClick={handleCloseClick} type={tab.type} tabName={folder?.name} />
-        ) : (
-          <SpecialTab handleCloseClick={handleCloseClick} type={tab.type} />
+        {showConfirmCloseFolder && (
+          <ConfirmFolderClose onCancel={() => setShowConfirmCloseFolder(false)} collection={collection} folder={folder} tab={tab} />
         )}
+        <SpecialTab handleCloseClick={handleCloseFolderSettings} type={tab.type} folder={folder} />
+      </StyledWrapper>
+    );
+  }
+
+  if (['variables', 'collection-runner', 'security-settings'].includes(tab.type)) {
+    return (
+      <StyledWrapper
+        className="flex items-center justify-between tab-container px-1"
+        onMouseUp={handleMouseUp} // Add middle-click behavior here
+      >
+        <SpecialTab handleCloseClick={handleCloseClick} type={tab.type} />
       </StyledWrapper>
     );
   }

diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
@@ -44,7 +44,7 @@ import { parsePathParams, parseQueryParams, splitOnFirst } from 'utils/url/index
 import { sendCollectionOauth2Request as _sendCollectionOauth2Request } from 'utils/network/index';
 import { name } from 'file-loader';
 import slash from 'utils/common/slash';
-import { getGlobalEnvironmentVariables, transformCollectionRootToSave } from 'utils/collections/index';
+import { getGlobalEnvironmentVariables, transformCollectionRootToSave, transformFolderRootToSave } from 'utils/collections/index';
 import { findCollectionByPathname, findEnvironmentInCollectionByName } from 'utils/collections/index';
 
 export const renameCollection = (newName, collectionUid) => (dispatch, getState) => {
@@ -167,10 +167,14 @@ export const saveFolderRoot = (collectionUid, folderUid) => (dispatch, getState)
 
     const { ipcRenderer } = window;
 
+    const transformFolderRoot = transformFolderRootToSave(folder);
+
+    console.log({ transformFolderRoot })
+
     const folderData = {
       name: folder.name,
       pathname: folder.pathname,
-      root: folder.root
+      root: transformFolderRoot
     };
     console.log(folderData);