Combine grpc handlers, fix duplicate

src-web/components/GlobalHooks.tsx

@@ -85,8 +85,10 @@ export function GlobalHooks() {
     queryClient.setQueryData<Model[]>(queryKey, (values = []) => {
       const index = values.findIndex((v) => modelsEq(v, payload)) ?? -1;
       if (index >= 0) {
+        // console.log('UPDATED', payload);
         return [...values.slice(0, index), payload, ...values.slice(index + 1)];
       } else {
+        // console.log('CREATED', payload);
         return pushToFront ? [payload, ...(values ?? [])] : [...(values ?? []), payload];
       }
     });

src-web/components/GrpcEditor.tsx

@@ -36,10 +36,18 @@ export function GrpcEditor({
 
   // Find the schema for the selected service and method and update the editor
   useEffect(() => {
-    if (editorViewRef.current == null || services === null) return;
+    if (
+      editorViewRef.current == null ||
+      services === null ||
+      request.service === null ||
+      request.method === null
+    ) {
+      return;
+    }
 
     const s = services.find((s) => s.name === request.service);
-    if (request.service != null && s == null) {
+    if (s == null) {
+      console.log('Failed to find service', { service: request.service, services });
       alert({
         id: 'grpc-find-service-error',
         title: "Couldn't Find Service",
@@ -52,8 +60,9 @@ export function GrpcEditor({
       return;
     }
 
-    const schema = s?.methods.find((m) => m.name === request.method)?.schema;
+    const schema = s.methods.find((m) => m.name === request.method)?.schema;
     if (request.method != null && schema == null) {
+      console.log('Failed to find method', { method: request.method, methods: s?.methods });
       alert({
         id: 'grpc-find-schema-error',
         title: "Couldn't Find Method",

src-web/components/Sidebar.tsx

@@ -493,7 +493,7 @@ function SidebarItems({
               child.item.model === 'http_request' ? (
                 <HttpMethodTag className="opacity-50">{child.item.method}</HttpMethodTag>
               ) : child.item.model === 'grpc_request' ? (
-                <HttpMethodTag className="opacity-50">gRPC</HttpMethodTag>
+                <HttpMethodTag className="opacity-50">GRPC</HttpMethodTag>
               ) : null
             }
             onMove={handleMove}

src-web/components/core/HttpMethodTag.tsx

@@ -13,7 +13,7 @@ const methodMap: Record<string, string> = {
   delete: 'DELETE',
   options: 'OPTIONS',
   head: 'HEAD',
-  grpc: 'gRPC',
+  grpc: 'GRPC',
 };
 
 export function HttpMethodTag({ children: method, className }: Props) {

src-web/components/core/JsonAttributeTree.tsx

@@ -31,6 +31,7 @@ export const JsonAttributeTree = ({ depth = 0, attrKey, attrValue, attrKeyJsonPa
               .sort((a, b) => a.localeCompare(b))
               .flatMap((k) => (
                 <JsonAttributeTree
+                  key={k}
                   depth={depth + 1}
                   attrValue={attrValue[k]}
                   attrKey={k}
@@ -48,6 +49,7 @@ export const JsonAttributeTree = ({ depth = 0, attrKey, attrValue, attrKeyJsonPa
           ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
             attrValue.flatMap((v: any, i: number) => (
               <JsonAttributeTree
+                key={i}
                 depth={depth + 1}
                 attrValue={v}
                 attrKey={i}