add: draft for collection and folder

packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.js

@@ -16,7 +16,7 @@ const ApiKeyAuth = ({ collection }) => {
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
-  const apikeyAuth = get(collection, 'root.request.auth.apikey', {});
+  const apikeyAuth = collection.draft ? get(collection, 'draft.request.auth.apikey', {}) : get(collection, 'root.request.auth.apikey', {});
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 

packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js

@@ -11,7 +11,7 @@ const AuthMode = ({ collection }) => {
   const dispatch = useDispatch();
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const authMode = get(collection, 'root.request.auth.mode');
+  const authMode = collection.draft ? get(collection, 'draft.request.auth.mode') : get(collection, 'root.request.auth.mode');
 
   const Icon = forwardRef((props, ref) => {
     return (

packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js

@@ -11,7 +11,7 @@ const AwsV4Auth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
+  const awsv4Auth = collection.draft ? get(collection, 'draft.request.auth.awsv4', {}) : get(collection, 'root.request.auth.awsv4', {});
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 

packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js

@@ -11,7 +11,7 @@ const BasicAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const basicAuth = get(collection, 'root.request.auth.basic', {});
+  const basicAuth = collection.draft ? get(collection, 'draft.request.auth.basic', {}) : get(collection, 'root.request.auth.basic', {});
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 

packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js

@@ -11,7 +11,7 @@ const BearerAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const bearerToken = get(collection, 'root.request.auth.bearer.token', '');
+  const bearerToken = collection.draft ? get(collection, 'draft.request.auth.bearer.token', '') : get(collection, 'root.request.auth.bearer.token', '');
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 

packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js

@@ -11,7 +11,7 @@ const DigestAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const digestAuth = get(collection, 'root.request.auth.digest', {});
+  const digestAuth = collection.draft ? get(collection, 'draft.request.auth.digest', {}) : get(collection, 'root.request.auth.digest', {});
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js

@@ -14,7 +14,7 @@ const OAuth2AuthorizationCode = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+  const oAuth = collection.draft ? get(collection, 'draft.request.auth.oauth2', {}) : get(collection, 'root.request.auth.oauth2', {});
 
   const handleRun = async () => {
     dispatch(sendCollectionOauth2Request(collection.uid));

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js

@@ -12,7 +12,7 @@ const OAuth2ClientCredentials = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+  const oAuth = collection.draft ? get(collection, 'draft.request.auth.oauth2', {}) : get(collection, 'root.request.auth.oauth2', {});
 
   const handleRun = async () => {
     dispatch(sendCollectionOauth2Request(collection.uid));

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/GrantTypeSelector/index.js

@@ -14,7 +14,7 @@ const GrantTypeSelector = ({ collection }) => {
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
-  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+  const oAuth = collection.draft ? get(collection, "draft.request.auth.oauth2", {}) : get(collection, 'root.request.auth.oauth2', {});
 
   const Icon = forwardRef((props, ref) => {
     return (

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js

@@ -12,7 +12,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+  const oAuth = collection.draft ? get(collection, 'draft.request.auth.oauth2', {}) : get(collection, 'root.request.auth.oauth2', {});
 
   const handleRun = async () => {
     dispatch(sendCollectionOauth2Request(collection.uid));

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js

@@ -24,7 +24,7 @@ const grantTypeComponentMap = (grantType, collection) => {
 };
 
 const OAuth2 = ({ collection }) => {
-  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+  const oAuth = collection.draft ? get(collection, 'draft.request.auth.oauth2', {}) : get(collection, 'root.request.auth.oauth2', {});
 
   return (
     <StyledWrapper className="mt-2 w-full">

packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/index.js

@@ -11,7 +11,7 @@ const WsseAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const wsseAuth = get(collection, 'root.request.auth.wsse', {});
+  const wsseAuth = collection.draft ? get(collection, 'draft.request.auth.wsse', {}) : get(collection, 'root.request.auth.wsse', {});
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 

packages/bruno-app/src/components/CollectionSettings/Auth/index.js

@@ -15,7 +15,7 @@ import NTLMAuth from './NTLMAuth';
 
 
 const Auth = ({ collection }) => {
-  const authMode = get(collection, 'root.request.auth.mode');
+  const authMode = collection.draft ? get(collection, 'draft.request.auth.mode') : get(collection, 'root.request.auth.mode');
   const dispatch = useDispatch();
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));

packages/bruno-app/src/components/CollectionSettings/Docs/index.js

@@ -13,8 +13,9 @@ const Docs = ({ collection }) => {
   const dispatch = useDispatch();
   const { displayedTheme } = useTheme();
   const [isEditing, setIsEditing] = useState(false);
-  const docs = get(collection, 'root.docs', '');
+  const docs = collection.draft ? get(collection, 'draft.docs', '') : get(collection, 'root.docs', '');
   const preferences = useSelector((state) => state.app.preferences);
+  const { theme, storedTheme } = useTheme();
 
   const toggleViewMode = () => {
     setIsEditing((prev) => !prev);

packages/bruno-app/src/components/CollectionSettings/Headers/index.js

@@ -19,7 +19,7 @@ const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 const Headers = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
-  const headers = get(collection, 'root.request.headers', []);
+  const headers = collection.draft ? get(collection, 'draft.request.headers', []) : get(collection, 'root.request.headers', []);
 
   const addHeader = () => {
     dispatch(

packages/bruno-app/src/components/CollectionSettings/Script/index.js

@@ -9,8 +9,8 @@ import StyledWrapper from './StyledWrapper';
 
 const Script = ({ collection }) => {
   const dispatch = useDispatch();
-  const requestScript = get(collection, 'root.request.script.req', '');
-  const responseScript = get(collection, 'root.request.script.res', '');
+  const requestScript = collection.draft ? get(collection, 'draft.request.script.req', '') : get(collection, 'root.request.script.req', '');
+  const responseScript = collection.draft ? get(collection, 'draft.request.script.res', '') : get(collection, 'root.request.script.res', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);

packages/bruno-app/src/components/CollectionSettings/Tests/index.js

@@ -9,7 +9,7 @@ import StyledWrapper from './StyledWrapper';
 
 const Tests = ({ collection }) => {
   const dispatch = useDispatch();
-  const tests = get(collection, 'root.request.tests', '');
+  const tests = collection.draft ? get(collection, 'draft.request.tests', '') : get(collection, 'root.request.tests', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);

packages/bruno-app/src/components/CollectionSettings/Vars/index.js

@@ -7,8 +7,8 @@ import { useDispatch } from 'react-redux';
 
 const Vars = ({ collection }) => {
   const dispatch = useDispatch();
-  const requestVars = get(collection, 'root.request.vars.req', []);
-  const responseVars = get(collection, 'root.request.vars.res', []);
+  const requestVars = collection.draft ? get(collection, 'draft.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
+  const responseVars = collection.draft ? get(collection, 'draft.request.vars.res', []) : get(collection, 'root.request.vars.res', []);
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
   return (
     <StyledWrapper className="w-full flex flex-col">

packages/bruno-app/src/components/CollectionSettings/index.js

@@ -44,13 +44,13 @@ const CollectionSettings = ({ collection }) => {
   const hasTests = root?.request?.tests;
   const hasDocs = root?.docs;
 
-  const headers = get(collection, 'root.request.headers', []);
+  const headers = collection.draft ? get(collection, 'draft.request.headers', []) : get(collection, 'root.request.headers', []);
   const activeHeadersCount = headers.filter((header) => header.enabled).length;
 
-  const requestVars = get(collection, 'root.request.vars.req', []);
-  const responseVars = get(collection, 'root.request.vars.res', []);
+  const requestVars = collection.draft ? get(collection, 'draft.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
+  const responseVars = collection.draft ? get(collection, 'draft.request.vars.res', []) : get(collection, 'root.request.vars.res', []);
   const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
-  const auth = get(collection, 'root.request.auth', {}).mode;
+  const auth = collection.draft ? get(collection, 'draft.request.auth', {}).mode : get(collection, 'root.request.auth', {}).mode;
 
   const proxyConfig = get(collection, 'brunoConfig.proxy', {});
   const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
@@ -142,7 +142,7 @@ const CollectionSettings = ({ collection }) => {
       active: tabName === tab
     });
   };
-
+  
   return (
     <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
       <div className="flex flex-wrap items-center tabs" role="tablist">

packages/bruno-app/src/components/Documentation/index.js

@@ -38,7 +38,7 @@ const Documentation = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="flex flex-col gap-y-1 h-full w-full relative">
-      <div className="editing-mode" role="tab" onClick={toggleViewMode}>
+      <div className="editing-mode mb-2 flex justify-between items-center" role="tab" onClick={toggleViewMode}>
         {isEditing ? 'Preview' : 'Edit'}
       </div>
 

packages/bruno-app/src/components/FolderSettings/Documentation/index.js

@@ -14,7 +14,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 toggleViewMode = () => {
     setIsEditing((prev) => !prev);

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(

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);

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);

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">

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { IconAlertTriangle } from '@tabler/icons';
+import Modal from 'components/Modal';
+import { useDispatch } from 'react-redux';
+import { deleteCollectionDraft } from 'providers/ReduxStore/slices/collections/index';
+import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+
+const ConfirmCollectionClose = ({ onCancel, collection, 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 request Collection.
+      </div>
+
+      <div className="flex justify-between mt-6">
+        <div>
+          <button className="btn btn-sm btn-danger" onClick={() => {
+              dispatch(deleteCollectionDraft({ collectionUid: collection.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(saveCollectionRoot(collection.uid))
+              dispatch(
+                closeTabs({
+                  tabUids: [tab.uid]
+                })
+              );    
+           }}>
+            Save
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ConfirmCollectionClose;

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;