From 0401cb92aac8e518f85b51d33c111d43fedf3ca5 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 17 Nov 2023 07:51:03 -0800
Subject: [PATCH] Format GraphQL variables

---
 src-web/components/GraphQLEditor.tsx       | 8 +++++---
 src-web/components/core/Dialog.tsx         | 2 +-
 src-web/components/core/FormattedError.tsx | 5 +++--
 src-web/hooks/useIntrospectGraphQL.ts      | 3 ++-
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src-web/components/GraphQLEditor.tsx b/src-web/components/GraphQLEditor.tsx
index 15129a54..3c70f37f 100644
--- a/src-web/components/GraphQLEditor.tsx
+++ b/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"
diff --git a/src-web/components/core/Dialog.tsx b/src-web/components/core/Dialog.tsx
index 4347decf..4b4249a5 100644
--- a/src-web/components/core/Dialog.tsx
+++ b/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
diff --git a/src-web/components/core/FormattedError.tsx b/src-web/components/core/FormattedError.tsx
index 0c5363f1..9a1142bb 100644
--- a/src-web/components/core/FormattedError.tsx
+++ b/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',
-        'whitespace-normal border border-red-500 border-dashed',
+        'w-full text-sm select-auto cursor-text bg-gray-100 p-3 rounded',
+        'whitespace-pre border border-red-500 border-dashed overflow-x-auto',
       )}
     >
       {children}
diff --git a/src-web/hooks/useIntrospectGraphQL.ts b/src-web/hooks/useIntrospectGraphQL.ts
index 3b272e4b..006ea34c 100644
--- a/src-web/hooks/useIntrospectGraphQL.ts
+++ b/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}`),
         );
       }