Merge pull request #463 from donus3/feature/docs

Bruno Docs

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",

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;

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;

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;

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;

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;

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;

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,8 +71,9 @@ const Assertions = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="w-full">
+      <div className="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
         <table>
-        <thead>
+          <thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
             <tr>
               <td>Expr</td>
               <td>Operator</td>
@@ -87,6 +100,8 @@ const Assertions = ({ item, collection }) => {
               : 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>

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/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;

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,8 +74,9 @@ const QueryParams = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="w-full">
+      <div className="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
         <table>
-        <thead>
+          <thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
             <tr>
               <td>Name</td>
               <td>Value</td>
@@ -130,6 +140,8 @@ const QueryParams = ({ item, collection }) => {
               : 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>

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;

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,8 +74,9 @@ const RequestHeaders = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="w-full">
+      <div class="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
         <table>
-        <thead>
+          <thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
             <tr>
               <td>Name</td>
               <td>Value</td>
@@ -137,7 +148,9 @@ const RequestHeaders = ({ item, collection }) => {
                 })
               : 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>

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

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"

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 {

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;

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;

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

@@ -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 />
           ) : (

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;

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'
   }
 };
 

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'
   }
 };
 

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
     }
   };
 

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);

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();