Retry button on introspection errors

src-web/components/GraphQLEditor.tsx

@@ -6,6 +6,7 @@ import type { HttpRequest } from '../lib/models';
 import { Button } from './core/Button';
 import type { EditorProps } from './core/Editor';
 import { Editor, formatGraphQL } from './core/Editor';
+import { FormattedError } from './core/FormattedError';
 import { Separator } from './core/Separator';
 import { useDialog } from './DialogContext';
 
@@ -24,7 +25,7 @@ interface GraphQLBody {
 
 export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEditorProps }: Props) {
   const editorViewRef = useRef<EditorView>(null);
-  const { schema, isLoading, error } = useIntrospectGraphQL(baseRequest);
+  const { schema, isLoading, error, refetch } = useIntrospectGraphQL(baseRequest);
   const { query, variables } = useMemo<GraphQLBody>(() => {
     if (defaultValue === undefined) {
       return { query: '', variables: {} };
@@ -89,7 +90,25 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
                 dialog.show({
                   title: 'Introspection Failed',
                   size: 'sm',
-                  render: () => <div className="whitespace-pre-wrap">{error}</div>,
+                  id: 'introspection-failed',
+                  render: () => (
+                    <div className="whitespace-pre-wrap">
+                      <FormattedError>{error ?? 'unknown'}</FormattedError>
+                      <div className="w-full mt-3">
+                        <Button
+                          onClick={() => {
+                            dialog.hide('introspection-failed');
+                            refetch();
+                          }}
+                          className="ml-auto"
+                          color="secondary"
+                          size="sm"
+                        >
+                          Try Again
+                        </Button>
+                      </div>
+                    </div>
+                  ),
                 });
               }}
             >

src-web/components/RouteError.tsx

@@ -1,6 +1,7 @@
 import { useRouteError } from 'react-router-dom';
 import { useAppRoutes } from '../hooks/useAppRoutes';
 import { Button } from './core/Button';
+import { FormattedError } from './core/FormattedError';
 import { Heading } from './core/Heading';
 import { VStack } from './core/Stacks';
 
@@ -14,9 +15,7 @@ export default function RouteError() {
     <div className="flex items-center justify-center h-full">
       <VStack space={5} className="max-w-[30rem] !h-auto">
         <Heading>Route Error 🔥</Heading>
-        <pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal">
-          {message}
-        </pre>
+        <FormattedError>{message}</FormattedError>
         <VStack space={2}>
           <Button
             color="primary"

src-web/components/core/FormattedError.tsx

@@ -0,0 +1,11 @@
+interface Props {
+  children: string;
+}
+
+export function FormattedError({ children }: Props) {
+  return (
+    <pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal border border-red-500 border-dashed">
+      {children}
+    </pre>
+  );
+}