fix: scope and batch sensitive suggestions

2026-08-30 17:12:20 +02:00
parent 0736983bc5
commit cb40c09d9a
17 changed files with 1179 additions and 139 deletions
@@ -11,11 +11,11 @@ import {
  consolidateCatalogDescriptions,
  listCatalogColumns,
  startDescriptionGenerationRun,
-  suggestSensitiveFields,
  updateCatalogColumnMetadata,
  type CatalogColumn,
  type CatalogTable,
  type DescriptionGenerationRun,
+  type SensitiveDataSuggestionRequest,
 } from "../../api/catalog-databases";
 import type { DatabaseNavigationState } from "./model";

@@ -28,6 +28,7 @@ interface Props {
  onDescriptionGenerationRunStarted: (run: DescriptionGenerationRun) => void;
  onNavigationStateChange: (state: DatabaseNavigationState) => void;
  onSync: () => void;
+  onSuggestSensitive: (selection: SensitiveDataSuggestionRequest, scopeLabel: string) => Promise<void>;
 }

 interface GridContext {
@@ -84,6 +85,7 @@ export function DatabaseColumns({
  onDescriptionGenerationRunStarted,
  onNavigationStateChange,
  onSync,
+  onSuggestSensitive,
 }: Props) {
  const queryClient = useQueryClient();
  const queryKey = ["catalog-columns", databaseId, table.id] as const;
@@ -222,23 +224,16 @@ export function DatabaseColumns({
  };

  const suggestSensitive = async () => {
-    if (!selectedMetadataModel) return;
+    if (selectedIds.length === 0) return;
    setBusy(true);
    setSensitiveAction("suggest");
    try {
-      const result = await suggestSensitiveFields(databaseId, selectedMetadataModel);
-      const currentById = new Map(data.map((column) => [column.id, column]));
-      const next: Record<string, boolean> = {};
-      for (const suggestion of result.suggestions) {
-        const column = currentById.get(suggestion.columnId);
-        if (column && suggestion.sensitive !== column.sensitive) {
-          next[column.id] = suggestion.sensitive;
-        }
-      }
-      setSensitiveDrafts(next);
-      toast.success("Sensitive field suggestions ready for review");
-    } catch (error) {
-      toast.error(apiErrorMessage(error));
+      await onSuggestSensitive(
+        { scope: "selected_columns", targetIds: selectedIds },
+        `${selectedIds.length} selected column${selectedIds.length === 1 ? "" : "s"} in ${table.name}`,
+      );
+    } catch {
+      // The page-level request reports the safe, specific reason and preserves the selection.
    } finally {
      setSensitiveAction(null);
      setBusy(false);
@@ -351,6 +346,20 @@ export function DatabaseColumns({
                </Menu.Positioner>
              </Menu.Portal>
            </Menu.Root>
+            <Button
+              type="button"
+              variant="outline"
+              disabled={!canManage || descriptionGenerationActive || busy}
+              title={descriptionGenerationActive ? "Wait for the active description generation to finish" : undefined}
+              onClick={() => void suggestSensitive()}
+            >
+              <Sparkles />{sensitiveAction === "suggest" ? "Suggesting…" : "Suggest sensitive fields"}
+            </Button>
+            {changedSensitiveColumns.length > 0 ? (
+              <Button type="button" disabled={!canManage || busy} onClick={() => void saveSensitive()}>
+                <Save />{sensitiveAction === "save" ? "Saving…" : "Save sensitive fields"}
+              </Button>
+            ) : null}
            <Button type="button" variant="ghost" onClick={() => { gridRef.current?.api.deselectAll(); setSelectedIds([]); }}><X />Clear</Button>
          </>
        ) : (
@@ -358,14 +367,6 @@ export function DatabaseColumns({
            <span className="thot-label whitespace-nowrap">Catalog columns</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 columns" 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={!canManage || !selectedMetadataModel || descriptionGenerationActive || busy}
-              onClick={() => void suggestSensitive()}
-            >
-              <Sparkles />{sensitiveAction === "suggest" ? "Suggesting…" : "Suggest sensitive fields"}
-            </Button>
            {changedSensitiveColumns.length > 0 ? (
              <Button type="button" disabled={!canManage || busy} onClick={() => void saveSensitive()}>
                <Save />{sensitiveAction === "save" ? "Saving…" : "Save sensitive fields"}
@@ -9,7 +9,7 @@ import {
 } from "ag-grid-community";
 import "ag-grid-community/styles/ag-grid.css";
 import "ag-grid-community/styles/ag-theme-alpine.css";
-import { ChevronDown, Eye, Pencil, RefreshCw, Trash2, X } from "lucide-react";
+import { ChevronDown, Eye, Pencil, RefreshCw, Sparkles, Trash2, X } from "lucide-react";
 import { Button } from "../../components/ui/button";
 import type {
  CatalogDatabase,
@@ -42,6 +42,7 @@ interface DatabaseGridProps {
    rows: CatalogDatabase[],
    scope: Extract<DescriptionGenerationScope, "all" | "missing">,
  ) => Promise<void>;
+  onSuggestSensitive: (rows: CatalogDatabase[]) => Promise<void>;
  onDeleteMetadataSelected: (
    rows: CatalogDatabase[],
    target: CatalogDatabaseMetadataDeleteTarget,
@@ -164,13 +165,14 @@ export function DatabaseGrid({
  selectedMetadataModel,
  descriptionGenerationActive,
  onGenerateDescriptions,
+  onSuggestSensitive,
  onDeleteMetadataSelected,
 }: DatabaseGridProps) {
  const compact = useCompactViewport();
  const gridRef = useRef<AgGridReact<CatalogDatabase>>(null);
  const actionsTriggerRef = useRef<HTMLButtonElement>(null);
  const [selectedRows, setSelectedRows] = useState<CatalogDatabase[]>([]);
-  const [action, setAction] = useState<"test" | "sync" | "generate" | "delete" | null>(null);
+  const [action, setAction] = useState<"test" | "sync" | "generate" | "suggest" | "delete" | null>(null);
  const [pendingDelete, setPendingDelete] = useState<CatalogDatabaseMetadataDeleteTarget | null>(null);
  const [pendingGenerateAll, setPendingGenerateAll] = useState(false);
  const context = useMemo<DatabaseGridContext>(
@@ -283,12 +285,18 @@ export function DatabaseGrid({
    setPendingGenerateAll(false);
    window.setTimeout(() => actionsTriggerRef.current?.focus(), 0);
  };
-  const perform = async (kind: "test" | "sync" | "generate" | "delete", operation: () => Promise<void>) => {
+  const perform = async (
+    kind: "test" | "sync" | "generate" | "suggest" | "delete",
+    operation: () => Promise<void>,
+    clearSelection = true,
+  ) => {
    setAction(kind);
    try {
      await operation();
-      gridRef.current?.api.deselectAll();
-      setSelectedRows([]);
+      if (clearSelection) {
+        gridRef.current?.api.deselectAll();
+        setSelectedRows([]);
+      }
      setPendingDelete(null);
      setPendingGenerateAll(false);
      if (kind === "delete") window.setTimeout(() => searchInputRef.current?.focus(), 0);
@@ -422,6 +430,15 @@ export function DatabaseGrid({
                  </Menu.Positioner>
                </Menu.Portal>
              </Menu.Root>
+              <Button
+                type="button"
+                variant="outline"
+                disabled={!canManage || action !== null || descriptionGenerationActive}
+                title={descriptionGenerationActive ? "Wait for the active description generation to finish" : undefined}
+                onClick={() => void perform("suggest", () => onSuggestSensitive(selectedRows), false)}
+              >
+                <Sparkles />{action === "suggest" ? "Suggesting…" : "Suggest sensitive fields"}
+              </Button>
              <Button type="button" variant="ghost" disabled={action !== null} onClick={() => { gridRef.current?.api.deselectAll(); setSelectedRows([]); }}><X />Clear</Button>
            </>
          )
@@ -3,7 +3,7 @@ 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, ChevronDown, Columns3, Pencil, RefreshCw, Save, Trash2, X } from "lucide-react";
+import { ArrowLeft, ChevronDown, Columns3, Pencil, RefreshCw, Save, Sparkles, Trash2, X } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "../../components/ui/button";
 import { ApiError, apiErrorMessage } from "../../api/client";
@@ -19,6 +19,7 @@ import {
  type CatalogTable,
  type CatalogTableMetadataDeleteTarget,
  type DescriptionGenerationRun,
+  type SensitiveDataSuggestionRequest,
 } from "../../api/catalog-databases";
 import type { DatabaseNavigationState } from "./model";
 import { DatabaseColumns } from "./DatabaseColumns";
@@ -36,6 +37,7 @@ interface Props {
  onRunStarted: (run: CatalogSyncRun) => void;
  onOpenSync: () => void;
  onDescriptionGenerationRunStarted: (run: DescriptionGenerationRun) => void;
+  onSuggestSensitive: (selection: SensitiveDataSuggestionRequest, scopeLabel: string) => Promise<void>;
 }

 interface TableGridContext {
@@ -70,6 +72,7 @@ export function DatabaseTables({
  onRunStarted,
  onOpenSync,
  onDescriptionGenerationRunStarted,
+  onSuggestSensitive,
 }: Props) {
  const databaseId = database.id!;
  const queryClient = useQueryClient();
@@ -86,7 +89,7 @@ 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" | "delete" | "consolidate" | "generate" | null>(null);
+  const [busy, setBusy] = useState<"sync" | "save" | "delete" | "consolidate" | "generate" | "suggest" | null>(null);
  const [pendingDelete, setPendingDelete] = useState<CatalogTableMetadataDeleteTarget | null>(null);
  const [columnNavigation, setColumnNavigation] = useState<DatabaseNavigationState>({ dirty: false, busy: false });
  const gridRef = useRef<AgGridReact<CatalogTable>>(null);
@@ -240,6 +243,20 @@ export function DatabaseTables({
      toast.error(apiErrorMessage(error));
    } finally { setBusy(null); }
  };
+  const suggestSensitive = async () => {
+    if (selectedIds.length === 0) return;
+    setBusy("suggest");
+    try {
+      await onSuggestSensitive(
+        { scope: "selected_tables", targetIds: selectedIds },
+        `${selectedIds.length} selected table${selectedIds.length === 1 ? "" : "s"}`,
+      );
+    } catch {
+      // The page-level request reports the safe, specific reason and preserves the selection.
+    } finally {
+      setBusy(null);
+    }
+  };

  const columns = useMemo<ColDef<CatalogTable>[]>(() => [
    { field: "name", headerName: "Name", minWidth: 250, flex: 1, cellClass: "font-mono text-xs" },
@@ -303,6 +320,7 @@ export function DatabaseTables({
              onDescriptionGenerationRunStarted={onDescriptionGenerationRunStarted}
              onNavigationStateChange={setColumnNavigation}
              onSync={() => void synchronize("columns", [activeTable.id])}
+              onSuggestSensitive={onSuggestSensitive}
            />
          ) : (
            <div className="min-h-0 overflow-y-auto px-4 py-5">
@@ -420,6 +438,15 @@ export function DatabaseTables({
                    </Menu.Positioner>
                  </Menu.Portal>
                </Menu.Root>
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={!canManage || descriptionGenerationActive || busy !== null}
+                  title={descriptionGenerationActive ? "Wait for the active description generation to finish" : undefined}
+                  onClick={() => void suggestSensitive()}
+                >
+                  <Sparkles />{busy === "suggest" ? "Suggesting…" : "Suggest sensitive fields"}
+                </Button>
                <Button type="button" variant="ghost" onClick={() => { gridRef.current?.api.deselectAll(); setSelectedIds([]); }}><X />Clear</Button>
              </>
            )
@@ -0,0 +1,188 @@
+import { useEffect, useMemo, useState } from "react";
+import { Save, X } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../components/ui/button";
+import { apiErrorMessage } from "../../api/client";
+import {
+  updateCatalogColumnSensitive,
+  type CatalogColumn,
+  type SensitiveDataSuggestion,
+} from "../../api/catalog-databases";
+
+interface Props {
+  open: boolean;
+  databaseId: string | null;
+  scopeLabel: string;
+  suggestions: SensitiveDataSuggestion[];
+  canManage: boolean;
+  onClose: () => void;
+  onSaved: (columns: CatalogColumn[]) => void;
+}
+
+export function SensitiveDataReviewDrawer({
+  open,
+  databaseId,
+  scopeLabel,
+  suggestions,
+  canManage,
+  onClose,
+  onSaved,
+}: Props) {
+  const [drafts, setDrafts] = useState<Record<string, boolean>>({});
+  const [search, setSearch] = useState("");
+  const [showAll, setShowAll] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setDrafts(Object.fromEntries(suggestions.map((suggestion) => [
+      suggestion.columnId,
+      suggestion.sensitive,
+    ])));
+    setSearch("");
+    setShowAll(false);
+  }, [open, suggestions]);
+
+  const changed = useMemo(() => suggestions.filter((suggestion) => (
+    drafts[suggestion.columnId] !== undefined
+    && drafts[suggestion.columnId] !== suggestion.currentSensitive
+  )), [drafts, suggestions]);
+  const visible = useMemo(() => {
+    const term = search.trim().toLocaleLowerCase();
+    return suggestions.filter((suggestion) => (
+      (showAll || drafts[suggestion.columnId] !== suggestion.currentSensitive)
+      && (!term || `${suggestion.tableName}.${suggestion.columnName}`.toLocaleLowerCase().includes(term))
+    ));
+  }, [drafts, search, showAll, suggestions]);
+
+  const close = () => {
+    if (saving) return;
+    if (changed.length > 0 && !window.confirm("Discard the sensitive-field review?")) return;
+    onClose();
+  };
+
+  const save = async () => {
+    if (!databaseId || changed.length === 0) return;
+    setSaving(true);
+    const results = await Promise.allSettled(changed.map((suggestion) => (
+      updateCatalogColumnSensitive(
+        databaseId,
+        suggestion.tableId,
+        suggestion.columnId,
+        suggestion.version,
+        drafts[suggestion.columnId]!,
+      )
+    )));
+    const saved = results.flatMap((result) => result.status === "fulfilled" ? [result.value] : []);
+    const failed = results.flatMap((result) => result.status === "rejected" ? [result.reason] : []);
+    if (saved.length > 0) onSaved(saved);
+    if (failed.length > 0) {
+      toast.error(`${failed.length} sensitive flag${failed.length === 1 ? "" : "s"} could not be saved: ${apiErrorMessage(failed[0])}`);
+    } else {
+      toast.success(`Saved ${saved.length} sensitive flag${saved.length === 1 ? "" : "s"}`);
+      onClose();
+    }
+    setSaving(false);
+  };
+
+  if (!open || !databaseId) return null;
+  return (
+    <aside
+      aria-label="Sensitive field review"
+      className="fixed inset-y-2 right-0 z-50 flex w-full max-w-[480px] flex-col border-l border-border bg-background shadow-2xl sm:inset-y-4"
+    >
+      <div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
+        <div>
+          <p className="thot-label">Sensitive data</p>
+          <h2 className="mt-1 font-heading text-xl font-semibold">Review suggested flags</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {scopeLabel}. The model proposed values, but only your save changes the catalog.
+          </p>
+        </div>
+        <Button type="button" variant="ghost" size="icon-lg" aria-label="Close sensitive field review" disabled={saving} onClick={close}>
+          <X aria-hidden="true" />
+        </Button>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col">
+        <div className="border-b border-border px-5 py-4">
+          <div className="flex items-center gap-3">
+            <input
+              className="h-9 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15"
+              aria-label="Search sensitive field suggestions"
+              placeholder="Search table or column"
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+            />
+            <span className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">
+              {changed.length} change{changed.length === 1 ? "" : "s"}
+            </span>
+          </div>
+          <label className="mt-3 inline-flex items-center gap-2 text-sm text-muted-foreground">
+            <input
+              type="checkbox"
+              className="size-4 accent-primary outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+              checked={showAll}
+              onChange={(event) => setShowAll(event.target.checked)}
+            />
+            Show all {suggestions.length} classified columns
+          </label>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+          {visible.length === 0 ? (
+            <div className="rounded-md border border-border bg-muted/25 px-4 py-5 text-sm">
+              <p className="font-semibold">No proposed changes in this view.</p>
+              <p className="mt-1 text-muted-foreground">
+                Show all classified columns to inspect unchanged flags, or close this review.
+              </p>
+            </div>
+          ) : (
+            <ul className="divide-y divide-border" aria-label="Sensitive field suggestions">
+              {visible.map((suggestion) => {
+                const proposed = drafts[suggestion.columnId] ?? suggestion.sensitive;
+                const changedFromCurrent = proposed !== suggestion.currentSensitive;
+                return (
+                  <li key={suggestion.columnId} className="flex items-start gap-3 py-3">
+                    <input
+                      type="checkbox"
+                      className="mt-1 size-4 shrink-0 accent-primary outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+                      aria-label={`Protect ${suggestion.tableName}.${suggestion.columnName}`}
+                      checked={proposed}
+                      disabled={!canManage || saving}
+                      onChange={(event) => setDrafts((current) => ({
+                        ...current,
+                        [suggestion.columnId]: event.target.checked,
+                      }))}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate font-mono text-xs font-semibold">
+                        {suggestion.tableName}.{suggestion.columnName}
+                      </p>
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        Current: {suggestion.currentSensitive ? "protected" : "allowed"}. Proposed: {proposed ? "protected" : "allowed"}.
+                      </p>
+                    </div>
+                    <span className={`rounded px-2 py-0.5 text-[11px] font-semibold ${changedFromCurrent ? "bg-amber-500/12 text-amber-800 dark:text-amber-300" : "bg-muted text-muted-foreground"}`}>
+                      {changedFromCurrent ? "Change" : "No change"}
+                    </span>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between gap-3 border-t border-border px-5 py-4">
+        <p className="text-xs text-muted-foreground">Unsaved suggestions never change the catalog.</p>
+        <div className="flex gap-2">
+          <Button type="button" variant="outline" disabled={saving} onClick={close}>Cancel</Button>
+          <Button type="button" disabled={!canManage || saving || changed.length === 0} onClick={() => void save()}>
+            <Save />{saving ? "Saving…" : `Save ${changed.length}`}
+          </Button>
+        </div>
+      </div>
+    </aside>
+  );
+}