Expand the model to support Views for e.g. exchange upstream/downstream

This also pulls in the passthrough response data, populating the
upstream, and attempts to ensure everywhere necessary depends on
HttpExchangeView instead of HttpExchange, if they only need to view an
exchange's data (rather than mutating - i.e. breakpoints, event store
updates, etc).

This is still not complete - upstream/downstream aborts differences
aren't modeled, websockets are ignored, etc etc, but we're making good
progress.

Author: pimterry

src/components/send/response-pane.tsx

@@ -7,7 +7,7 @@ import { logError } from "../../errors";
 
 import { UiStore } from '../../model/ui/ui-store';
 import { AccountStore } from '../../model/account/account-store';
-import { CompletedExchange, SuccessfulExchange } from "../../model/http/exchange";
+import { CompletedExchange, SuccessfulExchange } from "../../model/http/http-exchange-views";
 import { RequestInput } from "../../model/send/send-request-model";
 import { tagsToErrorType } from "../../model/http/error-types";
 

src/components/send/sent-response-status.tsx

@@ -9,7 +9,7 @@ import { getReadableSize } from '../../util/buffer';
 
 import { getStatusColor } from '../../model/events/categorization';
 import { getStatusMessage } from '../../model/http/http-docs';
-import { CompletedExchange, SuccessfulExchange } from '../../model/http/exchange';
+import { CompletedExchange, SuccessfulExchange } from '../../model/http/http-exchange-views';
 import { ErrorType } from '../../model/http/error-types';
 
 import { SendCardSection } from './send-card-section';

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { observer, inject } from 'mobx-react';
 
-import { HttpExchange } from '../../../types';
+import { HttpExchangeView } from '../../../types';
 import { styled } from '../../../styles';
 
 import { UiStore } from '../../../model/ui/ui-store';
@@ -21,7 +21,7 @@ const ErrorContent = styled(ContentMonoValue)`
 
 export const HttpAbortedResponseCard = inject('uiStore')(observer((p: {
     cardProps: CollapsibleCardProps,
-    exchange: HttpExchange,
+    exchange: HttpExchangeView,
     uiStore?: UiStore
 }) =>
     <CollapsibleCard {...p.cardProps} direction='left'>

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

@@ -2,11 +2,10 @@ import * as React from 'react';
 import { action } from 'mobx';
 import { observer, inject } from 'mobx-react';
 
-import { CollectedEvent } from '../../../types';
+import { CollectedEvent, ViewableEvent, HttpExchangeView } from '../../../types';
 import { styled, css } from '../../../styles';
 import { Ctrl } from '../../../util/ui';
 
-import { HttpExchange } from '../../../model/http/exchange';
 import { RulesStore } from '../../../model/rules/rules-store';
 import { AccountStore } from '../../../model/account/account-store';
 
@@ -120,20 +119,26 @@ export const HttpDetailsFooter = inject('rulesStore')(
         (props: {
             rulesStore?: RulesStore,
 
-            event: CollectedEvent,
+            event: ViewableEvent,
             onDelete: (event: CollectedEvent) => void,
             onScrollToEvent: (event: CollectedEvent) => void,
-            onBuildRuleFromExchange: (event: HttpExchange) => void,
-            onPrepareToResendRequest?: (event: HttpExchange) => void,
+            onBuildRuleFromExchange: (event: HttpExchangeView) => void,
+            onPrepareToResendRequest?: (event: HttpExchangeView) => void,
             isPaidUser: boolean,
             navigate: (url: string) => void
         }) => {
             const { event } = props;
             const { pinned } = event;
 
+            // Some actions require the collected event, not just the
+            // current view.
+            const collectedEvent = 'downstream' in event
+                ? event.downstream
+                : event;
+
             return <ButtonsContainer>
                 <ScrollToButton
-                    onClick={() => props.onScrollToEvent(props.event)}
+                    onClick={() => props.onScrollToEvent(collectedEvent)}
                 />
                 <PinButton
                     pinned={pinned}
@@ -143,7 +148,7 @@ export const HttpDetailsFooter = inject('rulesStore')(
                 />
                 <DeleteButton
                     pinned={pinned}
-                    onClick={() => props.onDelete(event)}
+                    onClick={() => props.onDelete(collectedEvent)}
                 />
 
                 {
@@ -154,13 +159,15 @@ export const HttpDetailsFooter = inject('rulesStore')(
                 <ModifyButton
                     isExchange={event.isHttp() && !event.isWebSocket()}
                     isPaidUser={props.isPaidUser}
-                    onClick={() => props.onBuildRuleFromExchange(props.event as HttpExchange)}
+                    onClick={() => props.onBuildRuleFromExchange(props.event as HttpExchangeView)}
                 />
                 { props.onPrepareToResendRequest &&
                     <SendButton
                         isExchange={event.isHttp() && !event.isWebSocket()}
                         isPaidUser={props.isPaidUser}
-                        onClick={() => props.onPrepareToResendRequest!(props.event as HttpExchange)}
+                        onClick={() => props.onPrepareToResendRequest!(
+                            props.event as HttpExchangeView
+                        )}
                     />
                 }
             </ButtonsContainer>;

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

@@ -4,7 +4,7 @@ import { action, computed } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import * as portals from 'react-reverse-portal';
 
-import { CollectedEvent, HtkResponse, HttpExchange } from '../../../types';
+import { CollectedEvent, HtkResponse, HttpExchange, HttpExchangeView } from '../../../types';
 import { styled } from '../../../styles';
 import { logError } from '../../../errors';
 
@@ -21,6 +21,7 @@ import { tagsToErrorType } from '../../../model/http/error-types';
 import { PaneScrollContainer } from '../view-details-pane';
 import { StreamMessageListCard } from '../stream-message-list-card';
 import { WebSocketCloseCard } from '../websocket-close-card';
+import { SelfSizedEditor } from '../../editor/base-editor';
 
 import { HttpBodyCard } from './http-body-card';
 import { HttpApiCard, HttpApiPlaceholderCard } from './http-api-card';
@@ -30,7 +31,6 @@ 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';
 import { HttpErrorHeader } from './http-error-header';
 import { HttpDetailsFooter } from './http-details-footer';
 import { HttpRequestBreakpointHeader, HttpResponseBreakpointHeader } from './http-breakpoint-header';
@@ -60,7 +60,7 @@ const makeFriendlyApiName = (rawName: string) => {
 @inject('rulesStore')
 @observer
 export class HttpDetailsPane extends React.Component<{
-    exchange: HttpExchange,
+    exchange: HttpExchangeView,
 
     requestEditor: portals.HtmlPortalNode<typeof SelfSizedEditor>,
     responseEditor: portals.HtmlPortalNode<typeof SelfSizedEditor>,
@@ -69,8 +69,8 @@ export class HttpDetailsPane extends React.Component<{
     navigate: (path: string) => void,
     onDelete: (event: CollectedEvent) => void,
     onScrollToEvent: (event: CollectedEvent) => void,
-    onBuildRuleFromExchange: (exchange: HttpExchange) => void,
-    onPrepareToResendRequest?: (exchange: HttpExchange) => void,
+    onBuildRuleFromExchange: (exchange: HttpExchangeView) => void,
+    onPrepareToResendRequest?: (exchange: HttpExchangeView) => void,
 
     // Injected:
     uiStore?: UiStore,
@@ -96,7 +96,6 @@ export class HttpDetailsPane extends React.Component<{
 
         const { isPaidUser } = accountStore!;
         const { expandedViewCard } = uiStore!;
-        const { requestBreakpoint, responseBreakpoint } = exchange;
 
         // The full API details - for paid APIs, and non-paid users, we don't show
         // the detailed API data in any of the cards, we just show the name (below)
@@ -121,8 +120,8 @@ export class HttpDetailsPane extends React.Component<{
             </>;
         }
 
-        const cards = (requestBreakpoint || responseBreakpoint)
-            ? this.renderBreakpointCards(exchange, apiName, apiExchange)
+        const cards = (exchange.downstream.isBreakpointed)
+            ? this.renderBreakpointCards(exchange.downstream, apiName, apiExchange)
             : this.renderNormalCards(exchange, apiName, apiExchange);
 
         return <>
@@ -142,15 +141,15 @@ export class HttpDetailsPane extends React.Component<{
         </>;
     }
 
-    renderHeaderCard(exchange: HttpExchange): JSX.Element | null {
+    renderHeaderCard(exchange: HttpExchangeView): JSX.Element | null {
         const { accountStore, navigate } = this.props;
         const { isPaidUser, getPro } = accountStore!;
         const {
             requestBreakpoint,
             respondToBreakpointedRequest,
             responseBreakpoint,
             tags
-        } = exchange;
+        } = exchange.downstream;
 
         if (requestBreakpoint) {
             return <HttpRequestBreakpointHeader
@@ -212,15 +211,15 @@ export class HttpDetailsPane extends React.Component<{
 
     private renderExpandedCard(
         expandedCard: ExpandableViewCardKey,
-        exchange: HttpExchange,
+        exchange: HttpExchangeView,
         apiExchange: ApiExchange | undefined
     ) {
         if (expandedCard === 'requestBody') {
             return this.renderRequestBody(exchange, apiExchange);
         } else if (
             expandedCard === 'responseBody' && (
                 exchange.isSuccessfulExchange() ||
-                !!exchange.responseBreakpoint
+                !!exchange.downstream.responseBreakpoint
             )) {
             return this.renderResponseBody(exchange, apiExchange);
         } else if (
@@ -282,7 +281,7 @@ export class HttpDetailsPane extends React.Component<{
     }
 
     private renderNormalCards(
-        exchange: HttpExchange,
+        exchange: HttpExchangeView,
         apiName: string | undefined,
         apiExchange: ApiExchange | undefined
     ) {
@@ -378,8 +377,9 @@ export class HttpDetailsPane extends React.Component<{
         return cards;
     }
 
-    private renderRequestBody(exchange: HttpExchange, apiExchange: ApiExchange | undefined) {
-        const { request, requestBreakpoint } = exchange;
+    private renderRequestBody(exchange: HttpExchangeView, apiExchange: ApiExchange | undefined) {
+        const { request } = exchange;
+        const { requestBreakpoint } = exchange.downstream;
 
         return requestBreakpoint
             ? <HttpBreakpointBodyCard
@@ -398,8 +398,9 @@ export class HttpDetailsPane extends React.Component<{
             />;
     }
 
-    private renderResponseBody(exchange: HttpExchange, apiExchange: ApiExchange | undefined) {
-        const { response, responseBreakpoint } = exchange;
+    private renderResponseBody(exchange: HttpExchangeView, apiExchange: ApiExchange | undefined) {
+        const { response } = exchange;
+        const { responseBreakpoint } = exchange.downstream;
 
         return responseBreakpoint
             ? <HttpBreakpointBodyCard

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

@@ -3,7 +3,7 @@ import { action, computed } from "mobx";
 import { inject, observer } from "mobx-react";
 import dedent from 'dedent';
 
-import { HttpExchange } from '../../../types';
+import { HttpExchangeView } from '../../../types';
 import { styled } from '../../../styles';
 import { Icon } from '../../../icons';
 import { logError } from '../../../errors';
@@ -33,7 +33,7 @@ import { DocsLink } from '../../common/docs-link';
 import { SelfSizedEditor } from '../../editor/base-editor';
 
 interface ExportCardProps extends CollapsibleCardProps  {
-    exchange: HttpExchange;
+    exchange: HttpExchangeView;
     accountStore?: AccountStore;
     uiStore?: UiStore;
 }
@@ -69,7 +69,7 @@ const snippetEditorOptions = {
 };
 
 const ExportSnippetEditor = observer((p: {
-    exchange: HttpExchange
+    exchange: HttpExchangeView
     exportOption: SnippetOption
 }) => {
     const { target, client, link, description } = p.exportOption;
@@ -122,7 +122,7 @@ const ExportSnippetEditor = observer((p: {
 
 const ExportHarPill = styled(observer((p: {
     className?: string,
-    exchange: HttpExchange
+    exchange: HttpExchangeView
 }) =>
     <PillButton
         className={p.className}

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

@@ -4,7 +4,7 @@ import { observer, inject } from 'mobx-react';
 import { get } from 'typesafe-get';
 
 import { styled } from '../../../styles';
-import { HttpExchange, ExchangeMessage } from '../../../types';
+import { ExchangeMessage, HttpExchangeView } from '../../../types';
 
 import { getReadableSize } from '../../../util/buffer';
 import { asHeaderArray } from '../../../util/headers';
@@ -36,7 +36,7 @@ import { ContentLabelBlock, Markdown } from '../../common/text-content';
 import { ProHeaderPill, CardSalesPitch } from '../../account/pro-placeholders';
 
 interface HttpPerformanceCardProps extends CollapsibleCardProps {
-    exchange: HttpExchange;
+    exchange: HttpExchangeView;
     accountStore?: AccountStore;
 }
 
@@ -208,7 +208,7 @@ const CompressionOptionsTips = styled(PerformanceExplanation)`
     font-style: italic;
 `;
 
-const CompressionPerformance = observer((p: { exchange: HttpExchange }) => {
+const CompressionPerformance = observer((p: { exchange: HttpExchangeView }) => {
     const messageTypes: Array<'request' | 'response'> = ['request', 'response'];
     const clientAcceptedEncodings = asHeaderArray(p.exchange.request.headers['accept-encoding'])
         .map(getEncodingName);
@@ -292,7 +292,7 @@ const CompressionPerformance = observer((p: { exchange: HttpExchange }) => {
     }) }</>;
 });
 
-const CachingPerformance = observer((p: { exchange: HttpExchange }) => {
+const CachingPerformance = observer((p: { exchange: HttpExchangeView }) => {
     if (typeof p.exchange.response !== 'object') return null;
 
     const cacheability = explainCacheability(p.exchange);

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { inject, observer } from 'mobx-react';
 
-import { HttpExchange, HtkRequest, HttpVersion } from '../../../types';
+import { HttpExchange, HtkRequest, HttpVersion, HttpExchangeView } from '../../../types';
 import { styled } from '../../../styles';
 import { PhosphorIcon } from '../../../icons';
 
@@ -149,7 +149,7 @@ const RawRequestDetails = (p: {
 }
 
 interface HttpRequestCardProps extends CollapsibleCardProps {
-    exchange: HttpExchange;
+    exchange: HttpExchangeView;
     matchedRuleData: {
         stepTypes: HandlerClassKey[],
         status: 'unchanged' | 'modified-types' | 'deleted'

src/components/view/view-context-menu-builder.ts

@@ -1,13 +1,13 @@
 import * as _ from 'lodash';
 import { runInAction } from 'mobx';
 
-import { CollectedEvent, WebSocketStream } from '../../types';
+import { CollectedEvent, HttpExchangeView, WebSocketStream } from '../../types';
 
 import { copyToClipboard } from '../../util/ui';
 
 import { AccountStore } from '../../model/account/account-store';
 import { UiStore } from '../../model/ui/ui-store';
-import { HttpExchange } from '../../model/http/exchange';
+import { HttpExchange } from '../../model/http/http-exchange';
 import {
     exportHar,
     generateCodeSnippet,
@@ -26,8 +26,8 @@ export class ViewEventContextMenuBuilder {
 
         private onPin: (event: CollectedEvent) => void,
         private onDelete: (event: CollectedEvent) => void,
-        private onBuildRuleFromExchange: (exchange: HttpExchange) => void,
-        private onPrepareToResendRequest?: (exchange: HttpExchange) => void
+        private onBuildRuleFromExchange: (exchange: HttpExchangeView) => void,
+        private onPrepareToResendRequest?: (exchange: HttpExchangeView) => void
     ) {}
 
     private readonly BaseOptions = {
@@ -57,7 +57,7 @@ export class ViewEventContextMenuBuilder {
                     {
                         type: 'option',
                         label: 'Copy Request URL',
-                        callback: (data: HttpExchange) => copyToClipboard(data.request.url)
+                        callback: (data: HttpExchangeView) => copyToClipboard(data.request.url)
                     },
                     ...(!isPaidUser ? [
                         { type: 'separator' },
@@ -68,7 +68,7 @@ export class ViewEventContextMenuBuilder {
                             type: 'option',
                             enabled: isPaidUser,
                             label: 'Resend Request',
-                            callback: (data: HttpExchange) => this.onPrepareToResendRequest!(data)
+                            callback: (data: HttpExchangeView) => this.onPrepareToResendRequest!(data)
                         }
                     ] as const : []),
                     {

src/components/view/view-event-list-buttons.tsx

@@ -4,7 +4,7 @@ import * as dateFns from 'date-fns';
 import * as dedent from 'dedent';
 import * as Ajv from 'ajv';
 
-import { CollectedEvent } from '../../types';
+import { ViewableEvent } from '../../types';
 import { saveFile, uploadFile, Ctrl } from '../../util/ui';
 
 import { AccountStore } from '../../model/account/account-store';
@@ -29,7 +29,7 @@ export const ClearAllButton = observer((props: {
 export const ExportAsHarButton = inject('accountStore')(observer((props: {
     className?: string,
     accountStore?: AccountStore,
-    events: ReadonlyArray<CollectedEvent>
+    events: ReadonlyArray<ViewableEvent>
 }) => {
     const { isPaidUser } = props.accountStore!;