Delete multiple datasets at once (#9107)

### Steps to test:
- Prerequisite: duplicate some datasets on disk :)
- Go to dashboard
- Select multiple datasets and delete them 
- check that dashboard updates automatically (without reloading)
- check that this is only possible when datasets are editable (e.g. when
current user is an admin)

### TODOs:
- [x] ds from multiple folders -> see code rabbit below

### Issues:
- fixes #8817 

------
(Please delete unneeded items, merge only when none are left open)
- [x] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [ ] Added migration guide entry if applicable (edit the same file as
for the changelog)
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [x] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

---------

Co-authored-by: Florian M <[email protected]>

Author: knollengewaechs

app/controllers/DatasetController.scala

@@ -592,7 +592,6 @@ class DatasetController @Inject()(userService: UserService,
             dataset <- datasetDAO.findOne(datasetId) ?~> notFoundMessage(datasetId.toString) ~> NOT_FOUND
             _ <- Fox.fromBool(conf.Features.allowDeleteDatasets) ?~> "dataset.delete.disabled"
             _ <- Fox.assertTrue(datasetService.isEditableBy(dataset, Some(request.identity))) ?~> "notAllowed" ~> FORBIDDEN
-            _ <- Fox.fromBool(request.identity.isAdminOf(dataset._organization)) ?~> "delete.mustBeOrganizationAdmin" ~> FORBIDDEN
             before = Instant.now
             _ = logger.info(
               s"Deleting dataset $datasetId (isVirtual=${dataset.isVirtual}) as requested by user ${request.identity._id}...")

docs/users/access_rights.md

@@ -31,6 +31,8 @@ For more information regarding (public) dataset sharing and access rights (espec
 | Access datasets of other teams                      	| Yes   	| Yes             	| No           	| No          	|
 | Edit datasets of own teams                       	| Yes   	| Yes             	| Yes          	| No          	|
 | Edit datasets of other teams                     	| Yes   	| Yes             	| No           	| No          	|
+| Delete datasets of own teams                       	| Yes   	| Yes             	| Yes          	| No          	|
+| Delete datasets of other teams                     	| Yes   	| Yes             	| No           	| No          	|
 | Access all users of own teams                       	| Yes   	| Yes             	| Yes          	| Yes         	|
 | Access all users of other teams                     	| Yes   	| Yes             	| Yes          	| No          	|
 | Assign/remove team membership to own teams       	| Yes   	| No              	| Yes          	| No          	|

frontend/javascripts/dashboard/dataset/dataset_collection_context.tsx

@@ -1,4 +1,4 @@
-import { useIsMutating } from "@tanstack/react-query";
+import { useIsMutating, useQueryClient } from "@tanstack/react-query";
 import { type DatasetUpdater, getDatastores, triggerDatasetCheck } from "admin/rest_api";
 import { useEffectOnlyOnce, usePrevious, useWkSelector } from "libs/react_hooks";
 import UserLocalStorage from "libs/user_local_storage";
@@ -81,7 +81,10 @@ export default function DatasetCollectionContextProvider({
   const [activeFolderId, setActiveFolderId] = useState<string | null>(
     UserLocalStorage.getItem(ACTIVE_FOLDER_ID_STORAGE_KEY) || null,
   );
-  const mostRecentlyUsedActiveFolderId = usePrevious(activeFolderId, true);
+  const [mostRecentlyUsedActiveFolderId, clearMostRecentlyUsedActiveFolderId] = usePrevious(
+    activeFolderId,
+    true,
+  );
   const [isChecking, setIsChecking] = useState(false);
   const isMutating = useIsMutating() > 0;
   const { data: folder, isError: didFolderLoadingError } = useFolderQuery(activeFolderId);
@@ -95,6 +98,7 @@ export default function DatasetCollectionContextProvider({
     setGlobalSearchQueryInner(value ? value : null);
   }, []);
   const [searchRecursively, setSearchRecursively] = useState<boolean>(true);
+  const queryClient = useQueryClient();
 
   // Keep url GET parameters in sync with search and active folder
   useManagedUrlParams(
@@ -117,8 +121,18 @@ export default function DatasetCollectionContextProvider({
 
     if (didFolderLoadingError) {
       setActiveFolderId(null);
+      clearMostRecentlyUsedActiveFolderId();
+      if (!folderHierarchyQuery.isFetching) {
+        queryClient.invalidateQueries({ queryKey: ["folders"] });
+      }
     }
-  }, [folder, activeFolderId, didFolderLoadingError]);
+  }, [
+    folder,
+    activeFolderId,
+    didFolderLoadingError,
+    clearMostRecentlyUsedActiveFolderId,
+    queryClient,
+  ]);
 
   const folderHierarchyQuery = useFolderHierarchyQuery();
   const datasetsInFolderQuery = useDatasetsInFolderQuery(

frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx

@@ -61,7 +61,10 @@ const DatasetSettingsDeleteTab = () => {
                   Note that annotations for the dataset stay downloadable and the name stays
                   reserved.
                 </p>
-                <p>Only admins are allowed to delete datasets.</p>
+                <p>
+                  Admins, dataset managers and team managers of the datasets' team(s) are allowed to
+                  delete datasets.
+                </p>
                 <Button danger loading={isDeleting} onClick={handleDeleteButtonClicked}>
                   Delete Dataset on Disk
                 </Button>

frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx

@@ -10,9 +10,7 @@ import {
 import { Alert, Breadcrumb, Button, Form, Layout, Menu, Tooltip } from "antd";
 import type { ItemType } from "antd/es/menu/interface";
 import { useDatasetSettingsContext } from "dashboard/dataset/dataset_settings_context";
-
 import features from "features";
-import { useWkSelector } from "libs/react_hooks";
 import messages from "messages";
 import type React from "react";
 import { useCallback } from "react";
@@ -44,7 +42,6 @@ const DatasetSettingsView: React.FC = () => {
     getFormValidationSummary,
     hasFormErrors,
   } = useDatasetSettingsContext();
-  const isUserAdmin = useWkSelector((state) => state.activeUser?.isAdmin || false);
   const location = useLocation();
   const navigate = useNavigate();
   const selectedKey =
@@ -154,7 +151,7 @@ const DatasetSettingsView: React.FC = () => {
           icon: formErrors.defaultConfig ? errorIcon : <SettingOutlined />,
           label: "View Configuration",
         },
-        isUserAdmin && features().allowDeleteDatasets
+        features().allowDeleteDatasets
           ? {
               key: "delete",
               icon: <DeleteOutlined />,

frontend/javascripts/dashboard/folders/details_sidebar.tsx

@@ -1,20 +1,22 @@
 import {
+  DeleteOutlined,
   EditOutlined,
   FileOutlined,
   FolderOpenOutlined,
   LoadingOutlined,
   SearchOutlined,
 } from "@ant-design/icons";
-import { useQuery } from "@tanstack/react-query";
-import { getOrganization } from "admin/rest_api";
-import { Result, Spin, Tag, Tooltip } from "antd";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { deleteDatasetOnDisk, getOrganization } from "admin/rest_api";
+import { Button, Modal, Progress, Result, Space, Spin, Tag, Tooltip, Typography } from "antd";
 import FormattedId from "components/formatted_id";
 import { formatCountToDataAmountUnit, stringToColor } from "libs/format_utils";
 import Markdown from "libs/markdown_adapter";
 import { useWkSelector } from "libs/react_hooks";
+import Toast from "libs/toast";
 import { pluralize } from "libs/utils";
 import _ from "lodash";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import type { APIDatasetCompact, Folder } from "types/api_types";
 import {
   DatasetExtentRow,
@@ -214,10 +216,127 @@ function DatasetsDetails({
   selectedDatasets: APIDatasetCompact[];
   datasetCount: number;
 }) {
+  const queryClient = useQueryClient();
+  const [progressInPercent, setProgressInPercent] = useState(0);
+  const [showConfirmDeleteModal, setShowConfirmDeleteModal] = useState(false);
+  const deletableDatasets = selectedDatasets.filter((ds) => ds.isEditable);
+  const numberOfUndeletableDatasets = selectedDatasets.length - deletableDatasets.length;
+
+  const updateAndInvalidateQueries = (deletedIds: string[]) => {
+    const uniqueFolderIds = _.uniq(deletableDatasets.map((ds) => ds.folderId));
+    uniqueFolderIds.forEach((folderId) => {
+      queryClient.setQueryData(
+        ["datasetsByFolder", folderId],
+        (oldItems: APIDatasetCompact[] | undefined) => {
+          if (oldItems == null) {
+            return oldItems;
+          }
+          return oldItems.filter((item) => !deletedIds.includes(item.id));
+        },
+      );
+    });
+    queryClient.invalidateQueries({ queryKey: ["dataset", "search"] });
+  };
+
+  const deleteDatasetsMutation = useMutation({
+    mutationFn: async (datasets: APIDatasetCompact[]) => {
+      const deletedIds: string[] = [];
+      for (let i = 0; i < datasets.length; i++) {
+        const dataset = datasets[i];
+        try {
+          await deleteDatasetOnDisk(dataset.id);
+          deletedIds.push(dataset.id);
+          setProgressInPercent(Math.round(((i + 1) / datasets.length) * 100));
+        } catch (_e) {
+          Toast.error(`Failed to delete dataset ${dataset.name}.`);
+        }
+      }
+      return deletedIds;
+    },
+    onSuccess: (deletedIds) => {
+      updateAndInvalidateQueries(deletedIds);
+      setShowConfirmDeleteModal(false);
+      setProgressInPercent(0);
+
+      if (deletedIds.length > 0) {
+        Toast.success(
+          `Successfully deleted ${deletedIds.length} ${pluralize("dataset", deletedIds.length)}.`,
+        );
+      }
+    },
+  });
+
+  const deleteDatasets = () => {
+    deleteDatasetsMutation.mutate(deletableDatasets);
+  };
+
+  const okayButton = (
+    <Button type="primary" danger onClick={deleteDatasets}>
+      Delete
+    </Button>
+  );
+
+  const onCancel = () => {
+    if (!deleteDatasetsMutation.isPending) {
+      setShowConfirmDeleteModal(false);
+    }
+  };
+
+  const cancelButton = <Button onClick={onCancel}>Cancel</Button>;
+
+  // TODO delete once soft-delete is implemented: https://github.com/scalableminds/webknossos/issues/9061
+  const cantBeUndoneMessage = (
+    <Typography.Text type="warning" strong>
+      This action cannot be undone.
+    </Typography.Text>
+  );
+
+  const deletableDatasetString = `${deletableDatasets.length} ${pluralize("dataset", deletableDatasets.length)}`;
+
+  const confirmModal = (
+    <Modal
+      open={showConfirmDeleteModal}
+      title="Delete Datasets"
+      footer={deleteDatasetsMutation.isPending ? null : [cancelButton, okayButton]}
+      onCancel={onCancel}
+    >
+      {deleteDatasetsMutation.isPending ? (
+        <Progress percent={progressInPercent} />
+      ) : (
+        <>
+          Are you sure you want to delete the following {deletableDatasetString}?
+          <ul>
+            {deletableDatasets.map((dataset) => (
+              <li key={dataset.id}>{dataset.name}</li>
+            ))}
+          </ul>
+          {numberOfUndeletableDatasets > 0 && (
+            <div>
+              The remaining {numberOfUndeletableDatasets} selected{" "}
+              {pluralize("dataset", numberOfUndeletableDatasets)} cannot be deleted, e.g. because
+              you do not have sufficient permissions.
+            </div>
+          )}
+          {cantBeUndoneMessage}
+        </>
+      )}
+    </Modal>
+  );
+
   return (
     <div style={{ textAlign: "center" }}>
-      Selected {selectedDatasets.length} of {datasetCount} datasets. Move them to another folder
-      with drag and drop.
+      <Space direction="vertical" size="large" style={{ display: "flex" }}>
+        <div>
+          Selected {selectedDatasets.length} of {datasetCount} datasets. Move them to another folder
+          with drag and drop.
+        </div>
+        {deletableDatasets.length > 0 && (
+          <Button onClick={() => setShowConfirmDeleteModal(true)} icon={<DeleteOutlined />}>
+            Delete {deletableDatasetString}
+          </Button>
+        )}
+      </Space>
+      {confirmModal}
     </div>
   );
 }

frontend/javascripts/libs/react_hooks.ts

@@ -10,9 +10,12 @@ import { KEYBOARD_BUTTON_LOOP_INTERVAL } from "./input";
  * Hook that returns the previous value of a state or prop.
  * @param value - The current value to track
  * @param ignoreNullAndUndefined - If true, null/undefined values won't update the previous value
- * @returns The previous value, or null if no previous value exists
+ * @returns The previous value, or null if no previous value exists; and a function to clear the stored previous value
  */
-export function usePrevious<T>(value: T, ignoreNullAndUndefined: boolean = false): T | null {
+export function usePrevious<T>(
+  value: T,
+  ignoreNullAndUndefined: boolean = false,
+): [T | null, () => void] {
   // Adapted from: https://usehooks.com/usePrevious/
 
   // The ref object is a generic container whose current property is mutable ...
@@ -24,9 +27,13 @@ export function usePrevious<T>(value: T, ignoreNullAndUndefined: boolean = false
       ref.current = value;
     }
   }, [value, ignoreNullAndUndefined]);
+
+  const clearFn = useCallback(() => {
+    ref.current = null;
+  }, []);
   // Only re-run if value changes
   // Return previous value (happens before update in useEffect above)
-  return ref.current;
+  return [ref.current, clearFn];
 }
 
 const extractModifierState = <K extends keyof WindowEventMap>(event: WindowEventMap[K]) => ({

frontend/javascripts/libs/toast.tsx

@@ -74,7 +74,7 @@ const Toast = {
         this.error(
           singleMessage.error,
           {
-            sticky: true,
+            timeout: 13000,
             key: singleMessage.key,
           },
           errorChainString,

frontend/javascripts/viewer/view/action-bar/tools/volume_specific_ui.tsx

@@ -112,8 +112,8 @@ export function OverwriteModeSwitch({
   // Only CTRL should modify the overwrite mode. CTRL + Shift can be used to switch to the
   // erase tool, which should not affect the default overwrite mode.
   const overwriteMode = useWkSelector((state) => state.userConfiguration.overwriteMode);
-  const previousIsControlOrMetaPressed = usePrevious(isControlOrMetaPressed);
-  const previousIsShiftPressed = usePrevious(isShiftPressed);
+  const [previousIsControlOrMetaPressed] = usePrevious(isControlOrMetaPressed);
+  const [previousIsShiftPressed] = usePrevious(isShiftPressed);
   // biome-ignore lint/correctness/useExhaustiveDependencies: overwriteMode does not need to be a dependency.
   useEffect(() => {
     // There are four possible states:

unreleased_changes/9107.md

@@ -0,0 +1,2 @@
+### Added
+- Multiple datasets can be deleted at once. This can be done by selecting the datasets in the dashboard and clicking "Delete datasets" in the sidebar.