async bru file parsing based on request/collection size

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

@@ -11,7 +11,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 } from '@tabler/icons';
 
 const Docs = ({ collection }) => {
   const dispatch = useDispatch();
@@ -29,30 +30,82 @@ 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">
-      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
-        {isEditing ? 'Preview' : 'Edit'}
+    <StyledWrapper className="mt-1 h-full w-full relative flex flex-col">
+      <div className='text-lg font-medium'>
+        {collection?.name}
+      </div>
+      <div className='flex flex-row w-full justify-between items-center mb-4'>
+        <div>
+          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>
+        </div>
       </div>
-
       {isEditing ? (
         <CodeEditor
           collection={collection}
           theme={displayedTheme}
-          value={docs || ''}
+          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 = `
+# Add you collection documentation here.
+
+## Why Documentation Matters
+
+Clear, comprehensive documentation is key to helping others understand, use, and contribute to the project. It makes the codebase accessible to everyone and ensures that new contributors can get up to speed quickly.
+
+## Documentation Guidelines
+
+- Keep it simple and clear.
+- Use examples where possible.
+- Maintain a friendly and inclusive tone.
+
+`;

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/StyledWrapper.js

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