revert: #463 - style and right pane updates

2025-01-11 00:18:46 +01:00 · 2023-10-13 04:25:22 +05:30 · 2023-10-13 04:25:22 +05:30 · 625a19e86c
commit 625a19e86c
parent 1087cacdb0
14 changed files with 173 additions and 254 deletions
--- a/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js
@ -1,16 +1,6 @@
 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, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { useDispatch } from 'react-redux';
@ -6,23 +6,11 @@ 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({
@ -71,9 +59,8 @@ const Assertions = ({ item, collection }) => {

  return (
    <StyledWrapper className="w-full">
-      <div className="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
      <table>
-          <thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
+        <thead>
          <tr>
            <td>Expr</td>
            <td>Operator</td>
@ -100,8 +87,6 @@ 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,16 +1,6 @@
 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, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
@ -12,17 +12,8 @@ import StyledWrapper from './StyledWrapper';

 const QueryParams = ({ item, collection }) => {
  const dispatch = useDispatch();
-  const { storedTheme, theme } = useTheme();
+  const { storedTheme } = 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(
@ -74,9 +65,8 @@ const QueryParams = ({ item, collection }) => {

  return (
    <StyledWrapper className="w-full">
-      <div className="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
      <table>
-          <thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
+        <thead>
          <tr>
            <td>Name</td>
            <td>Value</td>
@ -140,8 +130,6 @@ 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/RequestHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
@ -1,16 +1,6 @@
 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, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
@ -13,19 +13,9 @@ const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);

 const RequestHeaders = ({ item, collection }) => {
  const dispatch = useDispatch();
-  const { storedTheme, theme } = useTheme();
+  const { storedTheme } = 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({
@ -74,9 +64,8 @@ const RequestHeaders = ({ item, collection }) => {

  return (
    <StyledWrapper className="w-full">
-      <div class="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}>
      <table>
-          <thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}>
+        <thead>
          <tr>
            <td>Name</td>
            <td>Value</td>
@ -148,9 +137,7 @@ 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 h-1/2 flex flex-col">
+    <StyledWrapper className="w-full 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 relative">
+      <section className="main flex flex-grow pb-4 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,6 +2,7 @@ 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,8 +1,6 @@
 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
@ -16,14 +16,6 @@ const StyledTextarea = styled.textarea`
    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/pageComponents/Index/index.js
+++ b/packages/bruno-app/src/pageComponents/Index/index.js
@ -57,7 +57,7 @@ export default function Main() {
    <div>
      <StyledWrapper className={className}>
        <Sidebar />
-        <section className="flex flex-grow flex-col overflow-hidden">
+        <section className="flex flex-grow flex-col overflow-auto">
          {showHomePage ? (
            <Welcome />
          ) : (
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@ -223,7 +223,6 @@ const darkTheme = {
  table: {
    border: '#333',
    thead: {
-      bg: '#4d4d4d',
      color: 'rgb(204, 204, 204)'
    },
    striped: '#2A2D2F',
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@ -227,7 +227,6 @@ const lightTheme = {
  table: {
    border: '#efefef',
    thead: {
-      bg: '#f4f4f4',
      color: '#616161'
    },
    striped: '#f3f3f3',