feat(documentation): move function to the request pane

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

@@ -1,9 +1,10 @@
 import styled from 'styled-components';
 
 const StyledContentWrapper = styled.div`
-  height: calc(100vh - 100px);
+  height: calc(100vh - 280px);
   margin-right: 5px;
   margin-left: 5px;
+  margin-bottom: -4em;
 
   background-color: ${(props) => props.theme.rightPane.bg};
 

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

@@ -14,42 +14,42 @@ const StyledMarkdownBodyWrapper = styled.div`
     font-size: 0.875rem;
   }
 
+  .markdown-body h1 {
+    margin: 0.67em 0;
+    font-weight: var(--base-text-weight-semibold, 600);
+    padding-bottom: 0.3em;
+    font-size: 1.3;
+    border-bottom: 1px solid var(--color-border-muted);
+  }
+
   .markdown-body h2 {
     font-weight: var(--base-text-weight-semibold, 600);
     padding-bottom: 0.3em;
-    font-size: 1.125em;
+    font-size: 1.2;
     border-bottom: 1px solid var(--color-border-muted);
   }
 
   .markdown-body h3 {
     font-weight: var(--base-text-weight-semibold, 600);
-    font-size: 1em;
+    font-size: 1.1em;
   }
 
   .markdown-body h4 {
     font-weight: var(--base-text-weight-semibold, 600);
-    font-size: 0.875em;
+    font-size: 1em;
   }
 
   .markdown-body h5 {
     font-weight: var(--base-text-weight-semibold, 600);
-    font-size: 0.85em;
+    font-size: 0.95em;
   }
 
   .markdown-body h6 {
     font-weight: var(--base-text-weight-semibold, 600);
-    font-size: 0.8em;
+    font-size: 0.9em;
     color: var(--color-fg-muted);
   }
 
-  .markdown-body h1 {
-    margin: 0.67em 0;
-    font-weight: var(--base-text-weight-semibold, 600);
-    padding-bottom: 0.3em;
-    font-size: 1.375em;
-    border-bottom: 1px solid var(--color-border-muted);
-  }
-
   .markdown-body hr {
     box-sizing: content-box;
     overflow: hidden;

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

@@ -1,9 +1,7 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  border-left: 1px solid ${(props) => props.theme.rightPane.border};
-  padding-top: 2em;
-  height: 100%;
+  width: inherit;
 `;
 
 export default StyledWrapper;

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

@@ -1,62 +1,32 @@
-import { IconX } from '@tabler/icons';
+import TextareaEditor from 'components/TextareaEditor/index';
 import 'github-markdown-css/github-markdown.css';
+import get from 'lodash/get';
 import MarkdownIt from 'markdown-it';
-import { updateRequestDocs } from 'providers/ReduxStore/slices/collections/index';
-import { closeDocs } from 'providers/ReduxStore/slices/docs';
+import { updateRequestDocs } from 'providers/ReduxStore/slices/collections';
 import { useTheme } from 'providers/Theme/index';
 import { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { findCollectionByUid, findItemInCollection } from 'utils/collections/index';
-import DocumentationEditor from './DocumentationEditor';
+import { useDispatch } from 'react-redux';
 import MarkdownBody from './MarkdownBody';
 import StyledContentWrapper from './StyledContentWrapper';
 import StyledWrapper from './StyledWrapper';
 
 const md = new MarkdownIt();
-const getItem = (collections, collectionUid, itemUid) => {
-  const collection = findCollectionByUid(collections, collectionUid);
-  if (!collection) {
-    return new Error('Collection not found');
-  }
 
-  const item = findItemInCollection(collection, itemUid);
-  if (!item) {
-    return new Error('Item not found');
-  }
-
-  return item;
-};
-
-const Documentation = () => {
+const Documentation = ({ item, collection }) => {
   const dispatch = useDispatch();
   const themeContext = useTheme();
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const collections = useSelector((state) => state.collections);
-  const isShowDocs = useSelector((state) => state.docs.isShow);
-
-  const tab = tabs.find((tab) => tab.uid === activeTabUid);
-  const item = getItem(collections.collections, tab?.collectionUid, tab?.uid);
-
   const [isEditing, setIsEditing] = useState(false);
-
-  const draftDocs = item.draft?.request?.docs;
-  const savedDocs = item?.request?.docs || '';
-  const docs = draftDocs !== undefined ? draftDocs : savedDocs;
+  const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
 
   const toggleViewMode = () => {
     setIsEditing((prev) => !prev);
   };
 
-  const setCloseDocs = () => {
-    dispatch(closeDocs());
-  };
-
   const handleChange = (e) => {
     dispatch(
       updateRequestDocs({
-        itemUid: tab.uid,
-        collectionUid: tab.collectionUid,
+        itemUid: item.uid,
+        collectionUid: collection.uid,
         docs: e.target.value
       })
     );
@@ -64,25 +34,16 @@ const Documentation = () => {
 
   const htmlFromMarkdown = md.render(docs);
 
-  if (!isShowDocs) {
-    return null;
-  }
-
-  if (!tab) {
+  if (!item) {
     return null;
   }
 
   return (
-    <StyledWrapper className="h-screen" theme={themeContext.theme}>
-      <button className="btn absolute top-2 right-2" onClick={setCloseDocs}>
-        <IconX />
-      </button>
-
+    <StyledWrapper theme={themeContext.theme}>
       <div
-        className="inline-block m-1 mt-5 mb-0"
+        className="inline-block m-1 mb-0"
         style={{ backgroundColor: themeContext.theme.rightPane.bg, width: '-webkit-fill-available' }}
       >
-        <h3 className="mb-2 ml-4 font-bold float-left"> Documentation </h3>
         <button className="text-end float-right mr-6 text-blue-400" onClick={toggleViewMode}>
           {isEditing ? 'Preview' : 'Edit'}
         </button>
@@ -90,7 +51,7 @@ const Documentation = () => {
 
       <StyledContentWrapper theme={themeContext.theme}>
         {isEditing ? (
-          <DocumentationEditor className="w-full h-full" onChange={handleChange} value={docs} />
+          <TextareaEditor className="w-full h-full" onChange={handleChange} value={docs || ''} />
         ) : (
           <MarkdownBody OnDoubleClick={toggleViewMode} theme={themeContext.theme}>
             {htmlFromMarkdown}

packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js

@@ -19,6 +19,7 @@ import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collection
 import { findEnvironmentInCollection } from 'utils/collections';
 import useGraphqlSchema from './useGraphqlSchema';
 import StyledWrapper from './StyledWrapper';
+import Documentation from 'components/Documentation/index';
 
 const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {
   const dispatch = useDispatch();
@@ -113,6 +114,9 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
       case 'tests': {
         return <Tests item={item} collection={collection} />;
       }
+      case 'docs': {
+        return <Documentation item={item} collection={collection} />;
+      }
       default: {
         return <div className="mt-4">404 | Not found</div>;
       }
@@ -161,6 +165,9 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
         <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
           Tests
         </div>
+        <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
+          Docs
+        </div>
         <div className="flex flex-grow justify-end items-center" style={{ fontSize: 13 }}>
           <div className="flex items-center cursor-pointer hover:underline" onClick={loadGqlSchema}>
             {isSchemaLoading ? <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5} /> : null}

packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js

@@ -14,6 +14,7 @@ import Assertions from 'components/RequestPane/Assertions';
 import Script from 'components/RequestPane/Script';
 import Tests from 'components/RequestPane/Tests';
 import StyledWrapper from './StyledWrapper';
+import Documentation from 'components/Documentation/index';
 
 const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
   const dispatch = useDispatch();
@@ -55,6 +56,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
       case 'tests': {
         return <Tests item={item} collection={collection} />;
       }
+      case 'docs': {
+        return <Documentation item={item} collection={collection} />;
+      }
       default: {
         return <div className="mt-4">404 | Not found</div>;
       }
@@ -103,6 +107,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
           Tests
         </div>
+        <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
+          Docs
+        </div>
         {focusedTab.requestPaneTab === 'body' ? (
           <div className="flex flex-grow justify-end items-center">
             <RequestBodyMode item={item} collection={collection} />

packages/bruno-app/src/components/RequestPane/QueryUrl/index.js

@@ -9,8 +9,6 @@ import { IconDeviceFloppy, IconArrowRight } from '@tabler/icons';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { isMacOS } from 'utils/common/platform';
 import StyledWrapper from './StyledWrapper';
-import { showDocs } from 'providers/ReduxStore/slices/docs';
-import { IconFileDescription } from '@tabler/icons';
 
 const QueryUrl = ({ item, collection, handleRun }) => {
   const { theme, storedTheme } = useTheme();
@@ -51,10 +49,6 @@ const QueryUrl = ({ item, collection, handleRun }) => {
     );
   };
 
-  const onDocsClick = () => {
-    dispatch(showDocs());
-  };
-
   return (
     <StyledWrapper className="flex items-center">
       <div className="flex items-center h-full method-selector-container">
@@ -98,11 +92,6 @@ const QueryUrl = ({ item, collection, handleRun }) => {
           <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={22} />
         </div>
       </div>
-      <button className="m-2" onClick={onDocsClick}>
-        <div className="flex items-center">
-          <IconFileDescription /> Docs
-        </div>
-      </button>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/TextareaEditor/StyledTextarea.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const StyledEditor = styled.textarea`
+const StyledTextarea = styled.textarea`
   height: inherit;
   background: ${(props) => props.theme.bg};
   color: ${(props) => props.theme.text};
@@ -26,8 +26,4 @@ const StyledEditor = styled.textarea`
   }
 `;
 
-const DocumentationEditor = (props) => {
-  return <StyledEditor {...props} />;
-};
-
-export default DocumentationEditor;
+export default StyledTextarea;

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

@@ -0,0 +1,7 @@
+import StyledTextarea from './StyledTextarea';
+
+const TextareaEditor = (props) => {
+  return <StyledTextarea {...props} />;
+};
+
+export default TextareaEditor;

packages/bruno-app/src/pageComponents/Index/index.js

@@ -44,7 +44,6 @@ export default function Main() {
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
   const isDragging = useSelector((state) => state.app.isDragging);
   const showHomePage = useSelector((state) => state.app.showHomePage);
-  const showDocs = useSelector((state) => state.docs.isShow);
 
   // Todo: write a better logging flow that can be used to log by turning on debug flag
   // Enable for debugging.
@@ -68,11 +67,6 @@ export default function Main() {
             </>
           )}
         </section>
-        {showDocs && (
-          <section className="flex flex-col w-1/4">
-            <Documentation />
-          </section>
-        )}
       </StyledWrapper>
     </div>
   );

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

@@ -2,14 +2,12 @@ import { configureStore } from '@reduxjs/toolkit';
 import appReducer from './slices/app';
 import collectionsReducer from './slices/collections';
 import tabsReducer from './slices/tabs';
-import docsReducer from './slices/docs';
 
 export const store = configureStore({
   reducer: {
     app: appReducer,
     collections: collectionsReducer,
-    tabs: tabsReducer,
-    docs: docsReducer
+    tabs: tabsReducer
   }
 });
 

packages/bruno-app/src/providers/ReduxStore/slices/docs.js

@@ -1,22 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-const initialState = {
-  isShow: false
-};
-
-export const docsSlice = createSlice({
-  name: 'docs',
-  initialState,
-  reducers: {
-    showDocs: (state) => {
-      state.isShow = true;
-    },
-    closeDocs: (state) => {
-      state.isShow = false;
-    }
-  }
-});
-
-export const { closeDocs, showDocs } = docsSlice.actions;
-
-export default docsSlice.reducer;