feat: more request and response pane ui responsive

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

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

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

@@ -9,6 +9,8 @@ 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();
@@ -49,6 +51,10 @@ 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">
@@ -92,6 +98,11 @@ 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/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,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>

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;