feat: refine metadata catalog workflows

2026-09-02 11:38:47 +02:00
parent 076c9742c5
commit 4531746038
48 changed files with 1345 additions and 493 deletions
@@ -1,15 +1,16 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, 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, ChevronDown, Columns3, History, Pencil, RefreshCw, Save, Sparkles, 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";
 import {
  consolidateCatalogDescriptions,
  deleteCatalogTableMetadata,
+  listCatalogColumns,
  listCatalogTables,
  startCatalogSync,
  startDescriptionGenerationRun,
@@ -37,11 +38,10 @@ interface Props {
  onOpenOverview: () => void;
  onOpenRelationships: () => void;
  onNavigationStateChange: (state: DatabaseNavigationState) => void;
-  onNestedNavigationChange?: (active: boolean) => void;
+  onNestedNavigationChange?: (active: boolean, onBack?: () => void) => void;
  onRunStarted: (run: CatalogSyncRun) => void;
  onOpenSync: () => void;
-  onOpenDescriptionHistory?: () => void;
-  onOpenSensitiveHistory?: () => void;
+  onClearCatalogTables?: () => Promise<void>;
  onDescriptionGenerationRunStarted: (run: DescriptionGenerationRun) => void;
  onSuggestSensitive: (selection: SensitiveDataSuggestionRequest, scopeLabel: string) => Promise<void>;
  onCatalogMetricsChanged?: () => void | Promise<void>;
@@ -95,8 +95,7 @@ export function DatabaseTables({
  onNestedNavigationChange,
  onRunStarted,
  onOpenSync,
-  onOpenDescriptionHistory,
-  onOpenSensitiveHistory,
+  onClearCatalogTables,
  onDescriptionGenerationRunStarted,
  onSuggestSensitive,
  onCatalogMetricsChanged,
@@ -134,9 +133,22 @@ export function DatabaseTables({
  const nestedNavigationActive = presentation === "fleet" && Boolean(activeTable) && tableSection === "columns";
  const bindingReady = database.connectionStatus === "reachable" && database.testedVersion === database.version;
  const currentRun = activeRun ?? database.activeSyncRun;
+  const clearAllCatalogTables = async () => {
+    if (!onClearCatalogTables || !window.confirm("Clear all catalog tables, columns, and relationships for this database? The source database will not be changed.")) return;
+    await onClearCatalogTables();
+  };
+  const leaveTable = useCallback(() => {
+    if (navigationBusy) return;
+    if (dirty && !window.confirm("Discard unsaved metadata?")) return;
+    setActiveTableId(null);
+    setTableSection("overview");
+    window.setTimeout(() => originRef.current?.focus(), 0);
+  }, [dirty, navigationBusy]);

  useEffect(() => { onNavigationStateChange({ dirty, busy: navigationBusy }); }, [dirty, navigationBusy, onNavigationStateChange]);
-  useEffect(() => { onNestedNavigationChange?.(nestedNavigationActive); }, [nestedNavigationActive, onNestedNavigationChange]);
+  useEffect(() => {
+    onNestedNavigationChange?.(nestedNavigationActive, nestedNavigationActive ? leaveTable : undefined);
+  }, [leaveTable, nestedNavigationActive, onNestedNavigationChange]);
  useEffect(() => () => { onNestedNavigationChange?.(false); }, [onNestedNavigationChange]);
  useEffect(() => {
    if (!activeTableId || !activeTable || editorVersion === activeTable.version || busy) return;
@@ -168,13 +180,6 @@ export function DatabaseTables({
    setStaleBannerOpen(true);
    setColumnNavigation({ dirty: false, busy: false });
  };
-  const leaveTable = () => {
-    if (navigationBusy) return;
-    if (dirty && !window.confirm("Discard unsaved metadata?")) return;
-    setActiveTableId(null);
-    setTableSection("overview");
-    window.setTimeout(() => originRef.current?.focus(), 0);
-  };
  const navigateDatabase = (target: "databases" | "overview" | "relationships") => {
    if (navigationBusy) return;
    if (dirty && !window.confirm("Discard unsaved metadata?")) return;
@@ -281,6 +286,28 @@ export function DatabaseTables({
      toast.error(apiErrorMessage(error));
    } finally { setBusy(null); }
  };
+  const generateColumnDescriptions = async () => {
+    if (selectedIds.length === 0 || !selectedMetadataModel) return;
+    setBusy("generate");
+    try {
+      const columns = (await Promise.all(selectedIds.map((tableId) => listCatalogColumns(databaseId, tableId)))).flat();
+      const columnIds = columns.map((column) => column.id);
+      if (columnIds.length === 0) {
+        toast.error("The selected tables have no synchronized catalog columns.");
+        return;
+      }
+      const run = await startDescriptionGenerationRun(
+        databaseId,
+        selectedMetadataModel,
+        "selected_columns",
+        columnIds,
+      );
+      onDescriptionGenerationRunStarted(run);
+      toast.success(`Column description generation started for ${columnIds.length} column${columnIds.length === 1 ? "" : "s"}`);
+    } catch (error) {
+      toast.error(apiErrorMessage(error));
+    } finally { setBusy(null); }
+  };
  const suggestSensitive = async () => {
    if (selectedIds.length === 0) return;
    setBusy("suggest");
@@ -298,6 +325,7 @@ export function DatabaseTables({

  type FleetTableAction =
    | "generate-descriptions"
+    | "generate-column-descriptions"
    | "sync-tables"
    | "sync-columns"
    | "consolidate-descriptions"
@@ -324,6 +352,24 @@ export function DatabaseTables({
                ? "Another action is running."
                : undefined,
    },
+    {
+      id: "generate-column-descriptions",
+      label: "Generate column descriptions",
+      group: "Descriptions",
+      runLabel: "Generate",
+      disabled: !canManage || selectedIds.length === 0 || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun),
+      disabledReason: !canManage
+        ? "You do not have permission to generate descriptions."
+        : selectedIds.length === 0
+          ? "Select at least one table."
+          : !selectedMetadataModel
+            ? NO_METADATA_GENERATION_LLM_MODEL_MESSAGE
+            : descriptionGenerationActive || Boolean(currentRun)
+              ? "Wait for the active catalog operation to finish."
+              : busy !== null
+                ? "Another action is running."
+                : undefined,
+    },
    {
      id: "consolidate-descriptions",
      label: "Move generated to Description",
@@ -421,6 +467,7 @@ export function DatabaseTables({

  const runFleetAction = async (action: FleetTableAction) => {
    if (action === "generate-descriptions") await generateDescriptions();
+    else if (action === "generate-column-descriptions") await generateColumnDescriptions();
    else if (action === "sync-tables") await synchronize("tables");
    else if (action === "consolidate-descriptions") await consolidateDescriptions();
    else if (action === "sync-columns") await synchronize("columns", selectedIds);
@@ -464,7 +511,7 @@ export function DatabaseTables({
  const databaseHeader = (
    <div className="px-4 pt-5 sm:px-5">
      <Button type="button" variant="ghost" className="-ml-2 mb-4" disabled={navigationBusy} onClick={() => navigateDatabase("databases")}><ArrowLeft />Back to databases</Button>
-      <div className="flex flex-wrap items-start justify-between gap-4 border-b border-border pb-5">
+        <div className="flex flex-wrap items-start justify-between gap-4 border-b border-border pb-5">
        <div>
          <p className="thot-label mb-1">Database management</p>
          <h2 ref={headingRef} tabIndex={-1} className="font-heading text-2xl font-semibold tracking-tight outline-none">{database.workspaceName}</h2>
@@ -472,6 +519,7 @@ export function DatabaseTables({
        </div>
        <div className="flex gap-2">
          {currentRun ? <Button type="button" variant="outline" onClick={onOpenSync}><RefreshCw className="animate-spin" />View sync</Button> : null}
+          {onClearCatalogTables ? <Button type="button" variant="outline" className="text-destructive" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void clearAllCatalogTables()}>Clear catalog tables</Button> : null}
          <Button type="button" disabled={!canManage || !bindingReady || busy !== null || Boolean(currentRun)} onClick={() => void synchronize("all")}><RefreshCw />Sync all</Button>
        </div>
      </div>
@@ -488,18 +536,6 @@ export function DatabaseTables({
      return (
        <section aria-label={`Columns for ${activeTable.name}`} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
          <div className="flex min-h-12 flex-wrap items-center gap-3 border-b border-border bg-muted/25 px-3 py-2">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="thot-fleet-icon-action thot-fleet-back-action"
-              disabled={navigationBusy}
-              data-tooltip="Tables"
-              aria-label="Back to tables"
-              onClick={leaveTable}
-            >
-              <ArrowLeft aria-hidden="true" /> Back to tables
-            </Button>
            <div className="min-w-0">
              <p className="thot-label">Physical table</p>
              <h3 className="truncate font-heading text-lg font-semibold">{activeTable.name}</h3>
@@ -513,9 +549,7 @@ export function DatabaseTables({
            descriptionGenerationActive={descriptionGenerationActive}
            onDescriptionGenerationRunStarted={onDescriptionGenerationRunStarted}
            onNavigationStateChange={setColumnNavigation}
-            onSync={() => void synchronize("columns", [activeTable.id])}
            onSuggestSensitive={onSuggestSensitive}
-            bindingReady={bindingReady}
            catalogOperationActive={Boolean(currentRun)}
            onCatalogMetricsChanged={onCatalogMetricsChanged}
            presentation="fleet"
@@ -626,7 +660,6 @@ export function DatabaseTables({
              descriptionGenerationActive={descriptionGenerationActive}
              onDescriptionGenerationRunStarted={onDescriptionGenerationRunStarted}
              onNavigationStateChange={setColumnNavigation}
-              onSync={() => void synchronize("columns", [activeTable.id])}
              onSuggestSensitive={onSuggestSensitive}
              onCatalogMetricsChanged={onCatalogMetricsChanged}
            />
@@ -728,6 +761,7 @@ export function DatabaseTables({
                      <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 || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun)} onClick={() => void generateDescriptions()}>Generate {selectedIds.length === 1 ? "description" : "descriptions"}</Menu.Item>
+                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun)} onClick={() => void generateColumnDescriptions()}>Generate descriptions for all columns</Menu.Item>
                          <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.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void consolidateDescriptions()}>Move generated description to Description</Menu.Item>
                          <Menu.Separator className="my-1 h-px bg-border" />
@@ -769,13 +803,6 @@ export function DatabaseTables({
              </>
            )
          )}
-          {presentation === "fleet" ? (
-            <Button type="button" size="sm" variant="outline" className="thot-fleet-nav-action thot-fleet-nav-action--below" data-tooltip="Synchronization history" onClick={onOpenSync}>
-              {currentRun ? <RefreshCw className="animate-spin" aria-hidden="true" /> : <History aria-hidden="true" />} Sync history
-            </Button>
-          ) : null}
-          {onOpenDescriptionHistory ? <Button type="button" size="sm" variant="outline" onClick={onOpenDescriptionHistory}><History aria-hidden="true" /> Description history</Button> : null}
-          {onOpenSensitiveHistory ? <Button type="button" size="sm" variant="outline" onClick={onOpenSensitiveHistory}><History aria-hidden="true" /> Sensitive history</Button> : null}
        </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 tables.</div> : null}
        {fleetQueryError ?? <div className="relative min-h-[280px] flex-1">