Support collapse & expand for raw packets, and refactor expansion

Author: pimterry

src/components/view/raw-tunnel-details-pane.tsx

@@ -1,20 +1,25 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as portals from 'react-reverse-portal';
+import { inject, observer } from 'mobx-react';
 
 import { getReadableIP } from '../../model/network';
 import { RawTunnel } from '../../model/raw-tunnel';
+import { UiStore } from '../../model/ui/ui-store';
 
 import { MediumCard } from '../common/card';
 import { ContentLabelBlock, Content, CopyableMonoValue } from '../common/text-content';
 import { PaneScrollContainer } from './view-details-pane';
 import { StreamMessageListCard } from './stream-message-list-card';
 import { SelfSizedEditor } from '../editor/base-editor';
 
+@inject('uiStore')
+@observer
 export class RawTunnelDetailsPane extends React.Component<{
     tunnel: RawTunnel,
     streamMessageEditor: portals.HtmlPortalNode<typeof SelfSizedEditor>,
-    isPaidUser: boolean
+    isPaidUser: boolean,
+    uiStore?: UiStore
 }> {
     render() {
         const { tunnel } = this.props;
@@ -23,6 +28,22 @@ export class RawTunnelDetailsPane extends React.Component<{
         const sourceIp = sourceDetailParts[0];
         const sourceDetails = sourceDetailParts.slice(1).join(' ');
 
+        const packetCardProps = this.props.uiStore!.viewCardProps['rawTunnelPackets'];
+
+        const packetsListCard = <StreamMessageListCard
+            isPaidUser={this.props.isPaidUser}
+            {...packetCardProps}
+
+            streamId={tunnel.id}
+            cardHeading='Raw Data'
+            streamLabel={tunnel.upstreamHostname}
+            editorNode={this.props.streamMessageEditor}
+            filenamePrefix={`Raw Tunnel ${tunnel.upstreamHostname} ${tunnel.id}`}
+            messages={tunnel.packets}
+        />;
+
+        if (packetCardProps.expanded) return packetsListCard;
+
         return <PaneScrollContainer>
             <MediumCard>
                 <header>
@@ -50,23 +71,7 @@ export class RawTunnelDetailsPane extends React.Component<{
                     </p>
                 </Content>
             </MediumCard>
-            <StreamMessageListCard
-                isPaidUser={this.props.isPaidUser}
-                ariaLabel='Raw tunnel data'
-
-                collapsed={false}
-                expanded={true}
-                onExpandToggled={() => {}}
-                onCollapseToggled={() => {}}
-
-                streamId={tunnel.id}
-                cardHeading='Raw Data'
-                streamLabel={tunnel.upstreamHostname}
-                editorNode={this.props.streamMessageEditor}
-                filenamePrefix={`Raw Tunnel ${tunnel.upstreamHostname} ${tunnel.id}`}
-                messages={tunnel.packets}
-            />
-
+            { packetsListCard }
         </PaneScrollContainer>;
     }
 }

src/components/view/view-page.tsx

@@ -21,7 +21,7 @@ import { UnreachableCheck, unreachableCheck } from '../../util/error';
 
 import { SERVER_SEND_API_SUPPORTED, serverVersion, versionSatisfies } from '../../services/service-versions';
 
-import { UiStore } from '../../model/ui/ui-store';
+import { ExpandableViewCardKey, UiStore } from '../../model/ui/ui-store';
 import { ProxyStore } from '../../model/proxy-store';
 import { EventsStore } from '../../model/events/events-store';
 import { RulesStore } from '../../model/rules/rules-store';
@@ -143,6 +143,19 @@ const EDITOR_KEYS = [
 ] as const;
 type EditorKey = typeof EDITOR_KEYS[number];
 
+const paneExpansionRequirements: { [key in ExpandableViewCardKey]: (event: CollectedEvent) => boolean } = {
+    requestBody: (event: CollectedEvent) =>
+        event.isHttp() &&
+        (event.hasRequestBody() || !!event.downstream.requestBreakpoint),
+    responseBody: (event: CollectedEvent) =>
+        event.isHttp() &&
+        (event.hasResponseBody() || !!event.downstream.responseBreakpoint),
+    webSocketMessages: (event: CollectedEvent) =>
+        event.isWebSocket() && event.wasAccepted,
+    rawTunnelPackets: (event: CollectedEvent) =>
+        event.isRawTunnel()
+};
+
 @inject('eventsStore')
 @inject('proxyStore')
 @inject('uiStore')
@@ -280,33 +293,14 @@ class ViewPage extends React.Component<ViewPageProps> {
             }
 
             const { expandedViewCard } = this.props.uiStore;
-            if (!expandedViewCard) return;
-
-            const selectedHttpExchange = this.selectedExchange;
-
-            // If you have a pane expanded, and select an event with no data
-            // for that pane, then disable the expansion:
-            if (
-                !selectedHttpExchange ||
-                (
-                    expandedViewCard === 'requestBody' &&
-                    !selectedHttpExchange.hasRequestBody() &&
-                    !selectedHttpExchange.downstream.requestBreakpoint
-                ) ||
-                (
-                    expandedViewCard === 'responseBody' &&
-                    !selectedHttpExchange.hasResponseBody() &&
-                    !selectedHttpExchange.downstream.responseBreakpoint
-                ) ||
-                (
-                    expandedViewCard === 'webSocketMessages' &&
-                    !(selectedHttpExchange.isWebSocket() && selectedHttpExchange.wasAccepted)
-                )
-            ) {
-                runInAction(() => {
-                    this.props.uiStore.expandedViewCard = undefined;
-                });
-                return;
+            if (expandedViewCard) {
+                // If you have a pane expanded, and select an event with no data
+                // for that pane, then disable the expansion:
+                if (!paneExpansionRequirements[expandedViewCard](selectedEvent)) {
+                    runInAction(() => {
+                        this.props.uiStore.expandedViewCard = undefined;
+                    });
+                }
             }
         }));
 

src/model/ui/ui-store.ts

@@ -35,6 +35,8 @@ const VIEW_CARD_KEYS = [
     'rtcSessionOffer',
     'rtcSessionAnswer',
 
+    'rawTunnelPackets',
+
     'performance',
     'export'
 ] as const;
@@ -43,7 +45,8 @@ type ViewCardKey = typeof VIEW_CARD_KEYS[number];
 const EXPANDABLE_VIEW_CARD_KEYS = [
     'requestBody',
     'responseBody',
-    'webSocketMessages'
+    'webSocketMessages',
+    'rawTunnelPackets'
 ] as const;
 export type ExpandableViewCardKey = typeof EXPANDABLE_VIEW_CARD_KEYS[number];
 
@@ -240,6 +243,8 @@ export class UiStore {
         'webSocketMessages': { collapsed: false },
         'webSocketClose': { collapsed: false },
 
+        'rawTunnelPackets': { collapsed: false },
+
         'rtcConnection': { collapsed: false },
         'rtcSessionOffer': { collapsed: false },
         'rtcSessionAnswer': { collapsed: false },