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

package/dist/components/layouts/BrowserPageLayout.js

@@ -0,0 +1,46 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AppContainer, Icon, Stack, TwoPanelLayout } from "@scality/core-ui";
+import { fontSize } from "@scality/core-ui/dist/style/theme";
+import "react";
+import styled_components from "styled-components";
+const HeadTitle = styled_components.div`
+  display: flex;
+  color: ${(props)=>props.theme.textSecondary};
+  font-size: ${fontSize.large};
+  align-items: center;
+`;
+const BrowserPageLayout = ({ title, leftPanel, rightPanel })=>/*#__PURE__*/ jsxs(AppContainer, {
+        children: [
+            /*#__PURE__*/ jsx(AppContainer.OverallSummary, {
+                children: /*#__PURE__*/ jsxs(Stack, {
+                    children: [
+                        /*#__PURE__*/ jsx(Icon, {
+                            name: "Account",
+                            size: "2x",
+                            withWrapper: true
+                        }),
+                        /*#__PURE__*/ jsx(HeadTitle, {
+                            children: title
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(AppContainer.MainContent, {
+                background: "backgroundLevel1",
+                children: /*#__PURE__*/ jsx(TwoPanelLayout, {
+                    panelsRatio: "65-35",
+                    leftPanel: {
+                        children: /*#__PURE__*/ jsx(Fragment, {
+                            children: leftPanel
+                        })
+                    },
+                    rightPanel: {
+                        children: /*#__PURE__*/ jsx(Fragment, {
+                            children: rightPanel
+                        })
+                    }
+                })
+            })
+        ]
+    });
+export { BrowserPageLayout, HeadTitle };

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

@@ -0,0 +1,29 @@
+import React from "react";
+interface CreateFolderButtonProps {
+    /**
+     * The S3 bucket name where folder will be created
+     */
+    bucket: string;
+    /**
+     * The prefix/path where folder will be created within the bucket
+     */
+    prefix?: string;
+    /**
+     * Button label text
+     */
+    label?: string;
+    /**
+     * Button variant
+     */
+    variant?: "primary" | "secondary" | "outline";
+    /**
+     * Called when folder creation is successful
+     */
+    onFolderSuccess?: (folderName: string) => void;
+    /**
+     * Called when folder creation fails
+     */
+    onFolderError?: (error: Error, folderName: string) => void;
+}
+export declare const CreateFolderButton: React.FC<CreateFolderButtonProps>;
+export default CreateFolderButton;

package/dist/components/objects/CreateFolderButton.js

@@ -0,0 +1,118 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Icon, InfoMessage, Modal, Stack, Wrap, spacing } from "@scality/core-ui";
+import { Button, Input } from "@scality/core-ui/dist/next";
+import { useCreateFolder } from "../../hooks/index.js";
+import styled_components from "styled-components";
+const Description = styled_components.div`
+  margin-top: ${spacing.r16};
+  width: 20.5rem;
+`;
+const CreateFolderButton = ({ bucket, prefix = "", label = "Folder", variant = "secondary", onFolderSuccess, onFolderError })=>{
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [folderName, setFolderName] = useState("");
+    const createFolderMutation = useCreateFolder();
+    const openModal = useCallback(()=>{
+        setIsModalOpen(true);
+    }, []);
+    const closeModal = useCallback(()=>{
+        setFolderName("");
+        setIsModalOpen(false);
+    }, []);
+    const handleSave = useCallback(()=>{
+        if (!folderName.trim()) return;
+        const folderKey = prefix ? `${prefix}/${folderName}/` : `${folderName}/`;
+        createFolderMutation.mutate({
+            Bucket: bucket,
+            Key: folderKey,
+            Body: ""
+        }, {
+            onSuccess: ()=>{
+                onFolderSuccess?.(folderName);
+                setFolderName("");
+                setIsModalOpen(false);
+            },
+            onError: (error)=>{
+                onFolderError?.(error, folderName);
+            }
+        });
+    }, [
+        folderName,
+        prefix,
+        bucket,
+        createFolderMutation,
+        onFolderSuccess,
+        onFolderError
+    ]);
+    const handleChange = useCallback((e)=>{
+        setFolderName(e.target.value);
+    }, []);
+    const hasInvalidFormat = folderName.startsWith("/");
+    const isEmpty = "" === folderName.trim();
+    const isLoading = createFolderMutation.isPending;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Create-add"
+                }),
+                label: label,
+                variant: variant,
+                onClick: openModal
+            }),
+            /*#__PURE__*/ jsxs(Modal, {
+                close: closeModal,
+                footer: /*#__PURE__*/ jsxs(Wrap, {
+                    children: [
+                        /*#__PURE__*/ jsx("p", {}),
+                        /*#__PURE__*/ jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    variant: "outline",
+                                    onClick: closeModal,
+                                    label: "Cancel",
+                                    disabled: isLoading
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    disabled: isLoading || isEmpty || hasInvalidFormat,
+                                    variant: "secondary",
+                                    onClick: handleSave,
+                                    label: "Save",
+                                    tooltip: hasInvalidFormat ? {
+                                        overlay: "The folder name is not valid."
+                                    } : void 0
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                isOpen: isModalOpen,
+                title: "Create a folder",
+                children: [
+                    /*#__PURE__*/ jsx(Input, {
+                        id: "folder-name",
+                        value: folderName,
+                        placeholder: "New folder",
+                        error: hasInvalidFormat ? "Folder name cannot start with '/'" : void 0,
+                        onChange: handleChange,
+                        autoFocus: true
+                    }),
+                    /*#__PURE__*/ jsx(Description, {
+                        children: /*#__PURE__*/ jsx(InfoMessage, {
+                            title: "Creating a folder",
+                            content: /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    "Ensure the folder name does not begin with a slash. ",
+                                    /*#__PURE__*/ jsx("br", {}),
+                                    'When you create a folder, Data Browser creates an object with the above name appended by suffix "/" and that object is displayed as a folder in the Data Browser.'
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const objects_CreateFolderButton = CreateFolderButton;
+export { CreateFolderButton, objects_CreateFolderButton as default };

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

@@ -0,0 +1,8 @@
+import { TableItem } from "./ObjectList";
+export type Objects = TableItem[];
+interface DeleteObjectButtonProps {
+    objects: Objects;
+    bucketName: string;
+}
+export declare const DeleteObjectButton: React.FC<DeleteObjectButtonProps>;
+export default DeleteObjectButton;

package/dist/components/objects/DeleteObjectButton.js

@@ -0,0 +1,191 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { Banner, Icon, Modal, PrettyBytes, Stack, Text, Wrap, spacing, useToast } from "@scality/core-ui";
+import { Box, Button } from "@scality/core-ui/dist/next";
+import { useDeleteObjects, useGetBucketVersioning } from "../../hooks/index.js";
+import { getDeletionMessages } from "../../utils/deletion/index.js";
+import { DeleteObjectModalContent } from "../ui/DeleteObjectModalContent.js";
+const Title = ({ objects, isCurrentSelectionPermanentlyDeleted })=>{
+    const foldersSize = objects.filter((object)=>"folder" === object.type).length;
+    const objectsSize = objects.length - foldersSize;
+    if (0 === objects.length) return null;
+    return /*#__PURE__*/ jsxs(Text, {
+        children: [
+            "Do you want to",
+            " ",
+            /*#__PURE__*/ jsxs("strong", {
+                children: [
+                    " ",
+                    isCurrentSelectionPermanentlyDeleted ? "permanently" : "",
+                    " "
+                ]
+            }),
+            " ",
+            "delete the selected",
+            " ",
+            objectsSize > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    objectsSize,
+                    " ",
+                    isCurrentSelectionPermanentlyDeleted ? `object version${objectsSize > 1 ? "s" : ""}` : `object${objectsSize > 1 ? "s" : ""}`,
+                    foldersSize > 0 && " and "
+                ]
+            }),
+            foldersSize > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    foldersSize,
+                    " folder",
+                    foldersSize > 1 ? "s" : ""
+                ]
+            }),
+            "?"
+        ]
+    });
+};
+const DeleteObjectButton = ({ objects, bucketName })=>{
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [selectedObjects, setSelectedObjects] = useState(objects);
+    const { data: versioningData } = useGetBucketVersioning({
+        Bucket: bucketName
+    });
+    const { mutate: deleteObjects, status: deleteObjectsStatus } = useDeleteObjects();
+    const { showToast } = useToast();
+    const isVersioningEnabled = versioningData?.Status === "Enabled";
+    const isCurrentSelectionPermanentlyDeleted = !isVersioningEnabled || selectedObjects.some((object)=>!!object.VersionId);
+    const { info: notificationText } = getDeletionMessages({
+        numberOfObjects: selectedObjects.length,
+        selectedObjectsAreSpecificVersions: isCurrentSelectionPermanentlyDeleted,
+        isBucketVersioned: isVersioningEnabled
+    });
+    const handleDeleteClick = useCallback(()=>{
+        setIsModalOpen(true);
+    }, []);
+    const cancel = useCallback(()=>{
+        setIsModalOpen(false);
+    }, []);
+    const deleteSelectedFiles = useCallback(()=>{
+        const objectsToDelete = selectedObjects.filter((object)=>"object" === object.type && object.Key).map((object)=>{
+            const deleteItem = {
+                Key: object.Key
+            };
+            if (object.VersionId && "string" == typeof object.VersionId) deleteItem.VersionId = object.VersionId;
+            return deleteItem;
+        });
+        const foldersToDelete = selectedObjects.filter((object)=>"folder" === object.type && object.Key).map((object)=>({
+                Key: object.Key
+            }));
+        deleteObjects({
+            Bucket: bucketName,
+            Delete: {
+                Objects: [
+                    ...objectsToDelete,
+                    ...foldersToDelete
+                ]
+            }
+        }, {
+            onSuccess: ()=>{
+                showToast({
+                    open: true,
+                    message: "Objects deleted successfully",
+                    status: "success"
+                });
+                setIsModalOpen(false);
+            },
+            onError: (error)=>{
+                showToast({
+                    open: true,
+                    message: error instanceof Error ? error.message : "Objects deleted failed",
+                    status: "error"
+                });
+                setIsModalOpen(false);
+            }
+        });
+    }, [
+        bucketName,
+        selectedObjects,
+        deleteObjects,
+        showToast
+    ]);
+    const totalSize = selectedObjects.reduce((acc, object)=>object.Size ? acc + object.Size : acc, 0);
+    useEffect(()=>{
+        setSelectedObjects(objects);
+    }, [
+        objects
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                id: "object-list-delete-button",
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Delete"
+                }),
+                variant: "danger",
+                disabled: 0 === selectedObjects.length,
+                onClick: handleDeleteClick,
+                label: "Delete"
+            }),
+            /*#__PURE__*/ jsxs(Modal, {
+                close: cancel,
+                footer: /*#__PURE__*/ jsxs(Wrap, {
+                    children: [
+                        /*#__PURE__*/ jsx("p", {}),
+                        /*#__PURE__*/ jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    id: "object-delete-cancel-button",
+                                    variant: "outline",
+                                    onClick: cancel,
+                                    label: "Cancel"
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    isLoading: "pending" === deleteObjectsStatus,
+                                    id: "object-delete-delete-button",
+                                    variant: "danger",
+                                    onClick: deleteSelectedFiles,
+                                    disabled: 0 === selectedObjects.length,
+                                    label: "Delete"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                isOpen: isModalOpen,
+                title: "Confirmation",
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        children: /*#__PURE__*/ jsx(Title, {
+                            objects: selectedObjects,
+                            isCurrentSelectionPermanentlyDeleted: isCurrentSelectionPermanentlyDeleted
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(DeleteObjectModalContent, {
+                        objects: selectedObjects,
+                        onRemove: (key)=>{
+                            setSelectedObjects(selectedObjects.filter((object)=>object.Key !== key));
+                        }
+                    }),
+                    /*#__PURE__*/ jsxs(Box, {
+                        mb: spacing.r12,
+                        children: [
+                            "Total: ",
+                            PrettyBytes({
+                                bytes: totalSize
+                            })
+                        ]
+                    }),
+                    selectedObjects.length > 0 && notificationText && /*#__PURE__*/ jsx(Banner, {
+                        variant: "base",
+                        icon: /*#__PURE__*/ jsx(Icon, {
+                            name: "Info-circle"
+                        }),
+                        children: /*#__PURE__*/ jsx("span", {
+                            children: notificationText
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const objects_DeleteObjectButton = DeleteObjectButton;
+export { DeleteObjectButton, objects_DeleteObjectButton as default };

package/dist/components/objects/ObjectDetails/ObjectMetadata.d.ts

@@ -0,0 +1,2 @@
+import { ObjectCommonProps } from ".";
+export declare const ObjectMetadata: ({ bucketName, objectKey, versionId, }: ObjectCommonProps) => import("react/jsx-runtime").JSX.Element;