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

package/dist/components/__tests__/BucketList.test.js

@@ -3,6 +3,10 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router";
 import { createTestWrapper, mockOffsetSize } from "../../test/testUtils.js";
 import { BucketList } from "../buckets/BucketList.js";
+import * as __rspack_external__contexts_DataBrowserUICustomizationContext_js_f267b01c from "../../contexts/DataBrowserUICustomizationContext.js";
+const mockUseDataBrowserUICustomization = (config = {})=>{
+    jest.spyOn(__rspack_external__contexts_DataBrowserUICustomizationContext_js_f267b01c, 'useDataBrowserUICustomization').mockReturnValue(config);
+};
 const renderBucketList = (props = {})=>{
     const Wrapper = createTestWrapper();
     return render(/*#__PURE__*/ jsx(MemoryRouter, {
@@ -16,190 +20,169 @@ const renderBucketList = (props = {})=>{
 };
 const mockBuckets = [
     {
-        Name: "test-bucket-1",
-        CreationDate: new Date("2024-01-15T10:30:00Z")
+        Name: 'test-bucket-1',
+        CreationDate: new Date('2024-01-15T10:30:00Z')
     },
     {
-        Name: "test-bucket-2",
-        CreationDate: new Date("2024-01-16T14:45:00Z")
+        Name: 'test-bucket-2',
+        CreationDate: new Date('2024-01-16T14:45:00Z')
     },
     {
-        Name: "test-bucket-3",
-        CreationDate: new Date("2024-01-17T09:15:00Z")
+        Name: 'test-bucket-3',
+        CreationDate: new Date('2024-01-17T09:15:00Z')
     }
 ];
-describe("BucketList", ()=>{
+describe('BucketList', ()=>{
     beforeEach(()=>{
         jest.clearAllMocks();
         mockOffsetSize(800, 600);
+        mockUseDataBrowserUICustomization({});
     });
-    it("shows a table with proper headers", ()=>{
+    it('shows a table with proper headers', ()=>{
         renderBucketList({
             buckets: mockBuckets
         });
-        expect(screen.getByRole("grid")).toBeInTheDocument();
-        expect(screen.getByText("Bucket Name")).toBeInTheDocument();
-        expect(screen.getByText("Storage Location")).toBeInTheDocument();
-        expect(screen.getByText("Created on")).toBeInTheDocument();
+        expect(screen.getByRole('grid')).toBeInTheDocument();
+        expect(screen.getByText('Bucket Name')).toBeInTheDocument();
+        expect(screen.getByText('Storage Location')).toBeInTheDocument();
+        expect(screen.getByText('Created on')).toBeInTheDocument();
     });
-    it("displays buckets with their names as clickable links", ()=>{
+    it('displays buckets with their names as clickable links', ()=>{
         const onNavigateToBucket = jest.fn();
         renderBucketList({
             buckets: mockBuckets,
             onNavigateToBucket
         });
-        expect(screen.getByText("test-bucket-1")).toBeInTheDocument();
-        expect(screen.getByText("test-bucket-2")).toBeInTheDocument();
-        expect(screen.getByText("test-bucket-3")).toBeInTheDocument();
-        fireEvent.click(screen.getByText("test-bucket-1"));
-        expect(onNavigateToBucket).toHaveBeenCalledWith("test-bucket-1");
+        expect(screen.getByText('test-bucket-1')).toBeInTheDocument();
+        expect(screen.getByText('test-bucket-2')).toBeInTheDocument();
+        expect(screen.getByText('test-bucket-3')).toBeInTheDocument();
+        fireEvent.click(screen.getByText('test-bucket-1'));
+        expect(onNavigateToBucket).toHaveBeenCalledWith('test-bucket-1');
     });
-    it("displays creation dates in formatted format", ()=>{
+    it('displays creation dates in formatted format', ()=>{
         renderBucketList({
             buckets: mockBuckets
         });
-        const gridElement = screen.getByRole("grid");
-        expect(gridElement).toHaveTextContent("2024");
+        const gridElement = screen.getByRole('grid');
+        expect(gridElement).toHaveTextContent('2024');
         const dateElements = screen.getAllByText(/2024/);
         expect(dateElements.length).toBeGreaterThanOrEqual(3);
     });
-    it("shows storage location when renderBucketLocation is provided", ()=>{
-        const renderBucketLocation = jest.fn((bucketName)=>/*#__PURE__*/ jsxs("span", {
-                children: [
-                    "Location for ",
-                    bucketName
-                ]
-            }));
-        renderBucketList({
-            buckets: mockBuckets,
-            renderBucketLocation
-        });
-        expect(renderBucketLocation).toHaveBeenCalledWith("test-bucket-1");
-        expect(renderBucketLocation).toHaveBeenCalledWith("test-bucket-2");
-        expect(renderBucketLocation).toHaveBeenCalledWith("test-bucket-3");
-    });
-    it("shows dash for storage location when renderBucketLocation is not provided", ()=>{
-        renderBucketList({
-            buckets: mockBuckets
-        });
-        const dashes = screen.getAllByText("-");
-        expect(dashes.length).toBeGreaterThan(0);
-    });
-    it("handles bucket selection when onBucketSelect is provided", ()=>{
+    it('handles bucket selection when onBucketSelect is provided', ()=>{
         const onBucketSelect = jest.fn();
         renderBucketList({
             buckets: mockBuckets,
             onBucketSelect
         });
-        const rows = screen.getAllByRole("row");
+        const rows = screen.getAllByRole('row');
         fireEvent.click(rows[1]);
-        expect(onBucketSelect).toHaveBeenCalledWith("test-bucket-3");
+        expect(onBucketSelect).toHaveBeenCalledWith('test-bucket-3');
     });
-    it("shows selected bucket when selectedBucketName is provided", ()=>{
+    it('shows selected bucket when selectedBucketName is provided', ()=>{
         renderBucketList({
             buckets: mockBuckets,
-            selectedBucketName: "test-bucket-2"
+            selectedBucketName: 'test-bucket-2'
         });
-        const selectedRow = screen.getByRole("row", {
+        const selectedRow = screen.getByRole('row', {
             name: /test-bucket-2/
         });
-        expect(selectedRow).toHaveAttribute("aria-selected", "true");
+        expect(selectedRow).toHaveAttribute('aria-selected', 'true');
     });
-    it("handles create bucket button click", ()=>{
+    it('handles create bucket button click', ()=>{
         const onCreateBucket = jest.fn();
         renderBucketList({
             buckets: mockBuckets,
             onCreateBucket
         });
-        const createButton = screen.getByRole("button", {
+        const createButton = screen.getByRole('button', {
             name: /create bucket/i
         });
         expect(createButton).toBeInTheDocument();
         fireEvent.click(createButton);
         expect(onCreateBucket).toHaveBeenCalled();
     });
-    it("shows search functionality", ()=>{
+    it('shows search functionality', ()=>{
         renderBucketList({
             buckets: mockBuckets
         });
-        const searchInput = screen.getByRole("searchbox");
+        const searchInput = screen.getByRole('searchbox');
         expect(searchInput).toBeInTheDocument();
-        expect(searchInput).toHaveAttribute("placeholder", "Example: Search");
+        expect(searchInput).toHaveAttribute('placeholder', 'Example: Search');
     });
-    it("handles empty buckets list", ()=>{
+    it('handles empty buckets list', ()=>{
         renderBucketList({
             buckets: []
         });
-        expect(screen.getByRole("grid")).toBeInTheDocument();
-        expect(screen.getByText("Bucket Name")).toBeInTheDocument();
+        expect(screen.getByRole('grid')).toBeInTheDocument();
+        expect(screen.getByText('Bucket Name')).toBeInTheDocument();
     });
-    it("handles buckets without names gracefully", ()=>{
+    it('handles buckets without names gracefully', ()=>{
         const bucketsWithMissingNames = [
             {
                 Name: void 0,
                 CreationDate: new Date()
             },
             {
-                Name: "",
+                Name: '',
                 CreationDate: new Date()
             },
             {
-                Name: "valid-bucket",
+                Name: 'valid-bucket',
                 CreationDate: new Date()
             }
         ];
         renderBucketList({
             buckets: bucketsWithMissingNames
         });
-        expect(screen.getByText("valid-bucket")).toBeInTheDocument();
-        const dashes = screen.getAllByText("-");
+        expect(screen.getByText('valid-bucket')).toBeInTheDocument();
+        const dashes = screen.getAllByText('-');
         expect(dashes.length).toBeGreaterThan(0);
     });
-    it("handles buckets without creation dates", ()=>{
+    it('handles buckets without creation dates', ()=>{
         const bucketsWithoutDates = [
             {
-                Name: "bucket-1",
+                Name: 'bucket-1',
                 CreationDate: void 0
             },
             {
-                Name: "bucket-2"
+                Name: 'bucket-2'
             }
         ];
         renderBucketList({
             buckets: bucketsWithoutDates
         });
-        expect(screen.getByText("bucket-1")).toBeInTheDocument();
-        expect(screen.getByText("bucket-2")).toBeInTheDocument();
+        expect(screen.getByText('bucket-1')).toBeInTheDocument();
+        expect(screen.getByText('bucket-2')).toBeInTheDocument();
     });
-    it("works when no callbacks are provided", ()=>{
+    it('works when no callbacks are provided', ()=>{
         renderBucketList({
             buckets: mockBuckets
         });
         expect(()=>{
-            fireEvent.click(screen.getByText("test-bucket-1"));
-            const createButton = screen.getByRole("button", {
+            fireEvent.click(screen.getByText('test-bucket-1'));
+            const createButton = screen.getByRole('button', {
                 name: /create bucket/i
             });
             fireEvent.click(createButton);
         }).not.toThrow();
     });
-    it("handles different bucket statuses", ()=>{
+    it('handles different bucket statuses', ()=>{
         expect(()=>{
             renderBucketList({
                 buckets: mockBuckets,
-                bucketStatus: "loading"
+                bucketStatus: 'loading'
             });
             renderBucketList({
                 buckets: mockBuckets,
-                bucketStatus: "error"
+                bucketStatus: 'error'
             });
             renderBucketList({
                 buckets: mockBuckets,
-                bucketStatus: "success"
+                bucketStatus: 'success'
             });
         }).not.toThrow();
     });
-    it("prevents event propagation when clicking bucket name link", ()=>{
+    it('prevents event propagation when clicking bucket name link', ()=>{
         const onNavigateToBucket = jest.fn();
         const onBucketSelect = jest.fn();
         renderBucketList({
@@ -207,19 +190,450 @@ describe("BucketList", ()=>{
             onNavigateToBucket,
             onBucketSelect
         });
-        fireEvent.click(screen.getByText("test-bucket-1"));
-        expect(onNavigateToBucket).toHaveBeenCalledWith("test-bucket-1");
+        fireEvent.click(screen.getByText('test-bucket-1'));
+        expect(onNavigateToBucket).toHaveBeenCalledWith('test-bucket-1');
         expect(onBucketSelect).not.toHaveBeenCalled();
     });
-    it("does not select already selected bucket", ()=>{
+    it('does not select already selected bucket', ()=>{
         const onBucketSelect = jest.fn();
         renderBucketList({
             buckets: mockBuckets,
-            selectedBucketName: "test-bucket-1",
+            selectedBucketName: 'test-bucket-1',
             onBucketSelect
         });
-        const bucketName = screen.getByText("test-bucket-1");
+        const bucketName = screen.getByText('test-bucket-1');
         fireEvent.click(bucketName.closest('[role="row"]') || bucketName);
         expect(onBucketSelect).not.toHaveBeenCalled();
     });
+    describe('extraBucketListColumns support', ()=>{
+        it('renders extra columns when extraBucketListColumns is configured', ()=>{
+            const CustomColumn = ({ data })=>/*#__PURE__*/ jsxs("span", {
+                    children: [
+                        "Custom data for ",
+                        data.Name
+                    ]
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListColumns: [
+                    {
+                        id: 'customData',
+                        header: 'Custom Data',
+                        render: CustomColumn
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            expect(screen.getByText('Custom Data')).toBeInTheDocument();
+            expect(screen.getByText('Custom data for test-bucket-1')).toBeInTheDocument();
+            expect(screen.getByText('Custom data for test-bucket-2')).toBeInTheDocument();
+            expect(screen.getByText('Custom data for test-bucket-3')).toBeInTheDocument();
+        });
+        it('renders multiple extra columns in correct order', ()=>{
+            const ColumnA = ()=>/*#__PURE__*/ jsx("span", {
+                    children: "A"
+                });
+            const ColumnB = ()=>/*#__PURE__*/ jsx("span", {
+                    children: "B"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListColumns: [
+                    {
+                        id: 'columnA',
+                        header: 'Column A',
+                        render: ColumnA
+                    },
+                    {
+                        id: 'columnB',
+                        header: 'Column B',
+                        render: ColumnB
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            const headers = screen.getAllByRole('columnheader');
+            const headerTexts = headers.map((h)=>h.textContent);
+            expect(headerTexts).toContain('Bucket Name');
+            expect(headerTexts).toContain('Storage Location');
+            expect(headerTexts).toContain('Column A');
+            expect(headerTexts).toContain('Column B');
+            expect(headerTexts).toContain('Created on');
+            const bucketNameIndex = headerTexts.indexOf('Bucket Name');
+            const storageLocationIndex = headerTexts.indexOf('Storage Location');
+            const columnAIndex = headerTexts.indexOf('Column A');
+            const columnBIndex = headerTexts.indexOf('Column B');
+            const createdOnIndex = headerTexts.indexOf('Created on');
+            expect(bucketNameIndex).toBeLessThan(storageLocationIndex);
+            expect(storageLocationIndex).toBeLessThan(columnAIndex);
+            expect(columnAIndex).toBeLessThan(columnBIndex);
+            expect(columnBIndex).toBeLessThan(createdOnIndex);
+        });
+        it('works without extra columns (shows default columns)', ()=>{
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            const headers = screen.getAllByRole('columnheader');
+            const headerTexts = headers.map((h)=>h.textContent);
+            expect(headerTexts).toContain('Bucket Name');
+            expect(headerTexts).toContain('Storage Location');
+            expect(headerTexts).toContain('Created on');
+            expect(headerTexts).toHaveLength(3);
+        });
+        it('receives full bucket data in render component', ()=>{
+            const CustomColumn = jest.fn(({ data })=>/*#__PURE__*/ jsxs("span", {
+                    children: [
+                        "Bucket ",
+                        data.Name
+                    ]
+                }));
+            mockUseDataBrowserUICustomization({
+                extraBucketListColumns: [
+                    {
+                        id: 'customColumn',
+                        header: 'Custom',
+                        render: CustomColumn
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            expect(CustomColumn).toHaveBeenCalledWith(expect.objectContaining({
+                data: mockBuckets[0]
+            }), expect.anything());
+        });
+        it('supports custom column widths', ()=>{
+            const CustomColumn = ({ data })=>/*#__PURE__*/ jsxs("span", {
+                    children: [
+                        "Width: ",
+                        data.Name
+                    ]
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListColumns: [
+                    {
+                        id: 'customWidth',
+                        header: 'Custom Width',
+                        width: '200px',
+                        render: CustomColumn
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            expect(screen.getByText('Custom Width')).toBeInTheDocument();
+            expect(screen.getByText('Width: test-bucket-1')).toBeInTheDocument();
+        });
+        it('supports custom columns with IDs not in Bucket type (e.g., computed data)', ()=>{
+            const DataUsedColumn = ({ data })=>/*#__PURE__*/ jsxs("span", {
+                    children: [
+                        "Data used for ",
+                        data.Name
+                    ]
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListColumns: [
+                    {
+                        id: 'dataUsed',
+                        header: 'Data Used',
+                        render: DataUsedColumn
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            expect(screen.getByText('Data Used')).toBeInTheDocument();
+            expect(screen.getByText('Data used for test-bucket-1')).toBeInTheDocument();
+            expect(screen.getByText('Data used for test-bucket-2')).toBeInTheDocument();
+            expect(screen.getByText('Data used for test-bucket-3')).toBeInTheDocument();
+        });
+        it('supports mixing native and custom column IDs', ()=>{
+            const RegionColumn = ({ data })=>/*#__PURE__*/ jsxs("span", {
+                    children: [
+                        "Region: ",
+                        data.Name
+                    ]
+                });
+            const MetricsColumn = ({ data })=>/*#__PURE__*/ jsxs("span", {
+                    children: [
+                        "Metrics for ",
+                        data.Name
+                    ]
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListColumns: [
+                    {
+                        id: 'location',
+                        header: 'Region',
+                        render: RegionColumn
+                    },
+                    {
+                        id: 'customMetrics',
+                        header: 'Metrics',
+                        render: MetricsColumn
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            expect(screen.queryByText('Storage Location')).not.toBeInTheDocument();
+            expect(screen.getByText('Region')).toBeInTheDocument();
+            expect(screen.getByText('Metrics')).toBeInTheDocument();
+            expect(screen.getByText('Region: test-bucket-1')).toBeInTheDocument();
+            expect(screen.getByText('Metrics for test-bucket-1')).toBeInTheDocument();
+        });
+        it('can replace default columns by using matching IDs', ()=>{
+            const CustomLocationColumn = ({ data })=>/*#__PURE__*/ jsxs("span", {
+                    children: [
+                        "Custom location for ",
+                        data.Name
+                    ]
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListColumns: [
+                    {
+                        id: 'location',
+                        header: 'Custom Location',
+                        render: CustomLocationColumn
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            expect(screen.getByText('Custom Location')).toBeInTheDocument();
+            expect(screen.queryByText('Storage Location')).not.toBeInTheDocument();
+            expect(screen.getByText('Custom location for test-bucket-1')).toBeInTheDocument();
+            expect(screen.getByText('Custom location for test-bucket-2')).toBeInTheDocument();
+            expect(screen.getByText('Custom location for test-bucket-3')).toBeInTheDocument();
+        });
+        it('can replace multiple default columns simultaneously', ()=>{
+            const CustomLocationColumn = ({ data })=>/*#__PURE__*/ jsxs("span", {
+                    children: [
+                        "Loc: ",
+                        data.Name
+                    ]
+                });
+            const CustomDateColumn = ({ data })=>/*#__PURE__*/ jsxs("span", {
+                    children: [
+                        "Date: ",
+                        data.CreationDate?.toString()
+                    ]
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListColumns: [
+                    {
+                        id: 'location',
+                        header: 'Loc',
+                        render: CustomLocationColumn
+                    },
+                    {
+                        id: 'date',
+                        header: 'Date',
+                        render: CustomDateColumn
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            expect(screen.getByText('Loc')).toBeInTheDocument();
+            expect(screen.getByText('Date')).toBeInTheDocument();
+            expect(screen.queryByText('Storage Location')).not.toBeInTheDocument();
+            expect(screen.queryByText('Created on')).not.toBeInTheDocument();
+            expect(screen.getByText('Loc: test-bucket-1')).toBeInTheDocument();
+        });
+        it('maintains correct column order when replacing and adding columns', ()=>{
+            const CustomLocationColumn = ()=>/*#__PURE__*/ jsx("span", {
+                    children: "Custom Loc"
+                });
+            const ExtraColumn = ()=>/*#__PURE__*/ jsx("span", {
+                    children: "Extra"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListColumns: [
+                    {
+                        id: 'location',
+                        header: 'Custom Location',
+                        render: CustomLocationColumn
+                    },
+                    {
+                        id: 'extraData',
+                        header: 'Extra Data',
+                        render: ExtraColumn
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            const headers = screen.getAllByRole('columnheader');
+            const headerTexts = headers.map((h)=>h.textContent);
+            const bucketNameIndex = headerTexts.indexOf('Bucket Name');
+            const customLocationIndex = headerTexts.indexOf('Custom Location');
+            const extraDataIndex = headerTexts.indexOf('Extra Data');
+            const createdOnIndex = headerTexts.indexOf('Created on');
+            expect(bucketNameIndex).toBe(0);
+            expect(customLocationIndex).toBe(1);
+            expect(extraDataIndex).toBe(2);
+            expect(createdOnIndex).toBe(3);
+        });
+    });
+    describe('extraBucketListActions support', ()=>{
+        it('renders extra actions when extraBucketListActions is configured', ()=>{
+            const CustomAction = ()=>/*#__PURE__*/ jsx("button", {
+                    children: "Custom Action"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListActions: [
+                    {
+                        id: 'customAction',
+                        render: CustomAction
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            expect(screen.getByText('Custom Action')).toBeInTheDocument();
+        });
+        it('renders multiple extra actions', ()=>{
+            const Action1 = ()=>/*#__PURE__*/ jsx("button", {
+                    children: "Action 1"
+                });
+            const Action2 = ()=>/*#__PURE__*/ jsx("button", {
+                    children: "Action 2"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListActions: [
+                    {
+                        id: 'action1',
+                        render: Action1
+                    },
+                    {
+                        id: 'action2',
+                        render: Action2
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets
+            });
+            expect(screen.getByText('Action 1')).toBeInTheDocument();
+            expect(screen.getByText('Action 2')).toBeInTheDocument();
+        });
+        it('renders actions alongside default Create Bucket button', ()=>{
+            const CustomAction = ()=>/*#__PURE__*/ jsx("button", {
+                    children: "Export"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListActions: [
+                    {
+                        id: 'export',
+                        render: CustomAction
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets,
+                onCreateBucket: jest.fn()
+            });
+            expect(screen.getByText('Create Bucket')).toBeInTheDocument();
+            expect(screen.getByText('Export')).toBeInTheDocument();
+        });
+        it('works without extra actions', ()=>{
+            renderBucketList({
+                buckets: mockBuckets,
+                onCreateBucket: jest.fn()
+            });
+            expect(screen.getByText('Create Bucket')).toBeInTheDocument();
+        });
+        it("can replace default Create Bucket action by using 'createBucket' ID", ()=>{
+            const CustomCreateAction = ()=>/*#__PURE__*/ jsx("button", {
+                    children: "Custom Create"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListActions: [
+                    {
+                        id: 'createBucket',
+                        render: CustomCreateAction
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets,
+                onCreateBucket: jest.fn()
+            });
+            expect(screen.getByText('Custom Create')).toBeInTheDocument();
+            expect(screen.queryByText('Create Bucket')).not.toBeInTheDocument();
+        });
+        it('can mix replacing default action and adding new actions', ()=>{
+            const CustomCreateAction = ()=>/*#__PURE__*/ jsx("button", {
+                    children: "Custom Create"
+                });
+            const ExportAction = ()=>/*#__PURE__*/ jsx("button", {
+                    children: "Export"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListActions: [
+                    {
+                        id: 'createBucket',
+                        render: CustomCreateAction
+                    },
+                    {
+                        id: 'export',
+                        render: ExportAction
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets,
+                onCreateBucket: jest.fn()
+            });
+            expect(screen.getByText('Custom Create')).toBeInTheDocument();
+            expect(screen.getByText('Export')).toBeInTheDocument();
+            expect(screen.queryByText('Create Bucket')).not.toBeInTheDocument();
+        });
+        it('maintains correct action order when replacing and adding actions', ()=>{
+            const CustomCreateAction = ()=>/*#__PURE__*/ jsx("button", {
+                    children: "Custom Create"
+                });
+            const Action1 = ()=>/*#__PURE__*/ jsx("button", {
+                    children: "Action 1"
+                });
+            const Action2 = ()=>/*#__PURE__*/ jsx("button", {
+                    children: "Action 2"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketListActions: [
+                    {
+                        id: 'createBucket',
+                        render: CustomCreateAction
+                    },
+                    {
+                        id: 'action1',
+                        render: Action1
+                    },
+                    {
+                        id: 'action2',
+                        render: Action2
+                    }
+                ]
+            });
+            renderBucketList({
+                buckets: mockBuckets,
+                onCreateBucket: jest.fn()
+            });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).toHaveTextContent('Custom Create');
+            expect(buttons[1]).toHaveTextContent('Action 1');
+            expect(buttons[2]).toHaveTextContent('Action 2');
+        });
+    });
 });