Clarify EditableHeaders API a little

Author: pimterry

src/components/common/editable-headers.tsx

@@ -46,7 +46,7 @@ const stripPseudoHeadersAndLowercase = (headers: PairsArray): PairsArray =>
     }));
 
 interface EditableRawHeadersProps {
-    input: RawHeaders;
+    headers: RawHeaders;
     onChange: (headers: RawHeaders) => void;
 
     // It's unclear whether you're strictly allowed completely empty header values, but it's definitely
@@ -63,7 +63,7 @@ interface EditableRawHeadersProps {
 export const EditableRawHeaders = observer((
     props: EditableRawHeadersProps
 ) => {
-    const { input: headers, onChange, allowEmptyValues, preserveKeyCase } = props;
+    const { headers, onChange, allowEmptyValues, preserveKeyCase } = props;
 
     return <EditablePairs<RawHeaders>
         pairs={rawHeadersAsEditablePairs(headers)}
@@ -86,10 +86,10 @@ export const EditableRawHeaders = observer((
 });
 
 interface EditableHeadersProps<T> {
-    input: T,
+    headers: T;
 
-    convertInput: (input: T) => RawHeaders,
-    convertResult: (headers: RawHeaders) => T,
+    convertToRawHeaders: (input: T) => RawHeaders;
+    convertFromRawHeaders: (headers: RawHeaders) => T;
 
     onChange: (headers: T) => void;
     onInvalidState?: () => void;
@@ -108,18 +108,18 @@ interface EditableHeadersProps<T> {
 export class EditableHeaders<T> extends React.Component<EditableHeadersProps<T>> {
 
     @observable
-    private rawHeaders: RawHeaders = this.props.convertInput(this.props.input);
+    private rawHeaders: RawHeaders = this.props.convertToRawHeaders(this.props.headers);
 
-    private output: T = this.props.input;
+    private output: T = this.props.headers;
 
     componentDidMount() {
         // Watch the input, but only update our state if its materially different
         // to the last output we returned.
         disposeOnUnmount(this, reaction(
-            () => this.props.input,
+            () => this.props.headers,
             (input) => {
                 if (!_.isEqual(input, this.output)) {
-                    const newInput = this.props.convertInput(input);
+                    const newInput = this.props.convertToRawHeaders(input);
                     runInAction(() => {
                         this.rawHeaders = newInput;
                     });
@@ -132,16 +132,16 @@ export class EditableHeaders<T> extends React.Component<EditableHeadersProps<T>>
     onChangeRawHeaders(rawHeaders: RawHeaders) {
         this.rawHeaders = rawHeaders;
 
-        const { allowEmptyValues, convertResult, onChange, onInvalidState } = this.props;
+        const { allowEmptyValues, convertFromRawHeaders, onChange, onInvalidState } = this.props;
 
         if (allowEmptyValues) {
-            this.output = convertResult(rawHeaders);
+            this.output = convertFromRawHeaders(rawHeaders);
             onChange(this.output);
         } else {
             if (rawHeaders.some((([_, value]) => !value))) return onInvalidState?.();
             if (rawHeaders.some(([key]) => !key)) return onInvalidState?.();
 
-            this.output = convertResult(rawHeaders);
+            this.output = convertFromRawHeaders(rawHeaders);
             onChange(this.output);
         }
     }
@@ -151,7 +151,7 @@ export class EditableHeaders<T> extends React.Component<EditableHeadersProps<T>>
         const { rawHeaders, onChangeRawHeaders } = this;
 
         return <EditableRawHeaders
-            input={rawHeaders}
+            headers={rawHeaders}
             onChange={onChangeRawHeaders}
             allowEmptyValues={allowEmptyValues}
         />;

src/components/mock/handler-config.tsx

@@ -363,19 +363,20 @@ class StaticResponseHandlerConfig extends HandlerConfig<StaticResponseHandler |
             newValue: newContentType
         }) => {
             const contentTypeHeader = getHeaderValue(this.rawHeaders, 'content-type');
+            const expectedContentType = getDefaultMimeType(newContentType);
 
             if (!contentTypeHeader) {
                 // If you pick a body content type with no header set, we add one
                 runInAction(() => {
-                    this.rawHeaders.push(['content-type', getDefaultMimeType(newContentType)]);
+                    this.rawHeaders.push(['content-type', expectedContentType]);
                 });
             } else {
                 const headerContentType = getEditableContentType(contentTypeHeader);
 
                 // If the body type changes, and the old header matched the old type, update the header
                 if (previousContentType === headerContentType) {
                     runInAction(() => {
-                        setHeaderValue(this.rawHeaders, 'content-type', getDefaultMimeType(newContentType));
+                        setHeaderValue(this.rawHeaders, 'content-type', expectedContentType);
                     });
                 }
                 // If there is a header, but it didn't match the body, leave it as-is
@@ -427,7 +428,7 @@ class StaticResponseHandlerConfig extends HandlerConfig<StaticResponseHandler |
 
             <SectionLabel>Headers</SectionLabel>
             <EditableRawHeaders
-                input={rawHeaders}
+                headers={rawHeaders}
                 onChange={this.onHeadersChanged}
             />
 
@@ -577,9 +578,9 @@ class FromFileResponseHandlerConfig extends HandlerConfig<FromFileResponseHandle
 
             <SectionLabel>Headers</SectionLabel>
             <EditableHeaders
-                input={headers}
-                convertInput={headersToRawHeaders}
-                convertResult={rawHeadersToHeaders}
+                headers={headers}
+                convertToRawHeaders={headersToRawHeaders}
+                convertFromRawHeaders={rawHeadersToHeaders}
                 onChange={this.onHeadersChanged}
             />
 
@@ -990,7 +991,7 @@ class HeadersTransformConfig<T extends RequestTransform | ResponseTransform> ext
         const { type } = this.props;
         const {
             selected,
-            convertHeaderResult,
+            convertResultFromRawHeaders,
             onTransformTypeChange,
             setHeadersValue
         } = this;
@@ -1007,9 +1008,9 @@ class HeadersTransformConfig<T extends RequestTransform | ResponseTransform> ext
             {
                 selected !== 'none' && <TransformDetails>
                     <EditableHeaders
-                        input={this.headers}
-                        convertInput={headersToRawHeaders}
-                        convertResult={convertHeaderResult}
+                        headers={this.headers}
+                        convertToRawHeaders={headersToRawHeaders}
+                        convertFromRawHeaders={convertResultFromRawHeaders}
                         onChange={setHeadersValue}
                         allowEmptyValues={selected === 'updateHeaders'}
                     />
@@ -1018,7 +1019,7 @@ class HeadersTransformConfig<T extends RequestTransform | ResponseTransform> ext
         </TransformConfig>;
     }
 
-    convertHeaderResult = (headers: RawHeaders): Headers => {
+    convertResultFromRawHeaders = (headers: RawHeaders): Headers => {
         if (this.selected === 'updateHeaders') {
             return rawHeadersToHeaders(
                 headers.map(([key, value]) =>

src/components/mock/matcher-config.tsx

@@ -798,9 +798,9 @@ class HeaderMatcherConfig extends MatcherConfig<matchers.HeaderMatcher> {
                 </ConfigLabel>
             }
             <EditableHeaders<FlatHeaders>
-                input={headers}
-                convertInput={this.convertInput}
-                convertResult={this.convertResult}
+                headers={headers}
+                convertToRawHeaders={this.convertInput}
+                convertFromRawHeaders={this.convertResult}
                 onChange={this.onChange}
                 onInvalidState={this.props.onInvalidState}
             />

src/components/view/http/http-breakpoint-request-card.tsx

@@ -97,7 +97,7 @@ export class HttpBreakpointRequestCard extends React.Component<RequestBreakpoint
 
             <ContentLabelBlock>Headers</ContentLabelBlock>
             <EditableRawHeaders
-                input={headers}
+                headers={headers}
                 onChange={this.onHeadersChanged}
                 preserveKeyCase={true}
             />

src/components/view/http/http-breakpoint-response-card.tsx

@@ -67,7 +67,7 @@ export class HttpBreakpointResponseCard extends React.Component<ResponseBreakpoi
 
             <ContentLabelBlock>Headers</ContentLabelBlock>
             <EditableRawHeaders
-                input={headers}
+                headers={headers}
                 onChange={this.onHeadersChanged}
                 preserveKeyCase={true}
             />