feat: add metadata catalog cleanup commands

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

@@ -1,18 +1,21 @@
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Menu } from "@base-ui/react/menu";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { AgGridReact } from "ag-grid-react";
 import type { ColDef, ICellRendererParams } from "ag-grid-community";
-import { ArrowLeft, Columns3, Pencil, RefreshCw, Save, X } from "lucide-react";
+import { ArrowLeft, ChevronDown, Columns3, Pencil, RefreshCw, Save, Trash2, X } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "../../components/ui/button";
 import { ApiError, apiErrorMessage } from "../../api/client";
 import {
+  deleteCatalogTableMetadata,
   listCatalogTables,
   startCatalogSync,
   updateCatalogTableMetadata,
   type CatalogDatabase,
   type CatalogSyncRun,
   type CatalogTable,
+  type CatalogTableMetadataDeleteTarget,
 } from "../../api/catalog-databases";
 import type { DatabaseNavigationState } from "./model";
 import { DatabaseColumns } from "./DatabaseColumns";
@@ -74,11 +77,14 @@ export function DatabaseTables({
   const [editorVersion, setEditorVersion] = useState<number | null>(null);
   const [stale, setStale] = useState(false);
   const [staleBannerOpen, setStaleBannerOpen] = useState(true);
-  const [busy, setBusy] = useState<"sync" | "save" | null>(null);
+  const [busy, setBusy] = useState<"sync" | "save" | "delete" | null>(null);
+  const [pendingDelete, setPendingDelete] = useState<CatalogTableMetadataDeleteTarget | null>(null);
   const [columnNavigation, setColumnNavigation] = useState<DatabaseNavigationState>({ dirty: false, busy: false });
   const gridRef = useRef<AgGridReact<CatalogTable>>(null);
   const originRef = useRef<HTMLButtonElement | null>(null);
   const headingRef = useRef<HTMLHeadingElement>(null);
+  const actionsTriggerRef = useRef<HTMLButtonElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
   const activeTable = activeTableId ? data.find((table) => table.id === activeTableId) : undefined;
   const editorFingerprint = JSON.stringify([description, generatedDescription]);
   const editorDirty = Boolean(activeTableId && editorFingerprint !== baseline);
@@ -93,6 +99,15 @@ export function DatabaseTables({
     setStale(true);
     setStaleBannerOpen(true);
   }, [activeTable, activeTableId, busy, editorVersion]);
+  useEffect(() => {
+    if (!pendingDelete) return;
+    const timer = window.setTimeout(() => document.getElementById("table-cleanup-confirm-button")?.focus(), 0);
+    return () => window.clearTimeout(timer);
+  }, [pendingDelete]);
+  const closeDeleteConfirmation = () => {
+    setPendingDelete(null);
+    window.setTimeout(() => actionsTriggerRef.current?.focus(), 0);
+  };
 
   const openTable = (table: CatalogTable, section: "overview" | "columns", origin: HTMLButtonElement) => {
     originRef.current = origin;
@@ -168,6 +183,26 @@ export function DatabaseTables({
       toast.success(scope === "all" ? "Full schema synchronization started" : scope === "columns" ? "Column synchronization started" : "Table synchronization started");
     } catch (error) { toast.error(apiErrorMessage(error)); } finally { setBusy(null); }
   };
+  const deleteMetadata = async (target: CatalogTableMetadataDeleteTarget) => {
+    setBusy("delete");
+    try {
+      const counts = await deleteCatalogTableMetadata(databaseId, selectedIds, target);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["catalog-columns", databaseId] }),
+        queryClient.invalidateQueries({ queryKey: ["catalog-relationships", databaseId] }),
+        queryClient.invalidateQueries({ queryKey: ["catalog-databases"] }),
+      ]);
+      gridRef.current?.api.deselectAll();
+      setSelectedIds([]);
+      setPendingDelete(null);
+      window.setTimeout(() => searchInputRef.current?.focus(), 0);
+      toast.success(target === "columns"
+        ? `Deleted ${counts.columns} catalog columns`
+        : `Deleted ${counts.relationships} catalog relationships`);
+    } catch (error) {
+      toast.error(apiErrorMessage(error));
+    } finally { setBusy(null); }
+  };
 
   const columns = useMemo<ColDef<CatalogTable>[]>(() => [
     { field: "name", headerName: "Name", minWidth: 250, flex: 1, cellClass: "font-mono text-xs" },
@@ -258,24 +293,80 @@ export function DatabaseTables({
       <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">
           {selectedIds.length > 0 ? (
-            <>
-              <span className="text-sm font-semibold">{selectedIds.length} selected</span>
-              {visibleSelected !== selectedIds.length ? <span className="text-xs text-muted-foreground">{selectedIds.length - visibleSelected} hidden by filter</span> : null}
-              <Button
-                type="button"
-                variant="outline"
-                disabled={!canManage || !bindingReady || busy !== null || Boolean(currentRun)}
-                title={!bindingReady ? "Test the current database binding before synchronizing columns" : undefined}
-                onClick={() => void synchronize("columns", selectedIds)}
+            pendingDelete ? (
+              <div
+                role="group"
+                aria-labelledby="table-cleanup-confirmation"
+                className="flex min-w-0 flex-1 flex-wrap items-center gap-2"
+                onKeyDown={(event) => {
+                  if (event.key === "Escape" && busy === null) closeDeleteConfirmation();
+                }}
               >
-                <RefreshCw className={busy === "sync" ? "animate-spin" : ""} />Synchronize columns
-              </Button>
-              <Button type="button" variant="ghost" onClick={() => { gridRef.current?.api.deselectAll(); setSelectedIds([]); }}><X />Clear</Button>
-            </>
+                <div className="mr-auto min-w-56">
+                  <p id="table-cleanup-confirmation" className="text-sm font-semibold">
+                    {pendingDelete === "columns"
+                      ? `Delete all catalog columns for ${selectedIds.length} table${selectedIds.length === 1 ? "" : "s"}?`
+                      : `Delete all relationships for ${selectedIds.length} table${selectedIds.length === 1 ? "" : "s"}?`}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {pendingDelete === "columns"
+                      ? "Only columns belonging to the selected catalog tables will be removed."
+                      : "All incoming and outgoing relationships for the selected catalog tables will be removed."}
+                  </p>
+                </div>
+                <Button type="button" variant="ghost" disabled={busy !== null} onClick={closeDeleteConfirmation}>Cancel</Button>
+                <Button
+                  id="table-cleanup-confirm-button"
+                  type="button"
+                  variant="destructive"
+                  disabled={busy !== null}
+                  onClick={() => void deleteMetadata(pendingDelete)}
+                >
+                  <Trash2 />{pendingDelete === "columns" ? "Delete columns" : "Delete relationships"}
+                </Button>
+              </div>
+            ) : (
+              <>
+                <span className="text-sm font-semibold">{selectedIds.length} selected</span>
+                {visibleSelected !== selectedIds.length ? <span className="text-xs text-muted-foreground">{selectedIds.length - visibleSelected} hidden by filter</span> : null}
+                <Menu.Root>
+                  <Menu.Trigger ref={actionsTriggerRef} className="inline-flex h-8 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-muted disabled:pointer-events-none disabled:opacity-50" disabled={busy !== null}>Actions <ChevronDown className="size-4" /></Menu.Trigger>
+                  <Menu.Portal>
+                    <Menu.Positioner side="bottom" align="start" sideOffset={4}>
+                      <Menu.Popup className="z-50 min-w-64 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none">
+                        <Menu.Item
+                          className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45"
+                          disabled={!canManage || !bindingReady || busy !== null || Boolean(currentRun)}
+                          onClick={() => void synchronize("columns", selectedIds)}
+                        >
+                          Synchronize columns
+                        </Menu.Item>
+                        <Menu.Separator className="my-1 h-px bg-border" />
+                        <Menu.Item
+                          className="rounded-md px-3 py-2 text-sm text-destructive outline-none data-[highlighted]:bg-destructive/10 data-[disabled]:opacity-45"
+                          disabled={!canManage || busy !== null || Boolean(currentRun)}
+                          onClick={() => setPendingDelete("columns")}
+                        >
+                          Delete all columns
+                        </Menu.Item>
+                        <Menu.Item
+                          className="rounded-md px-3 py-2 text-sm text-destructive outline-none data-[highlighted]:bg-destructive/10 data-[disabled]:opacity-45"
+                          disabled={!canManage || busy !== null || Boolean(currentRun)}
+                          onClick={() => setPendingDelete("relationships")}
+                        >
+                          Delete all relationships
+                        </Menu.Item>
+                      </Menu.Popup>
+                    </Menu.Positioner>
+                  </Menu.Portal>
+                </Menu.Root>
+                <Button type="button" variant="ghost" onClick={() => { gridRef.current?.api.deselectAll(); setSelectedIds([]); }}><X />Clear</Button>
+              </>
+            )
           ) : (
             <>
               <span className="thot-label whitespace-nowrap">Catalog tables</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 tables" placeholder="Search" value={search} onChange={(event) => setSearch(event.target.value)} />
+              <input ref={searchInputRef} 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 tables" placeholder="Search" value={search} onChange={(event) => setSearch(event.target.value)} />
               <span
                 aria-live="polite"
                 className="whitespace-nowrap text-xs tabular-nums text-muted-foreground"
@@ -300,7 +391,10 @@ export function DatabaseTables({
               defaultColDef={{ sortable: true, filter: true, resizable: true }}
               getRowId={({ data: table }) => table.id}
               rowSelection={{ mode: "multiRow", selectAll: "filtered", enableClickSelection: false }}
-              onSelectionChanged={({ api }) => setSelectedIds(api.getSelectedRows().map((table) => table.id))}
+              onSelectionChanged={({ api }) => {
+                if (pendingDelete && busy === null) setPendingDelete(null);
+                setSelectedIds(api.getSelectedRows().map((table) => table.id));
+              }}
               onModelUpdated={({ api }) => setDisplayedCount(api.getDisplayedRowCount())}
               rowHeight={44}
               headerHeight={38}