snapshot of https://github.com/mountain-loop/yaak.git (main, 2026-09-23; blobs > 131072B omitted)

apps/yaak-client/components/graphql/GraphQLEditor.tsx

@@ -0,0 +1,434 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { platform } from "@yaakapp-internal/platform";
+
+import { useAtom } from "jotai";
+import { useCallback, useEffect, useMemo } from "react";
+import { useLocalStorage } from "react-use";
+import { useIntrospectGraphQL } from "../../hooks/useIntrospectGraphQL";
+import { useStateWithDeps } from "../../hooks/useStateWithDeps";
+import { showDialog } from "../../lib/dialog";
+import { Button } from "../core/Button";
+import type { DropdownItem } from "../core/Dropdown";
+import { Dropdown } from "../core/Dropdown";
+import type { EditorProps } from "../core/Editor/Editor";
+import { Editor } from "../core/Editor/LazyEditor";
+import { IconButton } from "../core/IconButton";
+import type { RadioDropdownItem } from "../core/RadioDropdown";
+import { RadioDropdown } from "../core/RadioDropdown";
+import { Banner, FormattedError, Icon } from "@yaakapp-internal/ui";
+import { Separator } from "../core/Separator";
+import { tryFormatGraphql } from "../../lib/formatters";
+import { parseGraphQLOperationNames } from "../../lib/graphqlOperationNames";
+import { normalizeGraphQLBody } from "../../lib/requestBodyConversion";
+import { revealInFinderText } from "../../lib/reveal";
+import { showGraphQLDocExplorerAtom } from "./graphqlAtoms";
+
+type Props = Pick<EditorProps, "heightMode" | "className" | "forceUpdateKey"> & {
+  baseRequest: HttpRequest;
+  onChange: (body: HttpRequest["body"]) => void;
+  request: HttpRequest;
+};
+
+const OPERATION_NAME_NOT_SPECIFIED = "";
+
+// How much of the end of a schema filename is pinned when middle-truncating it.
+// Enough to keep the extension and a little of the name before it.
+const FILE_NAME_TAIL_CHARS = 12;
+
+export function GraphQLEditor(props: Props) {
+  // There's some weirdness with stale onChange being called when switching requests, so we'll
+  // key on the request ID as a workaround for now.
+  return <GraphQLEditorInner key={props.request.id} {...props} />;
+}
+
+function GraphQLEditorInner({ request, onChange, baseRequest, ...extraEditorProps }: Props) {
+  const [autoIntrospectDisabled, setAutoIntrospectDisabled] = useLocalStorage<
+    Record<string, boolean>
+  >("graphQLAutoIntrospectDisabled", {});
+  const {
+    schema,
+    isLoading,
+    error,
+    refetch,
+    clear,
+    loadFromFile,
+    reloadFromFile,
+    removeSchemaFile,
+    filePath,
+  } = useIntrospectGraphQL(baseRequest, {
+    disabled: autoIntrospectDisabled?.[baseRequest.id],
+  });
+
+  // Last path segment, for display only. The host owns real path semantics; this
+  // just needs something short enough to label the divider with.
+  const fileName = useMemo(() => filePath?.split(/[/\\]/).pop() || filePath, [filePath]);
+
+  // Selecting a file is all it takes — the request's source becomes that file,
+  // which is what keeps automatic introspection from overwriting it.
+  const handleLoadFromFile = useCallback(async () => {
+    const selected = await platform.dialog.open({
+      title: "Load GraphQL Schema",
+      multiple: false,
+      filters: [
+        {
+          name: "GraphQL Schema",
+          extensions: ["graphql", "graphqls", "gql", "json"],
+        },
+      ],
+    });
+    if (selected == null) return;
+
+    await loadFromFile(selected);
+  }, [loadFromFile]);
+  const [currentBody, setCurrentBody] = useStateWithDeps<{
+    query: string;
+    variables: string | undefined;
+    operationName?: string;
+  }>(() => {
+    // Migrate text bodies to GraphQL format
+    // NOTE: This is how GraphQL used to be stored
+    return normalizeGraphQLBody(request.body);
+  }, [extraEditorProps.forceUpdateKey]);
+
+  const [isDocOpenRecord, setGraphqlDocStateAtomValue] = useAtom(showGraphQLDocExplorerAtom);
+  const isDocOpen = isDocOpenRecord[request.id] !== undefined;
+  const parsedOperationNames = useMemo(
+    () => parseGraphQLOperationNames(currentBody.query),
+    [currentBody.query],
+  );
+  const operationNames = useMemo(() => parsedOperationNames ?? [], [parsedOperationNames]);
+
+  const handleChangeQuery = useCallback(
+    (query: string) => {
+      setCurrentBody(({ variables, operationName }) => {
+        const newBody = buildGraphQLBody({ query, variables, operationName });
+        onChange(newBody);
+        return newBody;
+      });
+    },
+    [onChange, setCurrentBody],
+  );
+
+  const handleChangeVariables = useCallback(
+    (variables: string) => {
+      setCurrentBody(({ query, operationName }) => {
+        const newBody = buildGraphQLBody({ query, variables, operationName });
+        onChange(newBody);
+        return newBody;
+      });
+    },
+    [onChange, setCurrentBody],
+  );
+
+  const handleChangeOperationName = useCallback(
+    (operationName: string) => {
+      setCurrentBody(({ query, variables }) => {
+        const newBody = buildGraphQLBody({ query, variables, operationName });
+        onChange(newBody);
+        return newBody;
+      });
+    },
+    [onChange, setCurrentBody],
+  );
+
+  useEffect(() => {
+    if (parsedOperationNames == null) {
+      return;
+    }
+
+    if (currentBody.operationName === OPERATION_NAME_NOT_SPECIFIED) {
+      return;
+    }
+
+    if (currentBody.operationName && operationNames.includes(currentBody.operationName)) {
+      return;
+    }
+
+    // Keep the saved body aligned with the visible default, so send/copy use the selected operation.
+    const operationName = operationNames[0];
+    if (currentBody.operationName === operationName) {
+      return;
+    }
+
+    setCurrentBody(({ query, variables }) => {
+      const newBody = buildGraphQLBody({ query, variables, operationName });
+      onChange(newBody);
+      return newBody;
+    });
+  }, [
+    currentBody.operationName,
+    onChange,
+    operationNames,
+    parsedOperationNames,
+    setCurrentBody,
+  ]);
+
+  const actions = useMemo<EditorProps["actions"]>(
+    () => [
+      operationNames.length > 0 ? (
+        <div key="operation" className="opacity-100!">
+          <RadioDropdown
+            value={currentBody.operationName ?? operationNames[0] ?? OPERATION_NAME_NOT_SPECIFIED}
+            onChange={handleChangeOperationName}
+            items={[
+              { type: "separator", label: "Operation Name" },
+              {
+                label: <span className="text-text-subtle italic">Not specified</span>,
+                value: OPERATION_NAME_NOT_SPECIFIED,
+              },
+              ...operationNames.map((operationName) => ({
+                label: operationName,
+                value: operationName,
+              })),
+            ] satisfies RadioDropdownItem<string>[]}
+          >
+            <Button size="sm" variant="border" title="Select Operation" forDropdown>
+              {currentBody.operationName === OPERATION_NAME_NOT_SPECIFIED ? (
+                <span className="text-text-subtle italic">Not specified</span>
+              ) : (
+                currentBody.operationName ?? operationNames[0]
+              )}
+            </Button>
+          </RadioDropdown>
+        </div>
+      ) : null,
+      <div key="introspection" className="opacity-100!">
+        {schema === undefined ? null /* Initializing */ : (
+          <Dropdown
+            items={[
+              ...((schema != null
+                ? [
+                    {
+                      label: "Clear Schema",
+                      onSelect: clear,
+                      color: "danger",
+                      leftSlot: <Icon icon="trash" />,
+                    },
+                  ]
+                : []) satisfies DropdownItem[]),
+              {
+                // Labels the source actions below it, so the menu says where the
+                // schema came from without spending a row on it.
+                type: "separator",
+                hidden: schema == null && filePath == null,
+                label:
+                  fileName == null || filePath == null ? undefined : (
+                    // Middle truncation: the head shrinks and ellipsizes while the
+                    // tail is pinned, so the extension always survives. Full path
+                    // on hover.
+                    <div className="flex min-w-0 max-w-[16rem] font-mono text-xs" title={filePath}>
+                      <span className="truncate">{fileName.slice(0, -FILE_NAME_TAIL_CHARS)}</span>
+                      <span className="shrink-0">{fileName.slice(-FILE_NAME_TAIL_CHARS)}</span>
+                    </div>
+                  ),
+                action:
+                  filePath == null
+                    ? undefined
+                    : {
+                        icon: "folder_symlink",
+                        title: revealInFinderText,
+                        onClick: () => platform.revealItemInDir(filePath),
+                      },
+              },
+              {
+                hidden: !error,
+                label: (
+                  <Banner color="danger">
+                    <p className="mb-1">Schema introspection failed</p>
+                    <Button
+                      size="xs"
+                      color="danger"
+                      variant="border"
+                      onClick={() => {
+                        showDialog({
+                          title: "Introspection Failed",
+                          size: "sm",
+                          id: "introspection-failed",
+                          render: ({ hide }) => (
+                            <>
+                              <FormattedError>{error ?? "unknown"}</FormattedError>
+                              <div className="w-full my-4">
+                                <Button
+                                  onClick={async () => {
+                                    hide();
+                                    await refetch();
+                                  }}
+                                  className="ml-auto"
+                                  color="primary"
+                                  size="sm"
+                                >
+                                  Retry Request
+                                </Button>
+                              </div>
+                            </>
+                          ),
+                        });
+                      }}
+                    >
+                      View Error
+                    </Button>
+                  </Banner>
+                ),
+                type: "content",
+              },
+              {
+                // One refresh action for either source: re-read the file, or
+                // re-introspect the server.
+                label: "Reload Schema",
+                leftSlot: <Icon icon="refresh" spin={isLoading} />,
+                keepOpenOnSelect: true,
+                // Failures surface through the hook's error state either way.
+                onSelect: async () => {
+                  if (filePath != null) await reloadFromFile();
+                  else await refetch();
+                },
+              },
+              {
+                label: filePath == null ? "Load Schema from File…" : "Load a Different File…",
+                leftSlot: <Icon icon="import" />,
+                onSelect: handleLoadFromFile,
+              },
+              {
+                hidden: filePath == null,
+                label: "Stop Using File",
+                leftSlot: <Icon icon="x" />,
+                onSelect: removeSchemaFile,
+              },
+              { type: "separator", label: "Settings" },
+              {
+                // Governs both sources: re-introspecting the server, and
+                // re-reading the file when the request is opened.
+                label: filePath == null ? "Automatic Introspection" : "Automatic Reload",
+                keepOpenOnSelect: true,
+                onSelect: () => {
+                  setAutoIntrospectDisabled({
+                    ...autoIntrospectDisabled,
+                    [baseRequest.id]: !autoIntrospectDisabled?.[baseRequest.id],
+                  });
+                },
+                leftSlot: (
+                  <Icon
+                    icon={
+                      autoIntrospectDisabled?.[baseRequest.id]
+                        ? "check_square_unchecked"
+                        : "check_square_checked"
+                    }
+                  />
+                ),
+              },
+            ]}
+          >
+            <Button
+              size="sm"
+              variant="border"
+              title="Refetch Schema"
+              isLoading={isLoading}
+              color={error ? "danger" : "default"}
+              forDropdown
+            >
+              {error ? "Introspection Failed" : schema ? "Schema" : "No Schema"}
+            </Button>
+          </Dropdown>
+        )}
+      </div>,
+      // Sits after the schema control it depends on. Always rendered, disabled
+      // without a schema, so the row never changes shape.
+      <div key="documentation" className="opacity-100!">
+          <IconButton
+            size="sm"
+            variant="border"
+            icon="book_open_text"
+            disabled={schema == null}
+            title={
+              schema == null
+                ? "Documentation unavailable without a schema"
+                : isDocOpen
+                  ? "Hide Documentation"
+                  : "Show Documentation"
+            }
+            onClick={() => {
+              setGraphqlDocStateAtomValue((v) => ({
+                ...v,
+                [request.id]: isDocOpen ? undefined : null,
+              }));
+            }}
+          />
+      </div>,
+    ],
+    [
+      schema,
+      clear,
+      error,
+      currentBody.operationName,
+      handleChangeOperationName,
+      isDocOpen,
+      isLoading,
+      operationNames,
+      refetch,
+      handleLoadFromFile,
+      reloadFromFile,
+      removeSchemaFile,
+      filePath,
+      fileName,
+      autoIntrospectDisabled,
+      baseRequest.id,
+      setGraphqlDocStateAtomValue,
+      request.id,
+      setAutoIntrospectDisabled,
+    ],
+  );
+
+  return (
+    <div className="h-full w-full grid grid-cols-1 grid-rows-[minmax(0,100%)_auto]">
+      <Editor
+        language="graphql"
+        heightMode="auto"
+        graphQLSchema={schema}
+        format={tryFormatGraphql}
+        defaultValue={currentBody.query}
+        onChange={handleChangeQuery}
+        placeholder="..."
+        actions={actions}
+        stateKey={`graphql_body.${request.id}`}
+        {...extraEditorProps}
+      />
+      <div className="grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 min-h-20">
+        <Separator dashed className="pb-1">
+          Variables
+        </Separator>
+        <Editor
+          language="json"
+          heightMode="auto"
+          defaultValue={currentBody.variables}
+          onChange={handleChangeVariables}
+          placeholder="{}"
+          stateKey={`graphql_vars.${request.id}`}
+          autocompleteFunctions
+          autocompleteVariables
+          {...extraEditorProps}
+        />
+      </div>
+    </div>
+  );
+}
+
+function buildGraphQLBody(body: {
+  query: string;
+  variables: string | undefined;
+  operationName?: string;
+}) {
+  const result: {
+    query: string;
+    variables: string | undefined;
+    operationName?: string;
+  } = {
+    query: body.query,
+    variables: body.variables || undefined,
+  };
+
+  if (typeof body.operationName === "string") {
+    result.operationName = body.operationName;
+  }
+
+  return result;
+}