feat(#583): collection level docs

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.CodeMirror {
+    /* todo: find a better way */
+    height: calc(100vh - 240px);
+
+    .CodeMirror-scroll {
+      padding-bottom: 0px;
+    }
+  }
+  .editing-mode {
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,55 @@
+import 'github-markdown-css/github-markdown.css';
+import get from 'lodash/get';
+import { updateCollectionDocs } from 'providers/ReduxStore/slices/collections';
+import { useTheme } from 'providers/Theme/index';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import Markdown from 'components/MarkDown';
+import CodeEditor from 'components/CodeEditor';
+import StyledWrapper from './StyledWrapper';
+
+const Docs = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const [isEditing, setIsEditing] = useState(false);
+  const docs = get(collection, 'root.docs', '');
+
+  const toggleViewMode = () => {
+    setIsEditing((prev) => !prev);
+  };
+
+  const onEdit = (value) => {
+    dispatch(
+      updateCollectionDocs({
+        collectionUid: collection.uid,
+        docs: value
+      })
+    );
+  };
+
+  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'}
+      </div>
+
+      {isEditing ? (
+        <CodeEditor
+          collection={collection}
+          theme={storedTheme}
+          value={docs || ''}
+          onEdit={onEdit}
+          onSave={onSave}
+          mode="application/text"
+        />
+      ) : (
+        <Markdown onDoubleClick={toggleViewMode} content={docs} />
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default Docs;

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

@@ -11,6 +11,7 @@ import Headers from './Headers';
 import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
+import Docs from './Docs';
 import StyledWrapper from './StyledWrapper';
 
 const CollectionSettings = ({ collection }) => {
@@ -54,6 +55,9 @@ const CollectionSettings = ({ collection }) => {
       case 'proxy': {
         return <ProxySettings proxyConfig={proxyConfig} onUpdate={onProxySettingsUpdate} />;
       }
+      case 'docs': {
+        return <Docs collection={collection} />;
+      }
     }
   };
 
@@ -81,8 +85,11 @@ const CollectionSettings = ({ collection }) => {
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
         </div>
+        <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
+          Docs
+        </div>
       </div>
-      <section className={`flex ${['auth', 'script'].includes(tab) ? '' : 'mt-4'}`}>{getTabPanel(tab)}</section>
+      <section className={`flex ${['auth', 'script', 'docs'].includes(tab) ? '' : 'mt-4'}`}>{getTabPanel(tab)}</section>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -996,7 +996,6 @@ export const collectionsSlice = createSlice({
         set(collection, 'root.request.script.res', action.payload.script);
       }
     },
-
     updateCollectionTests: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
@@ -1004,6 +1003,13 @@ export const collectionsSlice = createSlice({
         set(collection, 'root.request.tests', action.payload.tests);
       }
     },
+    updateCollectionDocs: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        set(collection, 'root.docs', action.payload.docs);
+      }
+    },
     addCollectionHeader: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
@@ -1417,6 +1423,7 @@ export const {
   updateCollectionRequestScript,
   updateCollectionResponseScript,
   updateCollectionTests,
+  updateCollectionDocs,
   collectionAddFileEvent,
   collectionAddDirectoryEvent,
   collectionChangeFileEvent,

packages/bruno-electron/src/bru/index.js

@@ -20,7 +20,8 @@ const collectionBruToJson = (bru) => {
         script: _.get(json, 'script', {}),
         vars: _.get(json, 'vars', {}),
         tests: _.get(json, 'tests', '')
-      }
+      },
+      docs: _.get(json, 'docs', '')
     };
 
     return transformedJson;
@@ -43,7 +44,8 @@ const jsonToCollectionBru = (json) => {
         req: _.get(json, 'request.vars.req', []),
         res: _.get(json, 'request.vars.req', [])
       },
-      tests: _.get(json, 'request.tests', '')
+      tests: _.get(json, 'request.tests', ''),
+      docs: _.get(json, 'docs', '')
     };
 
     return _jsonToCollectionBru(collectionBruJson);