@manta-eu/react 0.10.0 → 0.12.0

package/src/routes/datastores/components/StatusBadge.tsx

@@ -1,19 +1,43 @@
-import { enableDatastoreRemoval } from "@manta-eu/client/shared/constants";
 import { isPresent } from "@manta-eu/lib/present";
-import { LoaderCircle } from "lucide-react";
+import { Info, LoaderCircle } from "lucide-react";
 import { Badge, type BadgeVariant } from "#components/badge/index";
 import {
   datastoreStatusCategory,
   type DatastoreStatus,
   type DatastoreStatusCategory,
 } from "#components/datastore-management/tree";
+import type { DatastoreDeletion } from "#components/datastore-management/use-datastore-status";
+import { Tooltip, TooltipContent, TooltipTrigger } from "#components/tooltip/index";
 
-export type DatastoreStatusFilterValue = "noDatastore" | "checking" | "notBuilt" | DatastoreStatusCategory;
+export type DatastoreStatusFilterValue =
+  | "noDatastore"
+  | "checking"
+  | "notBuilt"
+  | "deleting"
+  | "deletionRetrying"
+  | "deletionStopped"
+  | "deletionUnknown"
+  | DatastoreStatusCategory;
 
 type StatusNode = { datastoreId?: string; removed: boolean; isUnlinked?: boolean; unbuilt?: boolean };
 
-export function datastoreStatusFilterValue(node: StatusNode, status?: DatastoreStatus): DatastoreStatusFilterValue {
+export type DatastoreStatusBadgeProps = {
+  node: StatusNode;
+  status?: DatastoreStatus;
+  deletion?: DatastoreDeletion;
+};
+
+export function datastoreStatusFilterValue({
+  node,
+  status,
+  deletion,
+}: DatastoreStatusBadgeProps): DatastoreStatusFilterValue {
   if (!isPresent(node.datastoreId)) return "noDatastore";
+  if (deletion) {
+    if (deletion.unreadable === true) return "deletionUnknown";
+    if (isPresent(deletion.error)) return "deletionStopped";
+    return deletion.retrying ? "deletionRetrying" : "deleting";
+  }
   if (node.unbuilt === true && status?.exists !== true) return "notBuilt";
   return datastoreStatusCategory(node, status) ?? "checking";
 }
@@ -22,35 +46,54 @@ type BadgeConfig = { label: string; variant: BadgeVariant; title?: string; spinn
 
 // The only place these strings live: the badge and the filter dropdown both read from here.
 const badgeConfigByFilterValue: Record<DatastoreStatusFilterValue, BadgeConfig> = {
-  ready: { label: "Ready", variant: "success" },
+  ready: { label: "Ready", variant: "success", title: "Built and ready to use." },
   materializing: {
     label: "Materializing",
     variant: "warning",
     spinning: true,
-    title: "KGC is creating its knowledge graph. This can take a few minutes.",
+    title: "Building its knowledge graph. This can take a few minutes.",
   },
   notRegistered: {
     label: "Not registered",
     variant: "destructive",
-    title: "This id never reached the datastore registry, so nothing will build it. Provision it again.",
+    title: "It was never registered, so it can't be built. Use Register to fix it.",
   },
   notBuilt: {
     label: "Not built",
     variant: "warning",
     title: "Registered in Infisical, but no datastore exists for it. Link it to build it, or delete it.",
   },
-  offline: { label: "Offline", variant: "destructive" },
-  unavailable: { label: "Status unavailable", variant: "copy" },
-  checking: { label: "Checking…", variant: "copy", spinning: true },
-  removed: enableDatastoreRemoval
-    ? { label: "Removed", variant: "copy" }
-    : {
-        label: "Removed",
-        variant: "warning",
-        title:
-          "Out of use: a permanent delete stopped partway, or it was removed before removal was turned off. " +
-          "Delete it permanently only if it should go for good.",
-      },
+  offline: {
+    label: "Offline",
+    variant: "destructive",
+    title: "Its data is kept, but it isn't running. Bring it online to use it again.",
+  },
+  unavailable: {
+    label: "Status unavailable",
+    variant: "copy",
+    title: "Its status couldn't be read just now. It's checked again automatically.",
+  },
+  checking: { label: "Checking…", variant: "copy", spinning: true, title: "Reading its status." },
+  removed: {
+    label: "Removed",
+    variant: "warning",
+    title:
+      "Out of use: a permanent delete stopped partway, or it was removed before removal was turned off. " +
+      "Delete it permanently only if it should go for good.",
+  },
+  deleting: {
+    label: "Deleting…",
+    variant: "warning",
+    spinning: true,
+    title: "Deleting in the background. This can take a few minutes.",
+  },
+  deletionRetrying: { label: "Retrying deletion", variant: "warning" },
+  deletionStopped: { label: "Deletion stopped", variant: "destructive" },
+  deletionUnknown: {
+    label: "Deletion unknown",
+    variant: "copy",
+    title: "Couldn't check how far its deletion got. If this lasts, delete it again to restart it.",
+  },
   noDatastore: { label: "No datastore", variant: "copy" },
 };
 
@@ -62,6 +105,10 @@ const filterOptionOrder: DatastoreStatusFilterValue[] = [
   "offline",
   "unavailable",
   "removed",
+  "deleting",
+  "deletionRetrying",
+  "deletionStopped",
+  "deletionUnknown",
 ];
 
 export const datastoreStatusFilterOptions: { id: "ALL" | DatastoreStatusFilterValue; label: string }[] = [
@@ -69,22 +116,38 @@ export const datastoreStatusFilterOptions: { id: "ALL" | DatastoreStatusFilterVa
   ...filterOptionOrder.map((id) => ({ id, label: badgeConfigByFilterValue[id].label })),
 ];
 
-export type DatastoreStatusBadgeProps = {
-  node: StatusNode;
-  status?: DatastoreStatus;
-};
+function retryingExplanation(failure: string | null | undefined): string {
+  return `${failure ?? "Part of its deletion failed."} It's retried automatically - select Retry now to try again right away.`;
+}
 
 export function DatastoreStatusBadge(props: DatastoreStatusBadgeProps) {
-  const { node, status } = props;
+  const { node, deletion } = props;
 
   if (!isPresent(node.datastoreId)) return <span className="typography-tiny text-muted-foreground">—</span>;
 
-  const config = badgeConfigByFilterValue[datastoreStatusFilterValue(node, status)];
+  const config = badgeConfigByFilterValue[datastoreStatusFilterValue(props)];
+  const stoppedReason = deletion?.error;
+  const retrying = !isPresent(stoppedReason) && deletion?.retrying === true;
+  const explanation = stoppedReason ?? (retrying ? retryingExplanation(deletion?.failure) : config.title);
 
-  return (
-    <Badge size="sm" variant={config.variant} className="cursor-default" title={config.title}>
+  const badge = (
+    <Badge
+      size="sm"
+      variant={config.variant}
+      className="cursor-default"
+      tabIndex={isPresent(explanation) ? 0 : undefined}
+    >
       {config.spinning && <LoaderCircle className="size-3 animate-spin" />}
       {config.label}
+      {(isPresent(stoppedReason) || retrying) && <Info className="size-3" aria-hidden />}
     </Badge>
   );
+  if (!isPresent(explanation)) return badge;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{badge}</TooltipTrigger>
+      <TooltipContent className="max-w-80">{explanation}</TooltipContent>
+    </Tooltip>
+  );
 }

package/src/routes/datastores/deletion-warning.ts

@@ -0,0 +1,7 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { toast } from "sonner";
+
+export function toastDeletionWarning(deletionWarning: string | null | undefined) {
+  if (!isPresent(deletionWarning)) return;
+  toast.warning("It was taken back from its deletion", { description: deletionWarning });
+}

package/src/routes/datastores/flatten.ts

@@ -63,8 +63,21 @@ export type DatastoreRowVisibility = {
   showUnprovisioned: boolean;
 };
 
-function matchesVisibility(row: DatastoreRow, visibility: DatastoreRowVisibility): boolean {
-  return (visibility.showArchived || !row.removed) && (visibility.showUnprovisioned || isPresent(row.datastoreId));
+export type DatastoreRowFilter = {
+  rows: DatastoreRow[];
+  visibility: DatastoreRowVisibility;
+  deleting: ReadonlySet<string>;
+};
+
+function matchesVisibility(
+  row: DatastoreRow,
+  { visibility, deleting }: Pick<DatastoreRowFilter, "visibility" | "deleting">,
+): boolean {
+  const beingDeleted = isPresent(row.datastoreId) && deleting.has(row.datastoreId);
+  return (
+    (visibility.showArchived || !row.removed || beingDeleted) &&
+    (visibility.showUnprovisioned || isPresent(row.datastoreId))
+  );
 }
 
 function hasVisibleDescendant(rows: DatastoreRow[], shown: boolean[], index: number): boolean {
@@ -75,8 +88,9 @@ function hasVisibleDescendant(rows: DatastoreRow[], shown: boolean[], index: num
   return false;
 }
 
-export function visibleDatastoreRows(rows: DatastoreRow[], visibility: DatastoreRowVisibility): DatastoreRow[] {
-  const shown = rows.map((row) => matchesVisibility(row, visibility));
+export function visibleDatastoreRows(filter: DatastoreRowFilter): DatastoreRow[] {
+  const { rows } = filter;
+  const shown = rows.map((row) => matchesVisibility(row, filter));
   return rows.filter((_row, index) => shown[index] || hasVisibleDescendant(rows, shown, index));
 }
 
@@ -96,23 +110,21 @@ export function nestedDatastoreNamesByRowId(rows: DatastoreRow[]): Map<string, s
 }
 
 export function hiddenRowCount(
-  rows: DatastoreRow[],
-  visibility: DatastoreRowVisibility,
+  filter: DatastoreRowFilter,
   key: keyof DatastoreRowVisibility,
   shownCount: number,
 ): number {
-  if (visibility[key]) return 0;
+  if (filter.visibility[key]) return 0;
 
-  return visibleDatastoreRows(rows, { ...visibility, [key]: true }).length - shownCount;
+  return visibleDatastoreRows({ ...filter, visibility: { ...filter.visibility, [key]: true } }).length - shownCount;
 }
 
-export function hiddenRemovedRowCount(rows: DatastoreRow[], visibility: DatastoreRowVisibility): number {
-  if (visibility.showArchived) return 0;
+export function hiddenRemovedRowCount(filter: DatastoreRowFilter): number {
+  if (filter.visibility.showArchived) return 0;
 
-  const shown = new Set(visibleDatastoreRows(rows, visibility));
-  return rows.filter(
-    (row) => row.removed && !shown.has(row) && matchesVisibility(row, { ...visibility, showArchived: true }),
-  ).length;
+  const shown = new Set(visibleDatastoreRows(filter));
+  const revealed = { ...filter, visibility: { ...filter.visibility, showArchived: true } };
+  return filter.rows.filter((row) => row.removed && !shown.has(row) && matchesVisibility(row, revealed)).length;
 }
 
 // Matches Keycloak's own org lookup (ensureOrganization), which is case-insensitive and trims too.
@@ -162,6 +174,7 @@ export function visibilityForStatusFilter(
   return match(status)
     .with("removed", () => ({ ...visibility, showArchived: true }))
     .with("noDatastore", () => ({ ...visibility, showUnprovisioned: true }))
+    .with("deleting", "deletionRetrying", "deletionStopped", "deletionUnknown", () => visibility)
     .with(
       "ALL",
       "ready",