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

package/dist/components/buckets/BucketLifecycleList.d.ts

@@ -1,8 +1,8 @@
-import type { LifecycleRule } from "@aws-sdk/client-s3";
+import type { LifecycleRule } from '@aws-sdk/client-s3';
 interface BucketLifecycleListProps {
     bucketName: string;
     lifecycleRules: LifecycleRule[];
-    lifecycleStatus?: "idle" | "loading" | "error" | "success";
+    lifecycleStatus?: 'idle' | 'loading' | 'error' | 'success';
     onCreateRule?: () => void;
     onEditRule?: (ruleId: string) => void;
 }

package/dist/components/buckets/BucketLifecycleList.js

@@ -3,8 +3,8 @@ import { ConstrainedText, FormattedDateTime, Icon, Stack, Tooltip, Wrap, spacing
 import { Box, Button, Table } from "@scality/core-ui/dist/next";
 import { useMemo } from "react";
 import { useDeleteBucketLifecycle, useSetBucketLifecycle } from "../../hooks/bucketConfiguration.js";
-import { DeleteBucketConfigRuleButton } from "./DeleteBucketConfigRuleButton.js";
 import { useTableRowSelection } from "../../hooks/useTableRowSelection.js";
+import { DeleteBucketConfigRuleButton } from "./DeleteBucketConfigRuleButton.js";
 const pluralizeDays = (days)=>1 === days ? `${days} day` : `${days} days`;
 const formatActions = (rule)=>{
     const actions = [];
@@ -14,18 +14,18 @@ const formatActions = (rule)=>{
             description: `Expire current versions of objects after ${pluralizeDays(rule.Expiration.Days)}`
         });
         else if (rule.Expiration.Date) actions.push({
-            text: "Expire current",
-            description: "Expire current versions of objects on date",
+            text: 'Expire current',
+            description: 'Expire current versions of objects on date',
             date: rule.Expiration.Date
         });
         else if (rule.Expiration.ExpiredObjectDeleteMarker) actions.push({
-            text: "Delete expired markers",
-            description: "Delete expired object delete markers"
+            text: 'Delete expired markers',
+            description: 'Delete expired object delete markers'
         });
     }
     if (rule.NoncurrentVersionExpiration?.NoncurrentDays) {
-        const keepText = rule.NoncurrentVersionExpiration.NewerNoncurrentVersions ? `, keep ${rule.NoncurrentVersionExpiration.NewerNoncurrentVersions}` : "";
-        const keepDescription = rule.NoncurrentVersionExpiration.NewerNoncurrentVersions ? `, keep ${rule.NoncurrentVersionExpiration.NewerNoncurrentVersions} newest versions` : "";
+        const keepText = rule.NoncurrentVersionExpiration.NewerNoncurrentVersions ? `, keep ${rule.NoncurrentVersionExpiration.NewerNoncurrentVersions}` : '';
+        const keepDescription = rule.NoncurrentVersionExpiration.NewerNoncurrentVersions ? `, keep ${rule.NoncurrentVersionExpiration.NewerNoncurrentVersions} newest versions` : '';
         actions.push({
             text: `Expire noncurrent (${pluralizeDays(rule.NoncurrentVersionExpiration.NoncurrentDays)}${keepText})`,
             description: `Permanently delete noncurrent versions of objects after ${pluralizeDays(rule.NoncurrentVersionExpiration.NoncurrentDays)}${keepDescription}`
@@ -37,15 +37,15 @@ const formatActions = (rule)=>{
             description: `Transition current versions of objects after ${pluralizeDays(transition.Days)}`
         });
         else if (transition.Date) actions.push({
-            text: "Transition current",
-            description: "Transition current versions of objects on date",
+            text: 'Transition current',
+            description: 'Transition current versions of objects on date',
             date: transition.Date
         });
     });
     if (rule.NoncurrentVersionTransitions && rule.NoncurrentVersionTransitions.length > 0) rule.NoncurrentVersionTransitions.forEach((transition)=>{
         if (transition.NoncurrentDays) {
-            const keepText = transition.NewerNoncurrentVersions ? `, keep ${transition.NewerNoncurrentVersions}` : "";
-            const keepDescription = transition.NewerNoncurrentVersions ? `, keep ${transition.NewerNoncurrentVersions} newest versions` : "";
+            const keepText = transition.NewerNoncurrentVersions ? `, keep ${transition.NewerNoncurrentVersions}` : '';
+            const keepDescription = transition.NewerNoncurrentVersions ? `, keep ${transition.NewerNoncurrentVersions} newest versions` : '';
             actions.push({
                 text: `Transition noncurrent (${pluralizeDays(transition.NoncurrentDays)}${keepText})`,
                 description: `Transition noncurrent versions of objects after ${pluralizeDays(transition.NoncurrentDays)}${keepDescription}`
@@ -58,8 +58,8 @@ const formatActions = (rule)=>{
     });
     return actions.length > 0 ? actions : [
         {
-            text: "-",
-            description: "-"
+            text: '-',
+            description: '-'
         }
     ];
 };
@@ -68,39 +68,39 @@ function BucketLifecycleList({ bucketName, lifecycleRules, lifecycleStatus, onCr
     const deleteLifecycleMutation = useDeleteBucketLifecycle();
     const columns = useMemo(()=>[
             {
-                Header: "Rule ID",
-                accessor: "ID",
-                id: "id",
+                Header: 'Rule ID',
+                accessor: 'ID',
+                id: 'id',
                 Cell: ({ value })=>/*#__PURE__*/ jsx(ConstrainedText, {
-                        text: value || "-",
+                        text: value || '-',
                         lineClamp: 2
                     }),
                 cellStyle: {
-                    flex: "1",
-                    width: "unset"
+                    flex: '1',
+                    width: 'unset'
                 }
             },
             {
-                Header: "Status",
-                accessor: "Status",
-                id: "status",
+                Header: 'Status',
+                accessor: 'Status',
+                id: 'status',
                 Cell: ({ value })=>{
-                    const statusText = "Enabled" === value ? "Active" : "Disabled" === value ? "Inactive" : value;
+                    const statusText = 'Enabled' === value ? 'Active' : 'Disabled' === value ? 'Inactive' : value;
                     return /*#__PURE__*/ jsx("span", {
-                        children: statusText || "-"
+                        children: statusText || '-'
                     });
                 },
                 cellStyle: {
-                    width: "unset",
-                    flex: "0.5"
+                    width: 'unset',
+                    flex: '0.5'
                 }
             },
             {
-                Header: "Actions",
-                accessor: "Actions",
-                id: "actions",
+                Header: 'Actions',
+                accessor: 'Actions',
+                id: 'actions',
                 Cell: ({ value })=>{
-                    if (!value || 0 === value.length || 1 === value.length && "-" === value[0].text) return /*#__PURE__*/ jsx("span", {
+                    if (!value || 0 === value.length || 1 === value.length && '-' === value[0].text) return /*#__PURE__*/ jsx("span", {
                         children: "-"
                     });
                     const firstAction = value[0];
@@ -112,7 +112,7 @@ function BucketLifecycleList({ bucketName, lifecycleRules, lifecycleStatus, onCr
                                 " (",
                                 /*#__PURE__*/ jsx(FormattedDateTime, {
                                     format: "date",
-                                    value: "string" == typeof date ? new Date(date) : date
+                                    value: 'string' == typeof date ? new Date(date) : date
                                 }),
                                 ")"
                             ]
@@ -124,7 +124,7 @@ function BucketLifecycleList({ bucketName, lifecycleRules, lifecycleStatus, onCr
                     const multiActionTooltip = /*#__PURE__*/ jsx("ul", {
                         style: {
                             margin: 0,
-                            paddingLeft: "1.5rem"
+                            paddingLeft: '1.5rem'
                         },
                         children: value.map((action, index)=>/*#__PURE__*/ jsx("li", {
                                 children: renderDescription(action)
@@ -145,11 +145,11 @@ function BucketLifecycleList({ bucketName, lifecycleRules, lifecycleStatus, onCr
                                 overlay: multiActionTooltip,
                                 placement: "top",
                                 overlayStyle: {
-                                    maxWidth: "30rem"
+                                    maxWidth: '30rem'
                                 },
                                 children: /*#__PURE__*/ jsx("span", {
                                     style: {
-                                        cursor: "help"
+                                        cursor: 'help'
                                     },
                                     children: /*#__PURE__*/ jsx(Icon, {
                                         name: "Info",
@@ -164,19 +164,19 @@ function BucketLifecycleList({ bucketName, lifecycleRules, lifecycleStatus, onCr
                     });
                 },
                 cellStyle: {
-                    width: "unset",
-                    flex: "1.5"
+                    width: 'unset',
+                    flex: '1.5'
                 }
             },
             {
-                Header: "",
-                accessor: "ID",
-                id: "operations",
+                Header: '',
+                accessor: 'ID',
+                id: 'operations',
                 cellStyle: {
-                    flex: "0.5",
-                    textAlign: "right",
+                    flex: '0.5',
+                    textAlign: 'right',
                     paddingRight: spacing.r16,
-                    width: "unset"
+                    width: 'unset'
                 },
                 Cell: ({ value })=>/*#__PURE__*/ jsxs(Box, {
                         display: "flex",
@@ -195,7 +195,7 @@ function BucketLifecycleList({ bucketName, lifecycleRules, lifecycleStatus, onCr
                                 },
                                 "aria-label": "Edit rule",
                                 tooltip: {
-                                    overlay: "Edit rule"
+                                    overlay: 'Edit rule'
                                 }
                             }),
                             /*#__PURE__*/ jsx(DeleteBucketConfigRuleButton, {
@@ -222,8 +222,8 @@ function BucketLifecycleList({ bucketName, lifecycleRules, lifecycleStatus, onCr
         onEditRule
     ]);
     const tableData = useMemo(()=>lifecycleRules.map((rule)=>({
-                ID: rule.ID || "-",
-                Status: rule.Status || "Disabled",
+                ID: rule.ID || '-',
+                Status: rule.Status || 'Disabled',
                 Actions: formatActions(rule),
                 rule
             })), [
@@ -237,8 +237,8 @@ function BucketLifecycleList({ bucketName, lifecycleRules, lifecycleStatus, onCr
         defaultSortingKey: "id",
         entityName: {
             en: {
-                singular: "lifecycle rule",
-                plural: "lifecycle rules"
+                singular: 'lifecycle rule',
+                plural: 'lifecycle rules'
             }
         },
         children: [

package/dist/components/buckets/BucketList.d.ts

@@ -1,15 +1,14 @@
-import type { Bucket } from "@aws-sdk/client-s3";
-import type { Column } from "@scality/core-ui/dist/components/tablev2/Tablev2.component";
-interface BucketListProps<TData extends Bucket & Record<string, unknown> = Bucket & Record<string, unknown>> {
+import type { Bucket } from '@aws-sdk/client-s3';
+interface BucketListProps {
     buckets: Bucket[];
-    bucketStatus?: "idle" | "loading" | "error" | "success";
+    bucketStatus?: 'idle' | 'loading' | 'error' | 'success';
     selectedBucketName?: string | null;
     onBucketSelect?: (bucketName: string) => void;
     onCreateBucket?: () => void;
     onNavigateToBucket?: (bucketName: string) => void;
-    renderBucketLocation?: (bucketName: string) => React.ReactNode;
-    additionalColumns?: Column<TData>[];
-    transformBucketData?: (bucket: Bucket) => TData;
 }
-export declare function BucketList<TData extends Bucket & Record<string, unknown> = Bucket & Record<string, unknown>>({ buckets, bucketStatus, selectedBucketName, onBucketSelect, onCreateBucket, onNavigateToBucket, renderBucketLocation, additionalColumns, transformBucketData, }: BucketListProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect, onCreateBucket, onNavigateToBucket, }: BucketListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BucketList {
+    var displayName: string;
+}
 export {};

package/dist/components/buckets/BucketList.js

@@ -1,107 +1,169 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ConstrainedText, FormattedDateTime, Icon, Link, Wrap, spacing } from "@scality/core-ui";
 import { Box, Button, Table } from "@scality/core-ui/dist/next";
-import { useMemo } from "react";
-const SEARCH_QUERY_PARAM = "search";
-function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect, onCreateBucket, onNavigateToBucket, renderBucketLocation, additionalColumns, transformBucketData }) {
+import { Fragment, useCallback, useMemo } from "react";
+import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
+import { BucketLocation } from "./BucketLocation.js";
+const SEARCH_QUERY_PARAM = 'search';
+const LOCATION_COLUMN_FLEX = '1.2';
+const createBucketNameColumn = (onNavigateToBucket)=>({
+        Header: 'Bucket Name',
+        accessor: 'Name',
+        id: 'name',
+        Cell: ({ value })=>{
+            if (!value) return /*#__PURE__*/ jsx("span", {
+                children: "-"
+            });
+            return /*#__PURE__*/ jsx(ConstrainedText, {
+                text: /*#__PURE__*/ jsx(Link, {
+                    onClick: (e)=>{
+                        e.stopPropagation();
+                        onNavigateToBucket?.(value);
+                    },
+                    children: value
+                }),
+                lineClamp: 2
+            });
+        },
+        cellStyle: {
+            flex: '1',
+            width: 'unset'
+        }
+    });
+const createLocationColumn = ()=>({
+        Header: 'Storage Location',
+        accessor: 'Name',
+        id: 'location',
+        Cell: ({ value })=>{
+            if (!value) return /*#__PURE__*/ jsx("span", {
+                children: "-"
+            });
+            return /*#__PURE__*/ jsx(BucketLocation, {
+                bucketName: value
+            });
+        },
+        cellStyle: {
+            width: 'unset',
+            flex: LOCATION_COLUMN_FLEX
+        }
+    });
+const createDateColumn = ()=>({
+        Header: 'Created on',
+        accessor: 'CreationDate',
+        id: 'date',
+        cellStyle: {
+            flex: '1',
+            textAlign: 'right',
+            paddingRight: spacing.r16,
+            width: 'unset'
+        },
+        Cell: ({ value })=>{
+            if (!value) return /*#__PURE__*/ jsx("span", {
+                children: "-"
+            });
+            return /*#__PURE__*/ jsx(FormattedDateTime, {
+                format: "date-time-second",
+                value: new Date(value)
+            });
+        }
+    });
+const buildCustomColumn = (columnConfig)=>({
+        Header: columnConfig.header,
+        id: String(columnConfig.id),
+        Cell: ({ row })=>{
+            const RenderComponent = columnConfig.render;
+            return /*#__PURE__*/ jsx(RenderComponent, {
+                data: row.original
+            });
+        },
+        cellStyle: {
+            width: columnConfig.width ?? 'unset',
+            flex: columnConfig.width ? void 0 : '1',
+            ...columnConfig.cellStyle
+        }
+    });
+function createOverrideMap(customItems) {
+    return new Map(customItems.filter((item)=>item.id).map((item)=>[
+            String(item.id),
+            item
+        ]));
+}
+function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect, onCreateBucket, onNavigateToBucket }) {
+    const { extraBucketListColumns, extraBucketListActions } = useDataBrowserUICustomization();
     const columns = useMemo(()=>{
-        const baseColumns = [
-            {
-                Header: "Bucket Name",
-                accessor: "Name",
-                id: "name",
-                Cell: ({ value, row })=>{
-                    const name = value || row.original?.Name;
-                    if (!name) return /*#__PURE__*/ jsx("span", {
-                        children: "-"
-                    });
-                    return /*#__PURE__*/ jsx(ConstrainedText, {
-                        text: /*#__PURE__*/ jsx(Link, {
-                            onClick: (e)=>{
-                                e.stopPropagation();
-                                onNavigateToBucket?.(name);
-                            },
-                            children: name
-                        }),
-                        lineClamp: 2
-                    });
-                },
-                cellStyle: {
-                    flex: "1",
-                    width: "unset"
-                }
-            },
-            {
-                Header: "Storage Location",
-                accessor: "Name",
-                id: "location",
-                Cell ({ value }) {
-                    return renderBucketLocation ? renderBucketLocation(value) : /*#__PURE__*/ jsx("span", {
-                        children: "-"
-                    });
-                },
-                cellStyle: {
-                    width: "unset",
-                    flex: "1.2"
-                }
-            }
+        const defaultColumnsMap = {
+            name: createBucketNameColumn(onNavigateToBucket),
+            location: createLocationColumn(),
+            date: createDateColumn()
+        };
+        const customColumns = (extraBucketListColumns || []).map((config)=>buildCustomColumn(config));
+        const customColumnsMap = createOverrideMap(customColumns);
+        const getColumn = (id)=>customColumnsMap.get(id) || defaultColumnsMap[id];
+        const extraColumns = customColumns.filter((col)=>col.id && !(col.id in defaultColumnsMap));
+        return [
+            getColumn('name'),
+            getColumn('location'),
+            ...extraColumns,
+            getColumn('date')
         ];
-        if (additionalColumns) baseColumns.push(...additionalColumns);
-        baseColumns.push({
-            Header: "Created on",
-            accessor: "CreationDate",
-            id: "date",
-            cellStyle: {
-                flex: "1",
-                textAlign: "right",
-                paddingRight: spacing.r16,
-                width: "unset"
-            },
-            Cell: ({ value, row })=>{
-                const date = value || row.original?.CreationDate;
-                if (!date) return /*#__PURE__*/ jsx("span", {
-                    children: "-"
-                });
-                return /*#__PURE__*/ jsx(FormattedDateTime, {
-                    format: "date-time-second",
-                    value: new Date(date)
-                });
-            }
-        });
-        return baseColumns;
     }, [
         onNavigateToBucket,
-        renderBucketLocation,
-        additionalColumns
-    ]);
-    const tableData = useMemo(()=>buckets.map((bucket)=>{
-            if (transformBucketData) return transformBucketData(bucket);
-            const { Name, CreationDate, ...rest } = bucket;
-            return {
-                Name,
-                CreationDate,
-                ...rest
-            };
-        }), [
-        buckets,
-        transformBucketData
+        extraBucketListColumns
     ]);
     const selectedId = useMemo(()=>{
-        if (buckets && selectedBucketName) return buckets.findIndex((bucket)=>bucket.Name === selectedBucketName);
-        return null;
+        if (!buckets || !selectedBucketName) return;
+        const index = buckets.findIndex((bucket)=>bucket.Name === selectedBucketName);
+        return index >= 0 ? String(index) : void 0;
     }, [
         selectedBucketName,
         buckets
     ]);
+    const actions = useMemo(()=>{
+        const defaultActionsMap = {
+            createBucket: {
+                id: 'createBucket',
+                render: ()=>/*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(Icon, {
+                            name: "Create-add"
+                        }),
+                        label: "Create Bucket",
+                        variant: "primary",
+                        onClick: onCreateBucket,
+                        type: "submit"
+                    })
+            }
+        };
+        const customActions = (extraBucketListActions || []).map((config)=>({
+                id: config.id,
+                render: config.render
+            }));
+        const customActionsMap = createOverrideMap(customActions);
+        const getAction = (id)=>customActionsMap.get(id) || defaultActionsMap[id];
+        const extraActions = customActions.filter((action)=>!(action.id in defaultActionsMap));
+        return [
+            getAction('createBucket'),
+            ...extraActions
+        ];
+    }, [
+        onCreateBucket,
+        extraBucketListActions
+    ]);
+    const handleRowSelected = useCallback((row)=>{
+        const isSelected = selectedBucketName === row.original.Name;
+        if (!isSelected && row.original.Name) onBucketSelect?.(row.original.Name);
+    }, [
+        selectedBucketName,
+        onBucketSelect
+    ]);
     return /*#__PURE__*/ jsxs(Table, {
         columns: columns,
-        data: tableData,
+        data: buckets,
         status: bucketStatus,
         defaultSortingKey: "CreationDate",
         entityName: {
             en: {
-                singular: "bucket",
-                plural: "buckets"
+                singular: 'bucket',
+                plural: 'buckets'
             }
         },
         children: [
@@ -118,29 +180,24 @@ function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect,
                         })
                     }),
                     /*#__PURE__*/ jsx(Box, {
-                        gap: "r16",
-                        children: /*#__PURE__*/ jsx(Button, {
-                            icon: /*#__PURE__*/ jsx(Icon, {
-                                name: "Create-add"
-                            }),
-                            label: "Create Bucket",
-                            variant: "primary",
-                            onClick: onCreateBucket,
-                            type: "submit"
-                        })
+                        display: "flex",
+                        gap: spacing.r16,
+                        alignItems: "center",
+                        children: actions.map((action)=>/*#__PURE__*/ jsx(Fragment, {
+                                children: action.render()
+                            }, action.id))
                     })
                 ]
             }),
             /*#__PURE__*/ jsx(Table.SingleSelectableContent, {
                 rowHeight: "h40",
-                selectedId: selectedId?.toString(),
-                onRowSelected: (row)=>{
-                    const isSelected = selectedBucketName === row.original.Name;
-                    if (!isSelected && row.original.Name) onBucketSelect?.(row.original.Name);
-                },
-                separationLineVariant: "backgroundLevel1"
+                selectedId: selectedId,
+                onRowSelected: handleRowSelected,
+                separationLineVariant: "backgroundLevel1",
+                autoScrollToSelected: true
             })
         ]
     });
 }
+BucketList.displayName = 'BucketList';
 export { BucketList };

package/dist/components/buckets/BucketLocation.js

@@ -1,16 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import { useGetBucketLocation } from "../../hooks/index.js";
 import { Loader } from "@scality/core-ui";
+import { useGetBucketLocation } from "../../hooks/index.js";
 const BucketLocation = ({ bucketName })=>{
     const { data: bucketLocation, status } = useGetBucketLocation({
         Bucket: bucketName
     });
-    if ("pending" === status) return /*#__PURE__*/ jsx(Loader, {});
-    if ("error" === status) return /*#__PURE__*/ jsx("div", {
+    if ('pending' === status) return /*#__PURE__*/ jsx(Loader, {});
+    if ('error' === status) return /*#__PURE__*/ jsx("div", {
         children: "Error"
     });
     return /*#__PURE__*/ jsx("div", {
-        children: bucketLocation?.LocationConstraint || "us-east-1"
+        children: bucketLocation?.LocationConstraint || 'us-east-1'
     });
 };
 export { BucketLocation };

package/dist/components/buckets/BucketOverview.d.ts

@@ -1,4 +1,23 @@
-import React from "react";
+import type React from 'react';
+export type FieldItem = {
+    id: string;
+    label: string;
+    value: React.ReactNode;
+    actions?: React.ReactNode;
+};
+interface BucketOverviewContextValue {
+    bucketName: string;
+}
+/**
+ * Context for BucketOverview component.
+ *
+ * **Important**: Always use `useBucketOverviewContext()` hook instead of accessing this context directly.
+ * The hook provides proper error handling if the context is not available.
+ *
+ * This context is exported for testing purposes only.
+ */
+export declare const BucketOverviewContext: React.Context<BucketOverviewContextValue | null>;
+export declare function useBucketOverviewContext(): BucketOverviewContextValue;
 interface BucketOverviewProps {
     bucketName: string;
     children: React.ReactNode;
@@ -49,6 +68,7 @@ interface DataProtectionSectionProps {
 declare const DataProtectionSection: React.FC<DataProtectionSectionProps>;
 interface PermissionsSectionProps {
     onEditPolicy?: (bucketName: string) => void;
+    onEditCors?: (bucketName: string) => void;
     ownerField?: React.ReactNode;
     aclField?: React.ReactNode;
     corsField?: React.ReactNode;
@@ -56,7 +76,7 @@ interface PermissionsSectionProps {
     bucketPolicyField?: React.ReactNode;
     renderOwner?: (bucketName: string) => React.ReactNode;
     renderAcl?: (bucketName: string) => React.ReactNode;
-    renderCors?: (bucketName: string) => React.ReactNode;
+    renderCors?: (bucketName: string, onEditCors?: (name: string) => void) => React.ReactNode;
     renderPublic?: (bucketName: string) => React.ReactNode;
     renderBucketPolicy?: (bucketName: string, onEditPolicy?: (name: string) => void) => React.ReactNode;
 }