@scality/data-browser-library 1.0.4 → 1.0.6

package/dist/components/buckets/BucketList.js

@@ -3,6 +3,7 @@ import { ConstrainedText, FormattedDateTime, Icon, Link, Wrap, spacing } from "@
 import { Box, Button, Table } from "@scality/core-ui/dist/next";
 import { Fragment, useCallback, useMemo } from "react";
 import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
+import { useBucketLocations } from "../../hooks/index.js";
 import { BucketLocation } from "./BucketLocation.js";
 const SEARCH_QUERY_PARAM = 'search';
 const LOCATION_COLUMN_FLEX = '1.2';
@@ -30,7 +31,7 @@ const createBucketNameColumn = (onNavigateToBucket)=>({
             width: 'unset'
         }
     });
-const createLocationColumn = ()=>({
+const createLocationColumn = (locationMap)=>({
         Header: 'Storage Location',
         accessor: 'Name',
         id: 'location',
@@ -42,6 +43,13 @@ const createLocationColumn = ()=>({
                 bucketName: value
             });
         },
+        sortType: (rowA, rowB)=>{
+            const locA = locationMap.get(rowA.original.Name || '') || '';
+            const locB = locationMap.get(rowB.original.Name || '') || '';
+            return locA.localeCompare(locB, 'en', {
+                sensitivity: 'base'
+            });
+        },
         cellStyle: {
             width: 'unset',
             flex: LOCATION_COLUMN_FLEX
@@ -51,6 +59,14 @@ const createDateColumn = ()=>({
         Header: 'Created on',
         accessor: 'CreationDate',
         id: 'date',
+        sortType: (rowA, rowB)=>{
+            const a = rowA.original.CreationDate;
+            const b = rowB.original.CreationDate;
+            if (!a && !b) return 0;
+            if (!a) return -1;
+            if (!b) return 1;
+            return a.getTime() - b.getTime();
+        },
         cellStyle: {
             flex: '1',
             textAlign: 'right',
@@ -90,10 +106,14 @@ function createOverrideMap(customItems) {
 }
 function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect, onCreateBucket, onNavigateToBucket }) {
     const { extraBucketListColumns, extraBucketListActions } = useDataBrowserUICustomization();
+    const bucketNames = useMemo(()=>buckets.filter((b)=>b.Name).map((b)=>b.Name), [
+        buckets
+    ]);
+    const locationMap = useBucketLocations(bucketNames);
     const columns = useMemo(()=>{
         const defaultColumnsMap = {
             name: createBucketNameColumn(onNavigateToBucket),
-            location: createLocationColumn(),
+            location: createLocationColumn(locationMap),
             date: createDateColumn()
         };
         const customColumns = (extraBucketListColumns || []).map((config)=>buildCustomColumn(config));
@@ -108,7 +128,8 @@ function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect,
         ];
     }, [
         onNavigateToBucket,
-        extraBucketListColumns
+        extraBucketListColumns,
+        locationMap
     ]);
     const selectedId = useMemo(()=>{
         if (!buckets || !selectedBucketName) return;
@@ -159,7 +180,7 @@ function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect,
         columns: columns,
         data: buckets,
         status: bucketStatus,
-        defaultSortingKey: "CreationDate",
+        defaultSortingKey: "date",
         entityName: {
             en: {
                 singular: 'bucket',

package/dist/components/buckets/BucketReplicationFormPage.js

@@ -7,6 +7,7 @@ import joi from "joi";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Controller, FormProvider, useFieldArray, useForm } from "react-hook-form";
 import { useParams } from "react-router";
+import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
 import { useGetBucketReplication, useSetBucketReplication } from "../../hooks/bucketConfiguration.js";
 import { useBuckets } from "../../hooks/bucketOperations.js";
 import { useDataBrowserNavigate } from "../../hooks/useDataBrowserNavigate.js";
@@ -246,6 +247,7 @@ const buildReplicationRule = (data)=>{
     return rule;
 };
 function BucketReplicationFormPage() {
+    const { storageClassSelector: StorageClassSelector, storageClassLabel } = useDataBrowserUICustomization();
     const { bucketName, ruleId } = useParams();
     const navigate = useDataBrowserNavigate();
     const { showToast } = useToast();
@@ -664,16 +666,20 @@ function BucketReplicationFormPage() {
                             })
                         }),
                         /*#__PURE__*/ jsx(FormGroup, {
-                            label: "Storage Class",
+                            label: storageClassLabel || 'Storage Class',
                             id: "storageClass",
                             direction: "horizontal",
                             error: errors?.storageClass?.message,
                             helpErrorPosition: "bottom",
-                            labelHelpTooltip: "Storage class for replicated objects in destination bucket",
+                            labelHelpTooltip: StorageClassSelector ? void 0 : 'Storage class for replicated objects in destination bucket',
                             content: /*#__PURE__*/ jsx(Controller, {
                                 name: "storageClass",
                                 control: control,
-                                render: ({ field })=>/*#__PURE__*/ jsx(Select, {
+                                render: ({ field })=>StorageClassSelector ? /*#__PURE__*/ jsx(StorageClassSelector, {
+                                        value: field.value,
+                                        onChange: field.onChange,
+                                        context: "replication"
+                                    }) : /*#__PURE__*/ jsx(Select, {
                                         id: "storageClass",
                                         value: field.value,
                                         onChange: field.onChange,

package/dist/components/buckets/DeleteBucketConfigRuleButton.js

@@ -28,7 +28,7 @@ function DeleteBucketConfigRuleButton({ bucketName, ruleId, rules, ruleType, upd
                 icon: /*#__PURE__*/ jsx(Icon, {
                     name: "Delete"
                 }),
-                variant: "secondary",
+                variant: "danger",
                 type: "button",
                 onClick: (e)=>{
                     e.stopPropagation();

package/dist/components/buckets/notifications/BucketNotificationList.js

@@ -243,7 +243,7 @@ function BucketNotificationList({ bucketName, notificationRules, notificationSta
                         })
                     }),
                     /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
-                        rowHeight: "h64",
+                        rowHeight: "h48",
                         separationLineVariant: "backgroundLevel1",
                         selectedId: selectedId?.toString(),
                         onRowSelected: onRowSelected

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

@@ -3,6 +3,7 @@ export type Objects = TableItem[];
 interface DeleteObjectButtonProps {
     objects: Objects;
     bucketName: string;
+    onDeleteSuccess?: () => void;
 }
 export declare const DeleteObjectButton: React.FC<DeleteObjectButtonProps>;
 export default DeleteObjectButton;

package/dist/components/objects/DeleteObjectButton.js

@@ -40,7 +40,7 @@ const Title = ({ objects, isCurrentSelectionPermanentlyDeleted })=>{
         ]
     });
 };
-const DeleteObjectButton = ({ objects, bucketName })=>{
+const DeleteObjectButton = ({ objects, bucketName, onDeleteSuccess })=>{
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [selectedObjects, setSelectedObjects] = useState(objects);
     const { data: versioningData } = useGetBucketVersioning({
@@ -60,7 +60,10 @@ const DeleteObjectButton = ({ objects, bucketName })=>{
     }, []);
     const cancel = useCallback(()=>{
         setIsModalOpen(false);
-    }, []);
+        setSelectedObjects(objects);
+    }, [
+        objects
+    ]);
     const deleteSelectedFiles = useCallback(()=>{
         const objectsToDelete = selectedObjects.filter((object)=>'object' === object.type && object.Key).map((object)=>{
             const deleteItem = {
@@ -88,6 +91,7 @@ const DeleteObjectButton = ({ objects, bucketName })=>{
                     status: 'success'
                 });
                 setIsModalOpen(false);
+                onDeleteSuccess?.();
             },
             onError: (error)=>{
                 showToast({
@@ -102,13 +106,15 @@ const DeleteObjectButton = ({ objects, bucketName })=>{
         bucketName,
         selectedObjects,
         deleteObjects,
-        showToast
+        showToast,
+        onDeleteSuccess
     ]);
     const totalSize = selectedObjects.reduce((acc, object)=>object.Size ? acc + object.Size : acc, 0);
     useEffect(()=>{
-        setSelectedObjects(objects);
+        if (!isModalOpen) setSelectedObjects(objects);
     }, [
-        objects
+        objects,
+        isModalOpen
     ]);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [

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

@@ -0,0 +1,9 @@
+export { FormCell, FormColumnHeaders, FormRow } from '../../ui/FormGrid';
+export declare const FormLoading: () => import("react/jsx-runtime").JSX.Element;
+export declare const FormError: ({ message }: {
+    message: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const FormHeader: ({ disabled, isSubmitting }: {
+    disabled: boolean;
+    isSubmitting: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/objects/ObjectDetails/FormComponents.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { Icon, Loader, Text, spacing } from "@scality/core-ui";
+import { Box, Button } from "@scality/core-ui/dist/next";
+import { TableContainer } from "../../ui/Table.elements.js";
+import { FormCell, FormColumnHeaders, FormRow } from "../../ui/FormGrid.js";
+const FormLoading = ()=>/*#__PURE__*/ jsx(TableContainer, {
+        children: /*#__PURE__*/ jsx(Box, {
+            display: "flex",
+            justifyContent: "center",
+            padding: spacing.r32,
+            children: /*#__PURE__*/ jsx(Loader, {})
+        })
+    });
+const FormError = ({ message })=>/*#__PURE__*/ jsx(TableContainer, {
+        children: /*#__PURE__*/ jsx(Box, {
+            padding: spacing.r16,
+            children: /*#__PURE__*/ jsx(Text, {
+                color: "statusCritical",
+                children: message
+            })
+        })
+    });
+const FormHeader = ({ disabled, isSubmitting })=>/*#__PURE__*/ jsx(Box, {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsx(Button, {
+            variant: "primary",
+            label: "Save",
+            disabled: disabled || isSubmitting,
+            type: "submit",
+            icon: /*#__PURE__*/ jsx(Icon, {
+                name: "Save"
+            })
+        })
+    });
+export { FormCell, FormColumnHeaders, FormError, FormHeader, FormLoading, FormRow };