Retry button on introspection errors

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Yaak",
-    "version": "2023.0.17"
+    "version": "2023.0.18"
   },
   "tauri": {
     "windows": [],

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">
+        <FormattedError>{message}</FormattedError>
-          {message}
-        </pre>
         <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>
+  );
+}

src-web/hooks/useIntrospectGraphQL.ts

@@ -1,5 +1,5 @@
 import type { IntrospectionQuery } from 'graphql';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocalStorage } from 'react-use';
 import { buildClientSchema, getIntrospectionQuery } from '../components/core/Editor';
 import { minPromiseMillis } from '../lib/minPromiseMillis';
@@ -17,6 +17,7 @@ export function useIntrospectGraphQL(baseRequest: HttpRequest) {
   // Debounce the request because it can change rapidly and we don't
   // want to send so too many requests.
   const request = useDebouncedValue(baseRequest);
+  const [refetchKey, setRefetchKey] = useState<number>(0);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>();
   const [introspection, setIntrospection] = useLocalStorage<IntrospectionQuery>(
@@ -63,12 +64,16 @@ export function useIntrospectGraphQL(baseRequest: HttpRequest) {
     runIntrospection(); // Run immediately
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [request.id, request.method]);
+  }, [request.id, request.url, request.method, refetchKey]);
+
+  const refetch = useCallback(() => {
+    setRefetchKey((k) => k + 1);
+  }, []);
 
   const schema = useMemo(
     () => (introspection ? buildClientSchema(introspection) : undefined),
     [introspection],
   );
 
-  return { schema, isLoading, error };
+  return { schema, isLoading, error, refetch };
 }

src-web/lib/responseBody.ts

@@ -3,7 +3,7 @@ import type { HttpResponse } from './models';
 
 export async function getResponseBodyText(response: HttpResponse): Promise<string | null> {
   if (response.body) {
-    const uint8Array = Uint8Array.of(...response.body);
+    const uint8Array = Uint8Array.from(response.body);
     return new TextDecoder().decode(uint8Array);
   }
   if (response.bodyPath) {
@@ -14,7 +14,7 @@ export async function getResponseBodyText(response: HttpResponse): Promise<strin
 
 export async function getResponseBodyBlob(response: HttpResponse): Promise<Uint8Array | null> {
   if (response.body) {
-    return Uint8Array.of(...response.body);
+    return Uint8Array.from(response.body);
   }
   if (response.bodyPath) {
     return readBinaryFile(response.bodyPath);

src-web/lib/theme/window.ts

@@ -8,9 +8,9 @@ const darkTheme: AppTheme = {
   appearance: 'dark',
   layers: {
     root: {
-      blackPoint: 0.09,
+      blackPoint: 0.2,
       colors: {
-        gray: '#9b8ebe',
+        gray: '#6b5b98',
         red: '#ff417b',
         orange: '#fd9014',
         yellow: '#e8d13f',

tailwind.config.cjs

@@ -29,7 +29,21 @@ module.exports = {
     },
     fontFamily: {
       "mono": ["JetBrains Mono", "Menlo", "monospace"],
-      "sans": ["Inter", "sans-serif"]
+      "sans": [
+        "Inter",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Roboto",
+        "Oxygen-Sans",
+        "Ubuntu",
+        "Cantarell",
+        "Helvetica Neue",
+        "sans-serif",
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+      ],
     },
     fontSize: {
       '3xs': "0.6rem",