feat: complete catalog fleet management workflow

frontend/src/shell/database-management/DatabaseRelationships.tsx

@@ -1,8 +1,8 @@
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState, type ReactNode } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { AgGridReact } from "ag-grid-react";
-import type { ColDef } from "ag-grid-community";
-import { ArrowLeft, RefreshCw } from "lucide-react";
+import type { ColDef, ICellRendererParams } from "ag-grid-community";
+import { ArrowLeft, History, Info, Play, RefreshCw } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "../../components/ui/button";
 import { apiErrorMessage } from "../../api/client";
@@ -13,6 +13,7 @@ import {
   type CatalogRelationship,
   type CatalogSyncRun,
 } from "../../api/catalog-databases";
+import { FleetLedgerDrawer } from "./FleetLedgerShell";
 
 interface Props {
   database: CatalogDatabase;
@@ -22,6 +23,32 @@ interface Props {
   onOpenTables: () => void;
   onRunStarted: (run: CatalogSyncRun) => void;
   onOpenSync: () => void;
+  metadataModelControl?: ReactNode;
+  presentation?: "legacy" | "fleet";
+}
+
+interface RelationshipGridContext {
+  presentation: "legacy" | "fleet";
+  onView: (relationship: CatalogRelationship, origin: HTMLButtonElement) => void;
+}
+
+function RelationshipActionsCell({ data, context }: ICellRendererParams<CatalogRelationship, unknown, RelationshipGridContext>) {
+  if (!data || !context || context.presentation !== "fleet") return null;
+  return (
+    <div className="flex h-full items-center justify-end" onClick={(event) => event.stopPropagation()}>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-lg"
+        className="thot-fleet-icon-action"
+        data-tooltip="Details"
+        aria-label={`View relationship ${data.constraintName}`}
+        onClick={(event) => context.onView(data, event.currentTarget)}
+      >
+        <Info aria-hidden="true" />
+      </Button>
+    </div>
+  );
 }
 
 export function DatabaseRelationships({
@@ -32,16 +59,32 @@ export function DatabaseRelationships({
   onOpenTables,
   onRunStarted,
   onOpenSync,
+  presentation = "legacy",
 }: Props) {
   const databaseId = database.id!;
-  const { data = [], isLoading, isFetching, refetch } = useQuery({
+  const { data = [], error, isError, isLoading, isFetching, refetch } = useQuery({
     queryKey: ["catalog-relationships", databaseId],
     queryFn: () => listCatalogRelationships(databaseId),
     retry: false,
   });
   const [search, setSearch] = useState("");
   const [busy, setBusy] = useState(false);
+  const [selectedAction, setSelectedAction] = useState<"" | "relationships" | "all">("");
+  const [activeRelationshipId, setActiveRelationshipId] = useState<string | null>(null);
+  const originRef = useRef<HTMLButtonElement | null>(null);
   const bindingReady = database.connectionStatus === "reachable" && database.testedVersion === database.version;
+  const activeRelationship = activeRelationshipId
+    ? data.find((relationship) => relationship.id === activeRelationshipId)
+    : undefined;
+  const selectedActionUnavailable = !selectedAction
+    ? null
+    : !canManage
+      ? "You do not have permission to synchronize the catalog."
+      : !bindingReady
+        ? "Test the current database binding first."
+        : database.activeSyncRun
+          ? "Wait for the active synchronization to finish."
+          : null;
 
   const synchronize = async (scope: "relationships" | "all") => {
     setBusy(true);
@@ -52,6 +95,22 @@ export function DatabaseRelationships({
     } catch (error) { toast.error(apiErrorMessage(error)); } finally { setBusy(false); }
   };
 
+  const openRelationship = (relationship: CatalogRelationship, origin: HTMLButtonElement) => {
+    originRef.current = origin;
+    setActiveRelationshipId(relationship.id);
+  };
+
+  const closeRelationship = () => {
+    setActiveRelationshipId(null);
+    window.setTimeout(() => originRef.current?.focus(), 0);
+  };
+
+  const runSelectedAction = async () => {
+    if (!selectedAction) return;
+    await synchronize(selectedAction);
+    setSelectedAction("");
+  };
+
   const columns = useMemo<ColDef<CatalogRelationship>[]>(() => [
     { field: "constraintName", headerName: "Constraint", minWidth: 220, flex: 1, cellClass: "font-mono text-xs" },
     { field: "sourceTableName", headerName: "Source table", minWidth: 200, flex: 1 },
@@ -60,11 +119,24 @@ export function DatabaseRelationships({
     { headerName: "Target columns", minWidth: 200, flex: 1, valueGetter: ({ data: row }) => row?.columns.map((pair) => pair.targetColumnName).join(", ") ?? "" },
     { field: "updateRule", headerName: "On update", minWidth: 125, width: 125 },
     { field: "deleteRule", headerName: "On delete", minWidth: 125, width: 125 },
-  ], []);
+    ...(presentation === "fleet" ? [{ colId: "actions", headerName: "Actions", width: 64, minWidth: 64, maxWidth: 64, pinned: "right" as const, lockPinned: true, sortable: false, filter: false, resizable: false, suppressMovable: true, suppressHeaderMenuButton: true, cellRenderer: RelationshipActionsCell }] : []),
+  ], [presentation]);
+  const context = useMemo<RelationshipGridContext>(() => ({ presentation, onView: openRelationship }), [data, presentation]);
+  const fleetQueryError = presentation === "fleet" && isError ? (
+    <div className="grid min-h-[280px] flex-1 place-items-center p-6" role="alert">
+      <div className="max-w-lg rounded-lg border border-destructive/30 bg-destructive/8 p-5 text-sm">
+        <p className="font-semibold text-destructive">Catalog relationships could not be loaded.</p>
+        <p className="mt-1 leading-5 text-muted-foreground">{apiErrorMessage(error)}</p>
+        <Button type="button" variant="outline" className="mt-4" disabled={isFetching} onClick={() => void refetch()}>
+          <RefreshCw className={isFetching ? "animate-spin" : ""} aria-hidden="true" /> Retry relationships
+        </Button>
+      </div>
+    </div>
+  ) : null;
 
   return (
-    <section aria-label={`Relationships for ${database.workspaceName}`} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
-      <div className="px-4 pt-5 sm:px-5">
+    <section aria-label={`Relationships for ${database.workspaceName}`} className="relative flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
+      {presentation === "legacy" ? <div className="px-4 pt-5 sm:px-5">
         <Button type="button" variant="ghost" className="-ml-2 mb-4" disabled={busy} onClick={onBackToDatabases}><ArrowLeft />Back to databases</Button>
         <div className="flex flex-wrap items-start justify-between gap-4 border-b border-border pb-5">
           <div>
@@ -82,22 +154,76 @@ export function DatabaseRelationships({
           <button type="button" role="tab" aria-selected="false" className="border-b-2 border-transparent px-3 py-2 text-sm font-semibold text-muted-foreground hover:text-foreground" onClick={onOpenTables}>Tables</button>
           <button type="button" role="tab" aria-selected="true" className="border-b-2 border-primary px-3 py-2 text-sm font-semibold text-foreground">Relationships</button>
         </nav>
-      </div>
-      <div className="mx-3 mb-4 mt-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-border bg-card sm:mx-5">
-        <div className="flex min-h-12 flex-wrap items-center gap-3 border-b border-border px-3 py-2">
+      </div> : null}
+      <div className={presentation === "fleet" ? "thot-fleet-grid-surface flex min-h-0 flex-1 flex-col overflow-hidden bg-card" : "mx-3 mb-4 mt-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-border bg-card sm:mx-5"}>
+        <div className={`${presentation === "fleet" ? "thot-fleet-grid-toolbar " : ""}flex min-h-12 flex-wrap items-center gap-3 border-b border-border px-3 py-2`}>
           <span className="thot-label whitespace-nowrap">Physical relationships</span>
           <input className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" aria-label="Search relationships" placeholder="Search" value={search} onChange={(event) => setSearch(event.target.value)} />
           <span className="text-xs tabular-nums text-muted-foreground">{data.length}</span>
           <Button type="button" variant="outline" disabled={isFetching || busy} onClick={() => void refetch()}><RefreshCw className={isFetching ? "animate-spin" : ""} />Refresh</Button>
-          <Button type="button" disabled={!canManage || !bindingReady || busy || Boolean(database.activeSyncRun)} title={!bindingReady ? "Test the current database binding before synchronizing relationships" : undefined} onClick={() => void synchronize("relationships")}><RefreshCw />Sync relationships</Button>
+          {presentation === "fleet" ? (
+            <div className="flex flex-wrap items-center gap-2">
+              <div className="thot-fleet-action-selector__scope" aria-live="polite">
+                <strong>{selectedAction === "all" ? "This database" : selectedAction === "relationships" ? "All relationships in this database" : "This database"}</strong>
+                <span>Action scope</span>
+              </div>
+              <label className="sr-only" htmlFor="relationship-action">Relationship action</label>
+              <select
+                id="relationship-action"
+                className="thot-fleet-action-selector__select"
+                value={selectedAction}
+                disabled={busy}
+                onChange={(event) => setSelectedAction(event.target.value as "" | "relationships" | "all")}
+              >
+                <option value="">Choose an action…</option>
+                <optgroup label="Synchronization">
+                  <option value="relationships">Synchronize all relationships in this database</option>
+                  <option value="all">Synchronize the full schema for this database</option>
+                </optgroup>
+              </select>
+              <Button type="button" size="sm" disabled={!selectedAction || Boolean(selectedActionUnavailable) || busy} aria-describedby={selectedActionUnavailable ? "relationship-action-reason" : undefined} onClick={() => void runSelectedAction()}><Play aria-hidden="true" />{busy ? "Running…" : "Run action"}</Button>
+              <Button type="button" size="sm" variant="outline" className="thot-fleet-nav-action thot-fleet-nav-action--below" data-tooltip="Synchronization history" onClick={onOpenSync}>
+                {database.activeSyncRun ? <RefreshCw className="animate-spin" aria-hidden="true" /> : <History aria-hidden="true" />} Sync history
+              </Button>
+              {selectedActionUnavailable ? <span id="relationship-action-reason" className="basis-full text-xs text-muted-foreground" role="status">{selectedActionUnavailable}</span> : null}
+            </div>
+          ) : <Button type="button" disabled={!canManage || !bindingReady || busy || Boolean(database.activeSyncRun)} title={!bindingReady ? "Test the current database binding before synchronizing relationships" : undefined} onClick={() => void synchronize("relationships")}><RefreshCw />Sync relationships</Button>}
         </div>
-        {!bindingReady ? <div className="border-b border-border bg-muted/35 px-4 py-3 text-sm text-muted-foreground">Test the current database binding from Overview before synchronizing relationships.</div> : null}
-        <div className="relative min-h-[280px] flex-1">
-          <div className="thot-database-grid ag-theme-alpine absolute inset-0 h-full w-full">
-            <AgGridReact<CatalogRelationship> rowData={data} columnDefs={columns} loading={isLoading} quickFilterText={search} defaultColDef={{ sortable: true, filter: true, resizable: true }} getRowId={({ data: row }) => row.id} rowHeight={44} headerHeight={38} animateRows={false} overlayNoRowsTemplate="No physical relationships synchronized for this database." />
+        {!bindingReady ? <div className="border-b border-border bg-muted/35 px-4 py-3 text-sm text-muted-foreground">{presentation === "fleet" ? "Test the current database binding in database details before synchronizing relationships." : "Test the current database binding from Overview before synchronizing relationships."}</div> : null}
+        {fleetQueryError ?? <div className="relative min-h-[280px] flex-1">
+          <div className={`thot-database-grid ${presentation === "fleet" ? "thot-fleet-ledger-grid " : ""}ag-theme-alpine absolute inset-0 h-full w-full`}>
+            <AgGridReact<CatalogRelationship> rowData={data} columnDefs={columns} context={context} loading={isLoading} quickFilterText={search} defaultColDef={{ sortable: true, filter: true, resizable: true }} getRowId={({ data: row }) => row.id} rowHeight={44} headerHeight={38} animateRows={false} overlayNoRowsTemplate="No physical relationships synchronized for this database." />
           </div>
-        </div>
+        </div>}
       </div>
+      {presentation === "fleet" && activeRelationship ? (
+        <FleetLedgerDrawer
+          open
+          eyebrow="Physical relationship"
+          title="Relationship details"
+          description="This information is synchronized from the source schema and is read-only."
+          onClose={closeRelationship}
+          closeLabel="Close relationship details"
+          footer={<Button type="button" variant="outline" onClick={closeRelationship}>Close</Button>}
+        >
+          <dl className="grid gap-4 text-sm sm:grid-cols-2">
+            <div className="sm:col-span-2"><dt className="thot-label">Constraint</dt><dd className="mt-1 break-words font-mono text-xs">{activeRelationship.constraintName}</dd></div>
+            <div><dt className="thot-label">Source table</dt><dd className="mt-1 break-words">{activeRelationship.sourceTableName}</dd></div>
+            <div><dt className="thot-label">Target table</dt><dd className="mt-1 break-words">{activeRelationship.targetTableName}</dd></div>
+            <div><dt className="thot-label">On update</dt><dd className="mt-1">{activeRelationship.updateRule ?? "Not specified"}</dd></div>
+            <div><dt className="thot-label">On delete</dt><dd className="mt-1">{activeRelationship.deleteRule ?? "Not specified"}</dd></div>
+            <div className="sm:col-span-2">
+              <dt className="thot-label">Column mapping</dt>
+              <dd className="mt-2 overflow-hidden rounded-md border border-border">
+                <table className="w-full text-left text-xs">
+                  <thead className="bg-muted/60 font-mono uppercase tracking-wide text-muted-foreground"><tr><th className="px-3 py-2">Source</th><th className="px-3 py-2">Target</th></tr></thead>
+                  <tbody>{activeRelationship.columns.map((pair) => <tr key={`${pair.sourceColumnName}:${pair.targetColumnName}`} className="border-t border-border"><td className="px-3 py-2 font-mono">{pair.sourceColumnName}</td><td className="px-3 py-2 font-mono">{pair.targetColumnName}</td></tr>)}</tbody>
+                </table>
+              </dd>
+            </div>
+          </dl>
+        </FleetLedgerDrawer>
+      ) : null}
     </section>
   );
 }