revert: #463 - style and right pane updates

usebruno · Oct 12, 2023 · 625a19e · 625a19e
1 parent 1087cac
commit 625a19e
Show file tree

Hide file tree

Showing 14 changed files with 173 additions and 254 deletions.
diff --git 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;

diff --git a/packages/bruno-app/src/components/RequestPane/Assertions/index.js b/packages/bruno-app/src/components/RequestPane/Assertions/index.js
@@ -1,28 +1,16 @@
-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';
 import { addAssertion, updateAssertion, deleteAssertion } from 'providers/ReduxStore/slices/collections';
 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,37 +59,34 @@ 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 }}>
-            <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>
+      <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>
       <button className="btn-add-assertion text-link pr-2 py-3 mt-2 select-none" onClick={handleAddAssertion}>
         + Add Assertion
       </button>

diff --git 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;

diff --git 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,74 +65,71 @@ 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 }}>
-            <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>
+      <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">
                         <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}
+                          type="checkbox"
+                          checked={param.enabled}
+                          tabIndex="-1"
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleParamChange(e, param, 'enabled')}
                         />
-                      </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 tabIndex="-1" onClick={() => handleRemoveParam(param)}>
+                          <IconTrash strokeWidth={1.5} size={20} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </tbody>
+      </table>
       <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleAddParam}>
         +&nbsp;<span>Add Param</span>
       </button>

diff --git 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;