@scality/data-browser-library 1.0.4 → 1.0.6

package/dist/components/objects/ObjectList.js

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ConstrainedText, FormattedDateTime, Icon, Link, PrettyBytes, Text, Toggle, Wrap, spacing, useToast } from "@scality/core-ui";
+import { ConstrainedText, FormattedDateTime, Icon, Link, PrettyBytes, SearchInput, Text, Toggle, Wrap, spacing, useToast } from "@scality/core-ui";
 import { Box, Table } from "@scality/core-ui/dist/next";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useLocation, useNavigate } from "react-router";
+import styled_components from "styled-components";
 import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
 import { useSearchObjects, useSearchObjectsVersions } from "../../hooks/index.js";
 import { useGetPresignedDownload } from "../../hooks/presignedOperations.js";
@@ -13,6 +15,19 @@ import MetadataSearch from "../search/MetadataSearch.js";
 import CreateFolderButton from "./CreateFolderButton.js";
 import DeleteObjectButton from "./DeleteObjectButton.js";
 import UploadButton from "./UploadButton.js";
+const TableWithAlignedRows = styled_components.div`
+  height: 100%;
+  flex: 1;
+  .tr {
+    gap: ${spacing.r16};
+  }
+`;
+const TruncatedName = styled_components.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+`;
 const DEFAULT_PAGE_SIZE = 20;
 const SEARCH_QUERY_PARAM = 'search';
 const NAME_COLUMN_FLEX = '2';
@@ -26,6 +41,21 @@ const getVersionTextColor = (row)=>{
     const isVersion = 'version' === row.original.type;
     return !isLatest && isVersion ? 'infoPrimary' : 'textPrimary';
 };
+const pinFolderFirst = (rowA, rowB, desc)=>{
+    const aIsFolder = 'folder' === rowA.original.type;
+    const bIsFolder = 'folder' === rowB.original.type;
+    if (aIsFolder === bIsFolder) return 0;
+    if (aIsFolder) return desc ? 1 : -1;
+    return desc ? -1 : 1;
+};
+const pinLatestVersion = (rowA, rowB, desc)=>{
+    const aKey = rowA.original.Key || '';
+    const bKey = rowB.original.Key || '';
+    if (!aKey || !bKey || aKey !== bKey) return 0;
+    if (rowA.original.IsLatest && !rowB.original.IsLatest) return desc ? 1 : -1;
+    if (!rowA.original.IsLatest && rowB.original.IsLatest) return desc ? -1 : 1;
+    return 0;
+};
 const removePrefix = (path, prefix)=>{
     if (!prefix) return path;
     if (path.startsWith(prefix)) return path.slice(prefix.length);
@@ -55,16 +85,20 @@ const createNameColumn = (onPrefixChange, onDownload)=>({
         Header: 'Name',
         accessor: 'displayName',
         id: 'name',
-        sortType: (rowA, rowB)=>{
-            const aIsFolder = 'folder' === rowA.original.type;
-            const bIsFolder = 'folder' === rowB.original.type;
-            if (aIsFolder && !bIsFolder) return -1;
-            if (!aIsFolder && bIsFolder) return 1;
+        sortType: (rowA, rowB, _columnId, desc)=>{
+            const folderOrder = pinFolderFirst(rowA, rowB, desc);
+            if (0 !== folderOrder) return folderOrder;
             const aName = String(rowA.values.displayName || '');
             const bName = String(rowB.values.displayName || '');
-            return aName.localeCompare(bName, 'en', {
+            const nameComparison = aName.localeCompare(bName, 'en', {
                 sensitivity: 'base'
             });
+            if (0 !== nameComparison) return nameComparison;
+            const pinOrder = pinLatestVersion(rowA, rowB, desc);
+            if (0 !== pinOrder) return pinOrder;
+            const aTime = rowA.original.LastModified ? new Date(rowA.original.LastModified).getTime() : 0;
+            const bTime = rowB.original.LastModified ? new Date(rowB.original.LastModified).getTime() : 0;
+            return bTime - aTime;
         },
         Cell: ({ value, row })=>{
             const isFolder = 'folder' === row.original.type;
@@ -75,24 +109,25 @@ const createNameColumn = (onPrefixChange, onDownload)=>({
             iconName = isFolder ? 'Folder' : isDeleteMarker ? 'Deletion-marker' : 'File';
             const shouldIndent = isVersion && !isLatest;
             const isLegalHoldEnabled = isObjectLike(row.original) && Boolean(row.original.isLegalHoldEnabled);
-            return /*#__PURE__*/ jsx(ConstrainedText, {
-                text: /*#__PURE__*/ jsxs(Box, {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: spacing.r8,
-                    paddingLeft: shouldIndent ? spacing.r24 : 0,
-                    children: [
-                        /*#__PURE__*/ jsx(Icon, {
-                            name: iconName,
-                            size: "sm",
-                            color: getVersionTextColor(row)
-                        }),
-                        isLegalHoldEnabled && /*#__PURE__*/ jsx(Icon, {
-                            name: "Rebalance",
-                            size: "sm",
-                            color: getVersionTextColor(row)
-                        }),
-                        isDeleteMarker ? /*#__PURE__*/ jsx(Text, {
+            return /*#__PURE__*/ jsxs(Box, {
+                display: "flex",
+                alignItems: "center",
+                gap: spacing.r8,
+                paddingLeft: shouldIndent ? spacing.r24 : 0,
+                minWidth: 0,
+                children: [
+                    /*#__PURE__*/ jsx(Icon, {
+                        name: iconName,
+                        size: "sm",
+                        color: getVersionTextColor(row)
+                    }),
+                    isLegalHoldEnabled && /*#__PURE__*/ jsx(Icon, {
+                        name: "Rebalance",
+                        size: "sm",
+                        color: getVersionTextColor(row)
+                    }),
+                    /*#__PURE__*/ jsx(TruncatedName, {
+                        children: isDeleteMarker ? /*#__PURE__*/ jsx(Text, {
                             color: getVersionTextColor(row),
                             children: value
                         }) : /*#__PURE__*/ jsx(Text, {
@@ -106,14 +141,14 @@ const createNameColumn = (onPrefixChange, onDownload)=>({
                                 children: value
                             })
                         })
-                    ]
-                }),
-                lineClamp: 2
+                    })
+                ]
             });
         },
         cellStyle: {
             flex: NAME_COLUMN_FLEX,
-            width: 'unset'
+            width: 'unset',
+            minWidth: 0
         }
     });
 const createVersionIdColumn = ()=>({
@@ -132,7 +167,11 @@ const createVersionIdColumn = ()=>({
             return /*#__PURE__*/ jsx(ConstrainedText, {
                 text: versionId,
                 lineClamp: 1,
-                color: textColor
+                color: textColor,
+                tooltipStyle: {
+                    maxWidth: '20rem',
+                    wordBreak: 'break-all'
+                }
             });
         },
         cellStyle: {
@@ -143,10 +182,25 @@ const createVersionIdColumn = ()=>({
             maxWidth: '8rem'
         }
     });
-const createLastModifiedColumn = ()=>({
+const createLastModifiedColumn = (groupLatestModified)=>({
         Header: 'Modified on',
         accessor: 'LastModified',
         id: 'lastModified',
+        sortType: (rowA, rowB, _columnId, desc)=>{
+            const folderOrder = pinFolderFirst(rowA, rowB, desc);
+            if (0 !== folderOrder) return folderOrder;
+            const pinOrder = pinLatestVersion(rowA, rowB, desc);
+            if (0 !== pinOrder) return pinOrder;
+            const aKey = rowA.original.Key || '';
+            const bKey = rowB.original.Key || '';
+            const sameKey = '' !== aKey && '' !== bKey && aKey === bKey;
+            const a = !sameKey && groupLatestModified?.get(aKey) || rowA.original.LastModified;
+            const b = !sameKey && groupLatestModified?.get(bKey) || rowB.original.LastModified;
+            if (!a && !b) return 0;
+            if (!a) return -1;
+            if (!b) return 1;
+            return new Date(a).getTime() - new Date(b).getTime();
+        },
         Cell: ({ value, row })=>{
             if ('folder' === row.original.type || null == value) return /*#__PURE__*/ jsx(Text, {
                 children: "-"
@@ -162,7 +216,6 @@ const createLastModifiedColumn = ()=>({
         cellStyle: {
             flex: LAST_MODIFIED_COLUMN_FLEX,
             textAlign: 'right',
-            paddingRight: spacing.r16,
             width: 'unset',
             minWidth: '10rem'
         }
@@ -190,7 +243,6 @@ const createSizeColumn = ()=>({
         cellStyle: {
             flex: SIZE_COLUMN_FLEX,
             textAlign: 'right',
-            paddingRight: spacing.r16,
             width: 'unset'
         }
     });
@@ -239,12 +291,16 @@ function createOverrideMap(customItems) {
             item
         ]));
 }
-const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
+const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange, onSelectedObjectsChange })=>{
     const { extraObjectListColumns, extraObjectListActions } = useDataBrowserUICustomization();
     const invalidateQueries = useInvalidateQueries();
     const [showVersions, setShowVersions] = useState(false);
     const isMetadataSearchEnabled = useFeatures('metadatasearch');
-    const metadataSearchQuery = useQueryParams().get('metadatasearch');
+    const queryParams = useQueryParams();
+    const metadataSearchQuery = queryParams.get('metadatasearch');
+    const { search: locationSearch, pathname } = useLocation();
+    const navigate = useNavigate();
+    const [searchValue, setSearchValue] = useState(queryParams.get(SEARCH_QUERY_PARAM) || '');
     const [selectedObjects, setSelectedObjects] = useState([]);
     const { mutateAsync: getPresignedDownload } = useGetPresignedDownload();
     const downloadingRef = useRef(new Set());
@@ -338,7 +394,8 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
     const versionSearchParams = useMemo(()=>({
             Bucket: bucketName,
             Prefix: prefix,
-            MaxKeys: DEFAULT_PAGE_SIZE
+            MaxKeys: DEFAULT_PAGE_SIZE,
+            Delimiter: '/'
         }), [
         bucketName,
         prefix
@@ -348,6 +405,7 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
     });
     useEffect(()=>{
         setSelectedObjects([]);
+        onObjectSelectRef.current(null);
     }, [
         prefix,
         showVersions
@@ -429,9 +487,10 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
     }, [
         prefix
     ]);
-    const tableData = useMemo(()=>{
+    const { tableData, versionGroupLatestModified } = useMemo(()=>{
         let folders = [];
         const items = [];
+        const latestModifiedMap = new Map();
         if (showVersions) {
             folders = listObjectsQuery.data?.pages ? processFolders(listObjectsQuery.data.pages) : [];
             const objectsWithVersions = new Set();
@@ -467,6 +526,8 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
                         const bTime = b.LastModified?.getTime() ?? 0;
                         return bTime - aTime;
                     });
+                    const latestItem = allItems[0];
+                    if (latestItem?.Key && latestItem.LastModified) latestModifiedMap.set(latestItem.Key, latestItem.LastModified);
                     allItems.forEach((item)=>{
                         if (!item.Key) return;
                         if (item.Key.endsWith('/')) return;
@@ -506,11 +567,13 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
                 });
             });
         }
-        const allItems = [
-            ...folders,
-            ...items
-        ];
-        return allItems;
+        return {
+            tableData: [
+                ...folders,
+                ...items
+            ],
+            versionGroupLatestModified: latestModifiedMap
+        };
     }, [
         showVersions,
         listObjectsQuery.data,
@@ -520,7 +583,9 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
         createObjectItem
     ]);
     const versionIdColumn = useMemo(()=>createVersionIdColumn(), []);
-    const lastModifiedColumn = useMemo(()=>createLastModifiedColumn(), []);
+    const lastModifiedColumn = useMemo(()=>createLastModifiedColumn(versionGroupLatestModified), [
+        versionGroupLatestModified
+    ]);
     const sizeColumn = useMemo(()=>createSizeColumn(), []);
     const storageClassColumn = useMemo(()=>createStorageClassColumn(), []);
     const nameColumn = useMemo(()=>createNameColumn(handlePrefixChange, handleDownload), [
@@ -587,6 +652,19 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
     }, [
         invalidateQueries
     ]);
+    const handleSearchChange = useCallback((value)=>{
+        setSearchValue(value);
+        const params = new URLSearchParams(locationSearch);
+        if (value) params.set(SEARCH_QUERY_PARAM, value);
+        else params.delete(SEARCH_QUERY_PARAM);
+        navigate(`${pathname}?${params.toString()}`, {
+            replace: true
+        });
+    }, [
+        locationSearch,
+        pathname,
+        navigate
+    ]);
     const handleUploadError = useCallback(()=>{}, []);
     const handleFolderError = useCallback(()=>{}, []);
     const renderUploadAction = useCallback(()=>/*#__PURE__*/ jsx(UploadButton, {
@@ -611,12 +689,21 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
         handleFolderSuccess,
         handleFolderError
     ]);
+    const handleDeleteSuccess = useCallback(()=>{
+        setSelectedObjects([]);
+        onSelectedObjectsChange?.([]);
+        onObjectSelectRef.current(null);
+    }, [
+        onSelectedObjectsChange
+    ]);
     const renderDeleteAction = useCallback(()=>/*#__PURE__*/ jsx(DeleteObjectButton, {
             objects: selectedObjects,
-            bucketName: bucketName
+            bucketName: bucketName,
+            onDeleteSuccess: handleDeleteSuccess
         }), [
         selectedObjects,
-        bucketName
+        bucketName,
+        handleDeleteSuccess
     ]);
     const actions = useMemo(()=>{
         const defaultActionsMap = {
@@ -662,73 +749,86 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
     const handleMultiSelectionChanged = useCallback((rows)=>{
         const objects = rows.map((row)=>row.original);
         setSelectedObjects(objects);
-    }, []);
+        onSelectedObjectsChange?.(objects);
+    }, [
+        onSelectedObjectsChange
+    ]);
     const handleSingleRowSelected = useCallback((row)=>{
         handleObjectSelect(row.original);
+        setSelectedObjects([
+            row.original
+        ]);
+        onSelectedObjectsChange?.([
+            row.original
+        ]);
     }, [
-        handleObjectSelect
+        handleObjectSelect,
+        onSelectedObjectsChange
     ]);
     const handleToggleAll = useCallback((selected)=>{
-        selected ? setSelectedObjects(tableData) : setSelectedObjects([]);
+        const objects = selected ? tableData : [];
+        setSelectedObjects(objects);
+        onSelectedObjectsChange?.(objects);
     }, [
-        tableData
+        tableData,
+        onSelectedObjectsChange
     ]);
     const tableStatus = isLoading ? 'loading' : error ? 'error' : 'success';
-    const entityName = useMemo(()=>({
-            en: {
-                singular: 'object',
-                plural: 'objects'
-            }
-        }), []);
-    return /*#__PURE__*/ jsxs(Table, {
-        columns: columns,
-        data: tableData,
-        status: tableStatus,
-        onBottom: handleReachBottom,
-        entityName: entityName,
-        children: [
-            /*#__PURE__*/ jsxs(Wrap, {
-                padding: spacing.r16,
-                children: [
-                    isMetadataSearchEnabled ? /*#__PURE__*/ jsx(MetadataSearch, {
-                        isError: !!error
-                    }) : /*#__PURE__*/ jsx(Table.SearchWithQueryParams, {
-                        queryParams: SEARCH_QUERY_PARAM
-                    }),
-                    /*#__PURE__*/ jsxs(Box, {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        alignItems: "center",
-                        gap: spacing.r8,
-                        children: [
-                            /*#__PURE__*/ jsx(Box, {
-                                display: "flex",
-                                alignItems: "center",
-                                gap: spacing.r8,
-                                children: actions.map((action)=>/*#__PURE__*/ jsx(Fragment, {
-                                        children: action.render()
-                                    }, action.id))
-                            }),
-                            /*#__PURE__*/ jsx(Toggle, {
-                                toggle: showVersions,
-                                onChange: (e)=>setShowVersions(e.target.checked),
-                                label: "List Versions",
-                                "aria-label": showVersions ? 'Hide object versions' : 'Show object versions',
-                                "aria-pressed": showVersions
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(Table.MultiSelectableContent, {
-                rowHeight: "h40",
-                onMultiSelectionChanged: handleMultiSelectionChanged,
-                onSingleRowSelected: handleSingleRowSelected,
-                onToggleAll: handleToggleAll,
-                separationLineVariant: "backgroundLevel1",
-                isLoadingMoreItems: isFetchingNextPage
-            })
-        ]
+    return /*#__PURE__*/ jsx(TableWithAlignedRows, {
+        children: /*#__PURE__*/ jsxs(Table, {
+            columns: columns,
+            data: tableData,
+            status: tableStatus,
+            onBottom: handleReachBottom,
+            globalFilter: isMetadataSearchEnabled ? void 0 : searchValue,
+            children: [
+                /*#__PURE__*/ jsxs(Wrap, {
+                    padding: spacing.r16,
+                    children: [
+                        isMetadataSearchEnabled ? /*#__PURE__*/ jsx(MetadataSearch, {
+                            isError: !!error
+                        }) : /*#__PURE__*/ jsx(SearchInput, {
+                            value: searchValue,
+                            placeholder: "Search",
+                            size: "1",
+                            onChange: (e)=>handleSearchChange(e.target.value),
+                            onReset: ()=>handleSearchChange('')
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            gap: spacing.r8,
+                            children: [
+                                /*#__PURE__*/ jsx(Box, {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: spacing.r8,
+                                    children: actions.map((action)=>/*#__PURE__*/ jsx(Fragment, {
+                                            children: action.render()
+                                        }, action.id))
+                                }),
+                                /*#__PURE__*/ jsx(Toggle, {
+                                    toggle: showVersions,
+                                    onChange: (e)=>setShowVersions(e.target.checked),
+                                    label: "List Versions",
+                                    "aria-label": showVersions ? 'Hide object versions' : 'Show object versions',
+                                    "aria-pressed": showVersions
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Table.MultiSelectableContent, {
+                    rowHeight: "h40",
+                    onMultiSelectionChanged: handleMultiSelectionChanged,
+                    onSingleRowSelected: handleSingleRowSelected,
+                    onToggleAll: handleToggleAll,
+                    separationLineVariant: "backgroundLevel1",
+                    isLoadingMoreItems: isFetchingNextPage
+                })
+            ]
+        })
     });
 };
 export { ObjectList, isObjectLike };

package/dist/components/objects/ObjectLock/__tests__/ObjectLockSettings.test.js

@@ -59,7 +59,9 @@ describe('ObjectLockSettings', ()=>{
         await waitFor(()=>{
             expect(screen.getByText('Object-lock settings')).toBeInTheDocument();
         });
-        expect(screen.getByLabelText(/object-lock/i)).toBeInTheDocument();
+        expect(screen.getByRole('checkbox', {
+            name: /object-lock/i
+        })).toBeInTheDocument();
     });
     it('disables save button when Object Lock is not enabled', async ()=>{
         renderObjectLockSettings();
@@ -81,9 +83,15 @@ describe('ObjectLockSettings', ()=>{
         });
         renderObjectLockSettings();
         await waitFor(()=>{
-            expect(screen.getByText('Default Retention')).toBeInTheDocument();
-            expect(screen.getByText('Retention mode')).toBeInTheDocument();
-            expect(screen.getByText('Retention period')).toBeInTheDocument();
+            expect(screen.getByRole('checkbox', {
+                name: /default retention/i
+            })).toBeInTheDocument();
+            expect(screen.getByRole('radio', {
+                name: /governance/i
+            })).toBeInTheDocument();
+            expect(screen.getByRole('spinbutton', {
+                name: /retention period/i
+            })).toBeInTheDocument();
         }, {
             timeout: 3000
         });
@@ -118,13 +126,19 @@ describe('ObjectLockSettings', ()=>{
         });
         renderObjectLockSettings();
         await waitFor(()=>{
-            expect(screen.getByText('Default Retention')).toBeInTheDocument();
+            expect(screen.getByRole('checkbox', {
+                name: /default retention/i
+            })).toBeInTheDocument();
+        });
+        const defaultRetentionCheckbox = screen.getByRole('checkbox', {
+            name: /default retention/i
         });
-        const defaultRetentionCheckbox = screen.getByLabelText(/default retention/i);
         expect(defaultRetentionCheckbox).not.toBeChecked();
         fireEvent.click(defaultRetentionCheckbox);
         await waitFor(()=>{
-            const governanceRadio = screen.getByLabelText(/governance/i);
+            const governanceRadio = screen.getByRole('radio', {
+                name: /governance/i
+            });
             expect(governanceRadio).not.toBeDisabled();
         }, {
             timeout: 3000
@@ -147,11 +161,15 @@ describe('ObjectLockSettings', ()=>{
         });
         renderObjectLockSettings();
         await waitFor(()=>{
-            const defaultRetentionCheckbox = screen.getByLabelText(/default retention/i);
+            const defaultRetentionCheckbox = screen.getByRole('checkbox', {
+                name: /default retention/i
+            });
             fireEvent.click(defaultRetentionCheckbox);
         });
         await waitFor(()=>{
-            const governanceRadio = screen.getByLabelText(/governance/i);
+            const governanceRadio = screen.getByRole('radio', {
+                name: /governance/i
+            });
             expect(governanceRadio).toBeDisabled();
         });
     });
@@ -166,15 +184,23 @@ describe('ObjectLockSettings', ()=>{
         });
         renderObjectLockSettings();
         await waitFor(()=>{
-            expect(screen.getByText('Default Retention')).toBeInTheDocument();
+            expect(screen.getByRole('checkbox', {
+                name: /default retention/i
+            })).toBeInTheDocument();
+        });
+        const defaultRetentionCheckbox = screen.getByRole('checkbox', {
+            name: /default retention/i
         });
-        const defaultRetentionCheckbox = screen.getByLabelText(/default retention/i);
         fireEvent.click(defaultRetentionCheckbox);
         await waitFor(()=>{
-            const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+            const retentionPeriodInput = screen.getByRole('spinbutton', {
+                name: /retention period/i
+            });
             expect(retentionPeriodInput).toBeInTheDocument();
         });
-        const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+        const retentionPeriodInput = screen.getByRole('spinbutton', {
+            name: /retention period/i
+        });
         await user_event.clear(retentionPeriodInput);
         await user_event.type(retentionPeriodInput, '0');
         await waitFor(()=>{
@@ -197,18 +223,28 @@ describe('ObjectLockSettings', ()=>{
         });
         renderObjectLockSettings();
         await waitFor(()=>{
-            expect(screen.getByText('Default Retention')).toBeInTheDocument();
+            expect(screen.getByRole('checkbox', {
+                name: /default retention/i
+            })).toBeInTheDocument();
+        });
+        const defaultRetentionCheckbox = screen.getByRole('checkbox', {
+            name: /default retention/i
         });
-        const defaultRetentionCheckbox = screen.getByLabelText(/default retention/i);
         fireEvent.click(defaultRetentionCheckbox);
         await waitFor(()=>{
-            const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+            const retentionPeriodInput = screen.getByRole('spinbutton', {
+                name: /retention period/i
+            });
             expect(retentionPeriodInput).toBeInTheDocument();
         });
-        const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+        const retentionPeriodInput = screen.getByRole('spinbutton', {
+            name: /retention period/i
+        });
         await user_event.clear(retentionPeriodInput);
         await user_event.type(retentionPeriodInput, '30');
-        const governanceRadio = screen.getByLabelText(/governance/i);
+        const governanceRadio = screen.getByRole('radio', {
+            name: /governance/i
+        });
         fireEvent.click(governanceRadio);
         mockMutate.mockImplementation((_, options)=>{
             options?.onSuccess?.();
@@ -241,15 +277,23 @@ describe('ObjectLockSettings', ()=>{
         });
         renderObjectLockSettings();
         await waitFor(()=>{
-            expect(screen.getByText('Default Retention')).toBeInTheDocument();
+            expect(screen.getByRole('checkbox', {
+                name: /default retention/i
+            })).toBeInTheDocument();
+        });
+        const defaultRetentionCheckbox = screen.getByRole('checkbox', {
+            name: /default retention/i
         });
-        const defaultRetentionCheckbox = screen.getByLabelText(/default retention/i);
         fireEvent.click(defaultRetentionCheckbox);
         await waitFor(()=>{
-            const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+            const retentionPeriodInput = screen.getByRole('spinbutton', {
+                name: /retention period/i
+            });
             expect(retentionPeriodInput).toBeInTheDocument();
         });
-        const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+        const retentionPeriodInput = screen.getByRole('spinbutton', {
+            name: /retention period/i
+        });
         await user_event.clear(retentionPeriodInput);
         await user_event.type(retentionPeriodInput, '2');
         mockMutate.mockImplementation((_, options)=>{
@@ -361,14 +405,22 @@ describe('ObjectLockSettings', ()=>{
         });
         renderObjectLockSettings();
         await waitFor(()=>{
-            const objectLockCheckbox = screen.getByLabelText(/object-lock/i);
+            const objectLockCheckbox = screen.getByRole('checkbox', {
+                name: /object-lock/i
+            });
             expect(objectLockCheckbox).toBeChecked();
         });
-        const defaultRetentionCheckbox = screen.getByLabelText(/default retention/i);
+        const defaultRetentionCheckbox = screen.getByRole('checkbox', {
+            name: /default retention/i
+        });
         expect(defaultRetentionCheckbox).toBeChecked();
-        const complianceRadio = screen.getByLabelText(/compliance/i);
+        const complianceRadio = screen.getByRole('radio', {
+            name: /compliance/i
+        });
         expect(complianceRadio).toBeChecked();
-        const retentionPeriodInput = screen.getByLabelText(/retention period/i);
+        const retentionPeriodInput = screen.getByRole('spinbutton', {
+            name: /retention period/i
+        });
         expect(retentionPeriodInput).toHaveValue(60);
     });
 });