change: remember variable panel state

closes #359
surrealdb · Aug 30, 2024 · c4b8433 · c4b8433
1 parent 559be75
commit c4b8433
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 38 deletions.
diff --git a/src/screens/database/views/graphql/GraphqlView/index.tsx b/src/screens/database/views/graphql/GraphqlView/index.tsx
@@ -9,7 +9,6 @@ import { PanelGroup, Panel } from "react-resizable-panels";
 import { PanelDragger } from "~/components/Pane/dragger";
 import { useActiveConnection } from "~/hooks/connection";
 import { useStable } from "~/hooks/stable";
-import { useInterfaceStore } from "~/stores/interface";
 import { useKeymap } from "~/hooks/keymap";
 import { Icon } from "~/components/Icon";
 import { iconCursor, iconGraphql, iconOpen, iconWarning } from "~/util/icons";
@@ -29,15 +28,14 @@ const VariablesPaneLazy = memo(VariablesPane);
 const ResultPaneLazy = memo(ResultPane);
 
 export function GraphqlView() {
-	const { setShowGraphqlVariables, toggleGraphqlVariables } = useInterfaceStore.getState();
+	const { updateCurrentConnection } = useConfigStore.getState();
 	const { setGraphqlResponse } = useDatabaseStore.getState();
 
 	const [variablesValid, setVariablesValid] = useState(true);
 	const [queryValid, setQueryValid] = useState(true);
 
 	const isLight = useIsLight();
 	const connection = useActiveConnection();
-	const showVariables = useInterfaceStore(state => state.showGraphqlVariables);
 	const activeView = useConfigStore(state => state.activeView);
 
 	const isAvailable = GQL_SUPPORTED.has(connection.authentication.protocol);
@@ -60,14 +58,22 @@ export function GraphqlView() {
 		}
 	});
 
+	const showVariables = connection.graphqlShowVariables;
+
+	const setShowVariables = useStable((graphqlShowVariables: boolean) => {
+		updateCurrentConnection({
+			graphqlShowVariables
+		});
+	});
+
 	const closeVariables = useStable(() => {
-		setShowGraphqlVariables(false);
+		setShowVariables(false);
 	});
 
 	const isValid = queryValid && variablesValid;
 
 	useIntent("run-graphql-query", runQuery);
-	useIntent("toggle-graphql-variables", toggleGraphqlVariables);
+	useIntent("toggle-graphql-variables", () => setShowVariables(!showVariables));
 
 	useKeymap([
 		["F9", () => runQuery()],
@@ -87,7 +93,7 @@ export function GraphqlView() {
 								setIsValid={setQueryValid}
 								isValid={queryValid}
 								showVariables={showVariables}
-								setShowVariables={setShowGraphqlVariables}
+								setShowVariables={setShowVariables}
 							/>
 						</Panel>
 						{showVariables && (

diff --git a/src/screens/database/views/query/QueryView/index.tsx b/src/screens/database/views/query/QueryView/index.tsx
@@ -31,7 +31,6 @@ import { useIntent } from "~/hooks/url";
 import { executeUserQuery } from "~/screens/database/connection/connection";
 import { useSetting } from "~/hooks/config";
 import { usePanelMinSize } from "~/hooks/panels";
-import { useInterfaceStore } from "~/stores/interface";
 import { useKeymap } from "~/hooks/keymap";
 import { CodeInput } from "~/components/Inputs";
 import { surrealql } from "@surrealdb/codemirror";
@@ -44,8 +43,7 @@ const VariablesPaneLazy = memo(VariablesPane);
 const ResultPaneLazy = memo(ResultPane);
 
 export function QueryView() {
-	const { setShowQueryVariables, toggleQueryVariables } = useInterfaceStore.getState();
-	const { saveQuery } = useConfigStore.getState();
+	const { saveQuery, updateQueryTab } = useConfigStore.getState();
 	const logoUrl = useLogoUrl();
 
 	const [orientation] = useSetting("appearance", "queryOrientation");
@@ -59,7 +57,6 @@ export function QueryView() {
 
 	const tags = useSavedQueryTags();
 	const active = useActiveQuery();
-	const showVariables = useInterfaceStore(state => state.showQueryVariables);
 	const activeView = useConfigStore(state => state.activeView);
 
 	const [isSaving, isSavingHandle] = useDisclosure();
@@ -121,8 +118,19 @@ export function QueryView() {
 		});
 	});
 
+	const showVariables = !!active?.showVariables;
+
+	const setShowVariables = useStable((showVariables: boolean) => {
+		if (!active) return;
+
+		updateQueryTab({
+			id: active?.id,
+			showVariables
+		});
+	});
+
 	const closeVariables = useStable(() => {
-		setShowQueryVariables(false);
+		setShowVariables(false);
 	});
 
 	const variablesOrientation = orientation === "horizontal"
@@ -133,7 +141,7 @@ export function QueryView() {
 	useIntent("open-query-history", showHistoryHandle.open);
 	useIntent("run-query", runQuery);
 	useIntent("save-query", handleSaveRequest);
-	useIntent("toggle-variables", toggleQueryVariables);
+	useIntent("toggle-variables", () => setShowVariables(!showVariables));
 
 	useKeymap([
 		["F9", () => runQuery()],
@@ -162,7 +170,7 @@ export function QueryView() {
 							selection={selection}
 							showVariables={showVariables}
 							onSaveQuery={handleSaveRequest}
-							setShowVariables={setShowQueryVariables}
+							setShowVariables={setShowVariables}
 							onSelectionChange={setSelection}
 							square={squareCards}
 						/>
@@ -175,7 +183,7 @@ export function QueryView() {
 									showVariables={showVariables}
 									selection={selection}
 									onSaveQuery={handleSaveRequest}
-									setShowVariables={setShowQueryVariables}
+									setShowVariables={setShowVariables}
 									onSelectionChange={setSelection}
 								/>
 							</Panel>
@@ -217,7 +225,7 @@ export function QueryView() {
 				<SegmentedControl
 					data={['Query', 'Variables']}
 					value={showVariables ? 'Variables' : 'Query'}
-					onChange={toggleQueryVariables}
+					onChange={() => setShowVariables(!showVariables)}
 					className={classes.switcher}
 					radius="xs"
 				/>

diff --git a/src/stores/interface.tsx b/src/stores/interface.tsx
@@ -13,8 +13,6 @@ export type InterfaceStore = {
 	showScopeSignup: boolean;
 	showChangelogAlert: boolean;
 	hasReadChangelog: boolean;
-	showQueryVariables: boolean;
-	showGraphqlVariables: boolean;
 
 	setWindowTitle: (title: string) => void;
 	setColorScheme: (colorScheme: ColorScheme) => void;
@@ -29,10 +27,6 @@ export type InterfaceStore = {
 	closeScopeSignup: () => void;
 	showChangelog: () => void;
 	readChangelog: () => void;
-	setShowQueryVariables: (show: boolean) => void;
-	setShowGraphqlVariables: (show: boolean) => void;
-	toggleQueryVariables: () => void;
-	toggleGraphqlVariables: () => void;
 };
 
 export const useInterfaceStore = create<InterfaceStore>((set) => ({
@@ -125,20 +119,4 @@ export const useInterfaceStore = create<InterfaceStore>((set) => ({
 		hasReadChangelog: true,
 	})),
 
-	setShowQueryVariables: (show) => set(() => ({
-		showQueryVariables: show,
-	})),
-
-	toggleQueryVariables: () => set((state) => ({
-		showQueryVariables: !state.showQueryVariables,
-	})),
-
-	setShowGraphqlVariables: (show) => set(() => ({
-		showGraphqlVariables: show,
-	})),
-
-	toggleGraphqlVariables: () => set((state) => ({
-		showGraphqlVariables: !state.showGraphqlVariables,
-	})),
-
 }));
diff --git a/src/types.tsx b/src/types.tsx
@@ -105,6 +105,7 @@ export interface Connection {
 	designerTableList: boolean;
 	graphqlQuery: string;
 	graphqlVariables: string;
+	graphqlShowVariables: boolean;
 }
 
 export interface Template {
@@ -181,6 +182,7 @@ export interface TabQuery {
 	variables: string;
 	valid: boolean;
 	resultMode: ResultMode;
+	showVariables: boolean;
 }
 
 export interface HistoryQuery {

diff --git a/src/util/defaults.tsx b/src/util/defaults.tsx
@@ -114,7 +114,8 @@ export function createBaseConnection(settings: SurrealistSettings): Connection {
 		diagramDirection: settings.appearance.defaultDiagramDirection,
 		diagramShowLinks: settings.appearance.defaultDiagramShowLinks,
 		graphqlQuery: "",
-		graphqlVariables: ""
+		graphqlVariables: "",
+		graphqlShowVariables: false
 	};
 }
 
@@ -126,6 +127,7 @@ export function createBaseTab(settings: SurrealistSettings, query?: string, ): T
 		variables: "{}",
 		valid: query ? !validateQuery(query) : true,
 		resultMode: settings.appearance.defaultResultMode,
+		showVariables: false,
 	};
 }