Show the HTTP version as a pill on request info

Author: pimterry

src/components/common/http-version-pill.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import { HtkRequest } from '../../types';
+import { styled } from '../../styles';
+
+import { Pill } from './pill';
+
+export const HttpVersionPill = styled(({ request, className }: {
+    request: HtkRequest
+    className?: string
+}) => request.httpVersion
+    ? <Pill
+        title={`The client sent this request using HTTP ${request.httpVersion}`}
+    >HTTP/{
+        request.httpVersion === '2.0'
+        ? '2'
+        : request.httpVersion
+    }</Pill>
+    : null
+)``;

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

@@ -32,6 +32,7 @@ import {
 } from '../../common/text-content';
 import { DocsLink } from '../../common/docs-link';
 import { SourceIcon } from '../../common/source-icon';
+import { HttpVersionPill } from '../../common/http-version-pill';
 import { HeaderDetails } from './header-details';
 import { UrlBreakdown } from '../url-breakdown';
 
@@ -164,6 +165,7 @@ export const HttpRequestCard = observer((props: HttpRequestCardProps) => {
                 />
             }
             <SourceIcon source={request.source} />
+            <HttpVersionPill request={request} />
             <Pill color={getSummaryColour(exchange)}>
                 { exchange.isWebSocket() ? 'WebSocket ' : '' }
                 { request.method } {