@scality/data-browser-library 1.0.0-preview.8 → 1.0.1

package/dist/components/layouts/BrowserPageLayout.js

@@ -1,21 +1,26 @@
 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";
+import ArrowNavigation from "./ArrowNavigation.js";
 const HeadTitle = styled_components.div`
   display: flex;
-  color: ${(props)=>props.theme.textSecondary};
+  color: ${(props)=>props.theme.textPrimary};
   font-size: ${fontSize.large};
   align-items: center;
 `;
-const BrowserPageLayout = ({ title, leftPanel, rightPanel })=>/*#__PURE__*/ jsxs(AppContainer, {
+const DEFAULT_HEADER_ICON = 'Buckets';
+const BrowserPageLayout = ({ title, leftPanel, rightPanel, iconName = DEFAULT_HEADER_ICON, withArrowNavigation = false, arrowNavigationPath })=>/*#__PURE__*/ jsxs(AppContainer, {
         children: [
             /*#__PURE__*/ jsx(AppContainer.OverallSummary, {
                 children: /*#__PURE__*/ jsxs(Stack, {
+                    gap: "r20",
                     children: [
+                        withArrowNavigation && arrowNavigationPath && /*#__PURE__*/ jsx(ArrowNavigation, {
+                            path: arrowNavigationPath
+                        }),
                         /*#__PURE__*/ jsx(Icon, {
-                            name: "Account",
+                            name: iconName,
                             size: "2x",
                             withWrapper: true
                         }),
@@ -28,7 +33,7 @@ const BrowserPageLayout = ({ title, leftPanel, rightPanel })=>/*#__PURE__*/ jsxs
             /*#__PURE__*/ jsx(AppContainer.MainContent, {
                 background: "backgroundLevel1",
                 children: /*#__PURE__*/ jsx(TwoPanelLayout, {
-                    panelsRatio: "65-35",
+                    panelsRatio: '65-35',
                     leftPanel: {
                         children: /*#__PURE__*/ jsx(Fragment, {
                             children: leftPanel

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

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from 'react';
 interface CreateFolderButtonProps {
     /**
      * The S3 bucket name where folder will be created
@@ -15,7 +15,7 @@ interface CreateFolderButtonProps {
     /**
      * Button variant
      */
-    variant?: "primary" | "secondary" | "outline";
+    variant?: 'primary' | 'secondary' | 'outline';
     /**
      * Called when folder creation is successful
      */

package/dist/components/objects/CreateFolderButton.js

@@ -1,22 +1,22 @@
 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 { useCallback, useState } from "react";
 import styled_components from "styled-components";
+import { useCreateFolder } from "../../hooks/index.js";
 const Description = styled_components.div`
   margin-top: ${spacing.r16};
   width: 20.5rem;
 `;
-const CreateFolderButton = ({ bucket, prefix = "", label = "Folder", variant = "secondary", onFolderSuccess, onFolderError })=>{
+const CreateFolderButton = ({ bucket, prefix = '', label = 'Folder', variant = 'secondary', onFolderSuccess, onFolderError })=>{
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const [folderName, setFolderName] = useState("");
+    const [folderName, setFolderName] = useState('');
     const createFolderMutation = useCreateFolder();
     const openModal = useCallback(()=>{
         setIsModalOpen(true);
     }, []);
     const closeModal = useCallback(()=>{
-        setFolderName("");
+        setFolderName('');
         setIsModalOpen(false);
     }, []);
     const handleSave = useCallback(()=>{
@@ -25,11 +25,11 @@ const CreateFolderButton = ({ bucket, prefix = "", label = "Folder", variant = "
         createFolderMutation.mutate({
             Bucket: bucket,
             Key: folderKey,
-            Body: ""
+            Body: ''
         }, {
             onSuccess: ()=>{
                 onFolderSuccess?.(folderName);
-                setFolderName("");
+                setFolderName('');
                 setIsModalOpen(false);
             },
             onError: (error)=>{
@@ -47,8 +47,8 @@ const CreateFolderButton = ({ bucket, prefix = "", label = "Folder", variant = "
     const handleChange = useCallback((e)=>{
         setFolderName(e.target.value);
     }, []);
-    const hasInvalidFormat = folderName.startsWith("/");
-    const isEmpty = "" === folderName.trim();
+    const hasInvalidFormat = folderName.startsWith('/');
+    const isEmpty = '' === folderName.trim();
     const isLoading = createFolderMutation.isPending;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -75,11 +75,11 @@ const CreateFolderButton = ({ bucket, prefix = "", label = "Folder", variant = "
                                 }),
                                 /*#__PURE__*/ jsx(Button, {
                                     disabled: isLoading || isEmpty || hasInvalidFormat,
-                                    variant: "secondary",
+                                    variant: "primary",
                                     onClick: handleSave,
-                                    label: "Save",
+                                    label: 'Save',
                                     tooltip: hasInvalidFormat ? {
-                                        overlay: "The folder name is not valid."
+                                        overlay: 'The folder name is not valid.'
                                     } : void 0
                                 })
                             ]

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

@@ -1,4 +1,4 @@
-import { TableItem } from "./ObjectList";
+import type { TableItem } from './ObjectList';
 export type Objects = TableItem[];
 interface DeleteObjectButtonProps {
     objects: Objects;

package/dist/components/objects/DeleteObjectButton.js

@@ -1,41 +1,39 @@
 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 { useCallback, useEffect, useState } from "react";
 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 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",
-            " ",
+            "Do you want to ",
             /*#__PURE__*/ jsxs("strong", {
                 children: [
                     " ",
-                    isCurrentSelectionPermanentlyDeleted ? "permanently" : "",
+                    isCurrentSelectionPermanentlyDeleted ? 'permanently' : '',
                     " "
                 ]
             }),
-            " ",
-            "delete the selected",
-            " ",
+            " delete the selected",
+            ' ',
             objectsSize > 0 && /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     objectsSize,
-                    " ",
-                    isCurrentSelectionPermanentlyDeleted ? `object version${objectsSize > 1 ? "s" : ""}` : `object${objectsSize > 1 ? "s" : ""}`,
-                    foldersSize > 0 && " and "
+                    ' ',
+                    isCurrentSelectionPermanentlyDeleted ? `object version${objectsSize > 1 ? 's' : ''}` : `object${objectsSize > 1 ? 's' : ''}`,
+                    foldersSize > 0 && ' and '
                 ]
             }),
             foldersSize > 0 && /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     foldersSize,
                     " folder",
-                    foldersSize > 1 ? "s" : ""
+                    foldersSize > 1 ? 's' : ''
                 ]
             }),
             "?"
@@ -50,7 +48,7 @@ const DeleteObjectButton = ({ objects, bucketName })=>{
     });
     const { mutate: deleteObjects, status: deleteObjectsStatus } = useDeleteObjects();
     const { showToast } = useToast();
-    const isVersioningEnabled = versioningData?.Status === "Enabled";
+    const isVersioningEnabled = versioningData?.Status === 'Enabled';
     const isCurrentSelectionPermanentlyDeleted = !isVersioningEnabled || selectedObjects.some((object)=>!!object.VersionId);
     const { info: notificationText } = getDeletionMessages({
         numberOfObjects: selectedObjects.length,
@@ -64,14 +62,14 @@ const DeleteObjectButton = ({ objects, bucketName })=>{
         setIsModalOpen(false);
     }, []);
     const deleteSelectedFiles = useCallback(()=>{
-        const objectsToDelete = selectedObjects.filter((object)=>"object" === object.type && object.Key).map((object)=>{
+        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;
+            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)=>({
+        const foldersToDelete = selectedObjects.filter((object)=>'folder' === object.type && object.Key).map((object)=>({
                 Key: object.Key
             }));
         deleteObjects({
@@ -86,16 +84,16 @@ const DeleteObjectButton = ({ objects, bucketName })=>{
             onSuccess: ()=>{
                 showToast({
                     open: true,
-                    message: "Objects deleted successfully",
-                    status: "success"
+                    message: 'Objects deleted successfully',
+                    status: 'success'
                 });
                 setIsModalOpen(false);
             },
             onError: (error)=>{
                 showToast({
                     open: true,
-                    message: error instanceof Error ? error.message : "Objects deleted failed",
-                    status: "error"
+                    message: error instanceof Error ? error.message : 'Objects deleted failed',
+                    status: 'error'
                 });
                 setIsModalOpen(false);
             }
@@ -138,7 +136,7 @@ const DeleteObjectButton = ({ objects, bucketName })=>{
                                     label: "Cancel"
                                 }),
                                 /*#__PURE__*/ jsx(Button, {
-                                    isLoading: "pending" === deleteObjectsStatus,
+                                    isLoading: 'pending' === deleteObjectsStatus,
                                     id: "object-delete-delete-button",
                                     variant: "danger",
                                     onClick: deleteSelectedFiles,

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

@@ -0,0 +1,7 @@
+interface GetPresignedUrlButtonProps {
+    bucketName: string;
+    objectKey: string;
+    versionId?: string;
+}
+export declare const GetPresignedUrlButton: ({ bucketName, objectKey, versionId }: GetPresignedUrlButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default GetPresignedUrlButton;

package/dist/components/objects/GetPresignedUrlButton.js

@@ -0,0 +1,255 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FormattedDateTime, Icon, Modal, Text, TextArea, Wrap, spacing, useToast } from "@scality/core-ui";
+import { CopyButton } from "@scality/core-ui/dist/components/buttonv2/CopyButton.component";
+import { Box, Button, Input } from "@scality/core-ui/dist/next";
+import { useCallback, useState } from "react";
+import { useGetPresignedDownload } from "../../hooks/index.js";
+const MAX_SECONDS = 604800;
+const GetPresignedUrlButton = ({ bucketName, objectKey, versionId })=>{
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [days, setDays] = useState(7);
+    const [hours, setHours] = useState(0);
+    const [minutes, setMinutes] = useState(0);
+    const [generatedUrl, setGeneratedUrl] = useState(null);
+    const { mutateAsync: getPresignedDownload, isPending } = useGetPresignedDownload();
+    const { showToast } = useToast();
+    const openModal = ()=>{
+        setIsModalOpen(true);
+    };
+    const closeModal = ()=>{
+        setIsModalOpen(false);
+        setGeneratedUrl(null);
+        setDays(7);
+        setHours(0);
+        setMinutes(0);
+    };
+    const totalSeconds = 86400 * days + 3600 * hours + 60 * minutes;
+    const isValidExpiration = totalSeconds > 0 && totalSeconds <= MAX_SECONDS;
+    const handleDaysChange = useCallback((e)=>{
+        const value = Math.min(7, Math.max(0, parseInt(e.target.value, 10) || 0));
+        setDays(value);
+        if (7 === value) {
+            setHours(0);
+            setMinutes(0);
+        }
+    }, []);
+    const handleHoursChange = useCallback((e)=>{
+        if (7 === days) return;
+        const value = Math.min(23, Math.max(0, parseInt(e.target.value, 10) || 0));
+        setHours(value);
+    }, [
+        days
+    ]);
+    const handleMinutesChange = useCallback((e)=>{
+        if (7 === days) return;
+        const value = Math.min(59, Math.max(0, parseInt(e.target.value, 10) || 0));
+        setMinutes(value);
+    }, [
+        days
+    ]);
+    const handleGenerate = useCallback(async ()=>{
+        if (!isValidExpiration) return;
+        try {
+            const result = await getPresignedDownload({
+                Bucket: bucketName,
+                Key: objectKey,
+                ...versionId && {
+                    VersionId: versionId
+                },
+                expiresIn: totalSeconds
+            });
+            setGeneratedUrl(result.Url);
+        } catch (error) {
+            showToast({
+                open: true,
+                message: error instanceof Error ? error.message : 'Failed to generate presigned URL',
+                status: 'error'
+            });
+        }
+    }, [
+        bucketName,
+        objectKey,
+        versionId,
+        totalSeconds,
+        isValidExpiration,
+        getPresignedDownload,
+        showToast
+    ]);
+    const objectName = objectKey.split('/').pop() || objectKey;
+    const previewExpiresAt = new Date(Date.now() + 1000 * totalSeconds);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(Icon, {
+                    name: "Link"
+                }),
+                label: "Get pre-signed url",
+                variant: "outline",
+                onClick: openModal
+            }),
+            /*#__PURE__*/ jsx(Modal, {
+                footer: /*#__PURE__*/ jsxs(Wrap, {
+                    children: [
+                        /*#__PURE__*/ jsx(Box, {}),
+                        /*#__PURE__*/ jsx(Button, {
+                            variant: "outline",
+                            onClick: closeModal,
+                            label: "Close"
+                        })
+                    ]
+                }),
+                isOpen: isModalOpen,
+                title: "Get a pre-signed url",
+                children: /*#__PURE__*/ jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ jsx(Box, {
+                            marginBottom: spacing.r8,
+                            children: /*#__PURE__*/ jsx(Text, {
+                                children: "Generate temporary access link for Object:"
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Box, {
+                            marginBottom: spacing.r36,
+                            children: /*#__PURE__*/ jsx(Text, {
+                                isEmphazed: true,
+                                children: objectName
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Box, {
+                            marginBottom: spacing.r4,
+                            children: /*#__PURE__*/ jsx(Text, {
+                                children: "Valid for:"
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: spacing.r8,
+                            children: [
+                                /*#__PURE__*/ jsxs(Box, {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: spacing.r4,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Input, {
+                                            id: "presigned-days",
+                                            "aria-label": "Days",
+                                            type: "number",
+                                            value: days,
+                                            onChange: handleDaysChange,
+                                            min: 0,
+                                            max: 7,
+                                            size: "1/3"
+                                        }),
+                                        /*#__PURE__*/ jsx(Text, {
+                                            children: "day(s)"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(Box, {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: spacing.r4,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Input, {
+                                            id: "presigned-hours",
+                                            "aria-label": "Hours",
+                                            type: "number",
+                                            value: hours,
+                                            onChange: handleHoursChange,
+                                            min: 0,
+                                            max: 23,
+                                            disabled: 7 === days,
+                                            size: "1/3"
+                                        }),
+                                        /*#__PURE__*/ jsx(Text, {
+                                            children: "hour(s)"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(Box, {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: spacing.r4,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Input, {
+                                            id: "presigned-minutes",
+                                            "aria-label": "Minutes",
+                                            type: "number",
+                                            value: minutes,
+                                            onChange: handleMinutesChange,
+                                            min: 0,
+                                            max: 59,
+                                            disabled: 7 === days,
+                                            size: "1/3"
+                                        }),
+                                        /*#__PURE__*/ jsx(Text, {
+                                            children: "minute(s)"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Box, {
+                            marginTop: spacing.r4,
+                            children: /*#__PURE__*/ jsx(Text, {
+                                variant: "Smaller",
+                                color: "textSecondary",
+                                children: "Maximum duration is 7 days."
+                            })
+                        }),
+                        isValidExpiration && /*#__PURE__*/ jsx(Box, {
+                            marginTop: spacing.r8,
+                            children: /*#__PURE__*/ jsxs(Text, {
+                                children: [
+                                    "Access ends on:",
+                                    ' ',
+                                    /*#__PURE__*/ jsx(Text, {
+                                        isEmphazed: true,
+                                        children: /*#__PURE__*/ jsx(FormattedDateTime, {
+                                            value: previewExpiresAt,
+                                            format: "date-time-second"
+                                        })
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Box, {
+                            marginTop: spacing.r36,
+                            children: /*#__PURE__*/ jsx(Button, {
+                                isLoading: isPending,
+                                label: generatedUrl ? 'Generate another pre-signed url' : 'Generate a pre-signed url',
+                                variant: "primary",
+                                onClick: handleGenerate,
+                                disabled: isPending || !isValidExpiration
+                            })
+                        }),
+                        generatedUrl && /*#__PURE__*/ jsx(Box, {
+                            marginTop: spacing.r16,
+                            children: /*#__PURE__*/ jsxs(Box, {
+                                display: "flex",
+                                alignItems: "flex-start",
+                                gap: spacing.r8,
+                                children: [
+                                    /*#__PURE__*/ jsx(TextArea, {
+                                        "aria-label": "Generated pre-signed URL",
+                                        readOnly: true,
+                                        value: generatedUrl,
+                                        variant: "text",
+                                        width: "100%",
+                                        height: "5rem"
+                                    }),
+                                    /*#__PURE__*/ jsx(CopyButton, {
+                                        textToCopy: generatedUrl
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const objects_GetPresignedUrlButton = GetPresignedUrlButton;
+export { GetPresignedUrlButton, objects_GetPresignedUrlButton as default };

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

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