feat: request/folder names should be independent of the actual file/directory name

packages/bruno-app/package.json

@@ -61,6 +61,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "19.0.0",
+    "react-file-icon": "^1.5.0",
     "react-hot-toast": "^2.4.0",
     "react-i18next": "^15.0.1",
     "react-inspector": "^6.0.2",

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
-const Bruno = ({ width }) => {
+const Bruno = ({ width, className }) => {
   return (
-    <svg id="emoji" width={width} viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+    <svg id="emoji" width={width} className={className} viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
       <g id="color">
         <path
           fill="#F4AA41"

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/Environments/EnvironmentSettings/CopyEnvironment/index.js

@@ -18,7 +18,6 @@ const CopyEnvironment = ({ collection, environment, onClose }) => {
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
         .required('name is required')
     }),
     onSubmit: (values) => {

packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js

@@ -23,7 +23,6 @@ const CreateEnvironment = ({ collection, onClose }) => {
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'Must be at least 1 character')
-        .max(50, 'Must be 50 characters or less')
         .required('Name is required')
         .test('duplicate-name', 'Environment already exists', validateEnvironmentName)
     }),

packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js

@@ -18,7 +18,6 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
         .required('name is required')
     }),
     onSubmit: (values) => {

packages/bruno-app/src/components/FileEditor/CodeEditor/StyledWrapper.js

@@ -0,0 +1,102 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.CodeMirror {
+    height: 100%;
+    background: ${(props) => props.theme.codemirror.bg};
+    border: solid 1px ${(props) => props.theme.codemirror.border};
+    font-family: ${(props) => (props.font ? props.font : 'default')};
+    font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : 'inherit')};
+    line-break: anywhere;
+    flex: 1 1 0;
+  }
+
+  /* Removes the glow outline around the folded json */
+  .CodeMirror-foldmarker {
+    text-shadow: none;
+    color: ${(props) => props.theme.textLink};
+    background: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .CodeMirror-overlayscroll-horizontal div,
+  .CodeMirror-overlayscroll-vertical div {
+    background: #d2d7db;
+  }
+
+  .CodeMirror-dialog {
+    overflow: visible;
+    input {
+      background: transparent;
+      border: 1px solid #d3d6db;
+      outline: none;
+      border-radius: 0px;
+    }
+  }
+
+  #search-results-count {
+    display: inline-block;
+    position: absolute;
+    top: calc(100% + 1px);
+    right: 0;
+    border-width: 0 0 1px 1px;
+    border-style: solid;
+    border-color: ${(props) => props.theme.codemirror.border};
+    padding: 0.1em 0.8em;
+    background-color: ${(props) => props.theme.codemirror.bg};
+    color: rgb(102, 102, 102);
+    white-space: nowrap;
+  }
+
+  textarea.cm-editor {
+    position: relative;
+  }
+
+  // Todo: dark mode temporary fix
+  // Clean this
+  .CodeMirror.cm-s-monokai {
+    .CodeMirror-overlayscroll-horizontal div,
+    .CodeMirror-overlayscroll-vertical div {
+      background: #444444;
+    }
+  }
+
+  .cm-s-monokai span.cm-property,
+  .cm-s-monokai span.cm-attribute {
+    color: #9cdcfe !important;
+  }
+
+  .cm-s-monokai span.cm-string {
+    color: #ce9178 !important;
+  }
+
+  .cm-s-monokai span.cm-number {
+    color: #b5cea8 !important;
+  }
+
+  .cm-s-monokai span.cm-atom {
+    color: #569cd6 !important;
+  }
+
+  .cm-variable-valid {
+    color: green;
+  }
+  .cm-variable-invalid {
+    color: red;
+  }
+
+  .CodeMirror-search-hint {
+    display: inline;
+  }
+
+  .cm-s-default span.cm-property {
+    color: #1f61a0 !important;
+  }
+
+  .cm-s-default span.cm-variable {
+    color: #397d13 !important;
+  }
+`;
+
+export default StyledWrapper;