extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2025-06-21 20:41:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

revert: #463 - style and right pane updates

Browse Source
This commit is contained in:
Anoop M D 2023-10-13 04:25:22 +05:30
parent 1087cacdb0
commit 625a19e86c
14 changed files with 173 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js
View File

@ -1,16 +1,6 @@
import styled from 'styled-components'; import styled from 'styled-components';
const Wrapper = styled.div` const Wrapper = styled.div`
.scroll {
::-webkit-scrollbar {
width: 0px;
}
::-webkit-scrollbar-button {
display: none;
}
}
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;

73
packages/bruno-app/src/components/RequestPane/Assertions/index.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from 'react'; import React from 'react';
import get from 'lodash/get'; import get from 'lodash/get';
import cloneDeep from 'lodash/cloneDeep'; import cloneDeep from 'lodash/cloneDeep';
import { useDispatch } from 'react-redux'; 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 { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
import AssertionRow from './AssertionRow'; import AssertionRow from './AssertionRow';
import StyledWrapper from './StyledWrapper'; import StyledWrapper from './StyledWrapper';
import { useTheme } from 'providers/Theme/index';
const Assertions = ({ item, collection }) => { const Assertions = ({ item, collection }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { theme } = useTheme();
const assertions = item.draft ? get(item, 'draft.request.assertions') : get(item, 'request.assertions'); 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 = () => { const handleAddAssertion = () => {
dispatch( dispatch(
addAssertion({ addAssertion({
@ -71,37 +59,34 @@ const Assertions = ({ item, collection }) => {
return ( return (
<StyledWrapper className="w-full"> <StyledWrapper className="w-full">
<div className="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}> <table>
<table> <thead>
<thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}> <tr>
<tr> <td>Expr</td>
<td>Expr</td> <td>Operator</td>
<td>Operator</td> <td>Value</td>
<td>Value</td> <td></td>
<td></td> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {assertions && assertions.length
{assertions && assertions.length ? assertions.map((assertion) => {
? assertions.map((assertion) => { return (
return ( <AssertionRow
<AssertionRow key={assertion.uid}
key={assertion.uid} assertion={assertion}
assertion={assertion} item={item}
item={item} collection={collection}
collection={collection} handleAssertionChange={handleAssertionChange}
handleAssertionChange={handleAssertionChange} handleRemoveAssertion={handleRemoveAssertion}
handleRemoveAssertion={handleRemoveAssertion} onSave={onSave}
onSave={onSave} handleRun={handleRun}
handleRun={handleRun} />
/> );
); })
}) : null}
: null} </tbody>
</tbody> </table>
</table>
<div ref={ref} />
</div>
<button className="btn-add-assertion text-link pr-2 py-3 mt-2 select-none" onClick={handleAddAssertion}> <button className="btn-add-assertion text-link pr-2 py-3 mt-2 select-none" onClick={handleAddAssertion}>
+ Add Assertion + Add Assertion
</button> </button>

10
packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
View File

@ -1,16 +1,6 @@
import styled from 'styled-components'; import styled from 'styled-components';
const Wrapper = styled.div` const Wrapper = styled.div`
.scroll {
::-webkit-scrollbar {
width: 0px;
}
::-webkit-scrollbar-button {
display: none;
}
}
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;

142
packages/bruno-app/src/components/RequestPane/QueryParams/index.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from 'react'; import React from 'react';
import get from 'lodash/get'; import get from 'lodash/get';
import cloneDeep from 'lodash/cloneDeep'; import cloneDeep from 'lodash/cloneDeep';
import { IconTrash } from '@tabler/icons'; import { IconTrash } from '@tabler/icons';
@ -12,17 +12,8 @@ import StyledWrapper from './StyledWrapper';
const QueryParams = ({ item, collection }) => { const QueryParams = ({ item, collection }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { storedTheme, theme } = useTheme(); const { storedTheme } = useTheme();
const params = item.draft ? get(item, 'draft.request.params') : get(item, 'request.params'); 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 = () => { const handleAddParam = () => {
dispatch( dispatch(
@ -74,74 +65,71 @@ const QueryParams = ({ item, collection }) => {
return ( return (
<StyledWrapper className="w-full"> <StyledWrapper className="w-full">
<div className="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}> <table>
<table> <thead>
<thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}> <tr>
<tr> <td>Name</td>
<td>Name</td> <td>Value</td>
<td>Value</td> <td></td>
<td></td> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {params && params.length
{params && params.length ? params.map((param, index) => {
? params.map((param, index) => { return (
return ( <tr key={param.uid}>
<tr key={param.uid}> <td>
<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 <input
type="text" type="checkbox"
autoComplete="off" checked={param.enabled}
autoCorrect="off" tabIndex="-1"
autoCapitalize="off" className="mr-3 mousetrap"
spellCheck="false" onChange={(e) => handleParamChange(e, param, 'enabled')}
value={param.name}
className="mousetrap"
onChange={(e) => handleParamChange(e, param, 'name')}
/> />
</td> <button tabIndex="-1" onClick={() => handleRemoveParam(param)}>
<td> <IconTrash strokeWidth={1.5} size={20} />
<SingleLineEditor </button>
value={param.value} </div>
theme={storedTheme} </td>
onSave={onSave} </tr>
onChange={(newValue) => );
handleParamChange( })
{ : null}
target: { </tbody>
value: newValue </table>
}
},
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}> <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleAddParam}>
+&nbsp;<span>Add Param</span> +&nbsp;<span>Add Param</span>
</button> </button>

10
packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
View File

@ -1,16 +1,6 @@
import styled from 'styled-components'; import styled from 'styled-components';
const Wrapper = styled.div` const Wrapper = styled.div`
.scroll {
::-webkit-scrollbar {
width: 0px;
}
::-webkit-scrollbar-button {
display: none;
}
}
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;

163
packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from 'react'; import React from 'react';
import get from 'lodash/get'; import get from 'lodash/get';
import cloneDeep from 'lodash/cloneDeep'; import cloneDeep from 'lodash/cloneDeep';
import { IconTrash } from '@tabler/icons'; import { IconTrash } from '@tabler/icons';
@ -13,19 +13,9 @@ const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
const RequestHeaders = ({ item, collection }) => { const RequestHeaders = ({ item, collection }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { storedTheme, theme } = useTheme(); const { storedTheme } = useTheme();
const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers'); 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 = () => { const addHeader = () => {
dispatch( dispatch(
addRequestHeader({ addRequestHeader({
@ -74,83 +64,80 @@ const RequestHeaders = ({ item, collection }) => {
return ( return (
<StyledWrapper className="w-full"> <StyledWrapper className="w-full">
<div class="scroll" style={{ maxHeight: '55vh', overflowY: 'auto' }}> <table>
<table> <thead>
<thead style={{ backgroundColor: theme.table.thead.bg, position: 'sticky', top: -1, zIndex: 2 }}> <tr>
<tr> <td>Name</td>
<td>Name</td> <td>Value</td>
<td>Value</td> <td></td>
<td></td> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {headers && headers.length
{headers && headers.length ? headers.map((header) => {
? headers.map((header) => { return (
return ( <tr key={header.uid}>
<tr key={header.uid}> <td>
<td> <SingleLineEditor
<SingleLineEditor value={header.name}
value={header.name} theme={storedTheme}
theme={storedTheme} onSave={onSave}
onSave={onSave} onChange={(newValue) =>
onChange={(newValue) => handleHeaderValueChange(
handleHeaderValueChange( {
{ target: {
target: { value: newValue
value: newValue }
} },
}, header,
header, 'name'
'name' )
) }
} autocomplete={headerAutoCompleteList}
autocomplete={headerAutoCompleteList} onRun={handleRun}
onRun={handleRun} collection={collection}
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')}
/> />
</td> <button tabIndex="-1" onClick={() => handleRemoveHeader(header)}>
<td> <IconTrash strokeWidth={1.5} size={20} />
<SingleLineEditor </button>
value={header.value} </div>
theme={storedTheme} </td>
onSave={onSave} </tr>
onChange={(newValue) => );
handleHeaderValueChange( })
{ : null}
target: { </tbody>
value: newValue </table>
}
},
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}> <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
+ Add Header + Add Header
</button> </button>

2
packages/bruno-app/src/components/RequestPane/Script/index.js
View File

@ -38,7 +38,7 @@ const Script = ({ item, collection }) => {
const onSave = () => dispatch(saveRequest(item.uid, collection.uid)); const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
return ( 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="flex-1 mt-2">
<div className="mb-1 title text-xs">Pre Request</div> <div className="mb-1 title text-xs">Pre Request</div>
<CodeEditor <CodeEditor

2
packages/bruno-app/src/components/RequestTabPanel/index.js
View File

@ -150,7 +150,7 @@ const RequestTabPanel = () => {
<div className="pt-4 pb-3 px-4"> <div className="pt-4 pb-3 px-4">
<QueryUrl item={item} collection={collection} handleRun={handleRun} /> <QueryUrl item={item} collection={collection} handleRun={handleRun} />
</div> </div>
<section className="main flex flex-grow relative"> <section className="main flex flex-grow pb-4 relative">
<section className="request-pane"> <section className="request-pane">
<div <div
className="px-4" className="px-4"

1
packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js
View File

@ -2,6 +2,7 @@ import styled from 'styled-components';
const Wrapper = styled.div` const Wrapper = styled.div`
table { table {
width: 100%;
border-collapse: collapse; border-collapse: collapse;
thead { thead {

2
packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
View File

@ -1,8 +1,6 @@
import styled from 'styled-components'; import styled from 'styled-components';
const StyledWrapper = styled.div` const StyledWrapper = styled.div`
height: 80vh;
overflow-y: auto;
div.tabs { div.tabs {
div.tab { div.tab {
padding: 6px 0px; padding: 6px 0px;

8
packages/bruno-app/src/components/TextareaEditor/StyledTextarea.js
View File

@ -16,14 +16,6 @@ const StyledTextarea = styled.textarea`
border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important; border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
outline: ${(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; export default StyledTextarea;

2
packages/bruno-app/src/pageComponents/Index/index.js
View File

@ -57,7 +57,7 @@ export default function Main() {
<div> <div>
<StyledWrapper className={className}> <StyledWrapper className={className}>
<Sidebar /> <Sidebar />
<section className="flex flex-grow flex-col overflow-hidden"> <section className="flex flex-grow flex-col overflow-auto">
{showHomePage ? ( {showHomePage ? (
<Welcome /> <Welcome />
) : ( ) : (

1
packages/bruno-app/src/themes/dark.js
View File

@ -223,7 +223,6 @@ const darkTheme = {
table: { table: {
border: '#333', border: '#333',
thead: { thead: {
bg: '#4d4d4d',
color: 'rgb(204, 204, 204)' color: 'rgb(204, 204, 204)'
}, },
striped: '#2A2D2F', striped: '#2A2D2F',

1
packages/bruno-app/src/themes/light.js
View File

@ -227,7 +227,6 @@ const lightTheme = {
table: { table: {
border: '#efefef', border: '#efefef',
thead: { thead: {
bg: '#f4f4f4',
color: '#616161' color: '#616161'
}, },
striped: '#f3f3f3', striped: '#f3f3f3',