Refactor gRPC reflection!

src-web/components/GrpcConnectionLayout.tsx

@@ -86,6 +86,7 @@ export function GrpcConnectionLayout({ style }: Props) {
           activeRequest={activeRequest}
           protoFiles={protoFiles}
           methodType={methodType}
+          isStreaming={grpc.isStreaming}
           onGo={grpc.go.mutate}
           onCommit={grpc.commit.mutate}
           onCancel={grpc.cancel.mutate}

src-web/components/GrpcConnectionMessagesPane.tsx

@@ -6,6 +6,8 @@ import { useGrpcEvents } from '../hooks/useGrpcEvents';
 import { usePinnedGrpcConnection } from '../hooks/usePinnedGrpcConnection';
 import { useStateWithDeps } from '../hooks/useStateWithDeps';
 import type { GrpcEvent, GrpcRequest } from '../lib/models';
+import { isResponseLoading } from '../lib/models';
+import { Banner } from './core/Banner';
 import { Button } from './core/Button';
 import { Icon } from './core/Icon';
 import { JsonAttributeTree } from './core/JsonAttributeTree';
@@ -64,7 +66,7 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
             <HStack className="pl-3 mb-1 font-mono">
               <HStack space={2}>
                 <span>{events.length} messages</span>
-                {activeConnection.elapsed === 0 && (
+                {isResponseLoading(activeConnection) && (
                   <Icon icon="refresh" size="sm" spin className="text-fg-subtler" />
                 )}
               </HStack>
@@ -75,6 +77,11 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
               />
             </HStack>
             <div className="overflow-y-auto h-full">
+              {activeConnection.error && (
+                <Banner color="danger" className="m-3">
+                  {activeConnection.error}
+                </Banner>
+              )}
               {...events.map((e) => (
                 <EventRow
                   key={e.id}

src-web/components/GrpcConnectionSetupPane.tsx

@@ -4,7 +4,6 @@ import type { CSSProperties } from 'react';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { createGlobalState } from 'react-use';
 import type { ReflectResponseService } from '../hooks/useGrpc';
-import { useGrpcConnections } from '../hooks/useGrpcConnections';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { useUpdateGrpcRequest } from '../hooks/useUpdateGrpcRequest';
 import type { GrpcMetadataEntry, GrpcRequest } from '../lib/models';
@@ -37,6 +36,7 @@ interface Props {
     | 'streaming'
     | 'no-schema'
     | 'no-method';
+  isStreaming: boolean;
   onCommit: () => void;
   onCancel: () => void;
   onSend: (v: { message: string }) => void;
@@ -54,15 +54,13 @@ export function GrpcConnectionSetupPane({
   protoFiles,
   reflectionError,
   reflectionLoading,
+  isStreaming,
   onGo,
   onCommit,
   onCancel,
   onSend,
 }: Props) {
-  const connections = useGrpcConnections(activeRequest.id ?? null);
   const updateRequest = useUpdateGrpcRequest(activeRequest?.id ?? null);
-  const activeConnection = connections[0] ?? null;
-  const isStreaming = activeConnection?.elapsed === 0;
   const [activeTab, setActiveTab] = useActiveTab();
   const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);
 
@@ -78,7 +76,9 @@ export function GrpcConnectionSetupPane({
   );
 
   const handleChangeMessage = useCallback(
-    (message: string) => updateRequest.mutateAsync({ message }),
+    (message: string) => {
+      return updateRequest.mutateAsync({ message });
+    },
     [updateRequest],
   );
 

src-web/components/GrpcEditor.tsx

@@ -6,8 +6,8 @@ import {
   handleRefresh,
   jsonCompletion,
   jsonSchemaLinter,
-  stateExtensions,
   updateSchema,
+  stateExtensions,
 } from 'codemirror-json-schema';
 import { useEffect, useMemo, useRef } from 'react';
 import { useAlert } from '../hooks/useAlert';
@@ -41,6 +41,7 @@ export function GrpcEditor({
   ...extraEditorProps
 }: Props) {
   const editorViewRef = useRef<EditorView>(null);
+
   const alert = useAlert();
   const dialog = useDialog();
 

src-web/components/Sidebar.tsx

@@ -838,7 +838,7 @@ const SidebarItem = forwardRef(function SidebarItem(
           </div>
           {latestGrpcConnection ? (
             <div className="ml-auto">
-              {latestGrpcConnection.elapsed === 0 && (
+              {isResponseLoading(latestGrpcConnection) && (
                 <Icon spin size="sm" icon="update" className="text-fg-subtler" />
               )}
             </div>

src-web/hooks/useGrpc.ts

@@ -44,11 +44,12 @@ export function useGrpc(
     onSettled: () => trackEvent('grpc_connection', 'commit'),
   });
 
-  const debouncedUrl = useDebouncedValue<string>(req?.url ?? 'n/a', 500);
+  const debouncedUrl = useDebouncedValue<string>(req?.url ?? '', 1000);
+  const debouncedMessage = useDebouncedValue<string>(req?.message ?? '', 1000);
+
   const reflect = useQuery<ReflectResponseService[], string>({
     enabled: req != null,
-    queryKey: ['grpc_reflect', req?.id ?? 'n/a', debouncedUrl, protoFiles],
-    refetchOnWindowFocus: false,
+    queryKey: ['grpc_reflect', req?.id ?? 'n/a', debouncedUrl, debouncedMessage, protoFiles],
     queryFn: async () =>
       (await minPromiseMillis(
         invokeCmd('cmd_grpc_reflect', { requestId, protoFiles }),
@@ -56,12 +57,13 @@ export function useGrpc(
       )) as ReflectResponseService[],
   });
 
+  console.log('CONN', conn);
   return {
     go,
     reflect,
     cancel,
     commit,
-    isStreaming: conn?.elapsed === 0,
+    isStreaming: conn != null && conn.elapsed === 0,
     send,
   };
 }

src-web/lib/models.ts

@@ -207,7 +207,7 @@ export interface HttpResponse extends BaseModel {
   readonly headers: HttpHeader[];
 }
 
-export function isResponseLoading(response: HttpResponse): boolean {
+export function isResponseLoading(response: HttpResponse | GrpcConnection): boolean {
   return response.elapsed === 0;
 }