Better reflect failure UI

src-web/components/GrpcEditor.tsx

@@ -1,15 +1,16 @@
 import type { EditorView } from 'codemirror';
 import { updateSchema } from 'codemirror-json-schema';
 import { useEffect, useRef } from 'react';
-import { useActiveRequestId } from '../hooks/useActiveRequestId';
 import { useAlert } from '../hooks/useAlert';
-import { useGrpc } from '../hooks/useGrpc';
+import type { ReflectResponseService } from '../hooks/useGrpc';
 import { tryFormatJson } from '../lib/formatters';
+import { Button } from './core/Button';
 import type { EditorProps } from './core/Editor';
 import { Editor } from './core/Editor';
 import { FormattedError } from './core/FormattedError';
 import { InlineCode } from './core/InlineCode';
-import { VStack } from './core/Stacks';
+import { HStack, VStack } from './core/Stacks';
+import { useDialog } from './DialogContext';
 
 type Props = Pick<
   EditorProps,
@@ -18,17 +19,30 @@ type Props = Pick<
   url: string;
   service: string | null;
   method: string | null;
+  services: ReflectResponseService[] | null;
+  reflectionError?: string;
+  reflectionLoading?: boolean;
+  onReflect: () => void;
 };
 
-export function GrpcEditor({ url, service, method, defaultValue, ...extraEditorProps }: Props) {
+export function GrpcEditor({
+  service,
+  method,
+  services,
+  defaultValue,
+  reflectionError,
+  reflectionLoading,
+  onReflect,
+  ...extraEditorProps
+}: Props) {
   const editorViewRef = useRef<EditorView>(null);
-  const activeRequestId = useActiveRequestId();
-  const grpc = useGrpc(url, activeRequestId);
   const alert = useAlert();
+  const dialog = useDialog();
 
   useEffect(() => {
-    if (editorViewRef.current == null || grpc.services == null) return;
-    const s = grpc.services?.find((s) => s.name === service);
+    if (editorViewRef.current == null || services === null) return;
+
+    const s = services?.find((s) => s.name === service);
     if (service != null && s == null) {
       alert({
         id: 'grpc-find-service-error',
@@ -79,7 +93,7 @@ export function GrpcEditor({ url, service, method, defaultValue, ...extraEditorP
       });
       console.log('Failed to parse method schema', method, schema);
     }
-  }, [alert, grpc.services, method, service]);
+  }, [alert, services, method, service]);
 
   return (
     <div className="h-full w-full grid grid-cols-1 grid-rows-[minmax(0,100%)_auto_auto_minmax(0,auto)]">
@@ -90,6 +104,46 @@ export function GrpcEditor({ url, service, method, defaultValue, ...extraEditorP
         heightMode="auto"
         placeholder="..."
         ref={editorViewRef}
+        actions={
+          reflectionError || reflectionLoading
+            ? [
+                <div key="introspection" className="!opacity-100">
+                  <Button
+                    key="introspection"
+                    size="xs"
+                    color={reflectionError ? 'danger' : 'gray'}
+                    isLoading={reflectionLoading}
+                    onClick={() => {
+                      dialog.show({
+                        title: 'Introspection Failed',
+                        size: 'dynamic',
+                        id: 'introspection-failed',
+                        render: () => (
+                          <>
+                            <FormattedError>{reflectionError ?? 'unknown'}</FormattedError>
+                            <HStack className="w-full my-4" space={2} justifyContent="end">
+                              <Button color="gray">Select .proto</Button>
+                              <Button
+                                onClick={() => {
+                                  dialog.hide('introspection-failed');
+                                  onReflect();
+                                }}
+                                color="secondary"
+                              >
+                                Try Again
+                              </Button>
+                            </HStack>
+                          </>
+                        ),
+                      });
+                    }}
+                  >
+                    {reflectionError ? 'Reflection Failed' : 'Reflecting'}
+                  </Button>
+                </div>,
+              ]
+            : []
+        }
         {...extraEditorProps}
       />
     </div>