feat: documentation to be opened alongside params/auth/headers/body

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

@@ -1,6 +1,15 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  width: 350px;
+  min-width: 350px;
+  height: 100%;
+  border-left: 1px solid #333;
+  display: flex;
+  flex-direction: column;
+  background-color: #1e1e1e;
+  padding: 1.25rem;
+
   .editing-mode {
     cursor: pointer;
   }

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

@@ -37,6 +37,10 @@ const Wrapper = styled.div`
     position: relative;
     display: inline-block;
     cursor: pointer;
+
+    &.active svg {
+      color: ${props => props.theme.colors.text.yellow} !important;
+    }
   }
 
   .infotip:hover .infotiptext {

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

@@ -5,14 +5,14 @@ import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/sli
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import HttpMethodSelector from './HttpMethodSelector';
 import { useTheme } from 'providers/Theme';
-import { IconDeviceFloppy, IconArrowRight, IconCode } from '@tabler/icons';
+import { IconDeviceFloppy, IconArrowRight, IconCode, IconBook } from '@tabler/icons';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { isMacOS } from 'utils/common/platform';
 import StyledWrapper from './StyledWrapper';
 import GenerateCodeItem from 'components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index';
 import toast from 'react-hot-toast';
 
-const QueryUrl = ({ item, collection, handleRun }) => {
+const QueryUrl = ({ item, collection, handleRun, showDocsPanel, toggleDocsPanel }) => {
   const { theme, storedTheme } = useTheme();
   const dispatch = useDispatch();
   const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
@@ -111,6 +111,25 @@ const QueryUrl = ({ item, collection, handleRun }) => {
           item={item}
         />
         <div className="flex items-center h-full mr-2 cursor-pointer" id="send-request" onClick={handleRun}>
+          {typeof showDocsPanel !== 'undefined' && typeof toggleDocsPanel === 'function' && (
+            <div
+              className={`infotip mr-3 ${showDocsPanel ? 'active' : ''}`}
+              onClick={e => {
+                e.stopPropagation();
+                toggleDocsPanel();
+              }}
+            >
+              <IconBook
+                color={showDocsPanel ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+                strokeWidth={1.5}
+                size={22}
+                className="cursor-pointer"
+              />
+              <span className="infotiptext text-xs">
+                Documentation
+              </span>
+            </div>
+          )}
           <div
             title="Generate Code"
             className="infotip mr-3"

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

@@ -29,6 +29,7 @@ import CollectionOverview from 'components/CollectionSettings/Overview';
 import RequestNotLoaded from './RequestNotLoaded';
 import RequestIsLoading from './RequestIsLoading';
 import FolderNotFound from './FolderNotFound';
+import Documentation from 'components/Documentation';
 
 const MIN_LEFT_PANE_WIDTH = 300;
 const MIN_RIGHT_PANE_WIDTH = 350;
@@ -47,6 +48,8 @@ const RequestTabPanel = () => {
   const _collections = useSelector((state) => state.collections.collections);
   const preferences = useSelector((state) => state.app.preferences);
   const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
+  const [showDocsPanel, setShowDocsPanel] = useState(false);
+  const toggleDocsPanel = () => setShowDocsPanel(v => !v);
 
   // merge `globalEnvironmentVariables` into the active collection and rebuild `collections` immer proxy object
   let collections = produce(_collections, (draft) => {
@@ -254,7 +257,13 @@ const RequestTabPanel = () => {
         {isGrpcRequest ? (
           <GrpcQueryUrl item={item} collection={collection} handleRun={handleRun} />
         ) : (
-          <QueryUrl item={item} collection={collection} handleRun={handleRun} />
+          <QueryUrl
+            item={item}
+            collection={collection}
+            handleRun={handleRun}
+            showDocsPanel={showDocsPanel}
+            toggleDocsPanel={toggleDocsPanel}
+          />
         )}
       </div>
       <section ref={mainSectionRef} className={`main flex ${isVerticalLayout ? 'flex-col' : ''} flex-grow pb-4 relative overflow-auto`}>
@@ -298,7 +307,6 @@ const RequestTabPanel = () => {
             <GrpcResponsePane
               item={item}
               collection={collection}
-
               response={item.response}
             />
           ) : (
@@ -309,6 +317,11 @@ const RequestTabPanel = () => {
             />
           )}
         </section>
+        {showDocsPanel && (
+          <section className="docs-pane">
+            <Documentation item={item} collection={collection} />
+          </section>
+        )}
       </section>
 
       {item.type === 'graphql-request' ? (