feat: more request and response pane ui responsive

2023-10-08 10:00:27 +07:00 · 2023-10-08 10:00:27 +07:00 · 250227a134
commit 250227a134
parent 36caa5c2d3
11 changed files with 254 additions and 172 deletions
--- 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,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>
--- 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,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>
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
+++ b/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>
  );
 };
--- 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,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>
--- 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;