feat: improve GraphiQL UI

- Force light mode - Improve graphql prop editor UI Change-Id: Id75b0181e160eeb8aa8f2b514e174dcd8de28948 GitOrigin-RevId: 559acb7a388161bb46b4995a6b005188ef98cab8
plasmicapp · Nov 25, 2024 · 119e517 · 119e517
1 parent 666f720
commit 119e517
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 37 deletions.
diff --git a/platform/wab/src/wab/client/components/sidebar-tabs/ComponentProps/GraphQLEditor.tsx b/platform/wab/src/wab/client/components/sidebar-tabs/ComponentProps/GraphQLEditor.tsx
@@ -1,8 +1,8 @@
 import { reactConfirm } from "@/wab/client/components/quick-modals";
 import { ObserverLoadable } from "@/wab/client/components/widgets";
 import Chip from "@/wab/client/components/widgets/Chip";
-import React from "react";
 import { Modal } from "@/wab/client/components/widgets/Modal";
+import React from "react";
 
 export interface GraphQLValue {
   query: string;
@@ -43,7 +43,11 @@ export const GraphQLEditor = (props: {
     visible: show,
     width: "80%",
     minWidth: 1024,
-    bodyStyle: { overflowX: "scroll" as any, padding: 8 },
+    bodyStyle: {
+      height: "75vh",
+      maxHeight: "75vh",
+      padding: 0,
+    },
     footer: null,
     onCancel,
   };
@@ -60,35 +64,27 @@ export const GraphQLEditor = (props: {
         // Unmount the GraphiQLExplorer component when the modal closes
         <Modal {...modalProps} title={title}>
           {show && (
-            <div
-              style={{
-                height: "80vh",
-                minHeight: 512,
-              }}
-              className="flex-col"
-            >
-              <ObserverLoadable
-                loader={() =>
-                  import("@/wab/client/data/GraphqlBuilder").then(
-                    ({ default: GraphiqlWithExplorer }) => GraphiqlWithExplorer
-                  )
-                }
-                contents={(GraphiqlWithExplorer) => (
-                  <GraphiqlWithExplorer
-                    url={endpoint}
-                    headers={headers}
-                    defaultQuery={value?.query ?? ""}
-                    defaultVariables={JSON.stringify(value?.variables ?? {})}
-                    method={method}
-                    onCancel={onCancel}
-                    onSave={(query, variables) => {
-                      onChange?.({ query, variables: tryJsonParse(variables) });
-                      setShow(false);
-                    }}
-                  />
-                )}
-              />
-            </div>
+            <ObserverLoadable
+              loader={() =>
+                import("@/wab/client/data/GraphqlBuilder").then(
+                  ({ default: GraphiqlWithExplorer }) => GraphiqlWithExplorer
+                )
+              }
+              contents={(GraphiqlWithExplorer) => (
+                <GraphiqlWithExplorer
+                  url={endpoint}
+                  headers={headers}
+                  defaultQuery={value?.query ?? ""}
+                  defaultVariables={JSON.stringify(value?.variables ?? {})}
+                  method={method}
+                  onCancel={onCancel}
+                  onSave={(query, variables) => {
+                    onChange?.({ query, variables: tryJsonParse(variables) });
+                    setShow(false);
+                  }}
+                />
+              )}
+            />
           )}
         </Modal>
       )}

diff --git a/platform/wab/src/wab/client/components/sidebar-tabs/DataSource/DataSourceOpPicker.tsx b/platform/wab/src/wab/client/components/sidebar-tabs/DataSource/DataSourceOpPicker.tsx
@@ -187,7 +187,12 @@ import {
 } from "@/wab/shared/model/classes";
 import { smartHumanize } from "@/wab/shared/strs";
 import { explorerPlugin } from "@graphiql/plugin-explorer";
-import { PrettifyIcon, QueryEditor, usePrettifyEditors } from "@graphiql/react";
+import {
+  PrettifyIcon,
+  QueryEditor,
+  usePrettifyEditors,
+  useTheme,
+} from "@graphiql/react";
 import { Fetcher } from "@graphiql/toolkit";
 import { PlasmicDataSourceContextProvider } from "@plasmicapp/react-web";
 import cx from "classnames";
@@ -3618,9 +3623,12 @@ function GraphqlQueryFieldInner(props: {
   onChange: (query: string, extraState: any) => void;
 }) {
   const { onClickReference, onChange } = props;
-  // We need GraphqlQueryFieldInner because usePrettifyEditors()
-  // needs to be in a component inside <GraphiQLProvider/>
+
+  // We need GraphqlQueryFieldInner because @graphiql/react hooks
+  // need to be in a component inside <GraphiQLProvider/>
+  const { theme } = useTheme("light");
   const prettify = usePrettifyEditors();
+
   return (
     <Stated defaultValue={true}>
       {(showExplorer, setShowExplorer) => (

diff --git a/platform/wab/src/wab/client/data/GraphqlBuilder.tsx b/platform/wab/src/wab/client/data/GraphqlBuilder.tsx
@@ -5,6 +5,10 @@ import GraphiQL from "graphiql";
 import "graphiql/graphiql.css";
 import React, { useMemo, useState } from "react";
 
+/**
+ * This fetcher is only used for GraphiQL and may differ from the fetcher
+ * implementation used during rendering.
+ */
 const createFetcher = ({
   url: urlStr,
   headers,
@@ -71,8 +75,8 @@ export default function GraphiqlWithExplorer({
   const [query, setQuery] = useState(defaultQuery ?? "");
   const [variables, setVariables] = useState(defaultVariables);
   return (
-    <div className="flex-col fill-height">
-      <div className={"fill-height standard-gql-ui"}>
+    <div className="fill-height flex-col">
+      <div className={"fill-height overflow-scroll standard-gql-ui"}>
         <GraphiQL
           fetcher={fetcher}
           query={query}
@@ -85,7 +89,7 @@ export default function GraphiqlWithExplorer({
         />
       </div>
 
-      <div className="flex-no-shrink flex flex-right mt-lg mr-xlg">
+      <div className="flex-no-shrink flex flex-right pv-lg ph-xlg bt-dim">
         <Button
           onClick={() => {
             onCancel?.();