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

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

@@ -3,6 +3,11 @@ 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 __WEBPACK_EXTERNAL_MODULE__contexts_DataBrowserUICustomizationContext_js_f267b01c__ from "../../contexts/DataBrowserUICustomizationContext.js";
+jest.mock("../../contexts/DataBrowserUICustomizationContext");
+const mockUseDataBrowserUICustomization = (config = {})=>{
+    jest.spyOn(__WEBPACK_EXTERNAL_MODULE__contexts_DataBrowserUICustomizationContext_js_f267b01c__, "useDataBrowserUICustomization").mockReturnValue(config);
+};
 const renderBucketList = (props = {})=>{
     const Wrapper = createTestWrapper();
     return render(/*#__PURE__*/ jsx(MemoryRouter, {
@@ -32,6 +37,7 @@ describe("BucketList", ()=>{
     beforeEach(()=>{
         jest.clearAllMocks();
         mockOffsetSize(800, 600);
+        mockUseDataBrowserUICustomization({});
     });
     it("shows a table with proper headers", ()=>{
         renderBucketList({
@@ -63,28 +69,6 @@ describe("BucketList", ()=>{
         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", ()=>{
         const onBucketSelect = jest.fn();
         renderBucketList({
@@ -222,47 +206,54 @@ describe("BucketList", ()=>{
         fireEvent.click(bucketName.closest('[role="row"]') || bucketName);
         expect(onBucketSelect).not.toHaveBeenCalled();
     });
-    describe("additionalColumns support", ()=>{
-        it("renders additional columns when additionalColumns prop is provided", ()=>{
-            const additionalColumns = [
-                {
-                    Header: "Metrics",
-                    accessor: "metrics",
-                    id: "metrics",
-                    Cell: ()=>/*#__PURE__*/ jsx("span", {
-                            children: "Metrics Data"
-                        })
-                }
-            ];
+    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,
-                additionalColumns
+                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
+                    }
+                ]
             });
-            expect(screen.getByText("Metrics")).toBeInTheDocument();
-            expect(screen.getAllByText("Metrics Data")).toHaveLength(3);
-        });
-        it("renders multiple additional columns in correct order", ()=>{
-            const additionalColumns = [
-                {
-                    Header: "Column A",
-                    accessor: "columnA",
-                    id: "columnA",
-                    Cell: ()=>/*#__PURE__*/ jsx("span", {
-                            children: "A"
-                        })
-                },
-                {
-                    Header: "Column B",
-                    accessor: "columnB",
-                    id: "columnB",
-                    Cell: ()=>/*#__PURE__*/ jsx("span", {
-                            children: "B"
-                        })
-                }
-            ];
             renderBucketList({
-                buckets: mockBuckets,
-                additionalColumns
+                buckets: mockBuckets
             });
             const headers = screen.getAllByRole("columnheader");
             const headerTexts = headers.map((h)=>h.textContent);
@@ -281,7 +272,7 @@ describe("BucketList", ()=>{
             expect(columnAIndex).toBeLessThan(columnBIndex);
             expect(columnBIndex).toBeLessThan(createdOnIndex);
         });
-        it("works without additional columns (backward compatibility)", ()=>{
+        it("works without extra columns (shows default columns)", ()=>{
             renderBucketList({
                 buckets: mockBuckets
             });
@@ -292,124 +283,358 @@ describe("BucketList", ()=>{
             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("transformBucketData support", ()=>{
-        it("transforms bucket data when transformBucketData is provided", ()=>{
-            const transformBucketData = jest.fn((bucket)=>({
-                    ...bucket,
-                    metrics: {
-                        value: 100
+    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
                     }
-                }));
-            const additionalColumns = [
-                {
-                    Header: "Metrics",
-                    accessor: "metrics",
-                    id: "metrics",
-                    Cell: ({ value })=>/*#__PURE__*/ jsxs("span", {
-                            children: [
-                                "Value: ",
-                                value.value
-                            ]
-                        })
-                }
-            ];
+                ]
+            });
             renderBucketList({
-                buckets: mockBuckets,
-                additionalColumns,
-                transformBucketData
-            });
-            expect(transformBucketData).toHaveBeenCalledTimes(3);
-            expect(transformBucketData).toHaveBeenCalledWith(mockBuckets[0]);
-            expect(transformBucketData).toHaveBeenCalledWith(mockBuckets[1]);
-            expect(transformBucketData).toHaveBeenCalledWith(mockBuckets[2]);
-        });
-        it("renders transformed data in additional columns", ()=>{
-            const transformBucketData = (bucket)=>({
-                    ...bucket,
-                    metrics: {
-                        value: "test-bucket-1" === bucket.Name ? 50 : 100
+                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"
                 });
-            const additionalColumns = [
-                {
-                    Header: "Metrics",
-                    accessor: "metrics",
-                    id: "metrics",
-                    Cell: ({ value })=>/*#__PURE__*/ jsxs("span", {
-                            children: [
-                                "Metric: ",
-                                value.value
-                            ]
-                        })
-                }
-            ];
+            mockUseDataBrowserUICustomization({
+                extraBucketListActions: [
+                    {
+                        id: "export",
+                        render: CustomAction
+                    }
+                ]
+            });
             renderBucketList({
                 buckets: mockBuckets,
-                additionalColumns,
-                transformBucketData
-            });
-            expect(screen.getByText("Metric: 50")).toBeInTheDocument();
-            expect(screen.getAllByText("Metric: 100")).toHaveLength(2);
-        });
-        it("works without transformBucketData (uses default behavior)", ()=>{
-            const additionalColumns = [
-                {
-                    Header: "Test Column",
-                    accessor: "Name",
-                    id: "testColumn",
-                    Cell: ({ value })=>/*#__PURE__*/ jsxs("span", {
-                            children: [
-                                "Name: ",
-                                value
-                            ]
-                        })
-                }
-            ];
+                onCreateBucket: jest.fn()
+            });
+            expect(screen.getByText("Create Bucket")).toBeInTheDocument();
+            expect(screen.getByText("Export")).toBeInTheDocument();
+        });
+        it("works without extra actions", ()=>{
             renderBucketList({
                 buckets: mockBuckets,
-                additionalColumns
+                onCreateBucket: jest.fn()
             });
-            expect(screen.getByText("Name: test-bucket-1")).toBeInTheDocument();
-            expect(screen.getByText("Name: test-bucket-2")).toBeInTheDocument();
-            expect(screen.getByText("Name: test-bucket-3")).toBeInTheDocument();
+            expect(screen.getByText("Create Bucket")).toBeInTheDocument();
         });
-    });
-    describe("generic type support", ()=>{
-        it("maintains type safety with extended bucket types", ()=>{
-            const transformBucketData = (bucket)=>({
-                    ...bucket,
-                    customField: `Custom ${bucket.Name}`,
-                    numericField: 42
+        it("can replace default Create Bucket action by using 'createBucket' ID", ()=>{
+            const CustomCreateAction = ()=>/*#__PURE__*/ jsx("button", {
+                    children: "Custom Create"
                 });
-            const additionalColumns = [
-                {
-                    Header: "Custom",
-                    accessor: "customField",
-                    id: "custom",
-                    Cell: ({ value })=>/*#__PURE__*/ jsx("span", {
-                            children: value
-                        })
-                },
-                {
-                    Header: "Number",
-                    accessor: "numericField",
-                    id: "numeric",
-                    Cell: ({ value })=>/*#__PURE__*/ jsxs("span", {
-                            children: [
-                                "Num: ",
-                                value
-                            ]
-                        })
-                }
-            ];
+            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,
-                additionalColumns,
-                transformBucketData
+                onCreateBucket: jest.fn()
             });
-            expect(screen.getByText("Custom test-bucket-1")).toBeInTheDocument();
-            expect(screen.getAllByText("Num: 42")).toHaveLength(3);
+            const buttons = screen.getAllByRole("button");
+            expect(buttons[0]).toHaveTextContent("Custom Create");
+            expect(buttons[1]).toHaveTextContent("Action 1");
+            expect(buttons[2]).toHaveTextContent("Action 2");
         });
     });
 });