@scality/data-browser-library 1.0.0-preview.11 → 1.0.0-preview.13

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

@@ -1 +1,41 @@
+import { useNavigate } from "react-router-dom";
+interface BucketDetailsContextValue {
+    bucketName: string;
+    navigate: ReturnType<typeof useNavigate>;
+}
+/**
+ * Context for BucketDetails component.
+ *
+ * **Important**: Always use `useBucketDetailsContext()` 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 BucketDetailsContext: import("react").Context<BucketDetailsContextValue | null>;
+export declare function useBucketDetailsContext(): BucketDetailsContextValue;
+declare const OverviewTab: React.FC;
+declare const LifecycleTab: React.FC;
+declare const ReplicationTab: React.FC;
+interface CustomTabProps {
+    config: {
+        id: string;
+        title: string;
+        path?: string;
+        withoutPadding?: boolean;
+        render: () => React.ReactNode;
+    };
+}
+declare const CustomTab: React.FC<CustomTabProps>;
+interface BucketDetailsProps {
+    children?: React.ReactNode;
+}
+declare const BucketDetailsRoot: React.FC<BucketDetailsProps>;
 export declare function BucketDetails(): import("react/jsx-runtime").JSX.Element;
+type BucketDetailsComponent = typeof BucketDetailsRoot & {
+    OverviewTab: typeof OverviewTab;
+    LifecycleTab: typeof LifecycleTab;
+    ReplicationTab: typeof ReplicationTab;
+    CustomTab: typeof CustomTab;
+};
+declare const BucketDetailsCompound: BucketDetailsComponent;
+export { BucketDetailsCompound };

package/dist/components/buckets/BucketDetails.js

@@ -1,106 +1,214 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useQueryParams } from "../../utils/hooks.js";
+import { createContext, memo, useCallback, useContext, useMemo } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { Tabs } from "@scality/core-ui/dist/next";
-import { BucketOverview } from "./BucketOverview.js";
-import { DeleteBucketButton } from "./DeleteBucketButton.js";
-import { EmptyBucketButton } from "./EmptyBucketButton.js";
-import { BucketLifecycleList } from "./BucketLifecycleList.js";
-import { BucketReplicationList } from "./BucketReplicationList.js";
+import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
 import { useGetBucketLifecycle, useGetBucketReplication } from "../../hooks/bucketConfiguration.js";
+import { BUCKET_ROUTES } from "../../utils/constants.js";
 import { isNotFoundError } from "../../utils/errorHandling.js";
+import { BucketLifecycleList } from "./BucketLifecycleList.js";
+import { BucketOverview } from "./BucketOverview.js";
+import { BucketReplicationList } from "./BucketReplicationList.js";
 import { BucketVersioning } from "./BucketVersioning.js";
-function BucketDetails() {
-    const query = useQueryParams();
-    const queryObject = Object.fromEntries(query.entries());
-    const { bucketName } = useParams();
-    const navigate = useNavigate();
+import { DeleteBucketButton } from "./DeleteBucketButton.js";
+import { EmptyBucketButton } from "./EmptyBucketButton.js";
+const BucketDetailsContext = /*#__PURE__*/ createContext(null);
+function useBucketDetailsContext() {
+    const context = useContext(BucketDetailsContext);
+    if (!context) throw new Error("BucketDetails components must be used within BucketDetails");
+    return context;
+}
+const getEffectiveStatus = (status, error)=>{
+    if (isNotFoundError(error)) return "success";
+    if ("pending" === status) return "loading";
+    if ("error" === status) return "error";
+    return "success";
+};
+const OverviewTab = /*#__PURE__*/ memo(()=>{
+    const { bucketName, navigate } = useBucketDetailsContext();
+    const renderDeleteButton = useCallback((name)=>/*#__PURE__*/ jsx(DeleteBucketButton, {
+            bucketName: name
+        }), []);
+    const renderEmptyButton = useCallback((name)=>/*#__PURE__*/ jsx(EmptyBucketButton, {
+            bucketName: name
+        }), []);
+    const renderVersioning = useCallback(()=>/*#__PURE__*/ jsx(BucketVersioning, {}), []);
+    const handleEditPolicy = useCallback((name)=>navigate(BUCKET_ROUTES.bucketPolicy(name)), [
+        navigate
+    ]);
+    return /*#__PURE__*/ jsxs(BucketOverview, {
+        bucketName: bucketName,
+        children: [
+            /*#__PURE__*/ jsx(BucketOverview.Actions, {
+                renderDeleteButton: renderDeleteButton,
+                renderEmptyButton: renderEmptyButton
+            }),
+            /*#__PURE__*/ jsxs(BucketOverview.Sections, {
+                children: [
+                    /*#__PURE__*/ jsx(BucketOverview.GeneralSection, {
+                        renderVersioning: renderVersioning
+                    }),
+                    /*#__PURE__*/ jsx(BucketOverview.DataProtectionSection, {}),
+                    /*#__PURE__*/ jsx(BucketOverview.PermissionsSection, {
+                        onEditPolicy: handleEditPolicy
+                    })
+                ]
+            })
+        ]
+    });
+});
+OverviewTab.displayName = "BucketDetails.OverviewTab";
+const LifecycleTab = /*#__PURE__*/ memo(()=>{
+    const { bucketName, navigate } = useBucketDetailsContext();
     const { data: lifecycleData, status: lifecycleStatus, error: lifecycleError } = useGetBucketLifecycle({
         Bucket: bucketName
     });
+    const lifecycleRules = lifecycleData?.Rules || [];
+    const effectiveStatus = getEffectiveStatus(lifecycleStatus, lifecycleError);
+    const handleCreateRule = useCallback(()=>navigate(BUCKET_ROUTES.lifecycleCreate(bucketName)), [
+        navigate,
+        bucketName
+    ]);
+    const handleEditRule = useCallback((ruleId)=>navigate(BUCKET_ROUTES.lifecycleEdit(bucketName, ruleId)), [
+        navigate,
+        bucketName
+    ]);
+    return /*#__PURE__*/ jsx(BucketLifecycleList, {
+        bucketName: bucketName,
+        lifecycleRules: lifecycleRules,
+        lifecycleStatus: effectiveStatus,
+        onCreateRule: handleCreateRule,
+        onEditRule: handleEditRule
+    });
+});
+LifecycleTab.displayName = "BucketDetails.LifecycleTab";
+const ReplicationTab = /*#__PURE__*/ memo(()=>{
+    const { bucketName, navigate } = useBucketDetailsContext();
     const { data: replicationData, status: replicationStatus, error: replicationError } = useGetBucketReplication({
         Bucket: bucketName
     });
-    const lifecycleRules = lifecycleData?.Rules || [];
     const replicationRules = replicationData?.ReplicationConfiguration?.Rules || [];
     const replicationRole = replicationData?.ReplicationConfiguration?.Role || "";
-    const effectiveLifecycleStatus = isNotFoundError(lifecycleError) ? "success" : "pending" === lifecycleStatus ? "loading" : "error" === lifecycleStatus ? "error" : "success";
-    const effectiveReplicationStatus = isNotFoundError(replicationError) ? "success" : "pending" === replicationStatus ? "loading" : "error" === replicationStatus ? "error" : "success";
+    const effectiveStatus = getEffectiveStatus(replicationStatus, replicationError);
+    const handleCreateRule = useCallback(()=>navigate(BUCKET_ROUTES.replicationCreate(bucketName)), [
+        navigate,
+        bucketName
+    ]);
+    const handleEditRule = useCallback((ruleId)=>navigate(BUCKET_ROUTES.replicationEdit(bucketName, ruleId)), [
+        navigate,
+        bucketName
+    ]);
+    return /*#__PURE__*/ jsx(BucketReplicationList, {
+        bucketName: bucketName,
+        replicationRules: replicationRules,
+        replicationRole: replicationRole,
+        replicationStatus: effectiveStatus,
+        onCreateRule: handleCreateRule,
+        onEditRule: handleEditRule
+    });
+});
+ReplicationTab.displayName = "BucketDetails.ReplicationTab";
+const CustomTab = ({ config })=>/*#__PURE__*/ jsx(Fragment, {
+        children: config.render()
+    });
+CustomTab.displayName = "BucketDetails.CustomTab";
+const BucketDetailsRoot = ({ children })=>{
+    const { bucketName } = useParams();
+    const navigate = useNavigate();
     if (!bucketName) return /*#__PURE__*/ jsx("div", {
         children: "No bucket selected"
     });
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: /*#__PURE__*/ jsxs(Tabs, {
-            children: [
-                /*#__PURE__*/ jsx(Tabs.Tab, {
-                    label: "Overview",
-                    path: "",
-                    query: {
-                        ...queryObject,
-                        tab: ""
-                    },
-                    children: /*#__PURE__*/ jsxs(BucketOverview, {
-                        bucketName: bucketName,
-                        children: [
-                            /*#__PURE__*/ jsx(BucketOverview.Actions, {
-                                renderDeleteButton: ()=>/*#__PURE__*/ jsx(DeleteBucketButton, {
-                                        bucketName: bucketName
-                                    }),
-                                renderEmptyButton: ()=>/*#__PURE__*/ jsx(EmptyBucketButton, {
-                                        bucketName: bucketName
-                                    })
-                            }),
-                            /*#__PURE__*/ jsxs(BucketOverview.Sections, {
-                                children: [
-                                    /*#__PURE__*/ jsx(BucketOverview.GeneralSection, {
-                                        renderVersioning: ()=>/*#__PURE__*/ jsx(BucketVersioning, {})
-                                    }),
-                                    /*#__PURE__*/ jsx(BucketOverview.DataProtectionSection, {}),
-                                    /*#__PURE__*/ jsx(BucketOverview.PermissionsSection, {
-                                        onEditPolicy: ()=>{
-                                            navigate(`/buckets/${bucketName}/policy`);
-                                        }
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                }),
-                /*#__PURE__*/ jsx(Tabs.Tab, {
-                    label: "Lifecycle",
-                    path: "",
-                    query: {
-                        ...queryObject,
-                        tab: "lifecycle"
-                    },
-                    withoutPadding: true,
-                    children: /*#__PURE__*/ jsx(BucketLifecycleList, {
-                        bucketName: bucketName,
-                        lifecycleRules: lifecycleRules,
-                        lifecycleStatus: effectiveLifecycleStatus,
-                        onCreateRule: ()=>navigate(`/buckets/${bucketName}/lifecycle/create`),
-                        onEditRule: (ruleId)=>navigate(`/buckets/${bucketName}/lifecycle/edit/${encodeURIComponent(ruleId)}`)
-                    })
-                }),
-                /*#__PURE__*/ jsx(Tabs.Tab, {
-                    label: "Replication",
-                    path: "",
-                    query: {
-                        ...queryObject,
-                        tab: "replication"
-                    },
-                    withoutPadding: true,
-                    children: /*#__PURE__*/ jsx(BucketReplicationList, {
-                        bucketName: bucketName,
-                        replicationRules: replicationRules,
-                        replicationRole: replicationRole,
-                        replicationStatus: effectiveReplicationStatus,
-                        onCreateRule: ()=>navigate(`/buckets/${bucketName}/replication/create`),
-                        onEditRule: (ruleId)=>navigate(`/buckets/${bucketName}/replication/edit/${encodeURIComponent(ruleId)}`)
-                    })
+    const contextValue = useMemo(()=>({
+            bucketName,
+            navigate
+        }), [
+        bucketName,
+        navigate
+    ]);
+    return /*#__PURE__*/ jsx(BucketDetailsContext.Provider, {
+        value: contextValue,
+        children: children || /*#__PURE__*/ jsx(DefaultTabs, {})
+    });
+};
+BucketDetailsRoot.displayName = "BucketDetails";
+const DefaultTabs = ()=>{
+    const { extraBucketTabs } = useDataBrowserUICustomization();
+    const defaultTabsMap = useMemo(()=>({
+            overview: {
+                id: "overview",
+                label: "Overview",
+                path: "",
+                withoutPadding: false,
+                query: {
+                    tab: ""
+                },
+                type: "default",
+                Component: OverviewTab
+            },
+            lifecycle: {
+                id: "lifecycle",
+                label: "Lifecycle",
+                path: "",
+                withoutPadding: true,
+                query: {
+                    tab: "lifecycle"
+                },
+                type: "default",
+                Component: LifecycleTab
+            },
+            replication: {
+                id: "replication",
+                label: "Replication",
+                path: "",
+                withoutPadding: true,
+                query: {
+                    tab: "replication"
+                },
+                type: "default",
+                Component: ReplicationTab
+            }
+        }), []);
+    const allTabs = useMemo(()=>{
+        const customTabConfigs = extraBucketTabs ? extraBucketTabs.map((tabConfig)=>({
+                id: tabConfig.id,
+                label: tabConfig.title,
+                path: tabConfig.path || "",
+                query: {
+                    tab: tabConfig.id
+                },
+                withoutPadding: tabConfig.withoutPadding || false,
+                type: "custom",
+                config: tabConfig
+            })) : [];
+        const overrideIds = new Set(customTabConfigs.filter((t)=>t.id in defaultTabsMap).map((t)=>t.id));
+        const defaults = Object.values(defaultTabsMap).filter((tab)=>!overrideIds.has(tab.id));
+        return [
+            ...defaults,
+            ...customTabConfigs
+        ];
+    }, [
+        extraBucketTabs,
+        defaultTabsMap
+    ]);
+    return /*#__PURE__*/ jsx(Tabs, {
+        children: allTabs.map((tab)=>/*#__PURE__*/ jsx(Tabs.Tab, {
+                label: tab.label,
+                path: tab.path,
+                query: tab.query,
+                withoutPadding: tab.withoutPadding,
+                children: "default" === tab.type ? /*#__PURE__*/ jsx(tab.Component, {}) : /*#__PURE__*/ jsx(CustomTab, {
+                    config: tab.config
                 })
-            ]
-        })
+            }, tab.id))
     });
+};
+DefaultTabs.displayName = "BucketDetails.DefaultTabs";
+function BucketDetails() {
+    return /*#__PURE__*/ jsx(BucketDetailsRoot, {});
 }
-export { BucketDetails };
+const BucketDetailsCompound = BucketDetailsRoot;
+BucketDetailsCompound.OverviewTab = OverviewTab;
+BucketDetailsCompound.LifecycleTab = LifecycleTab;
+BucketDetailsCompound.ReplicationTab = ReplicationTab;
+BucketDetailsCompound.CustomTab = CustomTab;
+export { BucketDetails, BucketDetailsCompound, BucketDetailsContext, useBucketDetailsContext };

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>> {
+interface BucketListProps {
     buckets: Bucket[];
     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,101 +1,162 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useMemo } from "react";
 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";
+import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
+import { BucketLocation } from "./BucketLocation.js";
 const SEARCH_QUERY_PARAM = "search";
-function BucketList({ buckets, bucketStatus, selectedBucketName, onBucketSelect, onCreateBucket, onNavigateToBucket, renderBucketLocation, additionalColumns, transformBucketData }) {
+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"
+        }
+    });
+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: {
@@ -118,29 +179,23 @@ 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);
-                },
+                selectedId: selectedId,
+                onRowSelected: handleRowSelected,
                 separationLineVariant: "backgroundLevel1"
             })
         ]
     });
 }
+BucketList.displayName = "BucketList";
 export { BucketList };

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

@@ -1,4 +1,10 @@
 import React from "react";
+export type FieldItem = {
+    id: string;
+    label: string;
+    value: React.ReactNode;
+    actions?: React.ReactNode;
+};
 interface BucketOverviewContextValue {
     bucketName: string;
 }