Format GraphQL variables

src-web/components/GraphQLEditor.tsx

@@ -2,6 +2,7 @@ import { updateSchema } from 'cm6-graphql';
 import type { EditorView } from 'codemirror';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useIntrospectGraphQL } from '../hooks/useIntrospectGraphQL';
+import { tryFormatJson } from '../lib/formatters';
 import type { HttpRequest } from '../lib/models';
 import { Button } from './core/Button';
 import type { EditorProps } from './core/Editor';
@@ -89,10 +90,10 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
               onClick={() => {
                 dialog.show({
                   title: 'Introspection Failed',
-                  size: 'sm',
+                  size: 'dynamic',
                   id: 'introspection-failed',
                   render: () => (
-                    <div className="whitespace-pre-wrap">
+                    <>
                       <FormattedError>{error ?? 'unknown'}</FormattedError>
                       <div className="w-full mt-3">
                         <Button
@@ -107,7 +108,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
                           Try Again
                         </Button>
                       </div>
-                    </div>
+                    </>
                   ),
                 });
               }}
@@ -121,6 +122,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
       <Separator variant="primary" />
       <p className="pt-1 text-gray-500 text-sm">Variables</p>
       <Editor
+        format={tryFormatJson}
         contentType="application/json"
         defaultValue={JSON.stringify(variables, null, 2)}
         heightMode="auto"

src-web/components/core/Dialog.tsx

@@ -72,7 +72,7 @@ export function Dialog({
               <span />
             )}
             {description && <p id={descriptionId}>{description}</p>}
-            <div className="h-full w-full">{children}</div>
+            <div className="h-full w-full grid grid-cols-[minmax(0,1fr)]">{children}</div>
             {/*Put close at the end so that it's the last thing to be tabbed to*/}
             {!hideX && (
               <IconButton

src-web/components/core/FormattedError.tsx

@@ -5,11 +5,12 @@ interface Props {
 }
 
 export function FormattedError({ children }: Props) {
+  console.log('ERROR', children);
   return (
     <pre
       className={classNames(
-        'text-sm select-auto cursor-text bg-gray-100 p-3 rounded',
+        'w-full text-sm select-auto cursor-text bg-gray-100 p-3 rounded',
-        'whitespace-normal border border-red-500 border-dashed',
+        'whitespace-pre border border-red-500 border-dashed overflow-x-auto',
       )}
     >
       {children}

src-web/hooks/useIntrospectGraphQL.ts

@@ -44,8 +44,9 @@ export function useIntrospectGraphQL(baseRequest: HttpRequest) {
       }
 
       if (response.status < 200 || response.status >= 300) {
+        const text = await getResponseBodyText(response);
         return Promise.reject(
-          new Error(`Request failed with status ${response.status}.\n\n${response.body}`),
+          new Error(`Request failed with status ${response.status}.\n\n${text}`),
         );
       }