@scality/data-browser-library 1.0.0-preview.11 → 1.0.0-preview.15

package/dist/components/objects/ObjectList.js

@@ -1,8 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ConstrainedText, FormattedDateTime, Icon, Link, PrettyBytes, Text, Toggle, Wrap, spacing } from "@scality/core-ui";
+import { ConstrainedText, FormattedDateTime, Icon, Link, PrettyBytes, Text, Toggle, Wrap, spacing, useToast } from "@scality/core-ui";
 import { Box, Table } from "@scality/core-ui/dist/next";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
+import { useInvalidateQueries } from "../providers/DataBrowserProvider.js";
 import { useSearchObjects, useSearchObjectsVersions } from "../../hooks/index.js";
+import { useGetPresignedDownload } from "../../hooks/presignedOperations.js";
 import { useBatchObjectLegalHold } from "../../hooks/useBatchObjectLegalHold.js";
 import { useQueryParams } from "../../utils/hooks.js";
 import { useFeatures } from "../../utils/useFeatures.js";
@@ -11,22 +14,312 @@ import MetadataSearch from "../search/MetadataSearch.js";
 import UploadButton from "./UploadButton.js";
 import DeleteObjectButton from "./DeleteObjectButton.js";
 const DEFAULT_PAGE_SIZE = 20;
+const SEARCH_QUERY_PARAM = 'search';
+const NAME_COLUMN_FLEX = '2';
+const VERSION_ID_COLUMN_FLEX = '1.5';
+const LAST_MODIFIED_COLUMN_FLEX = '1';
+const SIZE_COLUMN_FLEX = '1';
+const STORAGE_CLASS_COLUMN_FLEX = '1';
+const isObjectLike = (item)=>'folder' !== item.type;
 const getVersionTextColor = (row)=>{
     const isLatest = row.original.IsLatest;
-    const isVersion = "version" === row.original.type;
-    return !isLatest && isVersion ? "infoPrimary" : "textPrimary";
+    const isVersion = 'version' === row.original.type;
+    return !isLatest && isVersion ? 'infoPrimary' : 'textPrimary';
 };
+const removePrefix = (path, prefix)=>{
+    if (!prefix) return path;
+    if (path.startsWith(prefix)) return path.slice(prefix.length);
+    return path;
+};
+const createLegalHoldKey = (key, versionId)=>`${key}:${versionId ?? 'null'}`;
+const downloadFile = (url, filename, onCleanup)=>{
+    try {
+        new URL(url);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        link.style.display = 'none';
+        link.rel = 'noopener noreferrer';
+        document.body.appendChild(link);
+        link.click();
+        const timeoutId = setTimeout(()=>{
+            if (document.body.contains(link)) document.body.removeChild(link);
+        }, 100);
+        onCleanup?.(timeoutId);
+    } catch (error) {
+        console.error('Invalid download URL:', url, error);
+        throw new Error('Failed to initiate download: Invalid URL');
+    }
+};
+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;
+            const aName = String(rowA.values.displayName || '');
+            const bName = String(rowB.values.displayName || '');
+            return aName.localeCompare(bName, 'en', {
+                sensitivity: 'base'
+            });
+        },
+        Cell: ({ value, row })=>{
+            const isFolder = 'folder' === row.original.type;
+            const isVersion = 'version' === row.original.type;
+            const isDeleteMarker = 'deleteMarker' === row.original.type;
+            const isLatest = row.original.IsLatest;
+            let iconName;
+            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, {
+                            color: getVersionTextColor(row),
+                            children: value
+                        }) : /*#__PURE__*/ jsx(Text, {
+                            color: getVersionTextColor(row),
+                            children: /*#__PURE__*/ jsx(Link, {
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    if (isFolder) onPrefixChange?.(row.original.Key ?? '');
+                                    else onDownload?.(row.original);
+                                },
+                                children: value
+                            })
+                        })
+                    ]
+                }),
+                lineClamp: 2
+            });
+        },
+        cellStyle: {
+            flex: NAME_COLUMN_FLEX,
+            width: 'unset'
+        }
+    });
+const createVersionIdColumn = ()=>({
+        Header: 'Version ID',
+        accessor: 'VersionId',
+        id: 'versionId',
+        Cell: ({ row })=>{
+            const isFolder = 'folder' === row.original.type;
+            const isDeleteMarker = 'deleteMarker' === row.original.type;
+            const isLatest = row.original.IsLatest;
+            if (isFolder || isDeleteMarker) return /*#__PURE__*/ jsx(Text, {
+                children: "-"
+            });
+            const versionId = 'version' === row.original.type ? row.original.VersionId ?? '-' : '-';
+            const textColor = isLatest ? void 0 : 'infoPrimary';
+            return /*#__PURE__*/ jsx(ConstrainedText, {
+                text: versionId,
+                lineClamp: 1,
+                color: textColor
+            });
+        },
+        cellStyle: {
+            flex: VERSION_ID_COLUMN_FLEX,
+            textAlign: 'left',
+            paddingRight: spacing.r16,
+            width: 'unset',
+            maxWidth: '8rem'
+        }
+    });
+const createLastModifiedColumn = ()=>({
+        Header: 'Modified on',
+        accessor: 'LastModified',
+        id: 'lastModified',
+        Cell: ({ value, row })=>{
+            if ('folder' === row.original.type || null == value) return /*#__PURE__*/ jsx(Text, {
+                children: "-"
+            });
+            return /*#__PURE__*/ jsx(Text, {
+                color: getVersionTextColor(row),
+                children: /*#__PURE__*/ jsx(FormattedDateTime, {
+                    format: "date-time-second",
+                    value: new Date(value)
+                })
+            });
+        },
+        cellStyle: {
+            flex: LAST_MODIFIED_COLUMN_FLEX,
+            textAlign: 'right',
+            paddingRight: spacing.r16,
+            width: 'unset',
+            minWidth: '10rem'
+        }
+    });
+const createSizeColumn = ()=>({
+        Header: 'Size',
+        accessor: 'Size',
+        id: 'size',
+        Cell: ({ value, row })=>{
+            if ('folder' === row.original.type || null == value) return /*#__PURE__*/ jsx(Text, {
+                children: "-"
+            });
+            return /*#__PURE__*/ jsx(Box, {
+                display: "flex",
+                justifyContent: "flex-end",
+                children: /*#__PURE__*/ jsx(Text, {
+                    color: getVersionTextColor(row),
+                    children: /*#__PURE__*/ jsx(PrettyBytes, {
+                        bytes: value,
+                        decimals: 2
+                    })
+                })
+            });
+        },
+        cellStyle: {
+            flex: SIZE_COLUMN_FLEX,
+            textAlign: 'right',
+            paddingRight: spacing.r16,
+            width: 'unset'
+        }
+    });
+const createStorageClassColumn = ()=>({
+        Header: 'Storage Location',
+        accessor: 'StorageClass',
+        id: 'storageClass',
+        Cell: ({ value, row })=>{
+            if (null == value) return /*#__PURE__*/ jsx(Text, {
+                children: "-"
+            });
+            return /*#__PURE__*/ jsx(Box, {
+                display: "flex",
+                justifyContent: "flex-end",
+                children: /*#__PURE__*/ jsx(Text, {
+                    color: getVersionTextColor(row),
+                    children: 'STANDARD' === value ? 'default' : value
+                })
+            });
+        },
+        cellStyle: {
+            flex: STORAGE_CLASS_COLUMN_FLEX,
+            textAlign: 'right',
+            paddingRight: spacing.r16,
+            width: 'unset'
+        }
+    });
+const buildCustomColumn = (columnConfig)=>({
+        Header: columnConfig.header,
+        id: String(columnConfig.id),
+        Cell: ({ row })=>{
+            const RenderComponent = columnConfig.render;
+            return /*#__PURE__*/ jsx(RenderComponent, {
+                data: row.original
+            });
+        },
+        cellStyle: {
+            width: columnConfig.width ?? 'unset',
+            flex: columnConfig.width ? void 0 : '1',
+            ...columnConfig.cellStyle
+        }
+    });
+function createOverrideMap(customItems) {
+    return new Map(customItems.filter((item)=>item.id).map((item)=>[
+            String(item.id),
+            item
+        ]));
+}
 const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
+    const { extraObjectListColumns, extraObjectListActions } = useDataBrowserUICustomization();
+    const invalidateQueries = useInvalidateQueries();
     const [showVersions, setShowVersions] = useState(false);
-    const isMetadataSearchEnabled = useFeatures("metadatasearch");
-    const metadataSearchQuery = useQueryParams().get("metadatasearch");
+    const isMetadataSearchEnabled = useFeatures('metadatasearch');
+    const metadataSearchQuery = useQueryParams().get('metadatasearch');
     const [selectedObjects, setSelectedObjects] = useState([]);
+    const { mutateAsync: getPresignedDownload } = useGetPresignedDownload();
+    const downloadingRef = useRef(new Set());
+    const downloadTimeoutsRef = useRef(new Map());
+    const { showToast } = useToast();
+    const onObjectSelectRef = useRef(onObjectSelect);
+    const onPrefixChangeRef = useRef(onPrefixChange);
+    useEffect(()=>{
+        onObjectSelectRef.current = onObjectSelect;
+    }, [
+        onObjectSelect
+    ]);
+    useEffect(()=>{
+        onPrefixChangeRef.current = onPrefixChange;
+    }, [
+        onPrefixChange
+    ]);
+    useEffect(()=>()=>{
+            downloadTimeoutsRef.current.forEach((timeout)=>clearTimeout(timeout));
+            downloadTimeoutsRef.current.clear();
+        }, []);
+    const handleObjectSelect = useCallback((object)=>{
+        onObjectSelectRef.current(object);
+    }, []);
+    const handlePrefixChange = useCallback((newPrefix)=>{
+        onPrefixChangeRef.current(newPrefix);
+    }, []);
+    const handleDownload = useCallback(async (object)=>{
+        if (!object.Key) return void console.warn('Cannot download object: missing Key');
+        const versionId = isObjectLike(object) ? object.VersionId : void 0;
+        const downloadKey = versionId ? `${object.Key}:${versionId}` : object.Key;
+        if (downloadingRef.current.has(downloadKey)) return void console.debug(`Download already in progress for: ${object.Key}`);
+        downloadingRef.current.add(downloadKey);
+        try {
+            const rawFilename = object.displayName || object.Key.split('/').pop() || 'download';
+            const sanitized = rawFilename.replace(/["\r\n\t]/g, '');
+            const encoded = encodeURIComponent(sanitized);
+            const result = await getPresignedDownload({
+                Bucket: bucketName,
+                Key: object.Key,
+                ResponseContentDisposition: `attachment; filename="${sanitized}"; filename*=UTF-8''${encoded}`,
+                ...versionId ? {
+                    VersionId: versionId
+                } : {}
+            });
+            if (!result?.Url) throw new Error('Failed to generate presigned URL: No URL returned');
+            downloadFile(result.Url, sanitized, (timeoutId)=>{
+                downloadTimeoutsRef.current.set(`${downloadKey}_link`, timeoutId);
+            });
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            showToast({
+                open: true,
+                message: errorMessage,
+                status: 'error'
+            });
+        } finally{
+            const timeoutId = setTimeout(()=>{
+                downloadingRef.current.delete(downloadKey);
+                downloadTimeoutsRef.current.delete(downloadKey);
+                downloadTimeoutsRef.current.delete(`${downloadKey}_link`);
+            }, 1000);
+            downloadTimeoutsRef.current.set(downloadKey, timeoutId);
+        }
+    }, [
+        bucketName,
+        getPresignedDownload,
+        showToast
+    ]);
     const searchParams = useMemo(()=>{
         const baseParams = {
             Bucket: bucketName,
             Prefix: prefix,
             MaxKeys: DEFAULT_PAGE_SIZE,
-            Delimiter: "/"
+            Delimiter: '/'
         };
         if (isMetadataSearchEnabled && metadataSearchQuery) return {
             ...baseParams,
@@ -40,72 +333,121 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
         metadataSearchQuery
     ]);
     const listObjectsQuery = useSearchObjects(searchParams, {
-        enabled: !showVersions
+        enabled: Boolean(bucketName)
     });
-    const listVersionsQuery = useSearchObjectsVersions(searchParams, {
-        enabled: showVersions
+    const versionSearchParams = useMemo(()=>({
+            Bucket: bucketName,
+            Prefix: prefix,
+            MaxKeys: DEFAULT_PAGE_SIZE
+        }), [
+        bucketName,
+        prefix
+    ]);
+    const listVersionsQuery = useSearchObjectsVersions(versionSearchParams, {
+        enabled: showVersions && Boolean(bucketName)
     });
-    const activeQuery = showVersions ? listVersionsQuery : listObjectsQuery;
     useEffect(()=>{
         setSelectedObjects([]);
     }, [
         prefix,
         showVersions
     ]);
-    const { data, error, hasNextPage, fetchNextPage, isFetchingNextPage, isLoading } = activeQuery;
+    const data = showVersions ? listVersionsQuery.data : listObjectsQuery.data;
+    const error = showVersions ? listVersionsQuery.error : listObjectsQuery.error;
+    const hasNextPage = showVersions ? listVersionsQuery.hasNextPage : listObjectsQuery.hasNextPage;
+    const fetchNextPage = showVersions ? listVersionsQuery.fetchNextPage : listObjectsQuery.fetchNextPage;
+    const isFetchingNextPage = showVersions ? listVersionsQuery.isFetchingNextPage : listObjectsQuery.isFetchingNextPage;
+    const isLoading = showVersions ? listVersionsQuery.isLoading : listObjectsQuery.isLoading;
     const objectsForLegalHold = useMemo(()=>{
         const objects = [];
-        if (showVersions && listVersionsQuery.data?.pages) listVersionsQuery.data.pages.forEach((page)=>{
-            if (page.Versions) page.Versions.forEach((version)=>{
-                if (version.Key) objects.push({
-                    Key: version.Key,
-                    VersionId: version.VersionId
-                });
-            });
-        });
-        else if (!showVersions && data?.pages) data.pages.forEach((page)=>{
-            if (page.Contents) page.Contents.forEach((obj)=>{
-                if (obj.Key) objects.push({
-                    Key: obj.Key
-                });
-            });
-        });
+        const currentData = showVersions ? listVersionsQuery.data : listObjectsQuery.data;
+        if (!currentData?.pages) return objects;
+        let count = 0;
+        if (showVersions) for (const page of currentData.pages){
+            if (count >= 100) break;
+            if (page.Versions) for (const version of page.Versions){
+                if (count >= 100) break;
+                if (version.Key) {
+                    objects.push({
+                        Key: version.Key,
+                        VersionId: version.VersionId
+                    });
+                    count++;
+                }
+            }
+        }
+        else for (const page of currentData.pages){
+            if (count >= 100) break;
+            if (page.Contents) for (const obj of page.Contents){
+                if (count >= 100) break;
+                if (obj.Key) {
+                    objects.push({
+                        Key: obj.Key
+                    });
+                    count++;
+                }
+            }
+        }
         return objects;
     }, [
-        data,
         showVersions,
-        listVersionsQuery.data
+        listVersionsQuery.data,
+        listObjectsQuery.data
     ]);
-    const { data: legalHoldData } = useBatchObjectLegalHold(bucketName, objectsForLegalHold, true);
-    const tableData = useMemo(()=>{
+    const shouldFetchLegalHold = useMemo(()=>Boolean(bucketName) && objectsForLegalHold.length > 0, [
+        bucketName,
+        objectsForLegalHold.length
+    ]);
+    const { data: legalHoldData } = useBatchObjectLegalHold(bucketName, objectsForLegalHold, shouldFetchLegalHold);
+    const processFolders = useCallback((pages)=>{
         const folders = [];
+        pages.forEach((page)=>{
+            if (page.CommonPrefixes) page.CommonPrefixes.forEach((cp)=>{
+                if (cp.Prefix) {
+                    const folderName = removePrefix(cp.Prefix, prefix).replace(/\/$/, '');
+                    folders.push({
+                        Key: cp.Prefix,
+                        displayName: folderName + '/',
+                        type: 'folder'
+                    });
+                }
+            });
+        });
+        return folders;
+    }, [
+        prefix
+    ]);
+    const createObjectItem = useCallback((obj, legalHoldData)=>{
+        const legalHoldKey = createLegalHoldKey(obj.Key, null);
+        const isLegalHoldEnabled = legalHoldData?.[legalHoldKey]?.isLegalHoldEnabled ?? false;
+        return {
+            ...obj,
+            displayName: removePrefix(obj.Key, prefix),
+            type: 'object',
+            isLegalHoldEnabled
+        };
+    }, [
+        prefix
+    ]);
+    const tableData = useMemo(()=>{
+        let folders = [];
         const items = [];
         if (showVersions) {
-            if (listObjectsQuery.data?.pages) listObjectsQuery.data.pages.forEach((page)=>{
-                if (page.CommonPrefixes) page.CommonPrefixes.forEach((cp)=>{
-                    if (cp.Prefix) {
-                        const folderName = cp.Prefix.replace(prefix, "").replace(/\/$/, "");
-                        folders.push({
-                            Key: cp.Prefix,
-                            displayName: folderName + "/",
-                            type: "folder",
-                            LastModified: void 0,
-                            Size: void 0
-                        });
-                    }
-                });
-            });
+            folders = listObjectsQuery.data?.pages ? processFolders(listObjectsQuery.data.pages) : [];
+            const objectsWithVersions = new Set();
             if (listVersionsQuery.data?.pages) {
                 const itemsByKey = {};
                 listVersionsQuery.data.pages.forEach((page)=>{
                     if (page.Versions) page.Versions.forEach((version)=>{
-                        if (version.Key) {
+                        if (version.Key && !version.Key.endsWith('/')) {
+                            objectsWithVersions.add(version.Key);
                             if (!itemsByKey[version.Key]) itemsByKey[version.Key] = [];
                             itemsByKey[version.Key].push(version);
                         }
                     });
                     if (page.DeleteMarkers) page.DeleteMarkers.forEach((marker)=>{
-                        if (marker.Key) {
+                        if (marker.Key && !marker.Key.endsWith('/')) {
+                            objectsWithVersions.add(marker.Key);
                             if (!itemsByKey[marker.Key]) itemsByKey[marker.Key] = [];
                             itemsByKey[marker.Key].push({
                                 ...marker,
@@ -114,25 +456,29 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
                         }
                     });
                 });
-                Object.keys(itemsByKey).sort().forEach((key)=>{
+                Object.keys(itemsByKey).sort((a, b)=>a.localeCompare(b, 'en', {
+                        sensitivity: 'base'
+                    })).forEach((key)=>{
                     const allItems = itemsByKey[key];
                     allItems.sort((a, b)=>{
                         if (a.IsLatest) return -1;
                         if (b.IsLatest) return 1;
-                        const aDate = a.LastModified ? new Date(a.LastModified).getTime() : 0;
-                        const bDate = b.LastModified ? new Date(b.LastModified).getTime() : 0;
-                        return bDate - aDate;
+                        const aTime = a.LastModified?.getTime() ?? 0;
+                        const bTime = b.LastModified?.getTime() ?? 0;
+                        return bTime - aTime;
                     });
                     allItems.forEach((item)=>{
-                        const baseName = item.Key.replace(prefix, "");
+                        if (!item.Key) return;
+                        if (item.Key.endsWith('/')) return;
+                        const baseName = removePrefix(item.Key, prefix);
                         const isLatest = item.IsLatest;
-                        const isDeleteMarker = "isDeleteMarker" in item && item.isDeleteMarker;
-                        const legalHoldKey = `${item.Key}:${item.VersionId || "null"}`;
-                        const isLegalHoldEnabled = legalHoldData?.[legalHoldKey]?.isLegalHoldEnabled || false;
+                        const isDeleteMarker = 'isDeleteMarker' in item && item.isDeleteMarker;
+                        const legalHoldKey = createLegalHoldKey(item.Key, item.VersionId);
+                        const isLegalHoldEnabled = legalHoldData?.[legalHoldKey]?.isLegalHoldEnabled ?? false;
                         if (isDeleteMarker) items.push({
                             ...item,
                             displayName: baseName,
-                            type: "deleteMarker",
+                            type: 'deleteMarker',
                             IsLatest: isLatest,
                             isDeleteMarker: true,
                             isLegalHoldEnabled
@@ -140,231 +486,171 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
                         else items.push({
                             ...item,
                             displayName: baseName,
-                            type: "version",
+                            type: 'version',
                             IsLatest: isLatest,
                             isLegalHoldEnabled
                         });
                     });
                 });
             }
-        } else if (data?.pages) data.pages.forEach((page)=>{
-            if (page.CommonPrefixes) page.CommonPrefixes.forEach((cp)=>{
-                if (cp.Prefix) {
-                    const folderName = cp.Prefix.replace(prefix, "").replace(/\/$/, "");
-                    folders.push({
-                        Key: cp.Prefix,
-                        displayName: folderName + "/",
-                        type: "folder",
-                        LastModified: void 0,
-                        Size: void 0
-                    });
-                }
+            if (listObjectsQuery.data?.pages) listObjectsQuery.data.pages.forEach((page)=>{
+                if (page.Contents) page.Contents.forEach((obj)=>{
+                    if (obj.Key && !obj.Key.endsWith('/') && !objectsWithVersions.has(obj.Key)) items.push(createObjectItem(obj, legalHoldData));
+                });
             });
-            if (page.Contents) page.Contents.forEach((obj)=>{
-                if (obj.Key && !obj.Key.endsWith("/")) {
-                    const legalHoldKey = `${obj.Key}:null`;
-                    const isLegalHoldEnabled = legalHoldData?.[legalHoldKey]?.isLegalHoldEnabled || false;
-                    items.push({
-                        ...obj,
-                        displayName: obj.Key.replace(prefix, ""),
-                        type: "object",
-                        isLegalHoldEnabled
-                    });
-                }
+        } else {
+            folders = data?.pages ? processFolders(data.pages) : [];
+            if (data?.pages) data.pages.forEach((page)=>{
+                if (page.Contents) page.Contents.forEach((obj)=>{
+                    if (obj.Key && !obj.Key.endsWith('/')) items.push(createObjectItem(obj, legalHoldData));
+                });
             });
-        });
+        }
         const allItems = [
             ...folders,
             ...items
         ];
         return allItems;
     }, [
-        data,
-        prefix,
         showVersions,
         listObjectsQuery.data,
         listVersionsQuery.data,
-        legalHoldData
+        legalHoldData,
+        processFolders,
+        createObjectItem
+    ]);
+    const versionIdColumn = useMemo(()=>createVersionIdColumn(), []);
+    const lastModifiedColumn = useMemo(()=>createLastModifiedColumn(), []);
+    const sizeColumn = useMemo(()=>createSizeColumn(), []);
+    const storageClassColumn = useMemo(()=>createStorageClassColumn(), []);
+    const nameColumn = useMemo(()=>createNameColumn(handlePrefixChange, handleDownload), [
+        handlePrefixChange,
+        handleDownload
     ]);
     const columns = useMemo(()=>{
-        const cols = [
-            {
-                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;
-                    const aName = String(rowA.values.displayName || "");
-                    const bName = String(rowB.values.displayName || "");
-                    return aName.localeCompare(bName);
-                },
-                Cell: ({ value, row })=>{
-                    const displayValue = value;
-                    const isFolder = "folder" === row.original.type;
-                    const isVersion = "version" === row.original.type;
-                    const isDeleteMarker = "deleteMarker" === row.original.type;
-                    const isLatest = row.original.IsLatest;
-                    let iconName;
-                    iconName = isFolder ? "Folder" : isDeleteMarker ? "Deletion-marker" : "File";
-                    const shouldIndent = isVersion && !isLatest;
-                    const isLegalHoldEnabled = Boolean(row.original.isLegalHoldEnabled);
-                    return /*#__PURE__*/ jsx(ConstrainedText, {
-                        text: /*#__PURE__*/ jsxs("div", {
-                            style: {
-                                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, {
-                                    color: getVersionTextColor(row),
-                                    children: displayValue
-                                }) : /*#__PURE__*/ jsx(Link, {
-                                    onClick: (e)=>{
-                                        e.stopPropagation();
-                                        if (isFolder) onPrefixChange?.(row.original.Key || "");
-                                        else onObjectSelect(row.original);
-                                    },
-                                    children: /*#__PURE__*/ jsx(Text, {
-                                        color: getVersionTextColor(row),
-                                        children: displayValue
-                                    })
-                                })
-                            ]
-                        }),
-                        lineClamp: 2
-                    });
-                },
-                cellStyle: {
-                    flex: "2",
-                    width: "unset"
-                }
-            }
+        const defaultColumnsMap = {
+            name: nameColumn,
+            versionId: versionIdColumn,
+            lastModified: lastModifiedColumn,
+            size: sizeColumn,
+            storageClass: storageClassColumn
+        };
+        const customColumns = (extraObjectListColumns || []).map((config)=>buildCustomColumn(config));
+        const customColumnsMap = createOverrideMap(customColumns);
+        const getColumn = (id)=>customColumnsMap.get(id) || defaultColumnsMap[id];
+        const extraColumns = customColumns.filter((col)=>col.id && !(col.id in defaultColumnsMap));
+        const finalColumns = [
+            getColumn('name'),
+            ...showVersions ? [
+                getColumn('versionId')
+            ] : [],
+            ...extraColumns,
+            getColumn('lastModified'),
+            getColumn('size'),
+            getColumn('storageClass')
         ];
-        if (showVersions) cols.push({
-            Header: "Version ID",
-            accessor: "VersionId",
-            id: "versionId",
-            Cell: ({ row })=>{
-                const isFolder = "folder" === row.original.type;
-                const isDeleteMarker = "deleteMarker" === row.original.type;
-                const isLatest = row.original.IsLatest;
-                if (isFolder || isDeleteMarker) return /*#__PURE__*/ jsx(Text, {
-                    children: "-"
-                });
-                const versionId = "version" === row.original.type ? row.original.VersionId || "-" : "-";
-                const textColor = isLatest ? void 0 : "infoPrimary";
-                return /*#__PURE__*/ jsx(ConstrainedText, {
-                    text: versionId,
-                    lineClamp: 1,
-                    color: textColor
-                });
-            },
-            cellStyle: {
-                flex: "1.5",
-                textAlign: "left",
-                paddingRight: spacing.r16,
-                width: "unset",
-                maxWidth: "8rem"
-            }
+        return finalColumns;
+    }, [
+        showVersions,
+        extraObjectListColumns,
+        nameColumn,
+        versionIdColumn,
+        lastModifiedColumn,
+        sizeColumn,
+        storageClassColumn
+    ]);
+    const handleUploadSuccess = useCallback(()=>{
+        invalidateQueries({
+            queryKey: [
+                'ListObjects'
+            ]
         });
-        cols.push({
-            Header: "Modified on",
-            accessor: "LastModified",
-            id: "lastModified",
-            Cell: ({ value, row })=>{
-                if ("folder" === row.original.type || !value) return /*#__PURE__*/ jsx(Text, {
-                    children: "-"
-                });
-                const dateValue = value;
-                return /*#__PURE__*/ jsx(Text, {
-                    color: getVersionTextColor(row),
-                    children: /*#__PURE__*/ jsx(FormattedDateTime, {
-                        format: "date-time-second",
-                        value: new Date(dateValue)
-                    })
-                });
-            },
-            cellStyle: {
-                flex: "1",
-                textAlign: "right",
-                paddingRight: spacing.r16,
-                width: "unset",
-                minWidth: "10rem"
-            }
-        }, {
-            Header: "Size",
-            accessor: "Size",
-            id: "size",
-            Cell: ({ value, row })=>{
-                if ("folder" === row.original.type || null == value) return /*#__PURE__*/ jsx(Text, {
-                    children: "-"
-                });
-                const sizeValue = value;
-                return /*#__PURE__*/ jsx(Wrap, {
-                    style: {
-                        justifyContent: "flex-end"
-                    },
-                    children: /*#__PURE__*/ jsx(Text, {
-                        color: getVersionTextColor(row),
-                        children: /*#__PURE__*/ jsx(PrettyBytes, {
-                            bytes: sizeValue,
-                            decimals: 2
-                        })
-                    })
-                });
+        invalidateQueries({
+            queryKey: [
+                'ListObjectVersions'
+            ]
+        });
+    }, [
+        invalidateQueries
+    ]);
+    const handleFolderSuccess = useCallback(()=>{
+        invalidateQueries({
+            queryKey: [
+                'ListObjects'
+            ]
+        });
+        invalidateQueries({
+            queryKey: [
+                'ListObjectVersions'
+            ]
+        });
+    }, [
+        invalidateQueries
+    ]);
+    const handleUploadError = useCallback(()=>{}, []);
+    const handleFolderError = useCallback(()=>{}, []);
+    const renderUploadAction = useCallback(()=>/*#__PURE__*/ jsx(UploadButton, {
+            bucket: bucketName,
+            prefix: prefix,
+            onUploadSuccess: handleUploadSuccess,
+            onUploadError: handleUploadError
+        }), [
+        bucketName,
+        prefix,
+        handleUploadSuccess,
+        handleUploadError
+    ]);
+    const renderCreateFolderAction = useCallback(()=>/*#__PURE__*/ jsx(CreateFolderButton, {
+            bucket: bucketName,
+            prefix: prefix,
+            onFolderSuccess: handleFolderSuccess,
+            onFolderError: handleFolderError
+        }), [
+        bucketName,
+        prefix,
+        handleFolderSuccess,
+        handleFolderError
+    ]);
+    const renderDeleteAction = useCallback(()=>/*#__PURE__*/ jsx(DeleteObjectButton, {
+            objects: selectedObjects,
+            bucketName: bucketName
+        }), [
+        selectedObjects,
+        bucketName
+    ]);
+    const actions = useMemo(()=>{
+        const defaultActionsMap = {
+            upload: {
+                id: 'upload',
+                render: renderUploadAction
             },
-            cellStyle: {
-                flex: "1",
-                textAlign: "right",
-                paddingRight: spacing.r16,
-                width: "unset"
-            }
-        }, {
-            Header: "Storage Location",
-            accessor: "StorageClass",
-            id: "storageClass",
-            Cell: ({ value, row })=>{
-                if (!value) return /*#__PURE__*/ jsx(Text, {
-                    children: "-"
-                });
-                const storageClass = value;
-                return /*#__PURE__*/ jsx(Wrap, {
-                    style: {
-                        justifyContent: "flex-end"
-                    },
-                    children: /*#__PURE__*/ jsx(Text, {
-                        color: getVersionTextColor(row),
-                        children: "STANDARD" === storageClass ? "default" : storageClass
-                    })
-                });
+            createFolder: {
+                id: 'createFolder',
+                render: renderCreateFolderAction
             },
-            cellStyle: {
-                flex: "1",
-                textAlign: "right",
-                paddingRight: spacing.r16,
-                width: "unset"
+            delete: {
+                id: 'delete',
+                render: renderDeleteAction
             }
-        });
-        return cols;
+        };
+        const customActions = (extraObjectListActions || []).map((config)=>({
+                id: config.id,
+                render: config.render
+            }));
+        const customActionsMap = createOverrideMap(customActions);
+        const getAction = (id)=>customActionsMap.get(id) || defaultActionsMap[id];
+        const extraActions = customActions.filter((action)=>!(action.id in defaultActionsMap));
+        return [
+            getAction('upload'),
+            getAction('createFolder'),
+            getAction('delete'),
+            ...extraActions
+        ];
     }, [
-        onObjectSelect,
-        onPrefixChange,
-        showVersions
+        renderUploadAction,
+        renderCreateFolderAction,
+        renderDeleteAction,
+        extraObjectListActions
     ]);
     const handleReachBottom = useCallback(()=>{
         if (hasNextPage && !isFetchingNextPage) fetchNextPage();
@@ -373,18 +659,33 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
         isFetchingNextPage,
         fetchNextPage
     ]);
-    const tableStatus = isLoading ? "loading" : error ? "error" : "success";
+    const handleMultiSelectionChanged = useCallback((rows)=>{
+        const objects = rows.map((row)=>row.original);
+        setSelectedObjects(objects);
+    }, []);
+    const handleSingleRowSelected = useCallback((row)=>{
+        handleObjectSelect(row.original);
+    }, [
+        handleObjectSelect
+    ]);
+    const handleToggleAll = useCallback((selected)=>{
+        selected ? setSelectedObjects(tableData) : setSelectedObjects([]);
+    }, [
+        tableData
+    ]);
+    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: {
-            en: {
-                singular: "object",
-                plural: "objects"
-            }
-        },
+        entityName: entityName,
         children: [
             /*#__PURE__*/ jsxs(Wrap, {
                 padding: spacing.r16,
@@ -392,7 +693,7 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
                     isMetadataSearchEnabled ? /*#__PURE__*/ jsx(MetadataSearch, {
                         isError: !!error
                     }) : /*#__PURE__*/ jsx(Table.SearchWithQueryParams, {
-                        queryParams: "search"
+                        queryParams: SEARCH_QUERY_PARAM
                     }),
                     /*#__PURE__*/ jsxs(Box, {
                         display: "flex",
@@ -400,33 +701,20 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
                         alignItems: "center",
                         gap: spacing.r8,
                         children: [
-                            /*#__PURE__*/ jsxs(Box, {
+                            /*#__PURE__*/ jsx(Box, {
                                 display: "flex",
                                 alignItems: "center",
                                 gap: spacing.r8,
-                                children: [
-                                    /*#__PURE__*/ jsx(UploadButton, {
-                                        bucket: bucketName,
-                                        prefix: prefix,
-                                        onUploadSuccess: ()=>{},
-                                        onUploadError: ()=>{}
-                                    }),
-                                    /*#__PURE__*/ jsx(CreateFolderButton, {
-                                        bucket: bucketName,
-                                        prefix: prefix,
-                                        onFolderSuccess: ()=>{},
-                                        onFolderError: ()=>{}
-                                    }),
-                                    /*#__PURE__*/ jsx(DeleteObjectButton, {
-                                        objects: selectedObjects,
-                                        bucketName: bucketName
-                                    })
-                                ]
+                                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"
+                                label: "List Versions",
+                                "aria-label": showVersions ? 'Hide object versions' : 'Show object versions',
+                                "aria-pressed": showVersions
                             })
                         ]
                     })
@@ -434,20 +722,13 @@ const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
             }),
             /*#__PURE__*/ jsx(Table.MultiSelectableContent, {
                 rowHeight: "h40",
-                onMultiSelectionChanged: (rows)=>{
-                    const objects = rows.map((row)=>row.original);
-                    setSelectedObjects(objects);
-                },
-                onSingleRowSelected: (row)=>{
-                    onObjectSelect(row.original);
-                },
-                onToggleAll: (selected)=>{
-                    console.log("Toggle all", selected);
-                },
+                onMultiSelectionChanged: handleMultiSelectionChanged,
+                onSingleRowSelected: handleSingleRowSelected,
+                onToggleAll: handleToggleAll,
                 separationLineVariant: "backgroundLevel1",
                 isLoadingMoreItems: isFetchingNextPage
             })
         ]
     });
 };
-export { ObjectList };
+export { ObjectList, isObjectLike };