Add SQL page to admin interface

apps/admin/src/App.tsx

@@ -9,6 +9,7 @@ import {
 import {
   MdAdminPanelSettings,
   MdAccountTree,
+  MdCode,
   MdOpenInNew,
   MdPublic,
   MdTableChart,
@@ -20,6 +21,7 @@ import {
   DataCatalogPage,
   LoginPage,
   RecordCrossmatchDetailsPage,
+  SqlQueryPage,
   TableDetailsPage,
   TablesPage,
 } from "./pages";
@@ -101,6 +103,9 @@ function Layout() {
               <NavItem to="/data-catalog" label="Data catalog">
                 <MdAccountTree size={20} />
               </NavItem>
+              <NavItem to="/sql" label="SQL">
+                <MdCode size={20} />
+              </NavItem>
               <NavItem to="/tasks" label="Tasks">
                 <MdAdminPanelSettings size={20} />
               </NavItem>
@@ -125,6 +130,7 @@ function App() {
             <Route path="/tasks" element={<AdminPage />} />
             <Route path="/merge-pgc" element={<AdminMergePgcPage />} />
             <Route path="/tables" element={<TablesPage />} />
+            <Route path="/sql" element={<SqlQueryPage />} />
             <Route path="/data-catalog" element={<DataCatalogPage />} />
             <Route path="/data-catalog/query" element={<DataCatalogPage />} />
             <Route

apps/admin/src/pages/DataCatalog.tsx

@@ -32,7 +32,7 @@ import { useDataFetching } from "@hyperleda/lib/hooks";
 import { Button } from "@hyperleda/lib/ui";
 import classNames from "classnames";
 import { CatalogViewTabs } from "./catalog/CatalogViewTabs";
-import { CatalogSqlPanel } from "./catalog/CatalogSqlPanel";
+import { CatalogSqlPanel } from "@hyperleda/lib/ui";
 import {
   DEFAULT_SQL_EXAMPLE,
   defaultSelectForTable,

apps/admin/src/pages/SqlQuery.tsx

@@ -0,0 +1,58 @@
+import { ReactElement, useEffect, useLayoutEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import type { TapSyncResponse } from "@hyperleda/lib/clients/backend";
+import { tapSync } from "../clients/admin";
+import { adminClient } from "../clients";
+import {
+  DEFAULT_SQL_EXAMPLE,
+  formatApiError,
+  parseSqlPermalink,
+} from "@hyperleda/lib/tap";
+import { CatalogSqlPanel } from "@hyperleda/lib/ui";
+
+async function executeAdminSqlQuery(sql: string): Promise<TapSyncResponse> {
+  const response = await tapSync({
+    client: adminClient,
+    query: { query: sql },
+  });
+  if (response.error) {
+    throw new Error(formatApiError(response.error));
+  }
+  if (!response.data?.data) {
+    throw new Error("No data received from server");
+  }
+  return response.data.data;
+}
+
+export function SqlQueryPage(): ReactElement {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const permalinkSql = searchParams.get("q");
+  const [sqlDraft, setSqlDraft] = useState(DEFAULT_SQL_EXAMPLE);
+
+  useEffect(() => {
+    document.title = "SQL | HyperLEDA";
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!permalinkSql) {
+      return;
+    }
+    setSqlDraft(parseSqlPermalink(permalinkSql));
+  }, [permalinkSql]);
+
+  function handleQueryRun(sql: string): void {
+    setSearchParams({ q: sql }, { replace: true });
+  }
+
+  return (
+    <div className="p-8">
+      <CatalogSqlPanel
+        sql={sqlDraft}
+        onSqlChange={setSqlDraft}
+        permalinkRunKey={permalinkSql ? parseSqlPermalink(permalinkSql) : null}
+        onQueryRun={handleQueryRun}
+        executeQuery={executeAdminSqlQuery}
+      />
+    </div>
+  );
+}

apps/admin/src/pages/index.ts

@@ -1,3 +1,4 @@
+export { SqlQueryPage } from "./SqlQuery";
 export { AdminPage } from "./Admin";
 export { AdminMergePgcPage } from "./AdminMergePgc";
 export { CrossmatchResultsPage } from "./CrossmatchResults";

apps/web/package.json

@@ -13,11 +13,13 @@
   },
   "dependencies": {
     "@hyperleda/lib": "*",
+    "@monaco-editor/react": "^4.7.0",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.3",
     "axios": "^1.19.0",
     "classnames": "^2.5.1",
     "flowbite-react": "^0.12.17",
+    "monaco-editor": "^0.56.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-icons": "^5.7.0",

apps/web/src/App.tsx

@@ -6,6 +6,7 @@ import { HomePage } from "./pages/Home";
 import { SearchResultsPage } from "./pages/SearchResults";
 import { ObjectDetailsPage } from "./pages/ObjectDetails";
 import { NotFoundPage } from "./pages/NotFound";
+import { SqlQueryPage } from "./pages/SqlQuery";
 import { Navbar } from "./components/ui/Navbar";
 import { SearchBar } from "./components/ui/Searchbar";
 
@@ -53,6 +54,7 @@ function App() {
             }
           />
           <Route path="/query" element={<SearchResultsPage />} />
+          <Route path="/sql" element={<SqlQueryPage />} />
           <Route
             path="/object/:pgcId"
             element={

apps/web/src/components/ui/Navbar.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { MdInfo, MdOpenInNew, MdSearch } from "react-icons/md";
+import { MdCode, MdInfo, MdOpenInNew, MdSearch } from "react-icons/md";
 import { NavRail, NavButton, NavItem, ThemeSwitcher } from "@hyperleda/lib/ui";
 import { Link } from "@hyperleda/lib/ui";
 
 const navItems = [
   { to: "/", icon: <MdSearch size={20} />, label: "Object search", end: true },
+  { to: "/sql", icon: <MdCode size={20} />, label: "SQL", end: true },
 ];
 
 const configuredProductionWeb = "https://leda.sao.ru";

apps/web/src/pages/SqlQuery.tsx

@@ -0,0 +1,36 @@
+import { ReactElement, useEffect, useLayoutEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { CatalogSqlPanel } from "@hyperleda/lib/ui";
+import { DEFAULT_SQL_EXAMPLE, parseSqlPermalink } from "@hyperleda/lib/tap";
+
+export function SqlQueryPage(): ReactElement {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const permalinkSql = searchParams.get("q");
+  const [sqlDraft, setSqlDraft] = useState(DEFAULT_SQL_EXAMPLE);
+
+  useEffect(() => {
+    document.title = "SQL | HyperLEDA";
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!permalinkSql) {
+      return;
+    }
+    setSqlDraft(parseSqlPermalink(permalinkSql));
+  }, [permalinkSql]);
+
+  function handleQueryRun(sql: string): void {
+    setSearchParams({ q: sql }, { replace: true });
+  }
+
+  return (
+    <div className="p-8">
+      <CatalogSqlPanel
+        sql={sqlDraft}
+        onSqlChange={setSqlDraft}
+        permalinkRunKey={permalinkSql ? parseSqlPermalink(permalinkSql) : null}
+        onQueryRun={handleQueryRun}
+      />
+    </div>
+  );
+}

packages/lib/package.json

@@ -21,6 +21,8 @@
     "react-markdown": "^10.1.0"
   },
   "peerDependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "monaco-editor": "^0.56.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-icons": "^5.7.0",

apps/admin/src/pages/catalog/CatalogSqlPanel.tsx → packages/lib/src/ui/CatalogSqlPanel.tsx

@@ -1,9 +1,13 @@
 import { FormEvent, ReactElement, useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
-import type { TapSchemaEntry } from "@hyperleda/lib/clients/backend";
-import { Button, Text } from "@hyperleda/lib/ui";
+import type {
+  TapSchemaEntry,
+  TapSyncResponse,
+} from "@hyperleda/lib/clients/backend";
+import { Button } from "./Button";
 import { SqlEditor } from "./SqlEditor";
-import { SqlQueryEmbed } from "@hyperleda/lib/ui";
+import { SqlQueryEmbed } from "./SqlQueryEmbed";
+import { Text } from "./Text";
 
 function runQueryShortcutLabel(): string {
   if (typeof navigator === "undefined") {
@@ -18,6 +22,7 @@ interface CatalogSqlPanelProps {
   schemas?: TapSchemaEntry[];
   permalinkRunKey?: string | null;
   onQueryRun?: (sql: string) => void;
+  executeQuery?: (sql: string) => Promise<TapSyncResponse>;
 }
 
 export function CatalogSqlPanel({
@@ -26,6 +31,7 @@ export function CatalogSqlPanel({
   schemas,
   permalinkRunKey,
   onQueryRun,
+  executeQuery,
 }: CatalogSqlPanelProps): ReactElement {
   const [executedSql, setExecutedSql] = useState<string | null>(null);
   const [runId, setRunId] = useState(0);
@@ -112,6 +118,7 @@ export function CatalogSqlPanel({
           key={runId}
           sql={executedSql}
           onLoadingChange={setLoading}
+          executeQuery={executeQuery}
         />
       ) : null}
     </div>

apps/admin/src/pages/catalog/SqlEditor.tsx → packages/lib/src/ui/SqlEditor.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useEffect, useMemo, useRef, useState } from "react";
 import Editor from "@monaco-editor/react";
 import type * as Monaco from "monaco-editor";
 import type { TapSchemaEntry } from "@hyperleda/lib/clients/backend";
-import { useTheme } from "@hyperleda/lib/ui";
+import { useTheme } from "./useTheme";
 
 type CatalogCompletionTemplate = Omit<Monaco.languages.CompletionItem, "range">;
 

packages/lib/src/ui/SqlQueryEmbed.tsx

@@ -26,9 +26,11 @@ function markdownColumns(columns: Column[]): Column[] {
 export function SqlQueryEmbed({
   sql,
   onLoadingChange,
+  executeQuery = executeSqlQuery,
 }: {
   sql: string;
   onLoadingChange?: (loading: boolean) => void;
+  executeQuery?: (sql: string) => Promise<TapSyncResponse>;
 }): ReactElement {
   const [result, setResult] = useState<TapSyncResponse | null>(null);
   const [loading, setLoading] = useState(true);
@@ -50,7 +52,7 @@ export function SqlQueryEmbed({
       setResult(null);
 
       try {
-        const payload = await executeSqlQuery(sql);
+        const payload = await executeQuery(sql);
         if (!cancelled) {
           setResult(payload);
         }
@@ -69,7 +71,7 @@ export function SqlQueryEmbed({
     return () => {
       cancelled = true;
     };
-  }, [sql]);
+  }, [sql, executeQuery]);
 
   const tableData = result ? syncPayloadToTable(result) : null;
   const rowCount = tableData?.rows.length ?? 0;

packages/lib/src/ui/index.ts

@@ -35,3 +35,4 @@ export { Loading } from "./Loading";
 export { Text, type TextStyle, type TextSize, type TextType } from "./Text";
 export { Markdown } from "./Markdown";
 export { SqlQueryEmbed } from "./SqlQueryEmbed";
+export { CatalogSqlPanel } from "./CatalogSqlPanel";