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

package/dist/components/objects/ObjectList.js

@@ -0,0 +1,453 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ConstrainedText, FormattedDateTime, Icon, Link, PrettyBytes, Text, Toggle, Wrap, spacing } from "@scality/core-ui";
+import { Box, Table } from "@scality/core-ui/dist/next";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useSearchObjects, useSearchObjectsVersions } from "../../hooks/index.js";
+import { useBatchObjectLegalHold } from "../../hooks/useBatchObjectLegalHold.js";
+import { useQueryParams } from "../../utils/hooks.js";
+import { useFeatures } from "../../utils/useFeatures.js";
+import CreateFolderButton from "./CreateFolderButton.js";
+import MetadataSearch from "../search/MetadataSearch.js";
+import UploadButton from "./UploadButton.js";
+import DeleteObjectButton from "./DeleteObjectButton.js";
+const DEFAULT_PAGE_SIZE = 20;
+const getVersionTextColor = (row)=>{
+    const isLatest = row.original.IsLatest;
+    const isVersion = "version" === row.original.type;
+    return !isLatest && isVersion ? "infoPrimary" : "textPrimary";
+};
+const ObjectList = ({ bucketName, prefix, onObjectSelect, onPrefixChange })=>{
+    const [showVersions, setShowVersions] = useState(false);
+    const isMetadataSearchEnabled = useFeatures("metadatasearch");
+    const metadataSearchQuery = useQueryParams().get("metadatasearch");
+    const [selectedObjects, setSelectedObjects] = useState([]);
+    const searchParams = useMemo(()=>{
+        const baseParams = {
+            Bucket: bucketName,
+            Prefix: prefix,
+            MaxKeys: DEFAULT_PAGE_SIZE,
+            Delimiter: "/"
+        };
+        if (isMetadataSearchEnabled && metadataSearchQuery) return {
+            ...baseParams,
+            Search: metadataSearchQuery
+        };
+        return baseParams;
+    }, [
+        bucketName,
+        prefix,
+        isMetadataSearchEnabled,
+        metadataSearchQuery
+    ]);
+    const listObjectsQuery = useSearchObjects(searchParams, {
+        enabled: !showVersions
+    });
+    const listVersionsQuery = useSearchObjectsVersions(searchParams, {
+        enabled: showVersions
+    });
+    const activeQuery = showVersions ? listVersionsQuery : listObjectsQuery;
+    useEffect(()=>{
+        setSelectedObjects([]);
+    }, [
+        prefix,
+        showVersions
+    ]);
+    const { data, error, hasNextPage, fetchNextPage, isFetchingNextPage, isLoading } = activeQuery;
+    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
+                });
+            });
+        });
+        return objects;
+    }, [
+        data,
+        showVersions,
+        listVersionsQuery.data
+    ]);
+    const { data: legalHoldData } = useBatchObjectLegalHold(bucketName, objectsForLegalHold, true);
+    const tableData = useMemo(()=>{
+        const 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
+                        });
+                    }
+                });
+            });
+            if (listVersionsQuery.data?.pages) {
+                const itemsByKey = {};
+                listVersionsQuery.data.pages.forEach((page)=>{
+                    if (page.Versions) page.Versions.forEach((version)=>{
+                        if (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 (!itemsByKey[marker.Key]) itemsByKey[marker.Key] = [];
+                            itemsByKey[marker.Key].push({
+                                ...marker,
+                                isDeleteMarker: true
+                            });
+                        }
+                    });
+                });
+                Object.keys(itemsByKey).sort().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;
+                    });
+                    allItems.forEach((item)=>{
+                        const baseName = item.Key.replace(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;
+                        if (isDeleteMarker) items.push({
+                            ...item,
+                            displayName: baseName,
+                            type: "deleteMarker",
+                            IsLatest: isLatest,
+                            isDeleteMarker: true,
+                            isLegalHoldEnabled
+                        });
+                        else items.push({
+                            ...item,
+                            displayName: baseName,
+                            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 (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
+                    });
+                }
+            });
+        });
+        const allItems = [
+            ...folders,
+            ...items
+        ];
+        return allItems;
+    }, [
+        data,
+        prefix,
+        showVersions,
+        listObjectsQuery.data,
+        listVersionsQuery.data,
+        legalHoldData
+    ]);
+    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"
+                }
+            }
+        ];
+        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"
+            }
+        });
+        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
+                        })
+                    })
+                });
+            },
+            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
+                    })
+                });
+            },
+            cellStyle: {
+                flex: "1",
+                textAlign: "right",
+                paddingRight: spacing.r16,
+                width: "unset"
+            }
+        });
+        return cols;
+    }, [
+        onObjectSelect,
+        onPrefixChange,
+        showVersions
+    ]);
+    const handleReachBottom = useCallback(()=>{
+        if (hasNextPage && !isFetchingNextPage) fetchNextPage();
+    }, [
+        hasNextPage,
+        isFetchingNextPage,
+        fetchNextPage
+    ]);
+    const tableStatus = isLoading ? "loading" : error ? "error" : "success";
+    return /*#__PURE__*/ jsxs(Table, {
+        columns: columns,
+        data: tableData,
+        status: tableStatus,
+        onBottom: handleReachBottom,
+        entityName: {
+            en: {
+                singular: "object",
+                plural: "objects"
+            }
+        },
+        children: [
+            /*#__PURE__*/ jsxs(Wrap, {
+                padding: spacing.r16,
+                children: [
+                    isMetadataSearchEnabled ? /*#__PURE__*/ jsx(MetadataSearch, {
+                        isError: !!error
+                    }) : /*#__PURE__*/ jsx(Table.SearchWithQueryParams, {
+                        queryParams: "search"
+                    }),
+                    /*#__PURE__*/ jsxs(Box, {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        gap: spacing.r8,
+                        children: [
+                            /*#__PURE__*/ jsxs(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
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Toggle, {
+                                toggle: showVersions,
+                                onChange: (e)=>setShowVersions(e.target.checked),
+                                label: "List Versions"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__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);
+                },
+                separationLineVariant: "backgroundLevel1",
+                isLoadingMoreItems: isFetchingNextPage
+            })
+        ]
+    });
+};
+export { ObjectList };

package/dist/components/objects/ObjectLock/EditRetentionButton.d.ts

@@ -0,0 +1,4 @@
+export declare const EditRetentionButton: ({ bucketName }: {
+    bucketName: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default EditRetentionButton;

package/dist/components/objects/ObjectLock/EditRetentionButton.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { useISVBucketStatus } from "../../../hooks/index.js";
+import { Icon } from "@scality/core-ui";
+import { Button } from "@scality/core-ui/dist/next";
+import { useNavigate } from "react-router-dom";
+const EditRetentionButton = ({ bucketName })=>{
+    const navigate = useNavigate();
+    const { isVeeamBucket, isCommvaultBucket, isISVManaged, isLoading } = useISVBucketStatus(bucketName);
+    const tooltipOverlay = isCommvaultBucket ? "Edition is disabled as it is managed by Commvault." : isVeeamBucket ? "Edition is disabled as it is managed by Veeam." : void 0;
+    return /*#__PURE__*/ jsx(Button, {
+        id: "edit-retention-btn",
+        variant: "outline",
+        label: "Edit",
+        "aria-label": "Edit default retention",
+        icon: /*#__PURE__*/ jsx(Icon, {
+            name: "Pencil"
+        }),
+        type: "button",
+        onClick: ()=>{
+            navigate(`/buckets/${bucketName}/objects/object-lock-settings`);
+        },
+        disabled: isISVManaged,
+        ...tooltipOverlay && {
+            tooltip: {
+                overlay: tooltipOverlay
+            }
+        },
+        isLoading: isLoading
+    });
+};
+const ObjectLock_EditRetentionButton = EditRetentionButton;
+export { EditRetentionButton, ObjectLock_EditRetentionButton as default };

package/dist/components/objects/ObjectLock/ObjectLockRetentionSettings.d.ts

@@ -0,0 +1,3 @@
+export default function ObjectLockRetentionSettings({ isEditRetentionSettings, }: {
+    isEditRetentionSettings?: boolean;
+}): import("react/jsx-runtime").JSX.Element;