4699 - dataset api - p3 (#4745)

Author: camiloHimura

ui/src/features/dataset/gallery/delete-media-item/alert-dialog-content.component.tsx

@@ -6,11 +6,11 @@ import { AlertDialog, Flex, Text } from '@geti/ui';
 import { useEventListener } from '../../../../hooks/event-listener/event-listener.hook';
 
 type AlertDialogContentProps = {
-    itemId: string;
+    itemsIds: string[];
     onPrimaryAction: () => void;
 };
 
-export const AlertDialogContent = ({ itemId, onPrimaryAction }: AlertDialogContentProps) => {
+export const AlertDialogContent = ({ itemsIds, onPrimaryAction }: AlertDialogContentProps) => {
     useEventListener('keydown', (event) => {
         if (event.key === 'Enter') {
             event.preventDefault();
@@ -30,7 +30,9 @@ export const AlertDialogContent = ({ itemId, onPrimaryAction }: AlertDialogConte
             <Text>Are you sure you want to delete the next items?</Text>
 
             <Flex direction={'column'} marginTop={'size-100'}>
-                <Text> - {itemId}</Text>
+                {itemsIds.map((itemId) => (
+                    <Text key={itemId}>- {itemId}</Text>
+                ))}
             </Flex>
         </AlertDialog>
     );

ui/src/features/dataset/gallery/delete-media-item/delete-media-item.component.test.tsx

@@ -18,6 +18,8 @@ vi.mock('react-router', () => ({
 describe('DeleteMediaItem', () => {
     it('deletes a media item and shows a success toast', async () => {
         const itemId = '123';
+        const mockedOnDeleted = vitest.fn();
+
         server.use(
             http.delete('/api/projects/{project_id}/dataset/items/{dataset_item_id}', () => {
                 return HttpResponse.json(null, { status: 204 });
@@ -26,7 +28,7 @@ describe('DeleteMediaItem', () => {
 
         render(
             <TestProviders>
-                <DeleteMediaItem itemId={itemId} />
+                <DeleteMediaItem itemsIds={[itemId]} onDeleted={mockedOnDeleted} />
             </TestProviders>
         );
 
@@ -36,23 +38,30 @@ describe('DeleteMediaItem', () => {
         userEvent.click(screen.getByRole('button', { name: /confirm/i }));
         await waitForElementToBeRemoved(() => screen.queryByRole('button', { name: /confirm/i }));
 
-        expect(screen.getByText(`Item "${itemId}" was deleted successfully`)).toBeVisible();
+        expect(screen.getByText(`1 item(s) deleted successfully`)).toBeVisible();
+        expect(mockedOnDeleted).toHaveBeenCalledWith([itemId]);
     });
 
     it('shows an error toast when deleting a media item fails', async () => {
-        const itemId = '123';
+        const itemToFail = '321';
+        const itemToDelete = '123';
         const errorMessage = 'test error message';
+        const mockedOnDeleted = vitest.fn();
+
         server.use(
-            http.delete('/api/projects/{project_id}/dataset/items/{dataset_item_id}', () => {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-expect-error
-                return HttpResponse.json({ detail: errorMessage }, { status: 500 });
+            http.delete('/api/projects/{project_id}/dataset/items/{dataset_item_id}', ({ params }) => {
+                const { dataset_item_id } = params;
+                return dataset_item_id === itemToDelete
+                    ? HttpResponse.json(null, { status: 204 })
+                    : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-expect-error
+                      HttpResponse.json({ detail: errorMessage }, { status: 500 });
             })
         );
 
         render(
             <TestProviders>
-                <DeleteMediaItem itemId={itemId} />
+                <DeleteMediaItem itemsIds={[itemToFail, itemToDelete]} onDeleted={mockedOnDeleted} />
             </TestProviders>
         );
 
@@ -62,6 +71,8 @@ describe('DeleteMediaItem', () => {
         userEvent.click(screen.getByRole('button', { name: /confirm/i }));
         await waitForElementToBeRemoved(() => screen.queryByRole('button', { name: /confirm/i }));
 
-        expect(screen.getByText(`Failed to delete item: ${errorMessage}`)).toBeVisible();
+        expect(screen.getByText(`1 item(s) deleted successfully`)).toBeVisible();
+        expect(screen.getByText(`Failed to delete, ${errorMessage}`)).toBeVisible();
+        expect(mockedOnDeleted).toHaveBeenCalledWith([itemToDelete]);
     });
 });

ui/src/features/dataset/gallery/delete-media-item/delete-media-item.component.tsx

@@ -1,11 +1,10 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { useRef } from 'react';
-
-import { ActionButton, DialogContainer, removeToast, toast } from '@geti/ui';
+import { ActionButton, DialogContainer, toast } from '@geti/ui';
 import { Delete } from '@geti/ui/icons';
 import { useOverlayTriggerState } from '@react-stately/overlays';
+import { isFunction } from 'lodash-es';
 
 import { $api } from '../../../../api/client';
 import { useProjectIdentifier } from '../../../../hooks/use-project-identifier.hook';
@@ -14,36 +13,49 @@ import { AlertDialogContent } from './alert-dialog-content.component';
 import classes from './delete-media-item.module.scss';
 
 type DeleteMediaItemProps = {
-    itemId: string;
+    itemsIds: string[];
+    onDeleted?: (deletedIds: string[]) => void;
 };
 
-export const DeleteMediaItem = ({ itemId }: DeleteMediaItemProps) => {
+const isFulfilled = (response: PromiseSettledResult<{ itemId: string }>) => response.status === 'fulfilled';
+
+export const DeleteMediaItem = ({ itemsIds = [], onDeleted }: DeleteMediaItemProps) => {
     const project_id = useProjectIdentifier();
-    const processingToastId = useRef<null | string | number>(null);
     const alertDialogState = useOverlayTriggerState({});
 
     const removeMutation = $api.useMutation('delete', `/api/projects/{project_id}/dataset/items/{dataset_item_id}`, {
-        onSuccess: () => {
-            toast({ type: 'success', message: `Item "${itemId}" was deleted successfully`, duration: 3000 });
-        },
-        onError: (error) => {
-            toast({ type: 'error', message: `Failed to delete item: ${error?.detail}` });
-        },
-        onSettled: () => {
-            if (processingToastId.current) {
-                removeToast(processingToastId.current);
-            }
+        onError: (error, { params: { path } }) => {
+            const { dataset_item_id: itemId } = path;
+
+            toast({
+                id: itemId,
+                type: 'error',
+                message: `Failed to delete, ${error?.detail}`,
+            });
         },
     });
 
-    const handleRemoveItems = () => {
+    const handleRemoveItems = async () => {
         alertDialogState.close();
 
-        removeMutation.mutate({ params: { path: { project_id, dataset_item_id: itemId } } });
+        toast({ id: 'deleting-notification', type: 'info', message: `Deleting items...` });
+
+        const deleteItemPromises = itemsIds.map(async (dataset_item_id) => {
+            await removeMutation.mutateAsync({ params: { path: { project_id, dataset_item_id } } });
+
+            return { itemId: dataset_item_id };
+        });
+
+        const responses = await Promise.allSettled(deleteItemPromises);
+        const deletedIds = responses.filter(isFulfilled).map(({ value }) => value.itemId);
+
+        isFunction(onDeleted) && onDeleted(deletedIds);
 
-        processingToastId.current = toast({
-            type: 'info',
-            message: `Deleting ${itemId} item(s)...`,
+        toast({
+            id: 'deleting-notification',
+            type: 'success',
+            message: `${deletedIds.length} item(s) deleted successfully`,
+            duration: 3000,
         });
     };
 
@@ -60,7 +72,9 @@ export const DeleteMediaItem = ({ itemId }: DeleteMediaItemProps) => {
             </ActionButton>
 
             <DialogContainer onDismiss={alertDialogState.close}>
-                {alertDialogState.isOpen && <AlertDialogContent itemId={itemId} onPrimaryAction={handleRemoveItems} />}
+                {alertDialogState.isOpen && (
+                    <AlertDialogContent itemsIds={itemsIds} onPrimaryAction={handleRemoveItems} />
+                )}
             </DialogContainer>
         </>
     );

ui/src/features/dataset/gallery/gallery.component.tsx

@@ -46,7 +46,7 @@ export const Gallery = ({ items, hasNextPage, isFetchingNextPage, fetchNextPage
     const project_id = useProjectIdentifier();
 
     const [selectedMediaItem, setSelectedMediaItem] = useState<null | DatasetItem>(null);
-    const { selectedKeys, mediaState, setSelectedKeys } = useSelectedData();
+    const { selectedKeys, mediaState, setSelectedKeys, toggleSelectedKeys } = useSelectedData();
 
     const isSetSelectedKeys = selectedKeys instanceof Set;
 
@@ -94,7 +94,9 @@ export const Gallery = ({ items, hasNextPage, isFetchingNextPage, fetchNextPage
                                         isChecked={isSetSelectedKeys && selectedKeys.has(String(item.id))}
                                     />
                                 )}
-                                topRightElement={() => <DeleteMediaItem itemId={String(item.id)} />}
+                                topRightElement={() => (
+                                    <DeleteMediaItem itemsIds={[String(item.id)]} onDeleted={toggleSelectedKeys} />
+                                )}
                                 bottomRightElement={() => (
                                     <AnnotationStateIcon state={mediaState.get(String(item.id))} />
                                 )}

ui/src/features/dataset/toolbar/toolbar.component.tsx

@@ -6,14 +6,15 @@ import { Button, Divider, Flex, Heading, Text } from '@geti/ui';
 import { useSelectedData } from '../../../routes/dataset/provider';
 import { DatasetItem } from '../../annotator/types';
 import { CheckboxInput } from '../checkbox-input';
+import { DeleteMediaItem } from '../gallery/delete-media-item/delete-media-item.component';
 import { toggleMultipleSelection, updateSelectedKeysTo } from './util';
 
 type ToolbarProps = {
     items: DatasetItem[];
 };
 
 export const Toolbar = ({ items }: ToolbarProps) => {
-    const { selectedKeys, setSelectedKeys, setMediaState } = useSelectedData();
+    const { selectedKeys, setSelectedKeys, setMediaState, toggleSelectedKeys } = useSelectedData();
     const totalSelectedElements = selectedKeys instanceof Set ? selectedKeys.size : 0;
     const hasSelectedElements = totalSelectedElements > 0;
 
@@ -57,6 +58,11 @@ export const Toolbar = ({ items }: ToolbarProps) => {
 
                     {hasSelectedElements && (
                         <>
+                            <DeleteMediaItem
+                                itemsIds={Array.from(selectedKeys) as string[]}
+                                onDeleted={toggleSelectedKeys}
+                            />
+
                             <Button variant={'accent'} onPress={handleAccept}>
                                 Accept
                             </Button>

ui/src/routes/dataset/provider.test.tsx

@@ -0,0 +1,37 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+
+import { SelectedDataProvider, useSelectedData } from './provider';
+
+describe('SelectedDataProvider', () => {
+    it('toggles a selected key and displays it', async () => {
+        const testKey = 'test-key';
+        const App = () => {
+            const { selectedKeys, toggleSelectedKeys } = useSelectedData();
+
+            return (
+                <div>
+                    <p>{selectedKeys === 'all' ? 'all' : [...selectedKeys.values()].join(', ')}</p>
+                    <button onClick={() => toggleSelectedKeys([testKey])}>toggle key</button>
+                </div>
+            );
+        };
+
+        render(
+            <SelectedDataProvider>
+                <App />
+            </SelectedDataProvider>
+        );
+
+        expect(screen.queryByText(testKey)).not.toBeInTheDocument();
+
+        screen.getByRole('button', { name: /toggle key/i }).click();
+        expect(await screen.findByText(testKey)).toBeVisible();
+
+        screen.getByRole('button', { name: /toggle key/i }).click();
+        await waitForElementToBeRemoved(() => screen.queryByText(testKey));
+        expect(screen.queryByText(testKey)).not.toBeInTheDocument();
+    });
+});

ui/src/routes/dataset/provider.tsx

@@ -14,6 +14,7 @@ type SelectedDataState = null | {
 
     mediaState: MediaState;
     setMediaState: Dispatch<SetStateAction<MediaState>>;
+    toggleSelectedKeys: (key: string[]) => void;
 };
 
 export const SelectedDataContext = createContext<SelectedDataState>(null);
@@ -22,8 +23,22 @@ export const SelectedDataProvider = ({ children }: { children: ReactNode }) => {
     const [mediaState, setMediaState] = useState<MediaState>(new Map());
     const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set());
 
+    const toggleSelectedKeys = (keys: string[]) => {
+        setSelectedKeys((prevSelectedKeys) => {
+            const updatedSelectedKeys = new Set(prevSelectedKeys);
+
+            keys.forEach((key) => {
+                updatedSelectedKeys.has(key) ? updatedSelectedKeys.delete(key) : updatedSelectedKeys.add(key);
+            });
+
+            return updatedSelectedKeys;
+        });
+    };
+
     return (
-        <SelectedDataContext.Provider value={{ selectedKeys, setSelectedKeys, mediaState, setMediaState }}>
+        <SelectedDataContext.Provider
+            value={{ selectedKeys, setSelectedKeys, mediaState, setMediaState, toggleSelectedKeys }}
+        >
             {children}
         </SelectedDataContext.Provider>
     );