Fix completion icons (#465)

surrealdb · Sep 20, 2024 · ebc7bae · ebc7bae
1 parent 9260267
commit ebc7bae
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 60 deletions.
diff --git a/src/components/CodeEditor/style.module.scss b/src/components/CodeEditor/style.module.scss
@@ -221,10 +221,6 @@
 		}
 	}
 
-	:global(.cm-completionIcon[aria-hidden]) {
-		display: none;
-	}
-
 	:global(.cm-diagnosticText) {
 		font-family: var(--mantine-font-family-monospace);
 	}

diff --git a/src/components/Pane/index.tsx b/src/components/Pane/index.tsx
@@ -6,6 +6,7 @@ import {
 	type PaperProps,
 	Text,
 } from "@mantine/core";
+import clsx from "clsx";
 import type { HTMLAttributes } from "react";
 import { useIsLight } from "~/hooks/theme";
 import { Icon } from "../Icon";
@@ -28,6 +29,7 @@ export function ContentPane({
 	children,
 	title,
 	icon,
+	className,
 	leftSection,
 	infoSection,
 	rightSection,
@@ -40,7 +42,7 @@ export function ContentPane({
 	return (
 		<Paper
 			radius="lg"
-			className={classes.root}
+			className={clsx(classes.root, className)}
 			pos="relative"
 			opacity={disabled ? 0.5 : 1}
 			style={{ pointerEvents: disabled ? "none" : undefined }}

diff --git a/src/editor/icons.tsx b/src/editor/icons.tsx
@@ -12,7 +12,7 @@ const TYPE_ICONS: TypeIcon[] = [
  * Generate and insert custom completion icon styles
  */
 export function generateEditorIcons() {
-	const definitions = TYPE_ICONS.map((info, type) => {
+	const definitions = TYPE_ICONS.map((info) => {
 		const svg = btoa(
 			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="${info.icon}" fill="${info.color}" stroke="${info.color}" stroke-width="0.75"></path></svg>`,
 		);

diff --git a/src/hooks/graphql.ts b/src/hooks/graphql.ts
@@ -20,7 +20,9 @@ export function useGraphqlIntrospection() {
 			const response = await sendGraphqlRequest(query, {});
 
 			if (!response.success) {
-				throw new Error(response.result);
+				console.warn("Failed to introspect GraphQL schema", response.result);
+				setSchema(null);
+				return;
 			}
 
 			const result = JSON.parse(response.result);

diff --git a/src/screens/database/views/graphql/QueryPane/index.tsx b/src/screens/database/views/graphql/QueryPane/index.tsx
@@ -1,14 +1,25 @@
+import classes from "./style.module.scss";
+
+import { ActionIcon, Alert, Badge, Button, Group, Stack, Tooltip } from "@mantine/core";
+
+import {
+	graphqlParser,
+	graphqlSuggestions,
+	handleFillFields,
+	runGraphqlQueryKeymap,
+} from "~/editor";
+
+import {
+	iconAutoFix,
+	iconDollar,
+	iconGraphql,
+	iconOpen,
+	iconRefresh,
+	iconText,
+} from "~/util/icons";
+
 import { Prec } from "@codemirror/state";
 import { type EditorView, keymap, lineNumbers } from "@codemirror/view";
-import {
-	ActionIcon,
-	Alert,
-	Badge,
-	Button,
-	Group,
-	Stack,
-	Tooltip,
-} from "@mantine/core";
 import { Text } from "@mantine/core";
 import { graphql, updateSchema } from "cm6-graphql";
 import { type GraphQLSchema, parse, print } from "graphql";
@@ -17,26 +28,12 @@ import { CodeEditor } from "~/components/CodeEditor";
 import { Icon } from "~/components/Icon";
 import { Link } from "~/components/Link";
 import { ContentPane } from "~/components/Pane";
-import {
-	graphqlParser,
-	graphqlSuggestions,
-	handleFillFields,
-	runGraphqlQueryKeymap,
-} from "~/editor";
 import { useActiveConnection } from "~/hooks/connection";
 import { useDebouncedFunction } from "~/hooks/debounce";
 import { useStable } from "~/hooks/stable";
 import { useIntent } from "~/hooks/url";
 import { useConfigStore } from "~/stores/config";
 import { showError, showInfo, tryParseParams } from "~/util/helpers";
-import {
-	iconAutoFix,
-	iconDollar,
-	iconGraphql,
-	iconOpen,
-	iconRefresh,
-	iconText,
-} from "~/util/icons";
 import { formatValue } from "~/util/surrealql";
 
 export interface QueryPaneProps {
@@ -109,10 +106,7 @@ export function QueryPane({
 
 			const variableNames = document.definitions.reduce((acc, def) => {
 				if (def.kind === "OperationDefinition") {
-					const vars =
-						def.variableDefinitions?.map(
-							(v) => v.variable.name.value,
-						) ?? [];
+					const vars = def.variableDefinitions?.map((v) => v.variable.name.value) ?? [];
 
 					acc.push(...vars);
 					return acc;
@@ -123,9 +117,7 @@ export function QueryPane({
 
 			const currentVars = tryParseParams(connection.graphqlQuery);
 			const currentKeys = Object.keys(currentVars);
-			const variables = variableNames.filter(
-				(v) => !currentKeys.includes(v),
-			);
+			const variables = variableNames.filter((v) => !currentKeys.includes(v));
 
 			const newVars = variables.reduce(
 				(acc, v) => {
@@ -165,10 +157,14 @@ export function QueryPane({
 		<ContentPane
 			title="GraphQL"
 			icon={iconGraphql}
+			className={classes.root}
 			rightSection={
 				<Group gap="sm">
 					{!isValid && (
-						<Badge color="red" variant="light">
+						<Badge
+							color="red"
+							variant="light"
+						>
 							Invalid query
 						</Badge>
 					)}
@@ -199,7 +195,10 @@ export function QueryPane({
 						label={
 							<Stack gap={4}>
 								<Text>Infer variables from query</Text>
-								<Text c="dimmed" size="sm">
+								<Text
+									c="dimmed"
+									size="sm"
+								>
 									Automatically add missing variables.
 								</Text>
 							</Stack>
@@ -214,19 +213,11 @@ export function QueryPane({
 						</ActionIcon>
 					</Tooltip>
 
-					<Tooltip
-						label={
-							showVariables ? "Hide variables" : "Show variables"
-						}
-					>
+					<Tooltip label={showVariables ? "Hide variables" : "Show variables"}>
 						<ActionIcon
 							onClick={toggleVariables}
 							variant="light"
-							aria-label={
-								showVariables
-									? "Hide variables"
-									: "Show variables"
-							}
+							aria-label={showVariables ? "Hide variables" : "Show variables"}
 						>
 							<Icon path={iconDollar} />
 						</ActionIcon>
@@ -246,12 +237,7 @@ export function QueryPane({
 						graphqlParser(),
 						// graphqlFillFields(),
 						lineNumbers(),
-						Prec.high(
-							keymap.of([
-								...runGraphqlQueryKeymap,
-								...graphqlSuggestions,
-							]),
-						),
+						Prec.high(keymap.of([...runGraphqlQueryKeymap, ...graphqlSuggestions])),
 					]}
 				/>
 			) : (
@@ -261,11 +247,9 @@ export function QueryPane({
 					title="GraphQL is not enabled on the remote instance"
 				>
 					<Stack>
-						Visit the SurrealDB documentation to learn how to enable
-						GraphQL on your instance
-						<Link
-							href="https://surrealdb.com/docs/surrealdb/querying/graphql/surrealist"
-						>
+						Visit the SurrealDB documentation to learn how to enable GraphQL on your
+						instance
+						<Link href="https://surrealdb.com/docs/surrealdb/querying/graphql/surrealist">
 							<Button
 								color="slate"
 								variant="light"

diff --git a/src/screens/database/views/graphql/QueryPane/style.module.scss b/src/screens/database/views/graphql/QueryPane/style.module.scss
@@ -0,0 +1,7 @@
+.root {
+
+	:global(.cm-completionIcon) {
+		display: none;
+	}
+
+}