remove read only pairs from all kvp editors (#7351)

* remove read only pairs from all kvp edits

* move const
This commit is contained in:
Jack Kavanagh 2024-05-01 18:07:23 +02:00 committed by GitHub
parent f7b9302e1b
commit 5fb3fc685d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 18 deletions

View File

@ -2,6 +2,7 @@ import React, { FC, useCallback } from 'react';
import { useParams, useRouteLoaderData } from 'react-router-dom'; import { useParams, useRouteLoaderData } from 'react-router-dom';
import { getCommonHeaderNames, getCommonHeaderValues } from '../../../common/common-headers'; import { getCommonHeaderNames, getCommonHeaderValues } from '../../../common/common-headers';
import { generateId } from '../../../common/misc';
import type { RequestHeader } from '../../../models/request'; import type { RequestHeader } from '../../../models/request';
import { isWebSocketRequest } from '../../../models/websocket-request'; import { isWebSocketRequest } from '../../../models/websocket-request';
import { useRequestPatcher } from '../../hooks/use-request'; import { useRequestPatcher } from '../../hooks/use-request';
@ -13,7 +14,17 @@ interface Props {
bulk: boolean; bulk: boolean;
isDisabled?: boolean; isDisabled?: boolean;
} }
const readOnlyWebsocketPairs = [
{ name: 'Connection', value: 'Upgrade' },
{ name: 'Upgrade', value: 'websocket' },
{ name: 'Sec-WebSocket-Key', value: '<calculated at runtime>' },
{ name: 'Sec-WebSocket-Version', value: '13' },
{ name: 'Sec-WebSocket-Extensions', value: 'permessage-deflate; client_max_window_bits' },
].map(pair => ({ ...pair, id: generateId('pair') }));
const readOnlyHttpPairs = [
{ name: 'Accept', value: '*/*' },
{ name: 'Host', value: '<calculated at runtime>' },
].map(pair => ({ ...pair, id: generateId('pair') }));
export const RequestHeadersEditor: FC<Props> = ({ export const RequestHeadersEditor: FC<Props> = ({
bulk, bulk,
isDisabled, isDisabled,
@ -87,7 +98,7 @@ export const RequestHeadersEditor: FC<Props> = ({
handleGetAutocompleteValueConstants={getCommonHeaderValues} handleGetAutocompleteValueConstants={getCommonHeaderValues}
onChange={onChangeHeaders} onChange={onChangeHeaders}
isDisabled={isDisabled} isDisabled={isDisabled}
isWebSocketRequest={isWebSocketRequest(activeRequest)} readOnlyPairs={isWebSocketRequest(activeRequest) ? readOnlyWebsocketPairs : readOnlyHttpPairs}
/> />
); );
}; };

View File

@ -31,7 +31,6 @@ interface Props {
handleGetAutocompleteNameConstants?: AutocompleteHandler; handleGetAutocompleteNameConstants?: AutocompleteHandler;
handleGetAutocompleteValueConstants?: AutocompleteHandler; handleGetAutocompleteValueConstants?: AutocompleteHandler;
isDisabled?: boolean; isDisabled?: boolean;
isWebSocketRequest?: boolean;
namePlaceholder?: string; namePlaceholder?: string;
onChange: (c: { onChange: (c: {
name: string; name: string;
@ -42,6 +41,7 @@ interface Props {
pairs: Pair[]; pairs: Pair[];
valuePlaceholder?: string; valuePlaceholder?: string;
onBlur?: (e: FocusEvent) => void; onBlur?: (e: FocusEvent) => void;
readOnlyPairs?: Pair[];
} }
export const KeyValueEditor: FC<Props> = ({ export const KeyValueEditor: FC<Props> = ({
@ -52,30 +52,17 @@ export const KeyValueEditor: FC<Props> = ({
handleGetAutocompleteNameConstants, handleGetAutocompleteNameConstants,
handleGetAutocompleteValueConstants, handleGetAutocompleteValueConstants,
isDisabled, isDisabled,
isWebSocketRequest,
namePlaceholder, namePlaceholder,
onChange, onChange,
pairs, pairs,
valuePlaceholder, valuePlaceholder,
onBlur, onBlur,
readOnlyPairs,
}) => { }) => {
// We should make the pair.id property required and pass them in from the parent // We should make the pair.id property required and pass them in from the parent
// smelly // smelly
const pairsWithIds = pairs.map(pair => ({ ...pair, id: pair.id || generateId('pair') })); const pairsWithIds = pairs.map(pair => ({ ...pair, id: pair.id || generateId('pair') }));
const readOnlyWebsocketPairs = [
{ name: 'Connection', value: 'Upgrade' },
{ name: 'Upgrade', value: 'websocket' },
{ name: 'Sec-WebSocket-Key', value: '<calculated at runtime>' },
{ name: 'Sec-WebSocket-Version', value: '13' },
{ name: 'Sec-WebSocket-Extensions', value: 'permessage-deflate; client_max_window_bits' },
].map(pair => ({ ...pair, id: generateId('pair') }));
const readOnlyHttpPairs = [
{ name: 'Accept', value: '*/*' },
{ name: 'Host', value: '<calculated at runtime>' },
].map(pair => ({ ...pair, id: generateId('pair') }));
const readOnlyPairs = isWebSocketRequest ? readOnlyWebsocketPairs : readOnlyHttpPairs;
const [showDescription, setShowDescription] = React.useState(false); const [showDescription, setShowDescription] = React.useState(false);
return ( return (
@ -129,7 +116,7 @@ export const KeyValueEditor: FC<Props> = ({
addPair={() => { }} addPair={() => { }}
/> />
)} )}
{readOnlyPairs.map(pair => ( {(readOnlyPairs || []).map(pair => (
<li key={pair.id} className="key-value-editor__row-wrapper"> <li key={pair.id} className="key-value-editor__row-wrapper">
<div className="key-value-editor__row"> <div className="key-value-editor__row">
<div className="form-control form-control--underlined form-control--wide"> <div className="form-control form-control--underlined form-control--wide">