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:
@@ -21,9 +21,4 @@ describe("ActionRow", () => {
|
||||
await userEvent.click(screen.getByText(/settings/i));
|
||||
expect(useUiStore.getState().activeView).toBe("settings");
|
||||
});
|
||||
it("Tags button switches to settings view", async () => {
|
||||
render(<ActionRow />);
|
||||
await userEvent.click(screen.getByText(/^tags$/i));
|
||||
expect(useUiStore.getState().activeView).toBe("settings");
|
||||
});
|
||||
});
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Plus, Settings as SettingsIcon, Tag, Filter, FolderPlus, Trash2, Check, X, ChevronDown } from "lucide-react";
|
||||
import { Plus, Settings as SettingsIcon, FolderPlus, Trash2, Check, X, ChevronDown } from "lucide-react";
|
||||
import { Button } from "../ui/Button";
|
||||
import { useUiStore } from "../../stores/uiStore";
|
||||
import { ImportExportMenu } from "./ImportExportMenu";
|
||||
import { TagFilterDropdown } from "../tags/TagFilterDropdown";
|
||||
import { DbTypeFilterDropdown } from "./DbTypeFilterDropdown";
|
||||
|
||||
interface ActionRowProps {
|
||||
onImport?: () => void;
|
||||
@@ -13,7 +15,7 @@ interface ActionRowProps {
|
||||
visibleItemIds?: string[];
|
||||
}
|
||||
|
||||
export function ActionRow({ onImport, onExport, onNewFolder, onFilters, onDeleteSelected, visibleItemIds = [] }: ActionRowProps) {
|
||||
export function ActionRow({ onImport, onExport, onNewFolder, onFilters: _onFilters, onDeleteSelected, visibleItemIds = [] }: ActionRowProps) {
|
||||
const setActiveView = useUiStore((s) => s.setActiveView);
|
||||
const selectedItemIds = useUiStore((s) => s.selectedItemIds);
|
||||
const selectAllItems = useUiStore((s) => s.selectAllItems);
|
||||
@@ -44,12 +46,8 @@ export function ActionRow({ onImport, onExport, onNewFolder, onFilters, onDelete
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" className="text-xs" onClick={() => setActiveView("settings")}>
|
||||
<Tag size={14} /> Tags
|
||||
</Button>
|
||||
<Button variant="ghost" className="text-xs" onClick={onFilters ?? (() => {})}>
|
||||
<Filter size={14} /> Filters
|
||||
</Button>
|
||||
<TagFilterDropdown />
|
||||
<DbTypeFilterDropdown />
|
||||
<Button variant="ghost" className="text-xs border-0" onClick={onNewFolder ?? (() => {})}>
|
||||
<FolderPlus size={14} /> New Folder
|
||||
</Button>
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import { describe, it, expect, beforeEach, vi } from "vitest";
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import { DbTypeFilterDropdown } from "./DbTypeFilterDropdown";
|
||||
import { useUiStore } from "../../stores/uiStore";
|
||||
|
||||
vi.mock("@tauri-apps/api/core", () => ({ invoke: vi.fn() }));
|
||||
|
||||
describe("DbTypeFilterDropdown", () => {
|
||||
beforeEach(() => {
|
||||
useUiStore.setState({ activeDbTypes: [], activeEnvironment: null });
|
||||
});
|
||||
|
||||
it("renders a button with Filter icon", () => {
|
||||
render(<DbTypeFilterDropdown />);
|
||||
expect(screen.getByText("Filters")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("opens dropdown and shows 4 DB types", () => {
|
||||
render(<DbTypeFilterDropdown />);
|
||||
fireEvent.click(screen.getByText("Filters"));
|
||||
expect(screen.getByText("PostgreSQL")).toBeInTheDocument();
|
||||
expect(screen.getByText("MySQL")).toBeInTheDocument();
|
||||
expect(screen.getByText("SQLite")).toBeInTheDocument();
|
||||
expect(screen.getByText("Redis")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("toggles DB type filter on click", () => {
|
||||
render(<DbTypeFilterDropdown />);
|
||||
fireEvent.click(screen.getByText("Filters"));
|
||||
fireEvent.click(screen.getByText("PostgreSQL"));
|
||||
expect(useUiStore.getState().activeDbTypes).toContain("postgresql");
|
||||
});
|
||||
|
||||
it("clears all filters with 'Clear all' button", () => {
|
||||
useUiStore.setState({ activeDbTypes: ["postgresql", "sqlite"] });
|
||||
render(<DbTypeFilterDropdown />);
|
||||
fireEvent.click(screen.getByText("Filters"));
|
||||
fireEvent.click(screen.getByText("Clear all"));
|
||||
expect(useUiStore.getState().activeDbTypes).toEqual([]);
|
||||
});
|
||||
|
||||
it("shows environment select in dropdown", () => {
|
||||
render(<DbTypeFilterDropdown />);
|
||||
fireEvent.click(screen.getByText("Filters"));
|
||||
expect(screen.getByLabelText("Environment filter")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("selects environment via the select", () => {
|
||||
render(<DbTypeFilterDropdown />);
|
||||
fireEvent.click(screen.getByText("Filters"));
|
||||
fireEvent.click(screen.getByLabelText("Environment filter"));
|
||||
fireEvent.click(screen.getByText("Production"));
|
||||
expect(useUiStore.getState().activeEnvironment).toBe("production");
|
||||
});
|
||||
|
||||
it("'All' option clears environment filter", () => {
|
||||
useUiStore.setState({ activeEnvironment: "production" });
|
||||
render(<DbTypeFilterDropdown />);
|
||||
fireEvent.click(screen.getByText("Filters"));
|
||||
fireEvent.click(screen.getByLabelText("Environment filter"));
|
||||
fireEvent.click(screen.getByText("All"));
|
||||
expect(useUiStore.getState().activeEnvironment).toBeNull();
|
||||
});
|
||||
|
||||
it("shows 'None' option for connections without environment", () => {
|
||||
render(<DbTypeFilterDropdown />);
|
||||
fireEvent.click(screen.getByText("Filters"));
|
||||
fireEvent.click(screen.getByLabelText("Environment filter"));
|
||||
fireEvent.click(screen.getByText("None"));
|
||||
expect(useUiStore.getState().activeEnvironment).toBe("none");
|
||||
});
|
||||
|
||||
it("environment filter counts toward badge", () => {
|
||||
useUiStore.setState({ activeDbTypes: [], activeEnvironment: "staging" });
|
||||
render(<DbTypeFilterDropdown />);
|
||||
expect(screen.getByText("1")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,117 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Filter } from "lucide-react";
|
||||
import { useUiStore } from "../../stores/uiStore";
|
||||
import { SelectDropdown } from "../ui/SelectDropdown";
|
||||
import type { DbType } from "../../lib/types";
|
||||
|
||||
const DB_TYPES: { value: DbType; label: string }[] = [
|
||||
{ value: "postgresql", label: "PostgreSQL" },
|
||||
{ value: "mysql", label: "MySQL" },
|
||||
{ value: "sqlite", label: "SQLite" },
|
||||
{ value: "redis", label: "Redis" },
|
||||
];
|
||||
|
||||
export function DbTypeFilterDropdown() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const activeDbTypes = useUiStore((s) => s.activeDbTypes);
|
||||
const toggleDbType = useUiStore((s) => s.toggleDbType);
|
||||
const clearFilters = useUiStore((s) => s.clearFilters);
|
||||
const activeEnvironment = useUiStore((s) => s.activeEnvironment);
|
||||
const setEnvironment = useUiStore((s) => s.setEnvironment);
|
||||
|
||||
const activeCount = activeDbTypes.length + (activeEnvironment ? 1 : 0);
|
||||
const hasActiveFilters = activeCount > 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handler);
|
||||
return () => document.removeEventListener("mousedown", handler);
|
||||
}, [open]);
|
||||
|
||||
const handleClearAll = () => {
|
||||
clearFilters();
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative inline-block" ref={containerRef}>
|
||||
<button
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium border transition-all cursor-pointer ${
|
||||
hasActiveFilters
|
||||
? "bg-accent/10 border-accent text-accent"
|
||||
: "bg-transparent border-border text-text-muted hover:text-text hover:border-border-hover"
|
||||
}`}
|
||||
>
|
||||
<Filter size={14} />
|
||||
<span>Filters</span>
|
||||
{hasActiveFilters && (
|
||||
<span className="ml-0.5 flex items-center justify-center min-w-[1.125rem] h-[1.125rem] px-1 rounded-full text-[10px] bg-accent text-white">
|
||||
{activeCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute left-0 mt-1 z-20 min-w-[12rem] rounded-xl bg-surface border border-border shadow-lg p-1.5">
|
||||
<div className="flex flex-col">
|
||||
<div className="py-1">
|
||||
{DB_TYPES.map((dbType) => {
|
||||
const checked = activeDbTypes.includes(dbType.value);
|
||||
return (
|
||||
<label
|
||||
key={dbType.value}
|
||||
className={`flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs cursor-pointer transition-colors ${
|
||||
checked ? "bg-accent/10" : "hover:bg-surface-raised"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() => toggleDbType(dbType.value)}
|
||||
className="w-4 h-4 rounded border-border accent-accent cursor-pointer"
|
||||
/>
|
||||
<span className={checked ? "text-accent" : "text-text"}>
|
||||
{dbType.label}
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="px-2 py-2">
|
||||
<label className="block text-[10px] uppercase tracking-wider text-text-muted mb-1">
|
||||
Environment
|
||||
</label>
|
||||
<SelectDropdown
|
||||
value={activeEnvironment ?? ""}
|
||||
onChange={(val) => setEnvironment(val === "" ? null : val)}
|
||||
options={[
|
||||
{ value: "", label: "All" },
|
||||
{ value: "production", label: "Production" },
|
||||
{ value: "staging", label: "Staging" },
|
||||
{ value: "development", label: "Development" },
|
||||
{ value: "none", label: "None" },
|
||||
]}
|
||||
placeholder="All"
|
||||
aria-label="Environment filter"
|
||||
/>
|
||||
</div>
|
||||
<div className="border-t border-border my-1" />
|
||||
<button
|
||||
onClick={handleClearAll}
|
||||
className="w-full text-left px-2 py-1.5 text-xs text-text-muted hover:text-text hover:bg-surface-raised rounded-lg transition-colors cursor-pointer"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user