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

package/dist/components/objects/ObjectList.js

@@ -0,0 +1,407 @@
+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 { 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 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;
+                        if (isDeleteMarker) items.push({
+                            ...item,
+                            displayName: baseName,
+                            type: "deleteMarker",
+                            IsLatest: isLatest,
+                            isDeleteMarker: true
+                        });
+                        else items.push({
+                            ...item,
+                            displayName: baseName,
+                            type: "version",
+                            IsLatest: isLatest
+                        });
+                    });
+                });
+            }
+        } 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) items.push({
+                    ...obj,
+                    displayName: obj.Key.replace(prefix, ""),
+                    type: "object"
+                });
+            });
+        });
+        const allItems = [
+            ...folders,
+            ...items
+        ];
+        return allItems;
+    }, [
+        data,
+        prefix,
+        showVersions,
+        listObjectsQuery.data,
+        listVersionsQuery.data
+    ]);
+    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;
+                    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"
+                                }),
+                                isDeleteMarker ? /*#__PURE__*/ jsx(Text, {
+                                    children: displayValue
+                                }) : /*#__PURE__*/ jsx(Link, {
+                                    onClick: (e)=>{
+                                        e.stopPropagation();
+                                        if (isFolder) onPrefixChange?.(row.original.Key || "");
+                                        else onObjectSelect(row.original);
+                                    },
+                                    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/ObjectPage.d.ts

@@ -0,0 +1 @@
+export declare const ObjectPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/objects/ObjectPage.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useCallback, useState } from "react";
+import { ObjectList } from "./ObjectList.js";
+import { ObjectDetails } from "./ObjectDetails/index.js";
+import { BrowserPageLayout } from "../layouts/BrowserPageLayout.js";
+const ObjectPage = ()=>{
+    const { bucketName } = useParams();
+    const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
+    const [item, setItem] = useState(null);
+    const prefix = searchParams.get("prefix") || "";
+    const handlePrefixChange = useCallback((newPrefix)=>{
+        const newSearchParams = new URLSearchParams(searchParams);
+        newSearchParams.set("prefix", newPrefix);
+        setItem(null);
+        navigate(`?${newSearchParams.toString()}`, {
+            replace: true
+        });
+    }, [
+        navigate,
+        searchParams
+    ]);
+    if (!bucketName) return /*#__PURE__*/ jsx("div", {
+        children: "Bucket name is required"
+    });
+    const handleObjectSelect = (object)=>{
+        setItem(object);
+    };
+    return /*#__PURE__*/ jsx(BrowserPageLayout, {
+        title: bucketName,
+        leftPanel: /*#__PURE__*/ jsx(ObjectList, {
+            bucketName: bucketName,
+            prefix: prefix,
+            onObjectSelect: handleObjectSelect,
+            onPrefixChange: handlePrefixChange
+        }),
+        rightPanel: item ? /*#__PURE__*/ jsx(ObjectDetails, {
+            item: item
+        }) : "Select an object to view details"
+    });
+};
+export { ObjectPage };

package/dist/components/objects/UploadButton.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { PutObjectCommandInput } from "@aws-sdk/client-s3";
+interface UploadButtonProps {
+    /**
+     * The S3 bucket name where files will be uploaded
+     */
+    bucket: string;
+    /**
+     * The prefix/path where files will be uploaded within the bucket
+     */
+    prefix?: string;
+    /**
+     * Button label text
+     */
+    label?: string;
+    /**
+     * Button variant
+     */
+    variant?: "primary" | "secondary" | "outline";
+    /**
+     * Upload options to configure metadata, encryption, etc.
+     */
+    uploadOptions?: Partial<PutObjectCommandInput>;
+    /**
+     * Called when upload is successful
+     */
+    onUploadSuccess?: (files: File[]) => void;
+    /**
+     * Called when upload fails
+     */
+    onUploadError?: (error: Error, files: File[]) => void;
+}
+export declare const UploadButton: React.FC<UploadButtonProps>;
+export default UploadButton;