@scality/data-browser-library 1.1.5 → 1.1.6

package/dist/components/__tests__/UploadButton.test.js

@@ -3,11 +3,31 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import user_event from "@testing-library/user-event";
 import { createTestWrapper } from "../../test/testUtils.js";
 import { UploadButton } from "../objects/UploadButton.js";
+const mockMutateAsync = jest.fn();
+jest.mock('../../hooks', ()=>({
+        ...jest.requireActual('../../hooks'),
+        useUploadObjects: ()=>({
+                mutate: jest.fn(),
+                mutateAsync: mockMutateAsync,
+                reset: jest.fn(),
+                isPending: false,
+                isIdle: true,
+                isError: false,
+                isSuccess: false,
+                status: 'idle',
+                data: void 0,
+                error: null
+            })
+    }));
 describe('UploadButton - Core Functionality', ()=>{
     const defaultProps = {
         bucket: 'test-bucket',
         prefix: 'test-prefix'
     };
+    beforeEach(()=>{
+        mockMutateAsync.mockClear();
+        mockMutateAsync.mockResolvedValue({});
+    });
     const renderUploadButton = (props = {})=>{
         const Wrapper = createTestWrapper();
         return render(/*#__PURE__*/ jsx(Wrapper, {
@@ -141,4 +161,64 @@ describe('UploadButton - Core Functionality', ()=>{
             expect(screen.getByText('Drag and drop files and folders here')).toBeInTheDocument();
         });
     });
+    const addFileAndUpload = async ()=>{
+        const fileInput = screen.getByRole('presentation').querySelector('input[type="file"]');
+        const testFile = new File([
+            'test content'
+        ], 'test.txt', {
+            type: 'text/plain'
+        });
+        await user_event.upload(fileInput, testFile);
+        await waitFor(()=>expect(screen.getByText('test.txt')).toBeInTheDocument());
+        const uploadButtons = screen.getAllByRole('button', {
+            name: 'Upload'
+        });
+        const modalUploadButton = uploadButtons.find((button)=>!button.querySelector('svg'));
+        fireEvent.click(modalUploadButton);
+    };
+    it('constructs correct key when prefix has trailing slash', async ()=>{
+        renderUploadButton({
+            prefix: 'documents/'
+        });
+        fireEvent.click(screen.getByRole('button', {
+            name: /upload/i
+        }));
+        await waitFor(()=>expect(screen.getByText('Upload Files')).toBeInTheDocument());
+        await addFileAndUpload();
+        await waitFor(()=>{
+            expect(mockMutateAsync).toHaveBeenCalledWith(expect.objectContaining({
+                Key: 'documents/test.txt'
+            }));
+        });
+    });
+    it('constructs correct key when prefix has no trailing slash', async ()=>{
+        renderUploadButton({
+            prefix: 'documents'
+        });
+        fireEvent.click(screen.getByRole('button', {
+            name: /upload/i
+        }));
+        await waitFor(()=>expect(screen.getByText('Upload Files')).toBeInTheDocument());
+        await addFileAndUpload();
+        await waitFor(()=>{
+            expect(mockMutateAsync).toHaveBeenCalledWith(expect.objectContaining({
+                Key: 'documents/test.txt'
+            }));
+        });
+    });
+    it('constructs correct key when prefix is empty', async ()=>{
+        renderUploadButton({
+            prefix: ''
+        });
+        fireEvent.click(screen.getByRole('button', {
+            name: /upload/i
+        }));
+        await waitFor(()=>expect(screen.getByText('Upload Files')).toBeInTheDocument());
+        await addFileAndUpload();
+        await waitFor(()=>{
+            expect(mockMutateAsync).toHaveBeenCalledWith(expect.objectContaining({
+                Key: 'test.txt'
+            }));
+        });
+    });
 });

package/dist/components/objects/CreateFolderButton.js

@@ -21,7 +21,8 @@ const CreateFolderButton = ({ bucket, prefix = '', label = 'Folder', variant = '
     }, []);
     const handleSave = useCallback(()=>{
         if (!folderName.trim()) return;
-        const folderKey = prefix ? `${prefix}/${folderName}/` : `${folderName}/`;
+        const normalizedPrefix = prefix.endsWith('/') ? prefix.slice(0, -1) : prefix;
+        const folderKey = normalizedPrefix ? `${normalizedPrefix}/${folderName}/` : `${folderName}/`;
         createFolderMutation.mutate({
             Bucket: bucket,
             Key: folderKey,

package/dist/components/objects/DeleteObjectButton.js

@@ -1,9 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Banner, Icon, Modal, PrettyBytes, Stack, Text, Wrap, spacing, useToast } from "@scality/core-ui";
+import { Banner, Checkbox, Icon, Modal, PrettyBytes, Stack, Text, Wrap, spacing, useToast } from "@scality/core-ui";
 import { Box, Button } from "@scality/core-ui/dist/next";
 import { useCallback, useEffect, useState } from "react";
 import { useDeleteObjects, useGetBucketVersioning } from "../../hooks/index.js";
+import { useDeleteFolder } from "../../hooks/useDeleteFolder.js";
 import { getDeletionMessages } from "../../utils/deletion/index.js";
+import { useInvalidateQueries } from "../providers/DataBrowserProvider.js";
 import { DeleteObjectModalContent } from "../ui/DeleteObjectModalContent.js";
 const Title = ({ objects, isCurrentSelectionPermanentlyDeleted })=>{
     const foldersSize = objects.filter((object)=>'folder' === object.type).length;
@@ -43,14 +45,18 @@ const Title = ({ objects, isCurrentSelectionPermanentlyDeleted })=>{
 const DeleteObjectButton = ({ objects, bucketName, onDeleteSuccess })=>{
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [selectedObjects, setSelectedObjects] = useState(objects);
+    const [isDeleting, setIsDeleting] = useState(false);
     const { data: versioningData } = useGetBucketVersioning({
         Bucket: bucketName
     });
-    const { mutate: deleteObjects, status: deleteObjectsStatus } = useDeleteObjects();
+    const { mutateAsync: deleteObjects } = useDeleteObjects();
+    const { mutateAsync: deleteFolder } = useDeleteFolder();
+    const invalidateQueries = useInvalidateQueries();
     const { showToast } = useToast();
     const isVersioningEnabled = versioningData?.Status === 'Enabled';
     const isCurrentSelectionPermanentlyDeleted = !isVersioningEnabled || selectedObjects.some((object)=>!!object.VersionId);
-    const { info: notificationText } = getDeletionMessages({
+    const [isCheckboxToggled, setIsCheckboxToggled] = useState(false);
+    const { info: notificationText, checkboxRequired } = getDeletionMessages({
         numberOfObjects: selectedObjects.length,
         selectedObjectsAreSpecificVersions: isCurrentSelectionPermanentlyDeleted,
         isBucketVersioned: isVersioningEnabled
@@ -61,51 +67,82 @@ const DeleteObjectButton = ({ objects, bucketName, onDeleteSuccess })=>{
     const cancel = useCallback(()=>{
         setIsModalOpen(false);
         setSelectedObjects(objects);
+        setIsCheckboxToggled(false);
     }, [
         objects
     ]);
-    const deleteSelectedFiles = useCallback(()=>{
-        const objectsToDelete = selectedObjects.filter((object)=>'folder' !== object.type && object.Key).map((object)=>{
-            const deleteItem = {
-                Key: object.Key
-            };
-            if (object.VersionId && 'string' == typeof object.VersionId) deleteItem.VersionId = object.VersionId;
-            return deleteItem;
-        });
-        const foldersToDelete = selectedObjects.filter((object)=>'folder' === object.type && object.Key).map((object)=>({
-                Key: object.Key
-            }));
-        deleteObjects({
-            Bucket: bucketName,
-            Delete: {
-                Objects: [
-                    ...objectsToDelete,
-                    ...foldersToDelete
-                ]
-            }
-        }, {
-            onSuccess: ()=>{
-                showToast({
-                    open: true,
-                    message: 'Objects deleted successfully',
-                    status: 'success'
-                });
-                setIsModalOpen(false);
-                onDeleteSuccess?.();
-            },
-            onError: (error)=>{
-                showToast({
-                    open: true,
-                    message: error instanceof Error ? error.message : 'Objects deleted failed',
-                    status: 'error'
+    const deleteSelectedFiles = useCallback(async ()=>{
+        setIsDeleting(true);
+        try {
+            const folderItems = selectedObjects.filter((object)=>'folder' === object.type && object.Key);
+            const nonFolderItems = selectedObjects.filter((object)=>'folder' !== object.type && object.Key);
+            if (nonFolderItems.length > 0) {
+                const result = await deleteObjects({
+                    Bucket: bucketName,
+                    Delete: {
+                        Objects: nonFolderItems.map((object)=>{
+                            const deleteItem = {
+                                Key: object.Key
+                            };
+                            if (object.VersionId && 'string' == typeof object.VersionId) deleteItem.VersionId = object.VersionId;
+                            return deleteItem;
+                        })
+                    }
                 });
-                setIsModalOpen(false);
+                if (result.Errors && result.Errors.length > 0) {
+                    const firstError = result.Errors[0];
+                    throw new Error(firstError.Message ?? 'Failed to delete objects');
+                }
             }
-        });
+            for (const folder of folderItems)await deleteFolder({
+                Bucket: bucketName,
+                FolderKey: folder.Key
+            });
+            const hasFolders = folderItems.length > 0;
+            const hasObjects = nonFolderItems.length > 0;
+            const message = hasFolders && hasObjects ? 'Objects and folders deleted successfully' : hasFolders ? 'Folders deleted successfully' : 'Objects deleted successfully';
+            showToast({
+                open: true,
+                message,
+                status: 'success'
+            });
+            onDeleteSuccess?.();
+        } catch (error) {
+            showToast({
+                open: true,
+                message: error instanceof Error ? error.message : 'Failed to delete objects',
+                status: 'error'
+            });
+        } finally{
+            invalidateQueries({
+                queryKey: [
+                    'ListObjects'
+                ]
+            });
+            invalidateQueries({
+                queryKey: [
+                    'ListObjectVersions'
+                ]
+            });
+            invalidateQueries({
+                queryKey: [
+                    'SearchObjects'
+                ]
+            });
+            invalidateQueries({
+                queryKey: [
+                    'SearchObjectsVersions'
+                ]
+            });
+            setIsModalOpen(false);
+            setIsDeleting(false);
+        }
     }, [
         bucketName,
         selectedObjects,
         deleteObjects,
+        deleteFolder,
+        invalidateQueries,
         showToast,
         onDeleteSuccess
     ]);
@@ -142,11 +179,11 @@ const DeleteObjectButton = ({ objects, bucketName, onDeleteSuccess })=>{
                                     label: "Cancel"
                                 }),
                                 /*#__PURE__*/ jsx(Button, {
-                                    isLoading: 'pending' === deleteObjectsStatus,
+                                    isLoading: isDeleting,
                                     id: "object-delete-delete-button",
                                     variant: "danger",
                                     onClick: deleteSelectedFiles,
-                                    disabled: 0 === selectedObjects.length,
+                                    disabled: 0 === selectedObjects.length || checkboxRequired && !isCheckboxToggled,
                                     label: "Delete"
                                 })
                             ]
@@ -164,8 +201,8 @@ const DeleteObjectButton = ({ objects, bucketName, onDeleteSuccess })=>{
                     }),
                     /*#__PURE__*/ jsx(DeleteObjectModalContent, {
                         objects: selectedObjects,
-                        onRemove: (key)=>{
-                            setSelectedObjects(selectedObjects.filter((object)=>object.Key !== key));
+                        onRemove: (item)=>{
+                            setSelectedObjects(selectedObjects.filter((object)=>!(object.Key === item.Key && object.VersionId === item.VersionId)));
                         }
                     }),
                     /*#__PURE__*/ jsxs(Box, {
@@ -185,6 +222,15 @@ const DeleteObjectButton = ({ objects, bucketName, onDeleteSuccess })=>{
                         children: /*#__PURE__*/ jsx("span", {
                             children: notificationText
                         })
+                    }),
+                    checkboxRequired && selectedObjects.length > 0 && /*#__PURE__*/ jsx(Box, {
+                        mt: spacing.r12,
+                        children: /*#__PURE__*/ jsx(Checkbox, {
+                            id: "confirm-deletion-checkbox",
+                            label: "Confirm the deletion",
+                            checked: isCheckboxToggled,
+                            onChange: ()=>setIsCheckboxToggled((prev)=>!prev)
+                        })
                     })
                 ]
             })

package/dist/components/objects/ObjectList.js

@@ -275,7 +275,27 @@ function createOverrideMap(customItems) {
 const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange, onSelectedObjectsChange })=>{
     const { extraObjectListColumns, extraObjectListActions } = useDataBrowserUICustomization();
     const invalidateQueries = useInvalidateQueries();
+    const versionCheck = useListObjectVersions({
+        Bucket: bucketName,
+        MaxKeys: 10
+    }, {
+        enabled: Boolean(bucketName)
+    });
+    const hasObjectVersions = useMemo(()=>{
+        const firstPage = versionCheck.data?.pages?.[0];
+        if (!firstPage) return false;
+        const versions = firstPage.Versions || [];
+        const deleteMarkers = firstPage.DeleteMarkers || [];
+        return versions.some((v)=>v.VersionId && 'null' !== v.VersionId) || deleteMarkers.length > 0;
+    }, [
+        versionCheck.data
+    ]);
     const [showVersions, setShowVersions] = useState(false);
+    useEffect(()=>{
+        if (!hasObjectVersions) setShowVersions(false);
+    }, [
+        hasObjectVersions
+    ]);
     const isMetadataSearchEnabled = useFeatures('metadatasearch');
     const queryParams = useQueryParams();
     const metadataSearchQuery = queryParams.get('metadatasearch');
@@ -787,6 +807,7 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange, onSele
                                             toggle: showVersions,
                                             onChange: (e)=>setShowVersions(e.target.checked),
                                             label: "List Versions",
+                                            disabled: !hasObjectVersions,
                                             "aria-label": showVersions ? 'Hide object versions' : 'Show object versions',
                                             "aria-pressed": showVersions
                                         })

package/dist/components/objects/UploadButton.js

@@ -155,9 +155,10 @@ const UploadButton = ({ bucket, prefix = '', uploadOptions = {}, onUploadSuccess
         const failedFiles = [];
         for (const file of acceptedFiles)try {
             const fileBuffer = await file.arrayBuffer();
+            const normalizedPrefix = prefix.endsWith('/') ? prefix.slice(0, -1) : prefix;
             await uploadMutation.mutateAsync({
                 Bucket: bucket,
-                Key: prefix ? `${prefix}/${file.name}` : file.name,
+                Key: normalizedPrefix ? `${normalizedPrefix}/${file.name}` : file.name,
                 Body: new Uint8Array(fileBuffer),
                 ContentType: file.type,
                 ...uploadOptions

package/dist/components/ui/DeleteObjectModalContent.d.ts

@@ -1,5 +1,8 @@
 import type { Objects } from '../objects/DeleteObjectButton';
 export declare const DeleteObjectModalContent: ({ objects, onRemove, }: {
     objects: Objects;
-    onRemove: (key: string) => void;
+    onRemove: (item: {
+        Key: string;
+        VersionId?: string;
+    }) => void;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/DeleteObjectModalContent.js

@@ -1,46 +1,89 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ConstrainedText, Icon, PrettyBytes, spacing } from "@scality/core-ui";
-import { tableRowHeight } from "@scality/core-ui/dist/components/tablev2/TableUtils";
 import { Box, Table } from "@scality/core-ui/dist/next";
 import { useMemo } from "react";
 import styled_components from "styled-components";
+const NAME_COLUMN_FLEX = '3';
+const SIZE_COLUMN_FLEX = '1';
 const Container = styled_components(Box)`
-  height: ${({ height })=>height};
-  min-height: 15.63rem;
+  width: 31.25rem;
+  height: 15.63rem;
+  overflow-y: auto;
+  border: 1px solid ${({ theme })=>theme.border};
   margin: ${spacing.r8} 0rem;
 `;
+const VersionId = styled_components.div`
+  font-size: 0.75rem;
+  color: ${({ theme })=>theme.textSecondary};
+`;
 const DeleteObjectModalContent = ({ objects, onRemove })=>{
     const columns = useMemo(()=>[
             {
                 Header: 'Name',
                 accessor: 'Key',
-                Cell: ({ value })=>/*#__PURE__*/ jsx(ConstrainedText, {
-                        text: value,
-                        lineClamp: 1
-                    }),
+                cellStyle: {
+                    flex: NAME_COLUMN_FLEX,
+                    minWidth: 0
+                },
+                Cell: ({ value, row })=>{
+                    const versionId = 'VersionId' in row.original ? row.original.VersionId : void 0;
+                    return /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            minWidth: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(ConstrainedText, {
+                                text: value,
+                                lineClamp: 1
+                            }),
+                            versionId && /*#__PURE__*/ jsx(VersionId, {
+                                children: versionId
+                            })
+                        ]
+                    });
+                },
                 id: 'name'
             },
             {
                 Header: 'Size',
                 accessor: 'Size',
                 cellStyle: {
+                    flex: SIZE_COLUMN_FLEX,
                     textAlign: 'right'
                 },
-                Cell: ({ value })=>/*#__PURE__*/ jsx(PrettyBytes, {
-                        bytes: Number(value)
-                    }),
+                Cell: ({ value, row })=>{
+                    const isLegalHoldEnabled = 'isLegalHoldEnabled' in row.original && row.original.isLegalHoldEnabled;
+                    return /*#__PURE__*/ jsxs(Box, {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: spacing.r4,
+                        justifyContent: "flex-end",
+                        children: [
+                            void 0 !== value && /*#__PURE__*/ jsx(PrettyBytes, {
+                                bytes: Number(value)
+                            }),
+                            isLegalHoldEnabled && /*#__PURE__*/ jsx(Icon, {
+                                name: "Rebalance",
+                                size: "sm"
+                            })
+                        ]
+                    });
+                },
                 id: 'size'
             },
             {
                 Header: '',
                 accessor: 'type',
                 cellStyle: {
-                    width: '0.625rem'
+                    flex: '0 0 2rem'
                 },
                 Cell: (row)=>{
-                    const objectKey = row.row.original.Key;
+                    const item = row.row.original;
                     return /*#__PURE__*/ jsx("div", {
-                        onClick: ()=>onRemove(objectKey),
+                        onClick: ()=>onRemove({
+                                Key: item.Key,
+                                VersionId: 'VersionId' in item ? item.VersionId : void 0
+                            }),
                         children: /*#__PURE__*/ jsx(Icon, {
                             name: "Close",
                             color: "buttonSecondary"
@@ -51,11 +94,7 @@ const DeleteObjectModalContent = ({ objects, onRemove })=>{
         ], [
         onRemove
     ]);
-    const HEADER_AND_SPACING_ROWS = 3;
-    const rowHeight = 'h40';
-    const tableRowHeightInRem = tableRowHeight[rowHeight];
     return /*#__PURE__*/ jsx(Container, {
-        height: `calc(${objects.length + HEADER_AND_SPACING_ROWS} * (${tableRowHeightInRem}rem + 1px))`,
         children: /*#__PURE__*/ jsx(Table, {
             columns: columns,
             data: objects,

package/dist/hooks/__tests__/useDeleteFolder.test.d.ts

@@ -0,0 +1 @@
+export {};