@manta-eu/react 0.10.0 → 0.11.0

package/src/routes/datastores/hooks/useDatastoreColumns.tsx

@@ -1,4 +1,3 @@
-import { enableDatastoreRemoval } from "@manta-eu/client/shared/constants";
 import { isPresent } from "@manta-eu/lib/present";
 import type { ColumnDef } from "@tanstack/react-table";
 import { formatDistanceToNow } from "date-fns";
@@ -13,9 +12,8 @@ import {
   Plus,
   Power,
   RefreshCw,
-  RotateCcw,
+  RotateCw,
   Trash,
-  Trash2,
   TriangleAlert,
   Users,
 } from "lucide-react";
@@ -24,12 +22,14 @@ import { match } from "ts-pattern";
 import {
   DatastoreStatusBadge,
   datastoreStatusFilterValue,
+  type DatastoreStatusBadgeProps,
   type DatastoreStatusFilterValue,
 } from "../components/StatusBadge";
 import { isUnmirroredOrganization, type DatastoreRow } from "../flatten";
 import { Badge } from "#components/badge/index";
 import { Button } from "#components/button/index";
 import { datastoreStatusCategory, isMaterializing, type DatastoreStatus } from "#components/datastore-management/tree";
+import type { DatastoreDeletion } from "#components/datastore-management/use-datastore-status";
 import { DisabledActionTooltip } from "#components/disabled-action-tooltip/index";
 import {
   Dropdown,
@@ -38,7 +38,7 @@ import {
   DropdownSeparator,
   DropdownTrigger,
 } from "#components/dropdown/index";
-import { Tooltip, TooltipContent, TooltipTrigger } from "#components/tooltip/index";
+import { Tooltip, TooltipContent, TooltipTrigger, TruncateTooltip } from "#components/tooltip/index";
 import { NestedMarker, nestedIndent } from "#ldo-ui";
 import { cn } from "#lib/utils";
 
@@ -97,6 +97,7 @@ const columnMinWidths: Record<string, string> = {
 
 type UseDatastoreColumnsArgs = {
   statusByDatastoreId: Record<string, DatastoreStatus>;
+  deletionByDatastoreId: Record<string, DatastoreDeletion>;
   currentDatastoreId?: string;
   isSwitching?: boolean;
   // Indentation only means something while rows are in hierarchy order; a sort makes it a lie.
@@ -109,9 +110,9 @@ type UseDatastoreColumnsArgs = {
   onLink: (row: DatastoreRow) => void;
   onProvision: (row: DatastoreRow) => void;
   onLinkExisting: (row: DatastoreRow) => void;
-  onRemove: (row: DatastoreRow) => void;
-  onRestore: (row: DatastoreRow) => void;
   onDelete: (row: DatastoreRow) => void;
+  onContinueDeletion: (row: DatastoreRow) => void;
+  isContinuingDeletion?: boolean;
   onRename: (row: DatastoreRow) => void;
   onRegister: (row: DatastoreRow) => void;
   registeringDatastoreIds: ReadonlySet<string>;
@@ -125,9 +126,68 @@ type UseDatastoreColumnsArgs = {
   providerLinkEnabled?: boolean;
 };
 
+const unregisteredReason = "Its data is already deleted - continue the deletion to finish.";
+
+const unreadableReason = "Couldn't check how far its deletion got - delete it again to restart it.";
+
+const lastDeletionStep = "keycloak";
+
+function linkBlockedReason(deletion: DatastoreDeletion | undefined): string | undefined {
+  if (!deletion) return undefined;
+  if (deletion.unreadable === true) return unreadableReason;
+  if (deletion.unregistered === true) return unregisteredReason;
+  return !isPresent(deletion.error) && !deletion.retrying ? "Being deleted - it can't be linked." : undefined;
+}
+
+function deleteBlockedReason(
+  deletion: DatastoreDeletion | undefined,
+  nestedReason: string | undefined,
+  isUnlinked: boolean,
+): string | undefined {
+  if (!deletion) return nestedReason;
+  const stepRunning = !isPresent(deletion.error) && !deletion.retrying && deletion.unreadable !== true;
+  if (stepRunning) return "Already being deleted.";
+  if (deletion.unregistered === true && isUnlinked) return unregisteredReason;
+  return nestedReason;
+}
+
+function continueLabel(deletion: DatastoreDeletion | undefined): string | undefined {
+  if (!deletion) return undefined;
+  if (isPresent(deletion.error)) return "Continue deletion";
+  if (deletion.retrying) return "Retry now";
+  return undefined;
+}
+
+export type DeletionActionState = {
+  deleteBlockedReason: string | undefined;
+  linkBlockedReason: string | undefined;
+  addChildBlockedReason: string | undefined;
+  // Undefined while no Continue/Retry button applies.
+  continueLabel: string | undefined;
+  continueBlockedReason: string | undefined;
+};
+
+export function deletionActionState(
+  deletion: DatastoreDeletion | undefined,
+  nestedDatastoreNames: string[] | undefined,
+  isUnlinked: boolean,
+): DeletionActionState {
+  const nestedReason = isPresent(nestedDatastoreNames)
+    ? `Delete the datastores under it first: ${nestedDatastoreNames.join(", ")}`
+    : undefined;
+  return {
+    deleteBlockedReason: deleteBlockedReason(deletion, nestedReason, isUnlinked),
+    linkBlockedReason: linkBlockedReason(deletion),
+    addChildBlockedReason: deletion ? "Being deleted." : undefined,
+    continueLabel: continueLabel(deletion),
+    continueBlockedReason: deletion?.step === lastDeletionStep ? nestedReason : undefined,
+  };
+}
+
 export function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<DatastoreRow>[] {
   const {
     statusByDatastoreId,
+    deletionByDatastoreId,
     currentDatastoreId,
     isSwitching,
     indented,
@@ -139,9 +199,9 @@ export function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<Da
     onLink,
     onProvision,
     onLinkExisting,
-    onRemove,
-    onRestore,
     onDelete,
+    onContinueDeletion,
+    isContinuingDeletion,
     onRename,
     onRegister,
     registeringDatastoreIds,
@@ -155,8 +215,14 @@ export function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<Da
     providerLinkEnabled,
   } = args;
 
-  return useMemo(
-    () => [
+  return useMemo<ColumnDef<DatastoreRow>[]>(() => {
+    const statusBadgeProps = (row: DatastoreRow): DatastoreStatusBadgeProps => ({
+      node: row,
+      status: statusByDatastoreId[row.datastoreId ?? ""],
+      deletion: deletionByDatastoreId[row.datastoreId ?? ""],
+    });
+
+    return [
       {
         id: datastoreColumnIds.name,
         accessorKey: "name",
@@ -188,20 +254,31 @@ export function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<Da
                   </Tooltip>
                 )}
                 {isRealmDefault && (
-                  <Badge variant="copy" size="sm" className="shrink-0">
-                    Default
-                  </Badge>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Badge variant="copy" size="sm" className="shrink-0 cursor-default" tabIndex={0}>
+                        Default
+                      </Badge>
+                    </TooltipTrigger>
+                    <TooltipContent>The realm's own datastore. It can't be deleted.</TooltipContent>
+                  </Tooltip>
                 )}
                 {current && (
-                  <Badge
-                    data-testid={`datastore-selected-badge-${row.original.id}`}
-                    variant="copy"
-                    size="sm"
-                    className="shrink-0"
-                  >
-                    <Check className="size-3" />
-                    Selected
-                  </Badge>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Badge
+                        data-testid={`datastore-selected-badge-${row.original.id}`}
+                        variant="copy"
+                        size="sm"
+                        className="shrink-0 cursor-default"
+                        tabIndex={0}
+                      >
+                        <Check className="size-3" />
+                        Selected
+                      </Badge>
+                    </TooltipTrigger>
+                    <TooltipContent>The datastore you're working in.</TooltipContent>
+                  </Tooltip>
                 )}
               </div>
             </div>
@@ -245,13 +322,13 @@ export function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<Da
           if (!match) return <div className={cn(minWidthClassName, "typography-small text-muted-foreground")}>—</div>;
 
           return (
-            <div
-              className={cn(minWidthClassName, "truncate typography-small")}
-              title={`${match.organizationName}${match.isOrganization ? "" : match.path}`}
+            <TruncateTooltip
+              text={`${match.organizationName}${match.isOrganization ? "" : match.path}`}
+              className={cn(minWidthClassName, "block truncate typography-small")}
             >
               <span className="text-muted-foreground">{match.organizationName}</span>
               {!match.isOrganization && <span className="text-default-foreground">{match.path}</span>}
-            </div>
+            </TruncateTooltip>
           );
         },
       },
@@ -261,10 +338,10 @@ export function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<Da
         header: datastoreColumnLabels[datastoreColumnIds.status],
         enableSorting: false,
         filterFn: (row, _columnId, filterValue: DatastoreStatusFilterValue) =>
-          datastoreStatusFilterValue(row.original, statusByDatastoreId[row.original.datastoreId ?? ""]) === filterValue,
+          datastoreStatusFilterValue(statusBadgeProps(row.original)) === filterValue,
         cell: ({ row }) => (
-          <div className={columnMinWidths[datastoreColumnIds.status]}>
-            <DatastoreStatusBadge node={row.original} status={statusByDatastoreId[row.original.datastoreId ?? ""]} />
+          <div className={cn(columnMinWidths[datastoreColumnIds.status], "flex flex-col items-start gap-1")}>
+            <DatastoreStatusBadge {...statusBadgeProps(row.original)} />
           </div>
         ),
       },
@@ -295,12 +372,14 @@ export function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<Da
             return <div className={cn(minWidthClassName, "typography-small text-muted-foreground")}>—</div>;
           }
           return (
-            <div
-              className={cn(minWidthClassName, "truncate typography-small text-muted-foreground")}
-              title={at.toLocaleString()}
-            >
-              {formatDistanceToNow(at, { addSuffix: true })}
-            </div>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className={cn(minWidthClassName, "truncate typography-small text-muted-foreground")}>
+                  {formatDistanceToNow(at, { addSuffix: true })}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>{at.toLocaleString()}</TooltipContent>
+            </Tooltip>
           );
         },
       },
@@ -324,10 +403,11 @@ export function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<Da
             .otherwise(() => undefined);
           const canSelect = hasDatastore && !reason && !current && !isSwitching;
           const canDelete = hasDatastore && !current;
-          const nestedDatastoreNames = nestedDatastoreNamesByRowId.get(datastoreRow.id);
-          const deleteBlockedReason = isPresent(nestedDatastoreNames)
-            ? `Delete the datastores under it first: ${nestedDatastoreNames.join(", ")}`
-            : undefined;
+          const deletionState = deletionActionState(
+            hasDatastore ? deletionByDatastoreId[datastoreId] : undefined,
+            nestedDatastoreNamesByRowId.get(datastoreRow.id),
+            isUnlinked === true,
+          );
 
           return (
             <div className={cn(columnMinWidths[datastoreColumnIds.actions], "flex items-center justify-end gap-1.5")}>
@@ -343,16 +423,33 @@ export function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<Da
                   Link to identity provider
                 </Button>
               )}
+              {isPresent(deletionState.continueLabel) && (
+                <DisabledActionTooltip reason={deletionState.continueBlockedReason}>
+                  <Button
+                    data-testid={`datastore-continue-deletion-${datastoreRow.id}`}
+                    size="sm"
+                    variant="secondary"
+                    icon={RotateCw}
+                    disabled={isContinuingDeletion === true || isPresent(deletionState.continueBlockedReason)}
+                    onClick={() => onContinueDeletion(datastoreRow)}
+                  >
+                    {deletionState.continueLabel}
+                  </Button>
+                </DisabledActionTooltip>
+              )}
               {isUnlinked && (
-                <Button
-                  data-testid={`datastore-link-${datastoreRow.id}`}
-                  size="sm"
-                  variant="secondary"
-                  icon={Link2}
-                  onClick={() => onLink(datastoreRow)}
-                >
-                  Link
-                </Button>
+                <DisabledActionTooltip reason={deletionState.linkBlockedReason}>
+                  <Button
+                    data-testid={`datastore-link-${datastoreRow.id}`}
+                    size="sm"
+                    variant="secondary"
+                    icon={Link2}
+                    disabled={isPresent(deletionState.linkBlockedReason)}
+                    onClick={() => onLink(datastoreRow)}
+                  >
+                    Link
+                  </Button>
+                </DisabledActionTooltip>
               )}
               {hasDatastore && !removed && category === "offline" && (
                 <Button
@@ -384,16 +481,17 @@ export function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<Da
                 </Button>
               )}
               {!isUnlinked && hasDatastore && !current && !removed && (
-                <Button
-                  data-testid={`datastore-select-${datastoreRow.id}`}
-                  size="sm"
-                  variant="secondary"
-                  disabled={!canSelect}
-                  title={reason}
-                  onClick={() => onSelect(datastoreRow)}
-                >
-                  Select
-                </Button>
+                <DisabledActionTooltip reason={reason}>
+                  <Button
+                    data-testid={`datastore-select-${datastoreRow.id}`}
+                    size="sm"
+                    variant="secondary"
+                    disabled={!canSelect}
+                    onClick={() => onSelect(datastoreRow)}
+                  >
+                    Select
+                  </Button>
+                </DisabledActionTooltip>
               )}
               {isRealmDefault || (isUnlinked && !canDelete) ? (
                 // Same-sized spacer keeps Select/Selected aligned with rows that have the ellipsis.
@@ -457,41 +555,24 @@ export function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<Da
                             Build datastore now
                           </DropdownItem>
                         )}
-                        <DropdownItem icon={<Plus className="size-4" />} onSelect={() => onAddChild(datastoreRow)}>
-                          Add datastore
-                        </DropdownItem>
-                        {enableDatastoreRemoval && hasDatastore && !removed && (
-                          <>
-                            <DropdownSeparator />
-                            <DropdownItem
-                              className="text-error-foreground"
-                              icon={<Trash2 className="size-4" />}
-                              onSelect={() => onRemove(datastoreRow)}
-                            >
-                              Remove datastore
-                            </DropdownItem>
-                          </>
-                        )}
-                        {enableDatastoreRemoval && hasDatastore && removed && (
-                          <>
-                            <DropdownSeparator />
-                            <DropdownItem
-                              icon={<RotateCcw className="size-4" />}
-                              onSelect={() => onRestore(datastoreRow)}
-                            >
-                              Restore datastore
-                            </DropdownItem>
-                          </>
-                        )}
-                        {!enableDatastoreRemoval && canDelete && <DropdownSeparator />}
+                        <DisabledActionTooltip reason={deletionState.addChildBlockedReason}>
+                          <DropdownItem
+                            icon={<Plus className="size-4" />}
+                            disabled={isPresent(deletionState.addChildBlockedReason)}
+                            onSelect={() => onAddChild(datastoreRow)}
+                          >
+                            Add datastore
+                          </DropdownItem>
+                        </DisabledActionTooltip>
+                        {canDelete && <DropdownSeparator />}
                       </>
                     )}
                     {canDelete && (
-                      <DisabledActionTooltip reason={deleteBlockedReason}>
+                      <DisabledActionTooltip reason={deletionState.deleteBlockedReason}>
                         <DropdownItem
                           className="text-error-foreground"
                           icon={<Trash className="size-4" />}
-                          disabled={isPresent(deleteBlockedReason)}
+                          disabled={isPresent(deletionState.deleteBlockedReason)}
                           onSelect={() => onDelete(datastoreRow)}
                         >
                           Delete permanently
@@ -505,34 +586,34 @@ export function useDatastoreColumns(args: UseDatastoreColumnsArgs): ColumnDef<Da
           );
         },
       },
-    ],
-    [
-      statusByDatastoreId,
-      currentDatastoreId,
-      isSwitching,
-      indented,
-      matchableRowIds,
-      nestedDatastoreNamesByRowId,
-      suggestedMatchByDatastoreId,
-      onSelect,
-      onAddChild,
-      onLink,
-      onProvision,
-      onLinkExisting,
-      onRemove,
-      onRestore,
-      onDelete,
-      onRegister,
-      registeringDatastoreIds,
-      removedSubtreeRowIds,
-      onRename,
-      onManageUsers,
-      onManageCustomApps,
-      onBringOnline,
-      isBringingOnline,
-      onLinkProvider,
-      isLinkingProvider,
-      providerLinkEnabled,
-    ],
-  );
+    ];
+  }, [
+    statusByDatastoreId,
+    deletionByDatastoreId,
+    currentDatastoreId,
+    isSwitching,
+    indented,
+    matchableRowIds,
+    nestedDatastoreNamesByRowId,
+    suggestedMatchByDatastoreId,
+    onSelect,
+    onAddChild,
+    onLink,
+    onProvision,
+    onLinkExisting,
+    onDelete,
+    onContinueDeletion,
+    isContinuingDeletion,
+    onRegister,
+    registeringDatastoreIds,
+    removedSubtreeRowIds,
+    onRename,
+    onManageUsers,
+    onManageCustomApps,
+    onBringOnline,
+    isBringingOnline,
+    onLinkProvider,
+    isLinkingProvider,
+    providerLinkEnabled,
+  ]);
 }