rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-09 06:55:03 +00: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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;

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 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')}
type="checkbox"
checked={param.enabled}
tabIndex="-1"
className="mr-3 mousetrap"
onChange={(e) => handleParamChange(e, param, 'enabled')}
/>
</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="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>