@manta-eu/react 0.10.0 → 0.11.0

package/src/routes/datastores/index.tsx

@@ -1,19 +1,18 @@
 import {
   useBringDatastoreOnlineMutation,
+  useContinueDatastoreDeletionMutation,
   useDeleteDatastoreMutation,
   useOrganizationLinkingQuery,
   useLinkOrganizationToProviderMutation,
   useLinkUnlinkedDatastoreMutation,
+  useDatastoreDeletionsQuery,
   useDatastoreTreeQuery,
   useProvisionDatastoreMutation,
   useRegisterDatastoreMutation,
-  useRemoveDatastoreMutation,
   useRenameDatastoreGroupMutation,
-  useRestoreDatastoreMutation,
   useUnlinkedDatastoresQuery,
   type GQLRegisterDatastoreMutationVariables,
 } from "@manta-eu/client";
-import { enableDatastoreRemoval } from "@manta-eu/client/shared/constants";
 import { deriveDatastoreId } from "@manta-eu/client/shared/datastore-id";
 import { parseError } from "@manta-eu/client/shared/error-utils";
 import { namesAGroup, pathSegments } from "@manta-eu/client/shared/team";
@@ -50,6 +49,7 @@ import {
   visibilityForStatusFilter,
   visibleDatastoreRows,
   type DatastoreRow,
+  type DatastoreRowFilter,
   type DatastoreRowVisibility,
   type ProviderFilter,
 } from "./flatten";
@@ -60,13 +60,16 @@ import {
   useDatastoreColumns,
 } from "./hooks/useDatastoreColumns";
 import { useDatastoreTable, type StatusFilter } from "./hooks/useDatastoreTable";
+import { toastDeletionWarning } from "./deletion-warning";
 import { linkProviderOutcome, toastProviderWarning } from "./link-provider";
 import { Banner } from "#components/banner/index";
 import { Button } from "#components/button/index";
 import { collectDatastoreIds } from "#components/datastore-management/tree";
-import { useDatastoreStatusByDatastoreId } from "#components/datastore-management/use-datastore-status";
+import {
+  useDatastoreDeletionsByDatastoreId,
+  useDatastoreStatusByDatastoreId,
+} from "#components/datastore-management/use-datastore-status";
 import { EmptyState } from "#components/empty-state/index";
-import { DeleteConfirmationDialog } from "#components/layouts/DeleteConfirmationDialog";
 import { PageHeader } from "#components/layouts/page/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
 import { ScopeTabs, type ScopeTab } from "#components/scope-tabs/index";
@@ -75,6 +78,7 @@ import { TablePagination } from "#components/table-pagination/index";
 import { Tabs, TabsContent } from "#components/tabs/index";
 import { Tooltip, TooltipContent, TooltipTrigger } from "#components/tooltip/index";
 import { useDatastoreSelection } from "#hooks/useDatastoreSelection";
+import { invalidateQueries } from "#lib/tanstack-query";
 import { useAuthContext } from "#providers/AuthContext";
 import { useMantaClient } from "#providers/index";
 
@@ -113,8 +117,8 @@ export function DatastoresRoute() {
   const indented = !isPresent(sorting);
 
   const [formTarget, setFormTarget] = useState<DatastoreFormTarget | null>(null);
-  const [pendingRemoval, setPendingRemoval] = useState<DatastoreRow | null>(null);
   const [pendingDeletion, setPendingDeletion] = useState<DatastoreRow | null>(null);
+  const [handedOff, setHandedOff] = useState<ReadonlyMap<string, number>>(new Map());
   const [renameTarget, setRenameTarget] = useState<DatastoreRow | null>(null);
   const [linkDialogTarget, setLinkDialogTarget] = useState<string | null>(null);
   const [visibility, setVisibility] = useState<DatastoreRowVisibility>({
@@ -189,6 +193,7 @@ export function DatastoresRoute() {
         toast.success(`Datastore "${name}" is ready`);
       }
       toastProviderWarning(result.provisionDatastore.providerWarning);
+      toastDeletionWarning(result.provisionDatastore.deletionWarning);
     },
     onError: (error) => {
       const info = parseError(error, "Couldn't create the datastore");
@@ -196,18 +201,6 @@ export function DatastoresRoute() {
     },
   });
 
-  const removeMutation = useRemoveDatastoreMutation(mantaClient, {
-    onSuccess: (result) => {
-      invalidateTree();
-      if (result.removeDatastore.success) toast.success("Datastore removed");
-      else toast.error("Couldn't remove the datastore", { description: result.removeDatastore.error ?? undefined });
-    },
-    onError: (error) => {
-      const info = parseError(error, "Couldn't remove the datastore");
-      toast.error(info.message, { description: info.description });
-    },
-  });
-
   const deleteMutation = useDeleteDatastoreMutation(mantaClient, {
     onSuccess: (result, variables) => {
       void refreshDatastores();
@@ -218,7 +211,11 @@ export function DatastoresRoute() {
         return;
       }
 
-      toast.success(`"${variables.confirmName}" was deleted permanently`);
+      setHandedOff((previous) => new Map(previous).set(variables.datastoreId, Date.now()));
+      void invalidateQueries(queryClient, [useDatastoreDeletionsQuery]);
+      toast.success(`"${variables.confirmName}" is being deleted`, {
+        description: "This finishes in the background and can take a few minutes.",
+      });
     },
     onError: (error) => {
       setPendingDeletion(null);
@@ -227,14 +224,22 @@ export function DatastoresRoute() {
     },
   });
 
-  const restoreMutation = useRestoreDatastoreMutation(mantaClient, {
-    onSuccess: (result) => {
-      invalidateTree();
-      if (result.restoreDatastore.success) toast.success("Datastore restored");
-      else toast.error("Couldn't restore the datastore", { description: result.restoreDatastore.error ?? undefined });
+  const continueDeletionMutation = useContinueDatastoreDeletionMutation(mantaClient, {
+    onSuccess: (result, variables) => {
+      void invalidateQueries(queryClient, [useDatastoreDeletionsQuery]);
+      const { success, error } = result.continueDatastoreDeletion;
+      if (!success) {
+        toast.error("Couldn't continue the deletion", { description: error ?? undefined });
+        return;
+      }
+
+      setHandedOff((previous) => new Map(previous).set(variables.datastoreId, Date.now()));
+      toast.success("The deletion is going on", {
+        description: "This finishes in the background and can take a few minutes.",
+      });
     },
     onError: (error) => {
-      const info = parseError(error, "Couldn't restore the datastore");
+      const info = parseError(error, "Couldn't continue the deletion");
       toast.error(info.message, { description: info.description });
     },
   });
@@ -345,12 +350,29 @@ export function DatastoresRoute() {
   );
   const allRows = useMemo(() => [...treeRows, ...unlinkedRows], [treeRows, unlinkedRows]);
   const nestedDatastoreNames = useMemo(() => nestedDatastoreNamesByRowId(treeRows), [treeRows]);
-  const rows = useMemo(() => visibleDatastoreRows(treeRows, visibility), [treeRows, visibility]);
+  const deletableDatastoreIds = useMemo(
+    () =>
+      allRows.flatMap((row) =>
+        isPresent(row.datastoreId) && (row.removed || row.isUnlinked === true) ? [row.datastoreId] : [],
+      ),
+    [allRows],
+  );
+  const deletionByDatastoreId = useDatastoreDeletionsByDatastoreId({
+    datastoreIds: deletableDatastoreIds,
+    enabled: !!isOperator,
+    onFinished: refreshDatastores,
+    handedOff,
+  });
+  const rowFilter = useMemo<DatastoreRowFilter>(
+    () => ({ rows: treeRows, visibility, deleting: new Set(Object.keys(deletionByDatastoreId)) }),
+    [treeRows, visibility, deletionByDatastoreId],
+  );
+  const rows = useMemo(() => visibleDatastoreRows(rowFilter), [rowFilter]);
   const unprovisionedCount = useMemo(
-    () => hiddenRowCount(treeRows, visibility, "showUnprovisioned", rows.length),
-    [treeRows, visibility, rows.length],
+    () => hiddenRowCount(rowFilter, "showUnprovisioned", rows.length),
+    [rowFilter, rows.length],
   );
-  const archivedCount = useMemo(() => hiddenRemovedRowCount(treeRows, visibility), [treeRows, visibility]);
+  const archivedCount = useMemo(() => hiddenRemovedRowCount(rowFilter), [rowFilter]);
   const groupPathsByOrganization = useMemo(() => organizationGroupPaths(treeRows), [treeRows]);
   const removedSubtreeIds = useMemo(() => removedSubtreeRowIds(treeRows), [treeRows]);
   const providerLinkEnabled = linkingQuery.data?.organizationLinking?.linkEnabled;
@@ -446,6 +468,7 @@ export function DatastoresRoute() {
             : `Linked to the existing datastore "${result.linkUnlinkedDatastore.datastoreId}"`,
         );
         toastProviderWarning(result.linkUnlinkedDatastore.providerWarning);
+        toastDeletionWarning(result.linkUnlinkedDatastore.deletionWarning);
       } else {
         toast.error("Couldn't link the existing datastore", {
           description: result.linkUnlinkedDatastore.error ?? undefined,
@@ -496,13 +519,6 @@ export function DatastoresRoute() {
     if (isPresent(row.datastoreId)) setLinkDialogTarget(row.datastoreId);
   }, []);
 
-  const onRestore = useCallback(
-    (row: DatastoreRow) => {
-      if (isPresent(row.datastoreId)) restoreMutation.mutate({ datastoreId: row.datastoreId });
-    },
-    [restoreMutation.mutate],
-  );
-
   const onRegister = useCallback(
     (row: DatastoreRow) => {
       if (isPresent(row.datastoreId)) {
@@ -535,6 +551,13 @@ export function DatastoresRoute() {
     [bringOnlineMutation.mutate],
   );
 
+  const onContinueDeletion = useCallback(
+    (row: DatastoreRow) => {
+      if (isPresent(row.datastoreId)) continueDeletionMutation.mutate({ datastoreId: row.datastoreId });
+    },
+    [continueDeletionMutation.mutate],
+  );
+
   const onLinkProvider = useCallback(
     (row: DatastoreRow) => {
       linkProviderMutation.mutate({ organizationId: row.organizationId });
@@ -544,6 +567,7 @@ export function DatastoresRoute() {
 
   const columns = useDatastoreColumns({
     statusByDatastoreId,
+    deletionByDatastoreId,
     currentDatastoreId: datastore?.id ?? realmDatastoreId,
     isSwitching,
     indented,
@@ -555,9 +579,9 @@ export function DatastoresRoute() {
     onLink,
     onProvision: provisionExisting,
     onLinkExisting,
-    onRemove: setPendingRemoval,
     onDelete: setPendingDeletion,
-    onRestore,
+    onContinueDeletion,
+    isContinuingDeletion: continueDeletionMutation.isPending,
     onRename: setRenameTarget,
     onRegister,
     registeringDatastoreIds,
@@ -572,30 +596,19 @@ export function DatastoresRoute() {
   });
 
   const filterToggles: DatastoreFilterToggle[] = [
-    ...(enableDatastoreRemoval
+    ...(showArchived || archivedCount > 0
       ? [
           {
             key: "archived",
-            label: showArchived ? "Hide archived" : "Show archived",
-            description: "Datastores that were removed; nothing is deleted, so they can be restored.",
+            label: showArchived ? "Hide removed" : `Show removed (${archivedCount})`,
+            description:
+              "Out of use: a permanent delete stopped partway, or they were removed before removal was turned off.",
             icon: showArchived ? EyeOff : Archive,
             active: showArchived,
             onToggle: () => toggleVisibility("showArchived"),
           },
         ]
-      : showArchived || archivedCount > 0
-        ? [
-            {
-              key: "archived",
-              label: showArchived ? "Hide removed" : `Show removed (${archivedCount})`,
-              description:
-                "Out of use: a permanent delete stopped partway, or they were removed before removal was turned off.",
-              icon: showArchived ? EyeOff : Archive,
-              active: showArchived,
-              onToggle: () => toggleVisibility("showArchived"),
-            },
-          ]
-        : []),
+      : []),
     ...(showUnprovisioned || unprovisionedCount > 0
       ? [
           {
@@ -899,24 +912,6 @@ export function DatastoresRoute() {
           onCancel={() => setPendingDeletion(null)}
         />
       )}
-
-      {pendingRemoval && isPresent(pendingRemoval.datastoreId) && (
-        <DeleteConfirmationDialog
-          title="Remove datastore"
-          description={`Remove "${pendingRemoval.name}"? Its knowledge graph is taken offline and it stops appearing here. Nothing is deleted - Infisical integrations are untouched - so it can be restored later.`}
-          confirmLabel="Remove"
-          confirmingLabel="Removing..."
-          open={true}
-          onOpenChange={(nextOpen) => !nextOpen && setPendingRemoval(null)}
-          onConfirm={() => {
-            if (isPresent(pendingRemoval.datastoreId)) {
-              removeMutation.mutate({ datastoreId: pendingRemoval.datastoreId });
-            }
-            setPendingRemoval(null);
-          }}
-          onCancel={() => setPendingRemoval(null)}
-        />
-      )}
     </RouteLayout>
   );
 }