@manta-eu/react 0.9.0 → 0.11.0

package/src/components/fact/Fact.tsx

@@ -0,0 +1,103 @@
+import { useId, useState, type ReactNode } from "react";
+import { ExplainFact, type ExplainFactOutput } from "#components/explain-fact/ExplainFact";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "#components/modal/index";
+import { cn } from "#lib/utils";
+import { MantaClientProvider, useMantaClient } from "#providers/MantaClientProvider";
+
+export type FactProps = {
+  subject: string;
+  predicate: string;
+  value: string;
+  datatype?: string;
+  namedGraph?: string;
+  datastoreId?: string;
+  label?: string;
+  data?: ExplainFactOutput;
+  children: ReactNode;
+  className?: string;
+};
+
+export function Fact(props: FactProps) {
+  const { subject, predicate, value, datatype, namedGraph, datastoreId, label, data, children, className } = props;
+  const [open, setOpen] = useState(false);
+  const hintId = useId();
+  const title = label ?? "Why this value";
+
+  return (
+    <>
+      <button
+        type="button"
+        data-fact-subject={subject}
+        data-fact-predicate={predicate}
+        aria-describedby={hintId}
+        onClick={() => setOpen(true)}
+        className={cn(
+          "cursor-help text-left underline decoration-muted-foreground decoration-dotted underline-offset-4 hover:decoration-default-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+          className,
+        )}
+      >
+        {children}
+      </button>
+      <span id={hintId} hidden>
+        Explain {label ?? "this value"}
+      </span>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent size="2xl" fullScreenOnMobile>
+          <DialogHeader>
+            <DialogTitle text={title} />
+            <DialogDescription>The rules and data this value comes from.</DialogDescription>
+          </DialogHeader>
+          <DialogBody className="min-h-0">
+            <FactDatastore datastoreId={datastoreId}>
+              <ExplainFact
+                mode="full"
+                subject={subject}
+                predicate={predicate}
+                object={value}
+                objectDatatype={datatype}
+                namedGraph={namedGraph}
+                data={data}
+                explainLink={null}
+                className="h-[65vh] overflow-auto rounded-md border border-muted-border"
+              />
+            </FactDatastore>
+          </DialogBody>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+type FactDatastoreProps = { datastoreId?: string; children: ReactNode };
+
+function FactDatastore(props: FactDatastoreProps) {
+  const { datastoreId, children } = props;
+  if (datastoreId === undefined) return <>{children}</>;
+  return <OtherDatastore datastoreId={datastoreId}>{children}</OtherDatastore>;
+}
+
+type OtherDatastoreProps = { datastoreId: string; children: ReactNode };
+
+function OtherDatastore(props: OtherDatastoreProps) {
+  const { datastoreId, children } = props;
+  const client = useMantaClient();
+  if (datastoreId === client.datastoreId) return <>{children}</>;
+  return (
+    <MantaClientProvider
+      mantaBaseUrl={client.mantaBaseUrl.origin}
+      datastoreId={datastoreId}
+      onUnauthorized={client.onUnauthorized}
+      onSignOut={client.onSignOut}
+      getAccessToken={client.getAccessToken}
+    >
+      {children}
+    </MantaClientProvider>
+  );
+}

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

@@ -7,6 +7,7 @@ import { useState } from "react";
 import { toast } from "sonner";
 import { organizationNameKey } from "../flatten";
 import { useTenantOrganizationCheck } from "../hooks/useTenantOrganizationCheck";
+import { toastDeletionWarning } from "../deletion-warning";
 import { toastProviderWarning } from "../link-provider";
 import { Button } from "#components/button/index";
 import { Input } from "#components/input/index";
@@ -75,6 +76,7 @@ export function LinkUnlinkedDatastoreDialog(props: LinkUnlinkedDatastoreDialogPr
             : `Linked to the existing datastore '${datastoreId}'`,
         );
         toastProviderWarning(result.linkUnlinkedDatastore.providerWarning);
+        toastDeletionWarning(result.linkUnlinkedDatastore.deletionWarning);
         onClose();
       } else {
         toast.error("Couldn't link the datastore", {

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",