Merge pull request #463 from donus3/feature/docs

Bruno Docs
2024-11-24 17:03:47 +01:00 · 2023-10-13 04:07:28 +05:30 · 2023-10-13 04:07:28 +05:30 · 1087cacdb0
commit 1087cacdb0
parent faccca3921 d922376d57
28 changed files with 2528 additions and 6857 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@ -27,6 +27,7 @@
    "file-dialog": "^0.0.8",
    "file-saver": "^2.0.5",
    "formik": "^2.2.9",
+    "github-markdown-css": "^5.2.0",
    "graphiql": "^1.5.9",
    "graphql": "^16.6.0",
    "graphql-request": "^3.7.0",
@ -36,7 +37,7 @@
    "immer": "^9.0.15",
    "know-your-http-well": "^0.5.0",
    "lodash": "^4.17.21",
-    "markdown-it": "^13.0.1",
+    "markdown-it": "^13.0.2",
    "mousetrap": "^1.6.5",
    "nanoid": "3.3.4",
    "next": "12.3.3",
--- a/packages/bruno-app/src/components/Documentation/MarkdownBody.js
+++ b/packages/bruno-app/src/components/Documentation/MarkdownBody.js
@ -0,0 +1,28 @@
+import StyledMarkdownBodyWrapper from './StyledMarkdownBodyWrapper';
+
+const MarkdownBody = (props) => {
+  const handleOnDoubleClick = () => {
+    switch (event.detail) {
+      case 2: {
+        props.OnDoubleClick();
+        break;
+      }
+      case 1:
+      default: {
+        break;
+      }
+    }
+  };
+
+  return (
+    <StyledMarkdownBodyWrapper theme={props.theme}>
+      <div
+        className="markdown-body"
+        dangerouslySetInnerHTML={{ __html: props.children }}
+        onClick={handleOnDoubleClick}
+      />
+    </StyledMarkdownBodyWrapper>
+  );
+};
+
+export default MarkdownBody;
--- a/packages/bruno-app/src/components/Documentation/StyledContentWrapper.js
+++ b/packages/bruno-app/src/components/Documentation/StyledContentWrapper.js
@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+const StyledContentWrapper = styled.div`
+  height: calc(100vh - 280px);
+  margin-right: 5px;
+  margin-left: 5px;
+  margin-bottom: -4em;
+
+  background-color: ${(props) => props.theme.rightPane.bg};
+
+  .text-end {
+    text-align: end;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0px;
+  }
+
+  ::-webkit-scrollbar-button {
+    display: none;
+  }
+`;
+
+export default StyledContentWrapper;
--- a/packages/bruno-app/src/components/Documentation/StyledMarkdownBodyWrapper.js
+++ b/packages/bruno-app/src/components/Documentation/StyledMarkdownBodyWrapper.js
@ -0,0 +1,80 @@
+import styled from 'styled-components';
+
+const StyledMarkdownBodyWrapper = styled.div`
+  height: inherit;
+  .markdown-body {
+    overflow-y: auto;
+    background-color: ${(props) => props.theme.rightPane.bg};
+    border: 1px solid ${(props) => props.theme.rightPane.border};
+    color: ${(props) => props.theme.text};
+    box-sizing: border-box;
+    height: 100%;
+    margin: 0 auto;
+    padding: 1em;
+    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.2;
+    border-bottom: 1px solid var(--color-border-muted);
+  }
+
+  .markdown-body h3 {
+    font-weight: var(--base-text-weight-semibold, 600);
+    font-size: 1.1em;
+  }
+
+  .markdown-body h4 {
+    font-weight: var(--base-text-weight-semibold, 600);
+    font-size: 1em;
+  }
+
+  .markdown-body h5 {
+    font-weight: var(--base-text-weight-semibold, 600);
+    font-size: 0.95em;
+  }
+
+  .markdown-body h6 {
+    font-weight: var(--base-text-weight-semibold, 600);
+    font-size: 0.9em;
+    color: var(--color-fg-muted);
+  }
+
+  .markdown-body hr {
+    box-sizing: content-box;
+    overflow: hidden;
+    background: transparent;
+    border-bottom: 1px solid var(--color-border-muted);
+    height: 1px;
+    padding: 0;
+    margin: 24px 0;
+    background-color: var(--color-border-default);
+    border: 0;
+  }
+
+  .markdown-body ul {
+    list-style-type: disc;
+  }
+
+  .markdown-body ol {
+    list-style-type: decimal;
+  }
+
+  @media (max-width: 767px) {
+    .markdown-body {
+      padding: 15px;
+    }
+  }
+`;
+
+export default StyledMarkdownBodyWrapper;
--- a/packages/bruno-app/src/components/Documentation/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Documentation/StyledWrapper.js
@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  width: inherit;
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/Documentation/index.js
+++ b/packages/bruno-app/src/components/Documentation/index.js
@ -0,0 +1,65 @@
+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';
+import { useTheme } from 'providers/Theme/index';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import MarkdownBody from './MarkdownBody';
+import StyledContentWrapper from './StyledContentWrapper';
+import StyledWrapper from './StyledWrapper';
+
+const md = new MarkdownIt();
+
+const Documentation = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const themeContext = useTheme();
+  const [isEditing, setIsEditing] = useState(false);
+  const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
+
+  const toggleViewMode = () => {
+    setIsEditing((prev) => !prev);
+  };
+
+  const handleChange = (e) => {
+    dispatch(
+      updateRequestDocs({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        docs: e.target.value
+      })
+    );
+  };
+
+  const htmlFromMarkdown = md.render(docs);
+
+  if (!item) {
+    return null;
+  }
+
+  return (
+    <StyledWrapper theme={themeContext.theme}>
+      <div
+        className="inline-block m-1 mb-0"
+        style={{ backgroundColor: themeContext.theme.rightPane.bg, width: '-webkit-fill-available' }}
+      >
+        <button className="text-end float-right mr-6 text-blue-400" onClick={toggleViewMode}>
+          {isEditing ? 'Preview' : 'Edit'}
+        </button>
+      </div>
+
+      <StyledContentWrapper theme={themeContext.theme}>
+        {isEditing ? (
+          <TextareaEditor className="w-full h-full" onChange={handleChange} value={docs || ''} />
+        ) : (
+          <MarkdownBody OnDoubleClick={toggleViewMode} theme={themeContext.theme}>
+            {htmlFromMarkdown}
+          </MarkdownBody>
+        )}
+      </StyledContentWrapper>
+    </StyledWrapper>
+  );
+};
+
+export default Documentation;
--- a/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js
@ -1,6 +1,16 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
+  .scroll {
+    ::-webkit-scrollbar {
+      width: 0px;
+    }
+
+    ::-webkit-scrollbar-button {
+      display: none;
+    }
+  }
+
  table {
    width: 100%;
    border-collapse: collapse;
--- a/packages/bruno-app/src/components/RequestPane/Assertions/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/index.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { useDispatch } from 'react-redux';
@ -6,11 +6,23 @@ import { addAssertion, updateAssertion, deleteAssertion } from 'providers/ReduxS
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import AssertionRow from './AssertionRow';
 import StyledWrapper from './StyledWrapper';
+import { useTheme } from 'providers/Theme/index';

 const Assertions = ({ item, collection }) => {
  const dispatch = useDispatch();
+  const { theme } = useTheme();
  const assertions = item.draft ? get(item, 'draft.request.assertions') : get(item, 'request.assertions');

+  const [countItems, setCountItems] = useState(assertions.length);
+  const ref = useRef();
+
+  useEffect(() => {
+    setCountItems(assertions.length);
+    if (assertions.length > countItems) {
+      ref.current.scrollIntoView();
+    }
+  }, [assertions]);
+
  const handleAddAssertion = () => {
    dispatch(
      addAssertion({
@ -59,34 +71,37 @@ const Assertions = ({ item, collection }) => {

  return (
    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Expr</td>
-            <td>Operator</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {assertions && assertions.length
-            ? assertions.map((assertion) => {
-                return (
-                  <AssertionRow
-                    key={assertion.uid}
-                    assertion={assertion}
-                    item={item}
-                    collection={collection}
-                    handleAssertionChange={handleAssertionChange}
-                    handleRemoveAssertion={handleRemoveAssertion}
-                    onSave={onSave}
-                    handleRun={handleRun}
-                  />
-                );
-              })
-            : null}
-        </tbody>
-      </table>
+      <div className="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
+        <table>
+          <thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
+            <tr>
+              <td>Expr</td>
+              <td>Operator</td>
+              <td>Value</td>
+              <td></td>
+            </tr>
+          </thead>
+          <tbody>
+            {assertions && assertions.length
+              ? assertions.map((assertion) => {
+                  return (
+                    <AssertionRow
+                      key={assertion.uid}
+                      assertion={assertion}
+                      item={item}
+                      collection={collection}
+                      handleAssertionChange={handleAssertionChange}
+                      handleRemoveAssertion={handleRemoveAssertion}
+                      onSave={onSave}
+                      handleRun={handleRun}
+                    />
+                  );
+                })
+              : null}
+          </tbody>
+        </table>
+        <div ref={ref} />
+      </div>
      <button className="btn-add-assertion text-link pr-2 py-3 mt-2 select-none" onClick={handleAddAssertion}>
        + Add Assertion
      </button>
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
+++ b/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}
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
+++ b/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} />
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
@ -1,6 +1,16 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
+  .scroll {
+    ::-webkit-scrollbar {
+      width: 0px;
+    }
+
+    ::-webkit-scrollbar-button {
+      display: none;
+    }
+  }
+
  table {
    width: 100%;
    border-collapse: collapse;
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
@ -12,8 +12,17 @@ import StyledWrapper from './StyledWrapper';

 const QueryParams = ({ item, collection }) => {
  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
+  const { storedTheme, theme } = useTheme();
  const params = item.draft ? get(item, 'draft.request.params') : get(item, 'request.params');
+  const [countItems, setCountItems] = useState(params.length);
+  const ref = useRef();
+
+  useEffect(() => {
+    setCountItems(params.length);
+    if (params.length > countItems) {
+      ref.current.scrollIntoView();
+    }
+  }, [params]);

  const handleAddParam = () => {
    dispatch(
@ -65,71 +74,74 @@ const QueryParams = ({ item, collection }) => {

  return (
    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Name</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {params && params.length
-            ? params.map((param, index) => {
-                return (
-                  <tr key={param.uid}>
-                    <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={param.name}
-                        className="mousetrap"
-                        onChange={(e) => handleParamChange(e, param, 'name')}
-                      />
-                    </td>
-                    <td>
-                      <SingleLineEditor
-                        value={param.value}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleParamChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            param,
-                            'value'
-                          )
-                        }
-                        onRun={handleRun}
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
+      <div className="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
+        <table>
+          <thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
+            <tr>
+              <td>Name</td>
+              <td>Value</td>
+              <td></td>
+            </tr>
+          </thead>
+          <tbody>
+            {params && params.length
+              ? params.map((param, index) => {
+                  return (
+                    <tr key={param.uid}>
+                      <td>
                        <input
-                          type="checkbox"
-                          checked={param.enabled}
-                          tabIndex="-1"
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleParamChange(e, param, 'enabled')}
+                          type="text"
+                          autoComplete="off"
+                          autoCorrect="off"
+                          autoCapitalize="off"
+                          spellCheck="false"
+                          value={param.name}
+                          className="mousetrap"
+                          onChange={(e) => handleParamChange(e, param, 'name')}
                        />
-                        <button tabIndex="-1" onClick={() => handleRemoveParam(param)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
+                      </td>
+                      <td>
+                        <SingleLineEditor
+                          value={param.value}
+                          theme={storedTheme}
+                          onSave={onSave}
+                          onChange={(newValue) =>
+                            handleParamChange(
+                              {
+                                target: {
+                                  value: newValue
+                                }
+                              },
+                              param,
+                              'value'
+                            )
+                          }
+                          onRun={handleRun}
+                          collection={collection}
+                        />
+                      </td>
+                      <td>
+                        <div className="flex items-center">
+                          <input
+                            type="checkbox"
+                            checked={param.enabled}
+                            tabIndex="-1"
+                            className="mr-3 mousetrap"
+                            onChange={(e) => handleParamChange(e, param, 'enabled')}
+                          />
+                          <button tabIndex="-1" onClick={() => handleRemoveParam(param)}>
+                            <IconTrash strokeWidth={1.5} size={20} />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              : null}
+          </tbody>
+        </table>
+        <div ref={ref} />
+      </div>
      <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleAddParam}>
        +&nbsp;<span>Add Param</span>
      </button>
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
@ -1,6 +1,16 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
+  .scroll {
+    ::-webkit-scrollbar {
+      width: 0px;
+    }
+
+    ::-webkit-scrollbar-button {
+      display: none;
+    }
+  }
+
  table {
    width: 100%;
    border-collapse: collapse;
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
@ -13,9 +13,19 @@ const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);

 const RequestHeaders = ({ item, collection }) => {
  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
+  const { storedTheme, theme } = useTheme();
  const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');

+  const [countItems, setCountItems] = useState(headers.length);
+  const ref = useRef();
+
+  useEffect(() => {
+    setCountItems(headers.length);
+    if (headers.length > countItems) {
+      ref.current.scrollIntoView();
+    }
+  }, [headers]);
+
  const addHeader = () => {
    dispatch(
      addRequestHeader({
@ -64,80 +74,83 @@ const RequestHeaders = ({ item, collection }) => {

  return (
    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Name</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {headers && headers.length
-            ? headers.map((header) => {
-                return (
-                  <tr key={header.uid}>
-                    <td>
-                      <SingleLineEditor
-                        value={header.name}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleHeaderValueChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            header,
-                            'name'
-                          )
-                        }
-                        autocomplete={headerAutoCompleteList}
-                        onRun={handleRun}
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <SingleLineEditor
-                        value={header.value}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleHeaderValueChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            header,
-                            'value'
-                          )
-                        }
-                        onRun={handleRun}
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={header.enabled}
-                          tabIndex="-1"
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
+      <div class="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
+        <table>
+          <thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
+            <tr>
+              <td>Name</td>
+              <td>Value</td>
+              <td></td>
+            </tr>
+          </thead>
+          <tbody>
+            {headers && headers.length
+              ? headers.map((header) => {
+                  return (
+                    <tr key={header.uid}>
+                      <td>
+                        <SingleLineEditor
+                          value={header.name}
+                          theme={storedTheme}
+                          onSave={onSave}
+                          onChange={(newValue) =>
+                            handleHeaderValueChange(
+                              {
+                                target: {
+                                  value: newValue
+                                }
+                              },
+                              header,
+                              'name'
+                            )
+                          }
+                          autocomplete={headerAutoCompleteList}
+                          onRun={handleRun}
+                          collection={collection}
                        />
-                        <button tabIndex="-1" onClick={() => handleRemoveHeader(header)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
+                      </td>
+                      <td>
+                        <SingleLineEditor
+                          value={header.value}
+                          theme={storedTheme}
+                          onSave={onSave}
+                          onChange={(newValue) =>
+                            handleHeaderValueChange(
+                              {
+                                target: {
+                                  value: newValue
+                                }
+                              },
+                              header,
+                              'value'
+                            )
+                          }
+                          onRun={handleRun}
+                          collection={collection}
+                        />
+                      </td>
+                      <td>
+                        <div className="flex items-center">
+                          <input
+                            type="checkbox"
+                            checked={header.enabled}
+                            tabIndex="-1"
+                            className="mr-3 mousetrap"
+                            onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
+                          />
+                          <button tabIndex="-1" onClick={() => handleRemoveHeader(header)}>
+                            <IconTrash strokeWidth={1.5} size={20} />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              : null}
+          </tbody>
+          <div ref={ref} />
+        </table>
+      </div>
      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
        + Add Header
      </button>
--- a/packages/bruno-app/src/components/RequestPane/Script/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Script/index.js
@ -38,7 +38,7 @@ const Script = ({ item, collection }) => {
  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));

  return (
-    <StyledWrapper className="w-full flex flex-col">
+    <StyledWrapper className="w-full h-1/2 flex flex-col">
      <div className="flex-1 mt-2">
        <div className="mb-1 title text-xs">Pre Request</div>
        <CodeEditor
--- a/packages/bruno-app/src/components/RequestTabPanel/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/index.js
@ -150,7 +150,7 @@ const RequestTabPanel = () => {
      <div className="pt-4 pb-3 px-4">
        <QueryUrl item={item} collection={collection} handleRun={handleRun} />
      </div>
-      <section className="main flex flex-grow pb-4 relative">
+      <section className="main flex flex-grow relative">
        <section className="request-pane">
          <div
            className="px-4"
--- a/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js
@ -2,7 +2,6 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  table {
-    width: 100%;
    border-collapse: collapse;

    thead {
--- a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
@ -1,6 +1,8 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
+  height: 80vh;
+  overflow-y: auto;
  div.tabs {
    div.tab {
      padding: 6px 0px;
--- a/packages/bruno-app/src/components/TextareaEditor/StyledTextarea.js
+++ b/packages/bruno-app/src/components/TextareaEditor/StyledTextarea.js
@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+const StyledTextarea = styled.textarea`
+  height: inherit;
+  background: ${(props) => props.theme.bg};
+  color: ${(props) => props.theme.text};
+  border: solid 1px ${(props) => props.theme.modal.input.border};
+  padding: 1em;
+  resize: none;
+
+  &:focus,
+  &:active,
+  &:focus-within,
+  &:focus-visible,
+  &:target {
+    border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+    outline: ${(props) => props.theme.modal.input.focusBorder} !important;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0px;
+  }
+
+  ::-webkit-scrollbar-button {
+    display: none;
+  }
+`;
+
+export default StyledTextarea;
--- a/packages/bruno-app/src/components/TextareaEditor/index.js
+++ b/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;
--- a/packages/bruno-app/src/pageComponents/Index/index.js
+++ b/packages/bruno-app/src/pageComponents/Index/index.js
@ -9,6 +9,7 @@ import StyledWrapper from './StyledWrapper';
 import 'codemirror/theme/material.css';
 import 'codemirror/theme/monokai.css';
 import 'codemirror/addon/scroll/simplescrollbars.css';
+import Documentation from 'components/Documentation';

 const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 if (!SERVER_RENDERED) {
@ -56,7 +57,7 @@ export default function Main() {
    <div>
      <StyledWrapper className={className}>
        <Sidebar />
-        <section className="flex flex-grow flex-col overflow-auto">
+        <section className="flex flex-grow flex-col overflow-hidden">
          {showHomePage ? (
            <Welcome />
          ) : (
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
@ -1337,6 +1337,20 @@ export const collectionsSlice = createSlice({
      if (collection) {
        collection.runnerResult = null;
      }
+    },
+    updateRequestDocs: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+
+        if (item && isItemARequest(item)) {
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+          item.draft.request.docs = action.payload.docs;
+        }
+      }
    }
  }
 });
@ -1413,7 +1427,8 @@ export const {
  resetRunResults,
  runRequestEvent,
  runFolderEvent,
-  resetCollectionRunner
+  resetCollectionRunner,
+  updateRequestDocs
 } = collectionsSlice.actions;

 export default collectionsSlice.reducer;
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@ -223,6 +223,7 @@ const darkTheme = {
  table: {
    border: '#333',
    thead: {
+      bg: '#4d4d4d',
      color: 'rgb(204, 204, 204)'
    },
    striped: '#2A2D2F',
@ -233,6 +234,11 @@ const darkTheme = {

  plainGrid: {
    hoverBg: '#3D3D3D'
+  },
+
+  rightPane: {
+    bg: '#1e1e1e',
+    border: '#4f4f4f'
  }
 };

--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@ -227,6 +227,7 @@ const lightTheme = {
  table: {
    border: '#efefef',
    thead: {
+      bg: '#f4f4f4',
      color: '#616161'
    },
    striped: '#f3f3f3',
@ -237,6 +238,11 @@ const lightTheme = {

  plainGrid: {
    hoverBg: '#f4f4f4'
+  },
+
+  rightPane: {
+    bg: '#fff',
+    border: '#e1e1e1'
  }
 };

--- a/packages/bruno-app/src/utils/collections/index.js
+++ b/packages/bruno-app/src/utils/collections/index.js
@ -384,7 +384,8 @@ export const transformRequestToSaveToFilesystem = (item) => {
      script: _item.request.script,
      vars: _item.request.vars,
      assertions: _item.request.assertions,
-      tests: _item.request.tests
+      tests: _item.request.tests,
+      docs: _item.request.docs
    }
  };

--- a/packages/bruno-electron/src/bru/index.js
+++ b/packages/bruno-electron/src/bru/index.js
@ -116,7 +116,8 @@ const bruToJson = (bru) => {
        script: _.get(json, 'script', {}),
        vars: _.get(json, 'vars', {}),
        assertions: _.get(json, 'assertions', []),
-        tests: _.get(json, 'tests', '')
+        tests: _.get(json, 'tests', ''),
+        docs: _.get(json, 'docs', '')
      }
    };

@ -169,7 +170,8 @@ const jsonToBru = (json) => {
      res: _.get(json, 'request.vars.res', [])
    },
    assertions: _.get(json, 'request.assertions', []),
-    tests: _.get(json, 'request.tests', '')
+    tests: _.get(json, 'request.tests', ''),
+    docs: _.get(json, 'request.docs', '')
  };

  return jsonToBruV2(bruJson);
--- a/packages/bruno-schema/src/collections/index.js
+++ b/packages/bruno-schema/src/collections/index.js
@ -127,7 +127,8 @@ const requestSchema = Yup.object({
    .strict()
    .nullable(),
  assertions: Yup.array().of(keyValueSchema).nullable(),
-  tests: Yup.string().nullable()
+  tests: Yup.string().nullable(),
+  docs: Yup.string().nullable()
 })
  .noUnknown(true)
  .strict();