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:
@@ -1,8 +1,28 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
||||
import type { Mock } from "vitest";
|
||||
import { SchemaVisualizerPage } from "./SchemaVisualizerPage";
|
||||
import { useDbViewerStore } from "../../stores/dbViewerStore";
|
||||
import { useNotificationStore } from "../../stores/notificationStore";
|
||||
import { TooltipProvider } from "../ui/Tooltip";
|
||||
import { toPng } from "html-to-image";
|
||||
import { save } from "@tauri-apps/plugin-dialog";
|
||||
import { writeFile } from "@tauri-apps/plugin-fs";
|
||||
|
||||
// Mock html-to-image so exports don't hit real DOM capture in jsdom
|
||||
vi.mock("html-to-image", () => ({
|
||||
toPng: vi.fn().mockResolvedValue("data:image/png;base64,AAAA"),
|
||||
toJpeg: vi.fn().mockResolvedValue("data:image/jpeg;base64,AAAA"),
|
||||
toSvg: vi.fn().mockResolvedValue("data:image/svg+xml;base64,AAAA"),
|
||||
}));
|
||||
|
||||
// Mock the Tauri save dialog and fs write
|
||||
vi.mock("@tauri-apps/plugin-dialog", () => ({
|
||||
save: vi.fn().mockResolvedValue("/tmp/export.png"),
|
||||
}));
|
||||
vi.mock("@tauri-apps/plugin-fs", () => ({
|
||||
writeFile: vi.fn().mockResolvedValue(undefined),
|
||||
}));
|
||||
|
||||
// Mock the Tauri invoke call
|
||||
vi.mock("@tauri-apps/api/core", () => ({
|
||||
@@ -19,7 +39,9 @@ vi.mock("./SchemaVisualizerNode", () => ({
|
||||
|
||||
describe("SchemaVisualizerPage", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
useDbViewerStore.getState().reset();
|
||||
useNotificationStore.setState({ notifications: [] });
|
||||
useDbViewerStore.setState({
|
||||
schemas: ["public", "auth"],
|
||||
currentSchema: "public",
|
||||
@@ -77,4 +99,348 @@ describe("SchemaVisualizerPage", () => {
|
||||
const errorMsg = await screen.findByText(/failed to load schema/i);
|
||||
expect(errorMsg).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the Export menu with a scope selector and format options", () => {
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<SchemaVisualizerPage
|
||||
connectionId="conn-1"
|
||||
onSchemaChange={() => {}}
|
||||
/>
|
||||
</TooltipProvider>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByText(/export/i));
|
||||
expect(screen.getByLabelText("Export scope")).toBeInTheDocument();
|
||||
expect(screen.getByText("PNG")).toBeInTheDocument();
|
||||
expect(screen.getByText("JPEG")).toBeInTheDocument();
|
||||
expect(screen.getByText("SVG")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("exports the viewport as PNG when Viewport scope is selected", async () => {
|
||||
const { invoke } = await import("@tauri-apps/api/core");
|
||||
(invoke as any).mockReset();
|
||||
(invoke as any).mockResolvedValue({
|
||||
tables: [
|
||||
{
|
||||
name: "users",
|
||||
schema: "public",
|
||||
table_type: "TABLE",
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
data_type: "integer",
|
||||
is_pk: true,
|
||||
is_fk: false,
|
||||
is_unique: true,
|
||||
is_nullable: false,
|
||||
fk_ref: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
relationships: [],
|
||||
});
|
||||
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<SchemaVisualizerPage
|
||||
connectionId="conn-1"
|
||||
onSchemaChange={() => {}}
|
||||
/>
|
||||
</TooltipProvider>,
|
||||
);
|
||||
await screen.findByText("1 table");
|
||||
|
||||
fireEvent.click(screen.getByText(/export/i));
|
||||
// pick Viewport scope, then PNG
|
||||
fireEvent.click(screen.getByLabelText("Export scope"));
|
||||
fireEvent.click(screen.getByText("Viewport"));
|
||||
fireEvent.click(screen.getByText("PNG"));
|
||||
|
||||
expect(toPng).toHaveBeenCalledTimes(1);
|
||||
const [, options] = (toPng as Mock).mock.calls[0];
|
||||
// Viewport export keeps the current view — no transform override
|
||||
expect(options.style).toBeUndefined();
|
||||
expect(options.width).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("exports the entire schema as PNG with a computed transform", async () => {
|
||||
const { invoke } = await import("@tauri-apps/api/core");
|
||||
(invoke as any).mockReset();
|
||||
(invoke as any).mockResolvedValue({
|
||||
tables: [
|
||||
{
|
||||
name: "users",
|
||||
schema: "public",
|
||||
table_type: "TABLE",
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
data_type: "integer",
|
||||
is_pk: true,
|
||||
is_fk: false,
|
||||
is_unique: true,
|
||||
is_nullable: false,
|
||||
fk_ref: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
relationships: [],
|
||||
});
|
||||
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<SchemaVisualizerPage
|
||||
connectionId="conn-1"
|
||||
onSchemaChange={() => {}}
|
||||
/>
|
||||
</TooltipProvider>,
|
||||
);
|
||||
await screen.findByText("1 table");
|
||||
|
||||
fireEvent.click(screen.getByText(/export/i));
|
||||
fireEvent.click(screen.getByText("PNG")); // scope defaults to Entire Schema
|
||||
|
||||
expect(toPng).toHaveBeenCalledTimes(1);
|
||||
const [, options] = (toPng as Mock).mock.calls[0];
|
||||
expect(options.style.transform).toContain("scale(");
|
||||
});
|
||||
|
||||
it("shows an export error when the schema has no nodes", async () => {
|
||||
const { invoke } = await import("@tauri-apps/api/core");
|
||||
(invoke as any).mockReset();
|
||||
(invoke as any).mockResolvedValue({ tables: [], relationships: [] });
|
||||
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<SchemaVisualizerPage
|
||||
connectionId="conn-1"
|
||||
onSchemaChange={() => {}}
|
||||
/>
|
||||
</TooltipProvider>,
|
||||
);
|
||||
|
||||
// default mock resolves an empty graph
|
||||
await screen.findByText(/no tables found/i);
|
||||
|
||||
fireEvent.click(screen.getByText(/export/i));
|
||||
fireEvent.click(screen.getByText("PNG"));
|
||||
|
||||
expect(await screen.findByText(/export failed/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("saves through the dialog and notifies with the file path", async () => {
|
||||
(save as Mock).mockResolvedValue("/Users/me/Pictures/public-export.png");
|
||||
const { invoke } = await import("@tauri-apps/api/core");
|
||||
(invoke as any).mockReset();
|
||||
(invoke as any).mockResolvedValue({
|
||||
tables: [
|
||||
{
|
||||
name: "users",
|
||||
schema: "public",
|
||||
table_type: "TABLE",
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
data_type: "integer",
|
||||
is_pk: true,
|
||||
is_fk: false,
|
||||
is_unique: true,
|
||||
is_nullable: false,
|
||||
fk_ref: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
relationships: [],
|
||||
});
|
||||
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<SchemaVisualizerPage
|
||||
connectionId="conn-1"
|
||||
onSchemaChange={() => {}}
|
||||
/>
|
||||
</TooltipProvider>,
|
||||
);
|
||||
await screen.findByText("1 table");
|
||||
|
||||
fireEvent.click(screen.getByText(/export/i));
|
||||
fireEvent.click(screen.getByText("PNG"));
|
||||
|
||||
await waitFor(() => expect(writeFile).toHaveBeenCalledTimes(1));
|
||||
expect(writeFile).toHaveBeenCalledWith(
|
||||
"/Users/me/Pictures/public-export.png",
|
||||
expect.any(Uint8Array),
|
||||
);
|
||||
const notification = useNotificationStore
|
||||
.getState()
|
||||
.notifications.find((n) => n.message.includes("exported to"));
|
||||
expect(notification).toBeTruthy();
|
||||
expect(notification!.message).toContain(
|
||||
"/Users/me/Pictures/public-export.png",
|
||||
);
|
||||
});
|
||||
|
||||
it("defaults the filename to the db name plus a locale timestamp", async () => {
|
||||
(save as Mock).mockResolvedValue(null);
|
||||
const { invoke } = await import("@tauri-apps/api/core");
|
||||
(invoke as any).mockReset();
|
||||
(invoke as any).mockResolvedValue({
|
||||
tables: [
|
||||
{
|
||||
name: "users",
|
||||
schema: "public",
|
||||
table_type: "TABLE",
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
data_type: "integer",
|
||||
is_pk: true,
|
||||
is_fk: false,
|
||||
is_unique: true,
|
||||
is_nullable: false,
|
||||
fk_ref: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
relationships: [],
|
||||
});
|
||||
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<SchemaVisualizerPage
|
||||
connectionId="conn-1"
|
||||
onSchemaChange={() => {}}
|
||||
/>
|
||||
</TooltipProvider>,
|
||||
);
|
||||
await screen.findByText("1 table");
|
||||
|
||||
fireEvent.click(screen.getByText(/export/i));
|
||||
fireEvent.click(screen.getByText("PNG"));
|
||||
|
||||
await waitFor(() => expect(save).toHaveBeenCalled());
|
||||
const { defaultPath } = (save as Mock).mock.calls[0][0];
|
||||
// schema is "public" here; timestamp is locale-formatted then sanitized
|
||||
expect(defaultPath).toMatch(/^public-.*\.png$/);
|
||||
});
|
||||
|
||||
it("exports a transparent PNG when a transparent background is selected", async () => {
|
||||
const { invoke } = await import("@tauri-apps/api/core");
|
||||
(invoke as any).mockReset();
|
||||
(invoke as any).mockResolvedValue({
|
||||
tables: [
|
||||
{
|
||||
name: "users",
|
||||
schema: "public",
|
||||
table_type: "TABLE",
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
data_type: "integer",
|
||||
is_pk: true,
|
||||
is_fk: false,
|
||||
is_unique: true,
|
||||
is_nullable: false,
|
||||
fk_ref: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
relationships: [],
|
||||
});
|
||||
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<SchemaVisualizerPage
|
||||
connectionId="conn-1"
|
||||
onSchemaChange={() => {}}
|
||||
/>
|
||||
</TooltipProvider>,
|
||||
);
|
||||
await screen.findByText("1 table");
|
||||
|
||||
fireEvent.click(screen.getByText(/export/i));
|
||||
fireEvent.click(screen.getByLabelText("Export background"));
|
||||
fireEvent.click(screen.getByText("Transparent"));
|
||||
fireEvent.click(screen.getByText("PNG"));
|
||||
|
||||
await waitFor(() => expect(toPng).toHaveBeenCalled());
|
||||
const [, options] = (toPng as Mock).mock.calls[0];
|
||||
expect(options.backgroundColor).toBeUndefined();
|
||||
});
|
||||
|
||||
it("hides the JPEG option when a transparent background is selected", async () => {
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<SchemaVisualizerPage
|
||||
connectionId="conn-1"
|
||||
onSchemaChange={() => {}}
|
||||
/>
|
||||
</TooltipProvider>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByText(/export/i));
|
||||
// JPEG is available with an opaque background by default
|
||||
expect(screen.getByText("JPEG")).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByLabelText("Export background"));
|
||||
fireEvent.click(screen.getByText("Transparent"));
|
||||
|
||||
expect(screen.queryByText("JPEG")).not.toBeInTheDocument();
|
||||
expect(screen.getByText("PNG")).toBeInTheDocument();
|
||||
expect(screen.getByText("SVG")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not write the file when the save dialog is cancelled", async () => {
|
||||
(save as Mock).mockResolvedValue(null);
|
||||
const { invoke } = await import("@tauri-apps/api/core");
|
||||
(invoke as any).mockReset();
|
||||
(invoke as any).mockResolvedValue({
|
||||
tables: [
|
||||
{
|
||||
name: "users",
|
||||
schema: "public",
|
||||
table_type: "TABLE",
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
data_type: "integer",
|
||||
is_pk: true,
|
||||
is_fk: false,
|
||||
is_unique: true,
|
||||
is_nullable: false,
|
||||
fk_ref: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
relationships: [],
|
||||
});
|
||||
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<SchemaVisualizerPage
|
||||
connectionId="conn-1"
|
||||
onSchemaChange={() => {}}
|
||||
/>
|
||||
</TooltipProvider>,
|
||||
);
|
||||
await screen.findByText("1 table");
|
||||
|
||||
fireEvent.click(screen.getByText(/export/i));
|
||||
fireEvent.click(screen.getByText("PNG"));
|
||||
|
||||
await waitFor(() => expect(save).toHaveBeenCalled());
|
||||
expect(writeFile).not.toHaveBeenCalled();
|
||||
expect(
|
||||
useNotificationStore
|
||||
.getState()
|
||||
.notifications.some((n) => n.message.includes("exported to")),
|
||||
).toBe(false);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user