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:
@@ -0,0 +1,317 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, screen, fireEvent, act } from "@testing-library/react";
|
||||
import type { ComponentProps } from "react";
|
||||
import { TableControls, formatDuration } from "./TableControls";
|
||||
import { TooltipProvider } from "../ui/Tooltip";
|
||||
import { useDbViewerStore } from "../../stores/dbViewerStore";
|
||||
import type { ViewerTab } from "../../stores/dbViewerStore";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: "id",
|
||||
data_type: "integer",
|
||||
is_nullable: false,
|
||||
is_pk: true,
|
||||
is_fk: false,
|
||||
fk_ref: null,
|
||||
default_value: null,
|
||||
},
|
||||
];
|
||||
|
||||
function makeTab(overrides: Partial<ViewerTab> = {}): ViewerTab {
|
||||
return {
|
||||
id: "tab-1",
|
||||
schema: "public",
|
||||
table: "users",
|
||||
page: 1,
|
||||
pageSize: 50,
|
||||
loading: false,
|
||||
error: null,
|
||||
data: { columns, rows: [[1]], total_rows: 1, page: 1, page_size: 50 },
|
||||
filterRules: [],
|
||||
sortRules: [],
|
||||
hiddenColumns: [],
|
||||
smartSortApplied: true,
|
||||
tabType: "table",
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
function seed(tabs: ViewerTab[], activeTabId: string) {
|
||||
useDbViewerStore.getState().reset();
|
||||
useDbViewerStore.setState({ tabs, activeTabId });
|
||||
}
|
||||
|
||||
function renderControls(
|
||||
props: Partial<ComponentProps<typeof TableControls>> = {},
|
||||
) {
|
||||
return render(
|
||||
<TooltipProvider>
|
||||
<TableControls
|
||||
connectionId="c1"
|
||||
schema="public"
|
||||
table="users"
|
||||
columns={columns}
|
||||
rows={[[1]]}
|
||||
hiddenColumns={new Set()}
|
||||
onToggleColumn={() => {}}
|
||||
onRefresh={() => {}}
|
||||
filterRules={[]}
|
||||
onFilterChange={() => {}}
|
||||
sortRules={[]}
|
||||
onSortChange={() => {}}
|
||||
selectedCount={0}
|
||||
selectedRows={[]}
|
||||
onClearSelection={() => {}}
|
||||
{...props}
|
||||
/>
|
||||
</TooltipProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
describe("formatDuration", () => {
|
||||
it("formats milliseconds with two decimals", () => {
|
||||
expect(formatDuration(15)).toBe("15.00ms");
|
||||
});
|
||||
|
||||
it("formats seconds with one decimal once past a second", () => {
|
||||
expect(formatDuration(1500)).toBe("1.5s");
|
||||
expect(formatDuration(3200)).toBe("3.2s");
|
||||
});
|
||||
|
||||
it("formats minutes for long-running queries", () => {
|
||||
expect(formatDuration(90000)).toBe("1.5m");
|
||||
});
|
||||
|
||||
it("returns an empty string when there is no timing", () => {
|
||||
expect(formatDuration(null)).toBe("");
|
||||
expect(formatDuration(undefined)).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
describe("TableControls query variant", () => {
|
||||
it("shows Export, Re-run, and Columns on the left", () => {
|
||||
seed([makeTab({ tabType: "query" })], "tab-1");
|
||||
renderControls({ variant: "query" });
|
||||
expect(screen.getByLabelText(/export/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/re-run query/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/toggle columns/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("hides table-only controls and the queue", () => {
|
||||
seed([makeTab({ tabType: "query" })], "tab-1");
|
||||
renderControls({ variant: "query" });
|
||||
expect(screen.queryByLabelText(/insert row/i)).toBeNull();
|
||||
expect(screen.queryByLabelText(/auto-refresh/i)).toBeNull();
|
||||
expect(screen.queryByLabelText(/column filters/i)).toBeNull();
|
||||
expect(screen.queryByLabelText(/sort rules/i)).toBeNull();
|
||||
expect(screen.queryByRole("button", { name: /action queue/i })).toBeNull();
|
||||
});
|
||||
|
||||
it("shows the execution time from the result with a clock", () => {
|
||||
seed(
|
||||
[
|
||||
makeTab({
|
||||
tabType: "query",
|
||||
data: {
|
||||
columns,
|
||||
rows: [],
|
||||
total_rows: 0,
|
||||
page: 1,
|
||||
page_size: 50,
|
||||
execution_time_ms: 15,
|
||||
},
|
||||
}),
|
||||
],
|
||||
"tab-1",
|
||||
);
|
||||
renderControls({ variant: "query" });
|
||||
expect(screen.getByLabelText(/execution time/i)).toBeInTheDocument();
|
||||
expect(screen.getByText("15.00ms")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("keeps the row count and pagination", () => {
|
||||
seed(
|
||||
[
|
||||
makeTab({
|
||||
tabType: "query",
|
||||
data: {
|
||||
columns,
|
||||
rows: [[1]],
|
||||
total_rows: 42,
|
||||
page: 1,
|
||||
page_size: 50,
|
||||
execution_time_ms: 15,
|
||||
},
|
||||
}),
|
||||
],
|
||||
"tab-1",
|
||||
);
|
||||
renderControls({ variant: "query" });
|
||||
expect(screen.getByText(/of 42/)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/next page/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("table variant has no queue button (moved to tab bar) and no execution time", () => {
|
||||
seed(
|
||||
[
|
||||
makeTab({
|
||||
data: {
|
||||
columns,
|
||||
rows: [[1]],
|
||||
total_rows: 1,
|
||||
page: 1,
|
||||
page_size: 50,
|
||||
execution_time_ms: 15,
|
||||
},
|
||||
}),
|
||||
],
|
||||
"tab-1",
|
||||
);
|
||||
renderControls({});
|
||||
expect(
|
||||
screen.queryByRole("button", { name: /action queue/i }),
|
||||
).toBeNull();
|
||||
expect(screen.getByLabelText(/toggle columns/i)).toBeInTheDocument();
|
||||
expect(screen.queryByText("15.00ms")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("TableControls", () => {
|
||||
beforeEach(() => {
|
||||
useDbViewerStore.getState().reset();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it("calls onRefresh when the refresh button is clicked", () => {
|
||||
seed([makeTab()], "tab-1");
|
||||
const onRefresh = vi.fn();
|
||||
renderControls({ onRefresh });
|
||||
|
||||
fireEvent.click(screen.getByLabelText(/refresh table/i));
|
||||
expect(onRefresh).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("does not spin the refresh icon or show the pulse when idle", () => {
|
||||
seed([makeTab()], "tab-1");
|
||||
const { container } = renderControls();
|
||||
|
||||
expect(container.querySelector(".animate-spin")).toBeNull();
|
||||
expect(screen.queryByTestId("refresh-pulse")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("spins the refresh icon and shows the pulse overlay while the tab is loading", () => {
|
||||
seed([makeTab({ loading: true })], "tab-1");
|
||||
const { container } = renderControls();
|
||||
|
||||
expect(container.querySelector(".animate-spin")).not.toBeNull();
|
||||
expect(screen.getByTestId("refresh-pulse")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows the refreshing indicators when auto-refresh fires and clears them when done", () => {
|
||||
vi.useFakeTimers();
|
||||
seed([makeTab()], "tab-1");
|
||||
const onRefresh = vi.fn(() => {
|
||||
useDbViewerStore.setState((s) => ({
|
||||
tabs: s.tabs.map((t) =>
|
||||
t.id === "tab-1" ? { ...t, loading: true } : t,
|
||||
),
|
||||
}));
|
||||
});
|
||||
const { container } = renderControls({
|
||||
onRefresh,
|
||||
defaultRefreshRate: 5000,
|
||||
});
|
||||
|
||||
expect(container.querySelector(".animate-spin")).toBeNull();
|
||||
expect(screen.queryByTestId("refresh-pulse")).not.toBeInTheDocument();
|
||||
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(5000);
|
||||
});
|
||||
expect(onRefresh).toHaveBeenCalledTimes(1);
|
||||
expect(container.querySelector(".animate-spin")).not.toBeNull();
|
||||
expect(screen.getByTestId("refresh-pulse")).toBeInTheDocument();
|
||||
|
||||
// Once the fetch completes the indicators disappear
|
||||
act(() => {
|
||||
useDbViewerStore.setState((s) => ({
|
||||
tabs: s.tabs.map((t) =>
|
||||
t.id === "tab-1" ? { ...t, loading: false } : t,
|
||||
),
|
||||
}));
|
||||
});
|
||||
expect(container.querySelector(".animate-spin")).toBeNull();
|
||||
expect(screen.queryByTestId("refresh-pulse")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("waits for an in-flight refresh to complete before restarting the timer", () => {
|
||||
vi.useFakeTimers();
|
||||
seed([makeTab()], "tab-1");
|
||||
const onRefresh = vi.fn(() => {
|
||||
useDbViewerStore.setState((s) => ({
|
||||
tabs: s.tabs.map((t) =>
|
||||
t.id === "tab-1" ? { ...t, loading: true } : t,
|
||||
),
|
||||
}));
|
||||
});
|
||||
renderControls({ onRefresh, defaultRefreshRate: 5000 });
|
||||
|
||||
// First interval fires the refresh
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(5000);
|
||||
});
|
||||
expect(onRefresh).toHaveBeenCalledTimes(1);
|
||||
|
||||
// While the refresh is still in flight, the timer must NOT fire again
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(15000);
|
||||
});
|
||||
expect(onRefresh).toHaveBeenCalledTimes(1);
|
||||
|
||||
// Once the refresh completes, a fresh countdown starts
|
||||
act(() => {
|
||||
useDbViewerStore.setState((s) => ({
|
||||
tabs: s.tabs.map((t) =>
|
||||
t.id === "tab-1" ? { ...t, loading: false } : t,
|
||||
),
|
||||
}));
|
||||
});
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(5000);
|
||||
});
|
||||
expect(onRefresh).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it("defers auto-refresh when the user switches tabs (resets the timer)", () => {
|
||||
vi.useFakeTimers();
|
||||
const onRefresh = vi.fn();
|
||||
seed([makeTab(), makeTab({ id: "tab-2", table: "orders" })], "tab-1");
|
||||
renderControls({ onRefresh, defaultRefreshRate: 5000 });
|
||||
|
||||
// Not yet a full interval
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(4000);
|
||||
});
|
||||
expect(onRefresh).not.toHaveBeenCalled();
|
||||
|
||||
// User switches to another tab → countdown restarts
|
||||
act(() => {
|
||||
useDbViewerStore.setState({ activeTabId: "tab-2" });
|
||||
});
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(4000);
|
||||
});
|
||||
expect(onRefresh).not.toHaveBeenCalled();
|
||||
|
||||
// Full interval after the switch finally fires
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(1000);
|
||||
});
|
||||
expect(onRefresh).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user