Fix websocket view typing & tweak cleanup button slightly

Author: pimterry

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, HttpExchangeView } from '../../../types';
+import { CollectedEvent, HtkResponse, HttpExchangeView } from '../../../types';
 import { styled } from '../../../styles';
 import { logError } from '../../../errors';
 
@@ -15,7 +15,7 @@ import { ApiExchange } from '../../../model/api/api-interfaces';
 import { buildRuleFromRequest } from '../../../model/rules/rule-creation';
 import { findItem } from '../../../model/rules/rules-structure';
 import { HtkRule, getRulePartKey } from '../../../model/rules/rules';
-import { WebSocketStream } from '../../../model/websockets/websocket-stream';
+import { WebSocketView } from '../../../model/websockets/websocket-views';
 import { tagsToErrorType } from '../../../model/http/error-types';
 
 import { PaneScrollContainer } from '../view-details-pane';
@@ -448,7 +448,7 @@ export class HttpDetailsPane extends React.Component<{
             />;
     }
 
-    private renderWebSocketMessages(exchange: WebSocketStream) {
+    private renderWebSocketMessages(exchange: WebSocketView) {
         const urlParts = exchange.request.url.split('/');
         const domain = urlParts[2].split(':')[0];
         const baseName = urlParts.length >= 2 ? urlParts[urlParts.length - 1] : undefined;
@@ -469,7 +469,7 @@ export class HttpDetailsPane extends React.Component<{
             isPaidUser={this.props.accountStore!.isPaidUser}
             filenamePrefix={filenamePrefix}
             messages={exchange.messages}
-            onClearMessages={() => exchange.downstream.cleanupMessages()}
+            onClearMessages={this.clearMessages}
         />;
     }
 
@@ -542,4 +542,11 @@ export class HttpDetailsPane extends React.Component<{
         exchange.hideErrors = true;
     }
 
+    @action.bound
+    private clearMessages() {
+        const { exchange } = this.props;
+        if (!exchange.isWebSocket()) return;
+        exchange.downstream.clearMessages();
+    }
+
 };

src/components/view/stream-message-list-card.tsx

@@ -43,7 +43,7 @@ export class StreamMessageListCard extends React.Component<ExpandableCardProps &
     streamId: string,
     streamType: StreamType,
     streamLabel?: string,
-    messages: Array<StreamMessage>,
+    messages: ReadonlyArray<StreamMessage>,
     editorNode: portals.HtmlPortalNode<typeof SelfSizedEditor>
     onClearMessages?: () => void,
 }> {
@@ -96,7 +96,7 @@ export class StreamMessageListCard extends React.Component<ExpandableCardProps &
                     />
                     { onClearMessages &&
                         <IconButton
-                            icon={['fas', 'ban']}
+                            icon={['far', 'trash-alt']}
                             title="Clear all messages"
                             onClick={onClearMessages}
                         /> }

src/model/events/event-base.ts

@@ -4,10 +4,10 @@ import {
     FailedTlsConnection,
     TlsTunnel,
     HttpExchangeView,
+    WebSocketView,
     RTCConnection,
     RTCDataChannel,
-    RTCMediaTrack,
-    WebSocketStream
+    RTCMediaTrack
 } from '../../types';
 
 import { getEventCategory } from './categorization';
@@ -18,7 +18,7 @@ export abstract class HTKEventBase {
 
     // These can be overriden by subclasses to allow easy type narrowing:
     isHttp(): this is HttpExchangeView { return false; }
-    isWebSocket(): this is WebSocketStream { return false; }
+    isWebSocket(): this is WebSocketView { return false; }
 
     isTlsFailure(): this is FailedTlsConnection { return false; }
     isTlsTunnel(): this is TlsTunnel { return false; }

src/model/websockets/websocket-stream.ts

@@ -128,14 +128,14 @@ export class WebSocketStream extends HttpExchange implements WebSocketView {
     }
 
     @action
-    cleanupMessages() {
+    clearMessages() {
         // Clear all websocket message data too
         this.messages.forEach(msg => msg.cleanup());
         this.messages.length = 0;
     }
 
     cleanup() {
         super.cleanup();
-        this.cleanupMessages();
+        this.clearMessages();
     }
 }

src/types.d.ts

@@ -39,6 +39,7 @@ import type { HttpExchange, HttpVersion } from './model/http/http-exchange';
 import type { HttpExchangeView } from './model/http/http-exchange-views';
 
 import type { WebSocketStream } from './model/websockets/websocket-stream';
+import type { WebSocketView } from './model/websockets/websocket-views';
 import type { RTCConnection } from './model/webrtc/rtc-connection';
 import type { RTCDataChannel } from './model/webrtc/rtc-data-channel';
 import type { RTCMediaTrack } from './model/webrtc/rtc-media-track';
@@ -227,6 +228,7 @@ export type {
     HttpExchange,
     HttpExchangeView,
     WebSocketStream,
+    WebSocketView,
     RTCConnection,
     RTCDataChannel,
     RTCMediaTrack