Proto selection UI/models

src-web/components/GrpcEditor.tsx

@@ -1,70 +1,72 @@
+import { open } from '@tauri-apps/api/dialog';
 import type { EditorView } from 'codemirror';
 import { updateSchema } from 'codemirror-json-schema';
 import { useEffect, useRef } from 'react';
 import { useAlert } from '../hooks/useAlert';
 import type { ReflectResponseService } from '../hooks/useGrpc';
 import { tryFormatJson } from '../lib/formatters';
+import type { GrpcRequest } from '../lib/models';
+import { count } from '../lib/pluralize';
+import { Banner } from './core/Banner';
 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 { Link } from './core/Link';
 import { HStack, VStack } from './core/Stacks';
 import { useDialog } from './DialogContext';
+import { GrpcProtoSelection } from './GrpcProtoSelection';
 
-type Props = Pick<
-  EditorProps,
-  'heightMode' | 'onChange' | 'defaultValue' | 'className' | 'forceUpdateKey'
-> & {
-  url: string;
-  service: string | null;
-  method: string | null;
+type Props = Pick<EditorProps, 'heightMode' | 'onChange' | 'className'> & {
   services: ReflectResponseService[] | null;
   reflectionError?: string;
   reflectionLoading?: boolean;
+  request: GrpcRequest;
   onReflect: () => void;
+  onSelectProtoFiles: (paths: string[]) => void;
 };
 
 export function GrpcEditor({
-  service,
-  method,
   services,
-  defaultValue,
   reflectionError,
   reflectionLoading,
   onReflect,
+  onSelectProtoFiles,
+  request,
   ...extraEditorProps
 }: Props) {
   const editorViewRef = useRef<EditorView>(null);
   const alert = useAlert();
   const dialog = useDialog();
 
+  // Find the schema for the selected service and method and update the editor
   useEffect(() => {
     if (editorViewRef.current == null || services === null) return;
 
-    const s = services?.find((s) => s.name === service);
-    if (service != null && s == null) {
+    const s = services.find((s) => s.name === request.service);
+    if (request.service != null && s == null) {
       alert({
         id: 'grpc-find-service-error',
         title: "Couldn't Find Service",
         body: (
           <>
-            Failed to find service <InlineCode>{service}</InlineCode> in schema
+            Failed to find service <InlineCode>{request.service}</InlineCode> in schema
           </>
         ),
       });
       return;
     }
 
-    const schema = s?.methods.find((m) => m.name === method)?.schema;
-    if (method != null && schema == null) {
+    const schema = s?.methods.find((m) => m.name === request.method)?.schema;
+    if (request.method != null && schema == null) {
       alert({
         id: 'grpc-find-schema-error',
         title: "Couldn't Find Method",
         body: (
           <>
-            Failed to find method <InlineCode>{method}</InlineCode> for{' '}
-            <InlineCode>{service}</InlineCode> in schema
+            Failed to find method <InlineCode>{request.method}</InlineCode> for{' '}
+            <InlineCode>{request.service}</InlineCode> in schema
           </>
         ),
       });
@@ -84,66 +86,98 @@ export function GrpcEditor({
         body: (
           <VStack space={4}>
             <p>
-              For service <InlineCode>{service}</InlineCode> and method{' '}
-              <InlineCode>{method}</InlineCode>
+              For service <InlineCode>{request.service}</InlineCode> and method{' '}
+              <InlineCode>{request.method}</InlineCode>
             </p>
             <FormattedError>{String(err)}</FormattedError>
           </VStack>
         ),
       });
-      console.log('Failed to parse method schema', method, schema);
     }
-  }, [alert, services, method, service]);
+  }, [alert, services, request.method, request.service]);
+
+  const reflectionUnavailable = reflectionError?.match(/unimplemented/i);
+  reflectionError = reflectionUnavailable ? undefined : reflectionError;
 
   return (
     <div className="h-full w-full grid grid-cols-1 grid-rows-[minmax(0,100%)_auto_auto_minmax(0,auto)]">
       <Editor
         contentType="application/grpc"
-        defaultValue={defaultValue}
+        forceUpdateKey={request.id}
+        defaultValue={request.message}
         format={tryFormatJson}
         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>
+        actions={[
+          <div key="reflection" className="!opacity-100">
+            <Button
+              size="xs"
+              color={
+                reflectionLoading
+                  ? 'gray'
+                  : reflectionUnavailable
+                  ? 'secondary'
+                  : reflectionError
+                  ? 'danger'
+                  : 'gray'
+              }
+              isLoading={reflectionLoading}
+              onClick={() => {
+                dialog.show({
+                  title: 'Configure Schema',
+                  size: 'md',
+                  id: 'reflection-failed',
+                  render: ({ hide }) => (
+                    <VStack space={6} className="pb-5">
+                      {reflectionError && <FormattedError>{reflectionError}</FormattedError>}
+                      {reflectionUnavailable && request.protoFiles.length === 0 && (
+                        <Banner>
+                          <VStack space={3}>
+                            <p>
+                              <InlineCode>{request.url}</InlineCode> doesn&apos;t implement{' '}
+                              <Link href="https://github.com/grpc/grpc/blob/9aa3c5835a4ed6afae9455b63ed45c761d695bca/doc/server-reflection.md">
+                                Server Reflection
+                              </Link>{' '}
+                              . Please manually add the <InlineCode>.proto</InlineCode> files to get
+                              started.
+                            </p>
+                            <div>
                               <Button
+                                size="xs"
+                                color="gray"
+                                variant="border"
                                 onClick={() => {
-                                  dialog.hide('introspection-failed');
+                                  hide();
                                   onReflect();
                                 }}
-                                color="secondary"
                               >
-                                Try Again
+                                Retry Reflection
                               </Button>
-                            </HStack>
-                          </>
-                        ),
-                      });
-                    }}
-                  >
-                    {reflectionError ? 'Reflection Failed' : 'Reflecting'}
-                  </Button>
-                </div>,
-              ]
-            : []
-        }
+                            </div>
+                          </VStack>
+                        </Banner>
+                      )}
+                      <GrpcProtoSelection requestId={request.id} />
+                    </VStack>
+                  ),
+                });
+              }}
+            >
+              {reflectionLoading
+                ? 'Inspecting Schema'
+                : reflectionUnavailable
+                ? 'Select Proto Files'
+                : reflectionError
+                ? 'Server Error'
+                : services != null
+                ? 'Proto Schema'
+                : request.protoFiles.length > 0
+                ? count('Proto File', request.protoFiles.length)
+                : 'Select Schema'}
+            </Button>
+          </div>,
+        ]}
         {...extraEditorProps}
       />
     </div>