async bru file parsing based on request/collection size

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

@@ -8,7 +8,6 @@ const StyledWrapper = styled.div`
   }
   .editing-mode {
     cursor: pointer;
-    color: ${(props) => props.theme.colors.text.yellow};
   }
 `;
 

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

@@ -8,6 +8,7 @@ import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/acti
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
+import { IconEdit, IconTrash, IconFileText } from '@tabler/icons';
 
 const Docs = ({ collection }) => {
   const dispatch = useDispatch();
@@ -29,35 +30,89 @@ const Docs = ({ collection }) => {
     );
   };
 
-  const onSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleDiscardChanges = () => {
+    dispatch(
+      updateCollectionDocs({
+        collectionUid: collection.uid,
+        docs: docs
+      })
+    );
+    toggleViewMode();
+  }
+
+  const onSave = () => {
+    dispatch(saveCollectionRoot(collection.uid));
+  }
 
   return (
     <StyledWrapper className="mt-1 h-full w-full relative flex flex-col">
-      <div className="editing-mode flex justify-between items-center" role="tab" onClick={toggleViewMode}>
-        {isEditing ? 'Preview' : 'Edit'}
-      </div>
-
-      {isEditing ? (
-        <div className="mt-2 flex-1 max-h-[70vh]">
-          <CodeEditor
-            collection={collection}
-            theme={displayedTheme}
-            value={docs || ''}
-            onEdit={onEdit}
-            onSave={onSave}
-            mode="application/text"
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-          />
-          <button type="submit" className="submit btn btn-sm btn-secondary my-6" onClick={onSave}>
+      <div className='flex flex-row w-full justify-between items-center mb-4'>
+        <div className='text-lg font-medium flex items-center gap-2'>
+          <IconFileText size={20} strokeWidth={1.5} />
+          Documentation
+        </div>
+        <div className='flex flex-row gap-2 items-center justify-center'>
+          <div className="editing-mode" role="tab" onClick={handleDiscardChanges}>
+            {isEditing ? <IconTrash className="cursor-pointer" size={20} strokeWidth={1.5} /> : <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} />}
+          </div>
+          {/* <div className="editing-mode" role="tab" onClick={toggleViewMode}>
+            <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} />
+          </div> */}
+          {/* <button type="submit" className="submit btn btn-sm btn-secondary" onClick={onSave}>
             Save
-          </button>
+          </button> */}
         </div>
+      </div>
+      {isEditing ? (
+        <CodeEditor
+          collection={collection}
+          theme={displayedTheme}
+          value={docs}
+          onEdit={onEdit}
+          onSave={onSave}
+          mode="application/text"
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+        />
       ) : (
-        <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
+        <div className='h-full overflow-auto'>
+          <div className='h-[1px] min-h-[500px]'>
+            {
+              docs?.length > 0 ?
+                <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
+                :
+                <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={documentationPlaceholder} />
+            }         
+          </div>
+        </div>
       )}
     </StyledWrapper>
   );
 };
 
 export default Docs;
+
+
+const documentationPlaceholder = `
+Welcome to your collection documentation! This space is designed to help you document your API collection effectively.
+
+## Overview
+Use this section to provide a high-level overview of your collection. You can describe:
+- The purpose of these API endpoints
+- Key features and functionalities
+- Target audience or users
+
+## Best Practices
+- Keep documentation up to date
+- Include request/response examples
+- Document error scenarios
+- Add relevant links and references
+
+## Markdown Support
+This documentation supports Markdown formatting! You can use:
+- **Bold** and *italic* text
+- \`code blocks\` and syntax highlighting
+- Tables and lists
+- [Links](https://example.com)
+- And more!
+`;

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

@@ -6,7 +6,7 @@ const Info = ({ collection }) => {
   const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
 
   return (
-    <StyledWrapper className="w-full flex flex-col h-full">
+    <StyledWrapper className="w-full flex flex-col h-fit">
       <div className="text-xs mb-4 text-muted">General information about the collection.</div>
       <table className="w-full border-collapse">
         <tbody>
@@ -30,6 +30,10 @@ const Info = ({ collection }) => {
             <td className="py-2 px-2 text-right">Requests&nbsp;:</td>
             <td className="py-2 px-2">{totalRequestsInCollection}</td>
           </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Size&nbsp;:</td>
+            <td className="py-2 px-2">{collection?.brunoConfig?.size?.toFixed?.(3)} MB</td>
+          </tr>
         </tbody>
       </table>
     </StyledWrapper>

packages/bruno-app/src/components/CollectionSettings/Overview/StyledWrapper.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .partial {
+    color: ${(props) => props.theme.colors.text.yellow};
+    opacity: 0.8;
+  }
+
+  .loading {
+    color: ${(props) => props.theme.colors.text.muted};
+    opacity: 0.8;
+  }
+
+  .completed {
+    color: ${(props) => props.theme.colors.text.green};
+    opacity: 0.8;
+  }
+
+  .failed {
+    color: ${(props) => props.theme.colors.text.danger};
+    opacity: 0.8;
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,63 @@
+import { flattenItems } from "utils/collections/index";
+import StyledWrapper from "./StyledWrapper";
+import Docs from "../Docs/index";
+import Info from "../Info/index";
+
+const Overview = ({ collection }) => {
+  const flattenedItems = flattenItems(collection.items);
+  const itemsFailedLoading = flattenedItems?.filter(item => item?.partial && !item?.loading);
+  return (
+    <StyledWrapper className="flex flex-col h-full relative px-4 py-4 gap-4">
+      <div className="flex flex-row grid grid-cols-5 w-full gap-8">
+        <div className="col-span-2 flex flex-col gap-12">
+          <Info collection={collection} />
+          {
+            itemsFailedLoading?.length ? 
+              <div className="w-full border border-opacity-50 border-yellow-500 rounded-md">
+                <div className="my-2 mx-2 pb-2 font-medium">
+                  Following requests were not loaded
+                </div>
+                <table className="w-full border-collapse mt-2">
+                  <thead>
+                    <tr>
+                      <td>
+                        <div className="ml-2">
+                          Pathname
+                        </div>
+                      </td>
+                      <td>
+                        <div className="ml-2">
+                          Size
+                        </div>
+                      </td>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {flattenedItems?.map(item => (
+                      <>
+                        {
+                          item?.partial && !item?.loading ?
+                            <tr className="">
+                              <td className="py-2 px-2">{item?.pathname?.split(`${collection?.pathname}/`)?.[1]}</td>
+                              <td className="py-2 px-2 text-left">{item?.size?.toFixed?.(2)}&nbsp;MB</td>
+                            </tr>
+                            : null
+                        }
+                      </>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            :
+              null
+          }
+        </div>
+        <div className="col-span-3">
+          <Docs collection={collection} />
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+}
+
+export default Overview;

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  max-width: 800px;
+  // max-width: 800px;
 
   div.tabs {
     div.tab {

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

@@ -18,6 +18,7 @@ import Info from './Info';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
 import DotIcon from 'components/Icons/Dot';
+import Overview from './Overview/index';
 
 const ContentIndicator = () => {
   return (
@@ -97,6 +98,9 @@ const CollectionSettings = ({ collection }) => {
 
   const getTabPanel = (tab) => {
     switch (tab) {
+      case 'overview': {
+        return <Overview collection={collection} />;
+      }
       case 'headers': {
         return <Headers collection={collection} />;
       }
@@ -146,6 +150,9 @@ const CollectionSettings = ({ collection }) => {
   return (
     <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
       <div className="flex flex-wrap items-center tabs" role="tablist">
+      <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
+          Overview
+        </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
           Headers
           {activeHeadersCount > 0 && <sup className="ml-1 font-medium">{activeHeadersCount}</sup>}
@@ -177,13 +184,13 @@ const CollectionSettings = ({ collection }) => {
           Client Certificates
           {clientCertConfig.length > 0 && <ContentIndicator />}
         </div>
-        <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
+        {/* <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
           Docs
           {hasDocs && <ContentIndicator />}
         </div>
         <div className={getTabClassname('info')} role="tab" onClick={() => setTab('info')}>
           Info
-        </div>
+        </div> */}
       </div>
       <section className="mt-4 h-full">{getTabPanel(tab)}</section>
     </StyledWrapper>

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

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   .editing-mode {
     cursor: pointer;
-    color: ${(props) => props.theme.colors.text.yellow};
   }
 `;
 

packages/bruno-app/src/components/RequestTabPanel/RequestIsLoading/index.js

@@ -0,0 +1,27 @@
+import { IconLoader2 } from '@tabler/icons';
+
+const RequestIsLoading = ({ item }) => {
+  return <>
+    <div className='flex flex-col gap-6 w-fit pt-4 pb-3 px-4'>
+      <div className='flex flex-col gap-1'>
+        <div className='flex flex-row gap-1'>
+          <div className='opacity-70 min-w-[50px]'>Name</div>
+          <div>{item?.name}</div>
+        </div>
+        <div className='flex flex-row gap-1'>
+          <div className='opacity-70 min-w-[50px]'>Size</div>
+          <div>{item?.size?.toFixed?.(2)} MB</div>
+        </div>
+        <div className='flex flex-row gap-1'>
+          <div className='opacity-70 min-w-[50px]'>Path</div>
+          <div>{item?.pathname}</div>
+        </div>
+        <div className='flex flex-col gap-6 w-fit justify-start'>
+          <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5} />
+        </div>
+      </div>
+    </div>
+  </>
+}
+
+export default RequestIsLoading;

packages/bruno-app/src/components/RequestTabPanel/RequestNotLoaded/index.js

@@ -0,0 +1,55 @@
+import { IconLoader2 } from '@tabler/icons';
+import { loadRequest, loadRequestSync } from 'providers/ReduxStore/slices/collections/actions';
+import { useDispatch } from 'react-redux';
+
+const RequestNotLoaded = ({ collection, item }) => {
+  const dispatch = useDispatch();
+  const handleLoadRequest = () => {
+    !item?.loading && dispatch(loadRequest({ collectionUid: collection?.uid, pathname: item?.pathname }));
+  }
+
+  const handleLoadRequestSync = () => {
+    !item?.loading && dispatch(loadRequestSync({ collectionUid: collection?.uid, pathname: item?.pathname }));
+  }
+
+  return <>
+    <div className='flex flex-col gap-6 w-fit pt-4 pb-3 px-4'>
+      <div className='flex flex-col gap-1'>
+        <div className='flex flex-row gap-1'>
+          <div className='opacity-70 min-w-[50px]'>Name</div>
+          <div>{item?.name}</div>
+        </div>
+        <div className='flex flex-row gap-1'>
+          <div className='opacity-70 min-w-[50px]'>Size</div>
+          <div>{item?.size?.toFixed?.(2)} MB</div>
+        </div>
+        <div className='flex flex-row gap-1'>
+          <div className='opacity-70 min-w-[50px]'>Path</div>
+          <div>{item?.pathname}</div>
+        </div>
+      </div>
+      <div className='flex flex-col gap-6 w-fit justify-start'>
+        <div className='flex flex-col'>
+          <button className={`submit btn btn-sm btn-secondary w-fit h-fit flex flex-row gap-2 ${item?.loading? 'opacity-50 cursor-blocked': ''}`} onClick={handleLoadRequestSync}>
+            {item?.loading ? `Loading Request` : `Load Request`}
+            {item?.loading ? <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5} /> : null}
+          </button>
+          <small className='text-muted mt-1'>
+            May cause the app to freeze temporarily while it runs.
+          </small>
+        </div>
+        <div className='flex flex-col'>
+          <button className={`submit btn btn-sm btn-secondary w-fit h-fit flex flex-row gap-2 ${item?.loading? 'opacity-50 cursor-blocked': ''}`} onClick={handleLoadRequest}>
+            {item?.loading ? `Loading Request` : `Load Request in Background`}
+            {item?.loading ? <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5} /> : null}
+          </button>
+          <small className='text-muted mt-1'>
+            Runs in background.
+          </small>
+        </div>
+      </div>
+    </div>
+  </>
+}
+
+export default RequestNotLoaded;

packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js

@@ -45,6 +45,10 @@ const StyledWrapper = styled.div`
       display: flex;
     }
   }
+
+  .partial-request-overlay {
+    background: ${(props) => props.theme.bg};
+  }
 `;
 
 export default StyledWrapper;