fix: pass down onClose properly (#376)

src-web/components/GrpcResponsePane.tsx

@@ -98,13 +98,14 @@ export function GrpcResponsePane({ style, methodType, activeRequest }: Props) {
           renderRow={({ event, isActive, onClick }) => (
             <GrpcEventRow event={event} isActive={isActive} onClick={onClick} />
           )}
-          renderDetail={({ event }) => (
+          renderDetail={({ event, onClose }) => (
             <GrpcEventDetail
               event={event}
               showLarge={showLarge}
               showingLarge={showingLarge}
               setShowLarge={setShowLarge}
               setShowingLarge={setShowingLarge}
+              onClose={onClose}
             />
           )}
         />
@@ -147,19 +148,26 @@ function GrpcEventDetail({
   showingLarge,
   setShowLarge,
   setShowingLarge,
+  onClose,
 }: {
   event: GrpcEvent;
   showLarge: boolean;
   showingLarge: boolean;
   setShowLarge: (v: boolean) => void;
   setShowingLarge: (v: boolean) => void;
+  onClose: () => void;
 }) {
   if (event.eventType === 'client_message' || event.eventType === 'server_message') {
     const title = `Message ${event.eventType === 'client_message' ? 'Sent' : 'Received'}`;
 
     return (
       <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
-        <EventDetailHeader title={title} timestamp={event.createdAt} copyText={event.content} />
+        <EventDetailHeader
+          title={title}
+          timestamp={event.createdAt}
+          copyText={event.content}
+          onClose={onClose}
+        />
         {!showLarge && event.content.length > 1000 * 1000 ? (
           <VStack space={2} className="italic text-text-subtlest">
             Message previews larger than 1MB are hidden
@@ -197,7 +205,7 @@ function GrpcEventDetail({
   // Error or connection_end - show metadata/trailers
   return (
     <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
-      <EventDetailHeader title={event.content} timestamp={event.createdAt} />
+      <EventDetailHeader title={event.content} timestamp={event.createdAt} onClose={onClose} />
       {event.error && (
         <div className="select-text cursor-text text-sm font-mono py-1 text-warning">
           {event.error}

src-web/components/WebsocketResponsePane.tsx

@@ -13,7 +13,7 @@ import { useStateWithDeps } from '../hooks/useStateWithDeps';
 import { languageFromContentType } from '../lib/contentType';
 import { Button } from './core/Button';
 import { Editor } from './core/Editor/LazyEditor';
-import { EventDetailHeader, EventViewer, type EventDetailAction } from './core/EventViewer';
+import { type EventDetailAction, EventDetailHeader, EventViewer } from './core/EventViewer';
 import { EventViewerRow } from './core/EventViewerRow';
 import { HotkeyList } from './core/HotkeyList';
 import { Icon } from './core/Icon';
@@ -75,7 +75,7 @@ export function WebsocketResponsePane({ activeRequest }: Props) {
         renderRow={({ event, isActive, onClick }) => (
           <WebsocketEventRow event={event} isActive={isActive} onClick={onClick} />
         )}
-        renderDetail={({ event, index }) => (
+        renderDetail={({ event, index, onClose }) => (
           <WebsocketEventDetail
             event={event}
             hexDump={hexDumps[index] ?? event.messageType === 'binary'}
@@ -84,6 +84,7 @@ export function WebsocketResponsePane({ activeRequest }: Props) {
             showingLarge={showingLarge}
             setShowLarge={setShowLarge}
             setShowingLarge={setShowingLarge}
+            onClose={onClose}
           />
         )}
       />
@@ -145,6 +146,7 @@ function WebsocketEventDetail({
   showingLarge,
   setShowLarge,
   setShowingLarge,
+  onClose,
 }: {
   event: WebsocketEvent;
   hexDump: boolean;
@@ -153,6 +155,7 @@ function WebsocketEventDetail({
   showingLarge: boolean;
   setShowLarge: (v: boolean) => void;
   setShowingLarge: (v: boolean) => void;
+  onClose: () => void;
 }) {
   const message = useMemo(() => {
     if (hexDump) {
@@ -185,11 +188,12 @@ function WebsocketEventDetail({
   return (
     <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
       <EventDetailHeader
-          title={title}
+        title={title}
-          timestamp={event.createdAt}
+        timestamp={event.createdAt}
-          actions={actions}
+        actions={actions}
-          copyText={formattedMessage || undefined}
+        copyText={formattedMessage || undefined}
-        />
+        onClose={onClose}
+      />
       {!showLarge && event.message.length > 1000 * 1000 ? (
         <VStack space={2} className="italic text-text-subtlest">
           Message previews larger than 1MB are hidden

src-web/components/responseViewers/EventStreamViewer.tsx

@@ -51,10 +51,9 @@ function ActualEventStreamViewer({ response }: Props) {
               <span className="truncate text-xs">{event.data.slice(0, 1000)}</span>
             </HStack>
           }
-
         />
       )}
-      renderDetail={({ event, index }) => (
+      renderDetail={({ event, index, onClose }) => (
         <EventDetail
           event={event}
           index={index}
@@ -62,6 +61,7 @@ function ActualEventStreamViewer({ response }: Props) {
           showingLarge={showingLarge}
           setShowLarge={setShowLarge}
           setShowingLarge={setShowingLarge}
+          onClose={onClose}
         />
       )}
     />
@@ -75,6 +75,7 @@ function EventDetail({
   showingLarge,
   setShowLarge,
   setShowingLarge,
+  onClose,
 }: {
   event: ServerSentEvent;
   index: number;
@@ -82,6 +83,7 @@ function EventDetail({
   showingLarge: boolean;
   setShowLarge: (v: boolean) => void;
   setShowingLarge: (v: boolean) => void;
+  onClose: () => void;
 }) {
   const language = useMemo<'text' | 'json'>(() => {
     if (!event?.data) return 'text';
@@ -90,7 +92,11 @@ function EventDetail({
 
   return (
     <div className="flex flex-col h-full">
-      <EventDetailHeader title="Message Received" prefix={<EventLabels event={event} index={index} />} />
+      <EventDetailHeader
+        title="Message Received"
+        prefix={<EventLabels event={event} index={index} />}
+        onClose={onClose}
+      />
       {!showLarge && event.data.length > 1000 * 1000 ? (
         <VStack space={2} className="italic text-text-subtlest">
           Message previews larger than 1MB are hidden