Show HTTP trailers when present

Author: pimterry

src/components/view/http/http-details-pane.tsx

@@ -27,6 +27,7 @@ import { HttpApiCard, HttpApiPlaceholderCard } from './http-api-card';
 import { HttpRequestCard } from './http-request-card';
 import { HttpResponseCard } from './http-response-card';
 import { HttpAbortedResponseCard } from './http-aborted-card';
+import { HttpTrailersCard } from './http-trailers-card';
 import { HttpPerformanceCard } from './http-performance-card';
 import { HttpExportCard } from './http-export-card';
 import { SelfSizedEditor } from '../../editor/base-editor';
@@ -303,6 +304,16 @@ export class HttpDetailsPane extends React.Component<{
             cards.push(this.renderRequestBody(exchange, apiExchange));
         }
 
+        if (exchange.request.rawTrailers?.length) {
+            cards.push(<HttpTrailersCard
+                {...this.cardProps.requestTrailers}
+                type='request'
+                httpVersion={exchange.httpVersion}
+                requestUrl={exchange.request.parsedUrl}
+                trailers={exchange.request.rawTrailers}
+            />);
+        }
+
         if (response === 'aborted') {
             cards.push(<HttpAbortedResponseCard
                 key={this.cardProps.response.key}
@@ -322,6 +333,16 @@ export class HttpDetailsPane extends React.Component<{
             if (exchange.hasResponseBody()) {
                 cards.push(this.renderResponseBody(exchange, apiExchange));
             }
+
+            if (exchange.isSuccessfulExchange() && exchange.response?.rawTrailers?.length) {
+                cards.push(<HttpTrailersCard
+                    {...this.cardProps.responseTrailers}
+                    type='response'
+                    httpVersion={exchange.httpVersion}
+                    requestUrl={exchange.request.parsedUrl}
+                    trailers={exchange.response.rawTrailers}
+                />);
+            }
         }
 
         if (exchange.isWebSocket() && exchange.wasAccepted()) {

src/components/view/http/http-trailers-card.tsx

@@ -0,0 +1,40 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+import { RawTrailers } from '../../../types';
+import { Theme } from '../../../styles';
+
+import {
+    CollapsibleCard,
+    CollapsibleCardProps,
+    CollapsibleCardHeading
+} from '../../common/card';
+import { HeaderDetails } from './header-details';
+
+interface HttpTrailersCardProps extends CollapsibleCardProps {
+    type: 'request' | 'response',
+    httpVersion: 1 | 2;
+    requestUrl: URL;
+    trailers: RawTrailers;
+}
+
+export const HttpTrailersCard = observer((props: HttpTrailersCardProps) => {
+    const { type, requestUrl, httpVersion, trailers } = props;
+
+    return <CollapsibleCard {...props} direction='left'>
+        <header>
+            <CollapsibleCardHeading onCollapseToggled={props.onCollapseToggled}>
+                { type === 'request' ? 'Request' : 'Response' } Trailers
+            </CollapsibleCardHeading>
+        </header>
+
+        <div>
+            <HeaderDetails
+                httpVersion={httpVersion}
+                headers={trailers}
+                requestUrl={requestUrl}
+            />
+        </div>
+    </CollapsibleCard>;
+});

src/model/http/exchange.ts

@@ -211,6 +211,7 @@ export class HttpExchange extends HTKEventBase {
                 this.request.parsedUrl.search
         ]
         .concat(..._.map(this.request.headers, (value, key) => `${key}: ${value}`))
+        .concat(..._.map(this.request.trailers, (value, key) => `${key}: ${value}`))
         .concat(this.request.method)
         .join('\n')
         .toLowerCase();
@@ -329,7 +330,8 @@ export class HttpExchange extends HTKEventBase {
             this.searchIndex,
             response.statusCode.toString(),
             response.statusMessage.toString(),
-            ..._.map(response.headers, (value, key) => `${key}: ${value}`)
+            ..._.map(response.headers, (value, key) => `${key}: ${value}`),
+            ..._.map(response.trailers, (value, key) => `${key}: ${value}`)
         ].join('\n').toLowerCase();
 
         // Wrap the API promise to also add this response data (but lazily)

src/model/ui/ui-store.ts

@@ -22,8 +22,10 @@ const VIEW_CARD_KEYS = [
 
     'request',
     'requestBody',
+    'requestTrailers',
     'response',
     'responseBody',
+    'responseTrailers',
 
     'webSocketMessages',
     'webSocketClose',
@@ -191,8 +193,10 @@ export class UiStore {
 
         'request': { collapsed: false },
         'requestBody': { collapsed: false },
+        'requestTrailers': { collapsed: false },
         'response': { collapsed: false },
         'responseBody': { collapsed: false },
+        'responseTrailers': { collapsed: false },
 
         'webSocketMessages': { collapsed: false },
         'webSocketClose': { collapsed: false },