adrianbonpin
04e8ed3300
* chore: bump version to 0.7.5 (Task 1.1) * feat(db): pure object DDL/search/depend builders (Task 1.2) * feat(models): ObjectSearchHit, DependencyInfo, PgToolPaths, tool source fields (Task 1.3) * feat(backup): bundle-aware pg tool resolution, system-first fallback (Task 2.1) * feat(objects): schema CRUD commands + integration test (Task 2.2) * feat(objects): search_objects command (current-schema, all types) (Task 2.3) * feat(objects): get_object_ddl for all browsable types (Task 2.4) * feat(objects): pg_depend object dependencies + schema contents (Task 2.5) * feat(ipc): register object management commands (Task 3.1) * feat(ipc): frontend wrappers + types for object management (Task 3.2) * feat(build): declare bundled pg_tools resources (Task 3.3) * test(capabilities): lock objects capability PG-only for search/ddl/dependencies (Task 3.4) * feat(ui): Cmd+K object search palette in DB viewer (Task 4.1) * feat(ui): schema CRUD menu + dependency dialog (Task 4.2) * feat(ui): copy-as-DDL + dependency view context menu in Objects (Task 4.3) * feat(ui): dependency check before table drop + bundled-tool status (Task 4.4) * docs: v0.7.5 release notes + status table + bundled-tools (Task 5.1) * ci: build/verify bundled pg client tools per platform before tauri build (Task 5.2) * fix(objects): report pg_rewrite dependencies as the dependent view (pg_class) pg_depend records view dependencies via the view's internal rewrite rule (classid = pg_rewrite). The user-facing dependent object is the VIEW itself, so map that classid to pg_class (name still resolved through ev_class). Fixes the live-PG integration test object_dependencies_for_table_includes_view and makes the dependency dialog readable for view dependents. * test: add idempotent PG integration-test seed script Seeds the first PG test db (GRIDLINE_TEST_SRC) with the objects the #[ignore] integration tests assert against: users (+users_id_seq), products (3 rows), orders (3 rows), order_summary view, audit_log + get_user functions, user_role enum. Idempotent: DROP + recreate. * fix(build): regenerate multi-resolution icons + roadmap Keychain item - icon.ico previously contained a single 16x16 frame (Windows scaled it up -> blurry taskbar/start-menu icon). Regenerated from the 512px source via 'tauri icon': ICO now has 16/24/32/48/64/256 frames, icns has full @2x coverage up to 1024px, PNGs re-rendered from the same source. - Added icons/icon.png (512px) to bundle.icon so Linux hicolor installs a high-DPI entry. - ROADMAP: log the 'Enable Keychain' toggle (currently a form-only placeholder) under Next up -> Connection & credentials. * docs(readme): dynamic version-free download links + 3-col table - release.yml: set releaseAssetNamePattern to '[name]_[platform]_[arch][setup][ext]' (version-free), so asset filenames are stable across releases: Gridline_darwin_aarch64.dmg, Gridline_windows_x64-setup.exe, Gridline_linux_amd64.deb, Gridline_linux_x86_64.rpm, etc. - README: both download tables now 3-column (OS | Architecture | Download) and link via GitHub's releases/latest/download/<file> redirect — they always point at the newest published release, no per-release edits. - AGENTS.md: releases checklist updated — download links stay version-free. * docs(readme): platform-per-column download table (macOS | Windows | Linux) Table now mirrors the release layout: one column per OS with a logo row and a download-links row underneath. Links stay version-free via releases/latest/download/<file> (releaseAssetNamePattern in release.yml). * docs(readme): revert download table to clean image-less 3-col layout Logo row was hard to read on GitHub dark mode; the plain OS | Architecture | Download table is cleaner and still uses dynamic releases/latest links.
333 lines
17 KiB
TypeScript
333 lines
17 KiB
TypeScript
import { useState, useEffect, useCallback, useRef } from "react";
|
|
import { ArrowLeftRight, Database } from "lucide-react";
|
|
import { Button } from "../ui/Button";
|
|
import { BackupProgress } from "./BackupProgress";
|
|
import { useBackupStore } from "../../stores/backupStore";
|
|
import { useConnectionStore } from "../../stores/connectionStore";
|
|
import { useNotificationStore } from "../../stores/notificationStore";
|
|
import { detectPgTools, dbSync, getSchemas } from "../../lib/commands";
|
|
import type { PgToolStatus } from "../../lib/types";
|
|
|
|
export function SyncPage() {
|
|
const [sourceConnectionId, setSourceConnectionId] = useState("");
|
|
const [targetConnectionId, setTargetConnectionId] = useState("");
|
|
const [schema, setSchema] = useState("");
|
|
const [confirmed, setConfirmed] = useState(false);
|
|
const [toolStatus, setToolStatus] = useState<PgToolStatus | null>(null);
|
|
const [checkingTools, setCheckingTools] = useState(true);
|
|
const [availableSchemas, setAvailableSchemas] = useState<string[]>([]);
|
|
|
|
const connections = useConnectionStore((s) => s.connections);
|
|
const activeJobId = useBackupStore((s) => s.activeJobId);
|
|
const jobs = useBackupStore((s) => s.jobs);
|
|
const startJob = useBackupStore((s) => s.startJob);
|
|
const notify = useNotificationStore((s) => s.notify);
|
|
|
|
const activeJob = jobs.find((j) => j.id === activeJobId);
|
|
const isRunning = activeJob?.status === "running";
|
|
const pendingJobRef = useRef<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!pendingJobRef.current || !activeJob) return;
|
|
if (activeJob.id !== pendingJobRef.current) return;
|
|
|
|
if (activeJob.status === "completed") {
|
|
notify("Sync completed successfully", "success");
|
|
pendingJobRef.current = null;
|
|
} else if (activeJob.status === "failed") {
|
|
notify(
|
|
`Sync failed: ${activeJob.error_message || "Unknown error"}`,
|
|
"error",
|
|
);
|
|
pendingJobRef.current = null;
|
|
}
|
|
}, [activeJob, notify]);
|
|
|
|
useEffect(() => {
|
|
setCheckingTools(true);
|
|
setConfirmed(false);
|
|
detectPgTools()
|
|
.then((status) => setToolStatus(status))
|
|
.catch(() =>
|
|
setToolStatus({
|
|
pg_dump_found: false,
|
|
pg_restore_found: false,
|
|
pg_dump_version: null,
|
|
pg_restore_version: null,
|
|
pg_dump_source: null,
|
|
pg_restore_source: null,
|
|
}),
|
|
)
|
|
.finally(() => setCheckingTools(false));
|
|
}, []);
|
|
|
|
// Fetch schemas from the source connection when it changes
|
|
useEffect(() => {
|
|
if (!sourceConnectionId) {
|
|
setAvailableSchemas([]);
|
|
setSchema("");
|
|
return;
|
|
}
|
|
getSchemas(sourceConnectionId)
|
|
.then((schemas) => setAvailableSchemas(schemas))
|
|
.catch(() => setAvailableSchemas([]));
|
|
}, [sourceConnectionId]);
|
|
|
|
const handleStartSync = useCallback(async () => {
|
|
if (!sourceConnectionId || !targetConnectionId) {
|
|
notify("Please select both source and target connections", "error");
|
|
return;
|
|
}
|
|
if (sourceConnectionId === targetConnectionId) {
|
|
notify("Source and target must be different", "error");
|
|
return;
|
|
}
|
|
const jobId = `sync-${Date.now()}`;
|
|
startJob(jobId, "sync");
|
|
pendingJobRef.current = jobId;
|
|
|
|
try {
|
|
await dbSync({
|
|
sourceConnectionId,
|
|
targetConnectionId,
|
|
schema: schema || undefined,
|
|
tables: undefined,
|
|
});
|
|
} catch (e) {
|
|
const msg = e instanceof Error ? e.message : String(e);
|
|
useBackupStore.getState().failJob(jobId, msg);
|
|
}
|
|
}, [sourceConnectionId, targetConnectionId, schema, startJob, notify]);
|
|
|
|
const toolsMissing =
|
|
toolStatus &&
|
|
(!toolStatus.pg_dump_found || !toolStatus.pg_restore_found);
|
|
const toolsBundled =
|
|
toolStatus?.pg_dump_source === "bundled" &&
|
|
toolStatus?.pg_restore_source === "bundled";
|
|
const canStart =
|
|
sourceConnectionId && targetConnectionId && confirmed && !isRunning;
|
|
|
|
const postgresqlConnections = connections.filter(
|
|
(c) => c.db_type === "postgresql",
|
|
);
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
{/* Toolbar header */}
|
|
<div className="flex items-center gap-2 border-b border-border px-3 py-1.5">
|
|
<ArrowLeftRight size={14} className="text-accent" />
|
|
<span className="text-xs font-medium text-text">DB Sync</span>
|
|
<span className="text-[11px] text-text-muted">
|
|
Transfer data between PostgreSQL databases via pipe
|
|
</span>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
<div className="max-w-lg mx-auto space-y-6 outline outline-border">
|
|
{/* Tool check */}
|
|
{checkingTools && (
|
|
<div className="glass p-4 text-center">
|
|
<p className="text-sm text-text-muted">
|
|
Checking for pg_dump / pg_restore...
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{toolsMissing && !toolsBundled && (
|
|
<div className="bg-amber-500/10 border border-amber-500/30 rounded-lg px-4 py-4 space-y-2">
|
|
<p className="text-amber-300 text-sm font-semibold">
|
|
PostgreSQL tools not found
|
|
</p>
|
|
<p className="text-amber-200/80 text-xs leading-relaxed">
|
|
Both pg_dump and pg_restore are required for
|
|
database sync.
|
|
</p>
|
|
<ul className="list-disc list-inside text-xs text-amber-200/70 space-y-0.5">
|
|
{!toolStatus?.pg_dump_found && (
|
|
<li>pg_dump is missing.</li>
|
|
)}
|
|
{!toolStatus?.pg_restore_found && (
|
|
<li>pg_restore is missing.</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{!checkingTools && !toolsMissing && (
|
|
<>
|
|
{/* Configuration card */}
|
|
<div className="p-5 space-y-5">
|
|
{/* Source & Target connection pickers */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-1">
|
|
<label className="text-[11px] uppercase tracking-wider text-text-muted font-medium flex items-center gap-1">
|
|
<Database size={11} />
|
|
Source
|
|
</label>
|
|
<select
|
|
value={sourceConnectionId}
|
|
onChange={(e) =>
|
|
setSourceConnectionId(
|
|
e.target.value,
|
|
)
|
|
}
|
|
className="w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm text-text focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/50 transition-colors cursor-pointer"
|
|
>
|
|
<option value="">
|
|
Select source...
|
|
</option>
|
|
{postgresqlConnections.map((c) => (
|
|
<option
|
|
key={c.id}
|
|
value={c.id}
|
|
disabled={
|
|
c.id ===
|
|
targetConnectionId
|
|
}
|
|
>
|
|
{c.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-[11px] uppercase tracking-wider text-text-muted font-medium flex items-center gap-1">
|
|
<Database size={11} />
|
|
Target
|
|
</label>
|
|
<select
|
|
value={targetConnectionId}
|
|
onChange={(e) =>
|
|
setTargetConnectionId(
|
|
e.target.value,
|
|
)
|
|
}
|
|
className="w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm text-text focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/50 transition-colors cursor-pointer"
|
|
>
|
|
<option value="">
|
|
Select target...
|
|
</option>
|
|
{postgresqlConnections.map((c) => (
|
|
<option
|
|
key={c.id}
|
|
value={c.id}
|
|
disabled={
|
|
c.id ===
|
|
sourceConnectionId
|
|
}
|
|
>
|
|
{c.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Schema (optional) */}
|
|
<div className="space-y-1">
|
|
<label className="text-[11px] uppercase tracking-wider text-text-muted font-medium">
|
|
Schema{" "}
|
|
<span className="font-normal normal-case tracking-normal">
|
|
(optional)
|
|
</span>
|
|
</label>
|
|
<select
|
|
value={schema}
|
|
onChange={(e) =>
|
|
setSchema(e.target.value)
|
|
}
|
|
disabled={!sourceConnectionId}
|
|
className="w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm text-text focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/50 transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
|
|
>
|
|
<option value="">
|
|
{sourceConnectionId
|
|
? "All schemas"
|
|
: "Select a source first"}
|
|
</option>
|
|
{availableSchemas.map((s) => (
|
|
<option key={s} value={s}>
|
|
{s}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Flow indicator */}
|
|
{sourceConnectionId && targetConnectionId && (
|
|
<div className="flex items-center gap-3 text-[11px] text-text-muted">
|
|
<span className="font-medium text-text">
|
|
{postgresqlConnections.find(
|
|
(c) =>
|
|
c.id === sourceConnectionId,
|
|
)?.name ?? sourceConnectionId}
|
|
</span>
|
|
<ArrowLeftRight
|
|
size={12}
|
|
className="text-accent shrink-0"
|
|
/>
|
|
<span className="font-medium text-text">
|
|
{postgresqlConnections.find(
|
|
(c) =>
|
|
c.id === targetConnectionId,
|
|
)?.name ?? targetConnectionId}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Destructive confirmation */}
|
|
<div className="bg-red-500/5 border border-red-500/20 px-4 py-3">
|
|
<label className="flex items-start gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={confirmed}
|
|
onChange={(e) =>
|
|
setConfirmed(e.target.checked)
|
|
}
|
|
className="mt-0.5 rounded bg-surface border-border accent-red-500 w-4 h-4 cursor-pointer"
|
|
data-testid="sync-confirm-checkbox"
|
|
/>
|
|
<span className="text-sm text-red-300/90 leading-relaxed">
|
|
I understand this will overwrite data on
|
|
the target database. This action cannot
|
|
be undone.
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
{/* Progress */}
|
|
{activeJob && (
|
|
<div className="px-4">
|
|
<BackupProgress
|
|
progress={activeJob.status === "completed" ? 100 : 50}
|
|
jobType="sync"
|
|
status={activeJob.status}
|
|
errorMessage={activeJob.error_message ?? undefined}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex justify-end pb-2 pr-2">
|
|
<Button
|
|
onClick={handleStartSync}
|
|
disabled={!canStart}
|
|
>
|
|
<ArrowLeftRight
|
|
size={14}
|
|
className="mr-1.5"
|
|
/>
|
|
{isRunning ? "Syncing..." : "Start Sync"}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|