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 { getCommonHeaderNames, getCommonHeaderValues } from '../../../common/common-headers';
import { generateId } from '../../../common/misc';
import type { RequestHeader } from '../../../models/request';
import { isWebSocketRequest } from '../../../models/websocket-request';
import { useRequestPatcher } from '../../hooks/use-request';
@ -13,7 +14,17 @@ interface Props {
bulk: 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> = ({
bulk,
isDisabled,
@ -87,7 +98,7 @@ export const RequestHeadersEditor: FC<Props> = ({
handleGetAutocompleteValueConstants={getCommonHeaderValues}
onChange={onChangeHeaders}
isDisabled={isDisabled}
isWebSocketRequest={isWebSocketRequest(activeRequest)}
readOnlyPairs={isWebSocketRequest(activeRequest) ? readOnlyWebsocketPairs : readOnlyHttpPairs}
/>
);
};

View File

@ -31,7 +31,6 @@ interface Props {
handleGetAutocompleteNameConstants?: AutocompleteHandler;
handleGetAutocompleteValueConstants?: AutocompleteHandler;
isDisabled?: boolean;
isWebSocketRequest?: boolean;
namePlaceholder?: string;
onChange: (c: {
name: string;
@ -42,6 +41,7 @@ interface Props {
pairs: Pair[];
valuePlaceholder?: string;
onBlur?: (e: FocusEvent) => void;
readOnlyPairs?: Pair[];
}
export const KeyValueEditor: FC<Props> = ({
@ -52,30 +52,17 @@ export const KeyValueEditor: FC<Props> = ({
handleGetAutocompleteNameConstants,
handleGetAutocompleteValueConstants,
isDisabled,
isWebSocketRequest,
namePlaceholder,
onChange,
pairs,
valuePlaceholder,
onBlur,
readOnlyPairs,
}) => {
// We should make the pair.id property required and pass them in from the parent
// smelly
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);
return (
@ -129,7 +116,7 @@ export const KeyValueEditor: FC<Props> = ({
addPair={() => { }}
/>
)}
{readOnlyPairs.map(pair => (
{(readOnlyPairs || []).map(pair => (
<li key={pair.id} className="key-value-editor__row-wrapper">
<div className="key-value-editor__row">
<div className="form-control form-control--underlined form-control--wide">