Refactor RequestHeaders component to improve code organization and user experience

This commit is contained in:
Sanjai Kumar 2024-09-27 15:25:46 +05:30
parent 8c6721de13
commit 44bfa4de6c
2 changed files with 25 additions and 19 deletions

View File

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

View File

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