DB viewer + query editor enhancements (home-screen-ux-query-editor) (#4)
* feat: add query_history table migration (v5) (Task 1) * feat: add isDestructiveQuery utility (Task 2) * feat: add tabType discriminator and openQueryTab to dbViewerStore (Task 3) * feat: add execute_query command with pagination and query history (Task 4) * feat: add typed wrappers for executeQuery, getQueryHistory, clearQueryHistory (Task 5) * fix: global search bypasses folder scope when filters active (Task 6) * feat: add TagFilterDropdown with checkboxes and empty state (Task 7) * feat: add DbTypeFilterDropdown with checkboxes and clear all (Task 8) * feat: wire TagFilterDropdown/DbTypeFilterDropdown into ActionRow, add inline tag creation (Task 9) * feat: add Name input to GeneralTab for connection editing (Task 10) * feat: add QueryEditor Monaco wrapper with SQL mode and Cmd+Enter (Task 11) * feat: add DestructiveQueryDialog with SQL preview and confirmation (Task 12) * feat: integrate query tabs, Monaco editor, destructive guard into DbViewerScreen (Task 13) * fix: harden moveConnection against race conditions on rapid drags (Task 14) * docs: update AGENTS.md implementation status for Home Screen UX + Query Editor (Task 15) * feat: switch tag filter to OR semantics, add environment filter (F-T16) * feat: add activeEnvironment filter state to uiStore and useFilteredConnections (F-T17) * feat: add environment filter select to Filters dropdown (F-T18) * feat: filter folder cards by tag match or contained connections (F-T19) * fix: keep grid header width to content, border last column * fix: hide select-all checkbox and empty-state when no table open * fix: filter folder cards by any active filter, show global search results (F-T20) * feat: show 'Showing Search Results' breadcrumb with clear button (F-T21) * docs: update README + AGENTS.md for Query Editor, filters, and planned AI integration (BYOK) * feat: refresh indicator with spinning icon and pulse, defer auto-refresh on tab switch * feat: smart default schema selection, refresh schemas on database switch * fix: auto-refresh waits for in-flight refresh to complete before next tick * style: shrink db viewer sidebar nav icons from 20px to 16px * style: shrink db viewer sidebar nav buttons to 32px (8px padding) * style: make Tables panel title xs, regular weight, muted * style: bump Tables panel title back to sm, keep regular weight and muted * feat: export schema diagram as PNG/JPEG/SVG (entire schema or viewport) * chore: lockfile for html-to-image * fix: raise schema visualizer toolbar above legend so export menu isn't hidden * feat: schema export via save dialog, transparent background option, save notification * fix: render nothing in tab bar when no tabs are open * style: reduce tab bar height from 40px to 36px * style: reduce tab bar height to 32px * style: revert tab bar height to 36px * feat: split tab bar with fixed +Query and Changes actions on the right * style: blue play-icon Query button in tab bar * refactor: remove sidebar New Query button (now in tab bar) * style: conditional bottom padding in sidebar toolbar when nothing is below * feat: distinguish table and query tabs with icons * style: tab icons follow active/inactive state, muted colors * feat: query tab toolbar (run/format/dialect badge) + bare transparent editor * style: blue rounded Run Query button in query toolbar * feat: smart platform-aware shortcut tooltip on Run Query (⌘+⏎ / Ctrl+Enter) * style: show only the shortcut in the Run Query tooltip * fix: Cmd+Enter keybinding stale closure; add run pulse to query toolbar; bundle monaco locally (offline) * feat: show placeholder text in empty query editor * feat: SQL autocomplete — keywords + table names from active schema * feat: per-table column autocomplete on 'table.' + docs update * feat: query-variant result toolbar — export/refresh/columns left, smart-unit execution time right * fix: populate execution_time_ms on query results so the toolbar can show time taken * fix: re-measure monaco fonts after async font load to stop cursor drift * feat: resizable + collapsible query results panel * refactor: move results caret onto the resize handle (centered), bottom caret when collapsed * style: thin drag strip with caret on its own centered pill * refactor: remove Queue button from table toolbar (Changes lives in tab bar) * style: changes button becomes bordered rounded icon with count badge * docs: mark tab-bar Changes queue button in AGENTS.md and README
This commit is contained in:
@@ -3,7 +3,8 @@ import { useConnectionStore } from "../stores/connectionStore";
|
||||
import { useDbViewerStore } from "../stores/dbViewerStore";
|
||||
import { useNotificationStore } from "../stores/notificationStore";
|
||||
import * as cmd from "../lib/commands";
|
||||
import type { ConnectionInput } from "../lib/types";
|
||||
import { pickDefaultSchema } from "../lib/utils";
|
||||
import type { ConnectionInput, TableInfo } from "../lib/types";
|
||||
|
||||
export function useDbConnection(connectionId: string) {
|
||||
const reset = useDbViewerStore((s) => s.reset);
|
||||
@@ -14,7 +15,10 @@ export function useDbConnection(connectionId: string) {
|
||||
const notify = useNotificationStore((s) => s.notify);
|
||||
const [connectionError, setConnectionError] = useState<string | null>(null);
|
||||
const inputRef = useRef<ConnectionInput | null>(null);
|
||||
const initialDbRef = useRef<string | null>(null);
|
||||
// The database the pool is currently connected to. Unlike the selected
|
||||
// `currentDatabase`, this lets us reconnect whenever the selection drifts
|
||||
// from the live connection (including switching back to the first DB).
|
||||
const connectedDbRef = useRef<string | null>(null);
|
||||
|
||||
const connect = useCallback(async () => {
|
||||
const conn = useConnectionStore
|
||||
@@ -56,21 +60,34 @@ export function useDbConnection(connectionId: string) {
|
||||
await cmd.dbConnect(connectionId, input);
|
||||
setConnectionError(null);
|
||||
inputRef.current = input;
|
||||
connectedDbRef.current =
|
||||
input.db_type === "sqlite"
|
||||
? "main"
|
||||
: (input.database ?? "postgres");
|
||||
|
||||
// Load initial data
|
||||
// Load initial data, smart-selecting the default schema (e.g. `public`)
|
||||
const databases = await cmd
|
||||
.getDatabases(connectionId)
|
||||
.catch(() => [] as string[]);
|
||||
const schemas = await cmd
|
||||
.getSchemas(connectionId)
|
||||
.catch(() => [] as string[]);
|
||||
const tables = await cmd.getTables(connectionId);
|
||||
const defaultSchema = pickDefaultSchema(schemas);
|
||||
const tables = await cmd.getTables(
|
||||
connectionId,
|
||||
defaultSchema ?? undefined,
|
||||
);
|
||||
populate(databases, schemas, tables);
|
||||
if (databases.length > 0) {
|
||||
setCurrentDatabase(databases[0]);
|
||||
initialDbRef.current = databases[0];
|
||||
// Prefer the connection's configured database, fall back to the first
|
||||
// available one so the dropdown matches what the pool is connected to.
|
||||
const preferred =
|
||||
input.database && databases.includes(input.database)
|
||||
? input.database
|
||||
: databases[0];
|
||||
setCurrentDatabase(preferred);
|
||||
}
|
||||
if (schemas.length > 0) setCurrentSchema(schemas[0]);
|
||||
setCurrentSchema(defaultSchema);
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
setConnectionError(msg);
|
||||
@@ -89,29 +106,42 @@ export function useDbConnection(connectionId: string) {
|
||||
};
|
||||
}, [connectionId, connect, reset]);
|
||||
|
||||
// Database switch effect: reconnect when user changes database from dropdown
|
||||
// Database switch effect: whenever the selected database drifts from the
|
||||
// pool's live connection, reconnect and refresh schemas/tables for that DB.
|
||||
useEffect(() => {
|
||||
if (!currentDatabase || !inputRef.current) return;
|
||||
if (currentDatabase === initialDbRef.current) return;
|
||||
if (currentDatabase === connectedDbRef.current) return;
|
||||
|
||||
let cancelled = false;
|
||||
const reconnect = async () => {
|
||||
const input = { ...inputRef.current!, database: currentDatabase };
|
||||
try {
|
||||
await cmd.dbConnect(connectionId, input);
|
||||
const schemas = await cmd.getSchemas(connectionId);
|
||||
const tables = await cmd.getTables(connectionId);
|
||||
populate(
|
||||
useDbViewerStore.getState().databases,
|
||||
schemas,
|
||||
tables,
|
||||
);
|
||||
if (schemas.length > 0) setCurrentSchema(schemas[0]);
|
||||
} catch {
|
||||
/* silent */
|
||||
if (cancelled) return;
|
||||
connectedDbRef.current = currentDatabase;
|
||||
const schemas = await cmd
|
||||
.getSchemas(connectionId)
|
||||
.catch(() => [] as string[]);
|
||||
if (cancelled) return;
|
||||
const newSchema = pickDefaultSchema(schemas);
|
||||
const tables = await cmd
|
||||
.getTables(connectionId, newSchema ?? undefined)
|
||||
.catch(() => [] as TableInfo[]);
|
||||
if (cancelled) return;
|
||||
populate(useDbViewerStore.getState().databases, schemas, tables);
|
||||
setCurrentSchema(newSchema);
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
// Revert the selection so the dropdown matches the live connection
|
||||
setCurrentDatabase(connectedDbRef.current);
|
||||
notify(`Failed to switch database: ${msg}`, "error");
|
||||
}
|
||||
};
|
||||
reconnect();
|
||||
}, [currentDatabase, connectionId, populate, setCurrentSchema]);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [currentDatabase, connectionId, populate, setCurrentSchema, notify]);
|
||||
|
||||
return { connectionError, connect };
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user