From 625a19e86c95962954e77d2bbb9f3f57bace9040 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Fri, 13 Oct 2023 04:25:22 +0530 Subject: [PATCH] revert: #463 - style and right pane updates --- .../RequestPane/Assertions/StyledWrapper.js | 10 -- .../RequestPane/Assertions/index.js | 73 ++++---- .../RequestPane/QueryParams/StyledWrapper.js | 10 -- .../RequestPane/QueryParams/index.js | 142 +++++++-------- .../RequestHeaders/StyledWrapper.js | 10 -- .../RequestPane/RequestHeaders/index.js | 163 ++++++++---------- .../components/RequestPane/Script/index.js | 2 +- .../src/components/RequestTabPanel/index.js | 2 +- .../ResponseHeaders/StyledWrapper.js | 1 + .../components/ResponsePane/StyledWrapper.js | 2 - .../TextareaEditor/StyledTextarea.js | 8 - .../src/pageComponents/Index/index.js | 2 +- packages/bruno-app/src/themes/dark.js | 1 - packages/bruno-app/src/themes/light.js | 1 - 14 files changed, 173 insertions(+), 254 deletions(-) diff --git a/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js index 773dbae583..4d7aafe3e3 100644 --- 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 index fab0db33d5..1805a632e1 100644 --- 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,37 +59,34 @@ const Assertions = ({ item, collection }) => { return ( -
- - - - - - - - - - - {assertions && assertions.length - ? assertions.map((assertion) => { - return ( - - ); - }) - : null} - -
ExprOperatorValue
-
-
+ + + + + + + + + + + {assertions && assertions.length + ? assertions.map((assertion) => { + return ( + + ); + }) + : null} + +
ExprOperatorValue
diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js index f45263ff67..d3dc58d5c3 100644 --- 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 index 51d46a36da..54e3ee0b36 100644 --- 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 ( -
- - - - - - - - - - {params && params.length - ? params.map((param, index) => { - return ( - - + + ); + }) + : null} + +
NameValue
+ + + + + + + + + + {params && params.length + ? params.map((param, index) => { + return ( + + + + - - - - ); - }) - : null} - -
NameValue
+ handleParamChange(e, param, 'name')} + /> + + + handleParamChange( + { + target: { + value: newValue + } + }, + param, + 'value' + ) + } + onRun={handleRun} + collection={collection} + /> + +
handleParamChange(e, param, 'name')} - /> -
- - 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')} /> - -
- handleParamChange(e, param, 'enabled')} - /> - -
-
-
-
+ + +
diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js index 497a6a1097..9f723cb81c 100644 --- 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; diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js index c6bb9f62ba..db8b20f5fd 100644 --- 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,83 +64,80 @@ const RequestHeaders = ({ item, collection }) => { return ( -
- - - - - - - - - - {headers && headers.length - ? headers.map((header) => { - return ( - - - + + ); + }) + : null} + +
NameValue
- - handleHeaderValueChange( - { - target: { - value: newValue - } - }, - header, - 'name' - ) - } - autocomplete={headerAutoCompleteList} - onRun={handleRun} - collection={collection} - /> - - - handleHeaderValueChange( - { - target: { - value: newValue - } - }, - header, - 'value' - ) - } - onRun={handleRun} - collection={collection} + + + + + + + + + + {headers && headers.length + ? headers.map((header) => { + return ( + + + + - - - ); - }) - : null} - -
-
NameValue
+ + handleHeaderValueChange( + { + target: { + value: newValue + } + }, + header, + 'name' + ) + } + autocomplete={headerAutoCompleteList} + onRun={handleRun} + collection={collection} + /> + + + handleHeaderValueChange( + { + target: { + value: newValue + } + }, + header, + 'value' + ) + } + onRun={handleRun} + collection={collection} + /> + +
+ handleHeaderValueChange(e, header, 'enabled')} /> -
-
- handleHeaderValueChange(e, header, 'enabled')} - /> - -
-
- + + +
diff --git a/packages/bruno-app/src/components/RequestPane/Script/index.js b/packages/bruno-app/src/components/RequestPane/Script/index.js index 750c12a4e8..75ee3d360f 100644 --- 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 ( - +
Pre Request
{
-
+
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; diff --git a/packages/bruno-app/src/pageComponents/Index/index.js b/packages/bruno-app/src/pageComponents/Index/index.js index 7648499362..480ea08f33 100644 --- 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() {
-
+
{showHomePage ? ( ) : ( diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js index 9ad9d6d841..730f4f8345 100644 --- 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', diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js index f4fe9f4d21..3e559c8e44 100644 --- 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',