mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-24 17:03:47 +01:00
Refactor RequestHeaders component to improve code organization and user experience
This commit is contained in:
parent
8c6721de13
commit
44bfa4de6c
@ -30,6 +30,11 @@ const Wrapper = styled.div`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.unclickable {
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: ${(props) => props.theme.colors.text.muted};
|
||||||
|
}
|
||||||
|
|
||||||
.top-controls {
|
.top-controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: right;
|
justify-content: right;
|
||||||
|
@ -15,7 +15,6 @@ import SingleLineEditor from 'components/SingleLineEditor';
|
|||||||
import CodeEditor from 'components/CodeEditor';
|
import CodeEditor from 'components/CodeEditor';
|
||||||
import StyledWrapper from './StyledWrapper';
|
import StyledWrapper from './StyledWrapper';
|
||||||
import { headers as StandardHTTPHeaders } from 'know-your-http-well';
|
import { headers as StandardHTTPHeaders } from 'know-your-http-well';
|
||||||
import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
|
|
||||||
const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
|
const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
|
||||||
|
|
||||||
const RequestHeaders = ({ item, collection }) => {
|
const RequestHeaders = ({ item, collection }) => {
|
||||||
@ -25,12 +24,14 @@ const RequestHeaders = ({ item, collection }) => {
|
|||||||
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 addHeader = () => {
|
const addHeader = () => {
|
||||||
dispatch(
|
if (!bulkEdit) {
|
||||||
addRequestHeader({
|
dispatch(
|
||||||
itemUid: item.uid,
|
addRequestHeader({
|
||||||
collectionUid: collection.uid
|
itemUid: item.uid,
|
||||||
})
|
collectionUid: collection.uid
|
||||||
);
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
|
const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
|
||||||
@ -113,12 +114,19 @@ const RequestHeaders = ({ item, collection }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledWrapper className="w-full h-full flex flex-col flex-grow">
|
<StyledWrapper className="w-full h-full flex flex-col flex-grow">
|
||||||
<div className="top-controls mb-3">
|
<div className="top-controls mb-3 flex gap-4 ">
|
||||||
<button className="text-link select-none" onClick={toggleBulkEdit}>
|
<button className="text-link select-none " onClick={toggleBulkEdit}>
|
||||||
{bulkEdit ? 'Key/Value Edit' : 'Bulk Edit'}
|
{bulkEdit ? 'Key/Value Edit' : 'Bulk Edit'}
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
className={`text-link pr-3 select-none ${bulkEdit ? 'unclickable' : ''}`}
|
||||||
|
onClick={addHeader}
|
||||||
|
disabled={bulkEdit}
|
||||||
|
>
|
||||||
|
+ Add Header
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{bulkEdit && (
|
{bulkEdit ? (
|
||||||
<div className="bulk-editor flex-grow">
|
<div className="bulk-editor flex-grow">
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
mode="application/text"
|
mode="application/text"
|
||||||
@ -128,8 +136,7 @@ const RequestHeaders = ({ item, collection }) => {
|
|||||||
onEdit={handleBulkEdit}
|
onEdit={handleBulkEdit}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
) : (
|
||||||
{!bulkEdit && (
|
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -205,14 +212,8 @@ const RequestHeaders = ({ item, collection }) => {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
)}
|
)}
|
||||||
<div className="bottom-controls py-3 mt-2">
|
|
||||||
{!bulkEdit && (
|
|
||||||
<button className="text-link pr-3 select-none" onClick={addHeader}>
|
|
||||||
+ Add Header
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</StyledWrapper>
|
</StyledWrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default RequestHeaders;
|
export default RequestHeaders;
|
||||||
|
Loading…
Reference in New Issue
Block a user