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

package/dist/components/DataBrowserUI.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { DataBrowserUIProps } from "../config/types";
+/**
+ * DataBrowserUI component - Main UI component for data browser.
+ * Must be wrapped with DataBrowserProvider for S3 client and theme context,
+ * and a BrowserRouter for routing.
+ *
+ * @example
+ * ```tsx
+ * <BrowserRouter basename="/data-browser">
+ *   <DataBrowserProvider getS3Config={getS3Config} theme={theme}>
+ *     <DataBrowserUI
+ *       extraBucketListColumns={[...]}
+ *       extraObjectListActions={[...]}
+ *     />
+ *   </DataBrowserProvider>
+ * </BrowserRouter>
+ * ```
+ */
+export declare const DataBrowserUI: React.FC<DataBrowserUIProps>;

package/dist/components/DataBrowserUI.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { DataBrowserUICustomizationProvider } from "../contexts/DataBrowserUICustomizationContext.js";
+import { BucketCreate, BucketLifecycleFormPage, BucketNotificationCreatePage, BucketPage, BucketPolicyPage, BucketReplicationFormPage, ObjectLockSettings, ObjectPage } from "./index.js";
+const DataBrowserUI = (props)=>/*#__PURE__*/ jsx(DataBrowserUICustomizationProvider, {
+        config: props,
+        children: /*#__PURE__*/ jsxs(Routes, {
+            children: [
+                /*#__PURE__*/ jsx(Route, {
+                    path: "/",
+                    element: /*#__PURE__*/ jsx(Navigate, {
+                        to: "/buckets",
+                        replace: true
+                    })
+                }),
+                /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets",
+                    element: /*#__PURE__*/ jsx(BucketPage, {})
+                }),
+                /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/-/create",
+                    element: /*#__PURE__*/ jsx(BucketCreate, {})
+                }),
+                /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/:bucketName/*",
+                    element: /*#__PURE__*/ jsx(BucketPage, {})
+                }),
+                /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/:bucketName/policy",
+                    element: /*#__PURE__*/ jsx(BucketPolicyPage, {})
+                }),
+                /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/:bucketName/objects",
+                    element: /*#__PURE__*/ jsx(ObjectPage, {})
+                }),
+                /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/:bucketName/notifications/create",
+                    element: /*#__PURE__*/ jsx(BucketNotificationCreatePage, {})
+                }),
+                /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/:bucketName/lifecycle/create",
+                    element: /*#__PURE__*/ jsx(BucketLifecycleFormPage, {})
+                }),
+                /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/:bucketName/lifecycle/edit/:ruleId",
+                    element: /*#__PURE__*/ jsx(BucketLifecycleFormPage, {})
+                }),
+                /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/:bucketName/replication/create",
+                    element: /*#__PURE__*/ jsx(BucketReplicationFormPage, {})
+                }),
+                /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/:bucketName/replication/edit/:ruleId",
+                    element: /*#__PURE__*/ jsx(BucketReplicationFormPage, {})
+                }),
+                /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/:bucketName/objects/object-lock-settings",
+                    element: /*#__PURE__*/ jsx(ObjectLockSettings, {})
+                })
+            ]
+        })
+    });
+export { DataBrowserUI };

package/dist/components/__tests__/BucketDetails.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,421 @@
+import { jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { BucketDetails } from "../buckets/BucketDetails.js";
+import { applyBucketMocks, createTestWrapper } from "../../test/testUtils.js";
+import { useGetBucketAcl, useGetBucketCors, useGetBucketLifecycle, useGetBucketLocation, useGetBucketObjectLockConfiguration, useGetBucketPolicy, useGetBucketReplication, useGetBucketTagging, useGetBucketVersioning } from "../../hooks/index.js";
+import { useISVBucketStatus } from "../../hooks/useISVBucketDetection.js";
+import { useFeatures } from "../../utils/useFeatures.js";
+import * as __WEBPACK_EXTERNAL_MODULE__contexts_DataBrowserUICustomizationContext_js_f267b01c__ from "../../contexts/DataBrowserUICustomizationContext.js";
+jest.mock("../../hooks");
+jest.mock("../../hooks/useISVBucketDetection");
+jest.mock("../../utils/useFeatures");
+jest.mock("../../contexts/DataBrowserUICustomizationContext");
+const mockUseParams = jest.fn();
+const mockUseNavigate = jest.fn();
+jest.mock("react-router-dom", ()=>({
+        ...jest.requireActual("react-router-dom"),
+        useParams: ()=>mockUseParams(),
+        useNavigate: ()=>mockUseNavigate()
+    }));
+const mockUseGetBucketLifecycle = jest.mocked(useGetBucketLifecycle);
+const mockUseGetBucketReplication = jest.mocked(useGetBucketReplication);
+const mockUseGetBucketVersioning = jest.mocked(useGetBucketVersioning);
+const mockUseGetBucketAcl = jest.mocked(useGetBucketAcl);
+const mockUseGetBucketCors = jest.mocked(useGetBucketCors);
+const mockUseGetBucketObjectLockConfiguration = jest.mocked(useGetBucketObjectLockConfiguration);
+const mockUseGetBucketPolicy = jest.mocked(useGetBucketPolicy);
+const mockUseGetBucketLocation = jest.mocked(useGetBucketLocation);
+const mockUseGetBucketTagging = jest.mocked(useGetBucketTagging);
+const mockUseISVBucketStatus = jest.mocked(useISVBucketStatus);
+const mockUseFeatures = jest.mocked(useFeatures);
+const mockUseDataBrowserUICustomization = (config = {})=>{
+    jest.spyOn(__WEBPACK_EXTERNAL_MODULE__contexts_DataBrowserUICustomizationContext_js_f267b01c__, "useDataBrowserUICustomization").mockReturnValue(config);
+};
+const renderBucketDetails = ()=>{
+    const Wrapper = createTestWrapper();
+    return render(/*#__PURE__*/ jsx(MemoryRouter, {
+        initialEntries: [
+            "/buckets/test-bucket"
+        ],
+        children: /*#__PURE__*/ jsx(Wrapper, {
+            children: /*#__PURE__*/ jsx(BucketDetails, {})
+        })
+    }));
+};
+const mockHookDefaults = (overrides = {})=>{
+    applyBucketMocks({
+        useGetBucketVersioning: mockUseGetBucketVersioning,
+        useGetBucketAcl: mockUseGetBucketAcl,
+        useGetBucketLocation: mockUseGetBucketLocation,
+        useGetBucketCors: mockUseGetBucketCors,
+        useGetBucketObjectLockConfiguration: mockUseGetBucketObjectLockConfiguration,
+        useGetBucketPolicy: mockUseGetBucketPolicy,
+        useGetBucketTagging: mockUseGetBucketTagging,
+        useGetBucketLifecycle: mockUseGetBucketLifecycle,
+        useGetBucketReplication: mockUseGetBucketReplication,
+        useISVBucketStatus: mockUseISVBucketStatus,
+        useFeatures: mockUseFeatures
+    }, overrides);
+};
+describe("BucketDetails", ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+        mockHookDefaults();
+        mockUseDataBrowserUICustomization({});
+        mockUseParams.mockReturnValue({
+            bucketName: "test-bucket"
+        });
+        mockUseNavigate.mockReturnValue(jest.fn());
+    });
+    it("renders all default tabs", async ()=>{
+        renderBucketDetails();
+        await waitFor(()=>{
+            expect(screen.getByText("Overview")).toBeInTheDocument();
+            expect(screen.getByText("Lifecycle")).toBeInTheDocument();
+            expect(screen.getByText("Replication")).toBeInTheDocument();
+        });
+    });
+    it("shows overview tab content by default", ()=>{
+        renderBucketDetails();
+        const overviewTab = screen.getByText("Overview").closest('[role="tab"]');
+        expect(overviewTab).toHaveAttribute("class", expect.stringContaining("selected"));
+    });
+    it("handles lifecycle data loading", ()=>{
+        mockUseGetBucketLifecycle.mockReturnValue({
+            data: void 0,
+            status: "pending",
+            error: null
+        });
+        renderBucketDetails();
+        expect(screen.getByText("Lifecycle")).toBeInTheDocument();
+    });
+    it("handles lifecycle error gracefully", ()=>{
+        mockUseGetBucketLifecycle.mockReturnValue({
+            data: void 0,
+            status: "error",
+            error: new Error("Failed to fetch")
+        });
+        renderBucketDetails();
+        expect(screen.getByText("Lifecycle")).toBeInTheDocument();
+    });
+    it("handles lifecycle 404 as success", ()=>{
+        const notFoundError = new Error("Not found");
+        notFoundError.name = "NoSuchLifecycleConfiguration";
+        notFoundError.$metadata = {
+            httpStatusCode: 404
+        };
+        mockUseGetBucketLifecycle.mockReturnValue({
+            data: void 0,
+            status: "error",
+            error: notFoundError
+        });
+        renderBucketDetails();
+        expect(screen.getByText("Lifecycle")).toBeInTheDocument();
+    });
+    it("displays lifecycle rules when available", ()=>{
+        mockUseGetBucketLifecycle.mockReturnValue({
+            data: {
+                Rules: [
+                    {
+                        ID: "rule-1",
+                        Status: "Enabled",
+                        Filter: {}
+                    },
+                    {
+                        ID: "rule-2",
+                        Status: "Disabled",
+                        Filter: {}
+                    }
+                ]
+            },
+            status: "success",
+            error: null
+        });
+        renderBucketDetails();
+        expect(screen.getByText("Lifecycle")).toBeInTheDocument();
+    });
+    it("handles replication data loading", ()=>{
+        mockUseGetBucketReplication.mockReturnValue({
+            data: void 0,
+            status: "pending",
+            error: null
+        });
+        renderBucketDetails();
+        expect(screen.getByText("Replication")).toBeInTheDocument();
+    });
+    it("handles replication error gracefully", ()=>{
+        mockUseGetBucketReplication.mockReturnValue({
+            data: void 0,
+            status: "error",
+            error: new Error("Failed to fetch")
+        });
+        renderBucketDetails();
+        expect(screen.getByText("Replication")).toBeInTheDocument();
+    });
+    it("handles replication 404 as success", ()=>{
+        const notFoundError = new Error("Not found");
+        notFoundError.name = "ReplicationConfigurationNotFoundError";
+        notFoundError.$metadata = {
+            httpStatusCode: 404
+        };
+        mockUseGetBucketReplication.mockReturnValue({
+            data: void 0,
+            status: "error",
+            error: notFoundError
+        });
+        renderBucketDetails();
+        expect(screen.getByText("Replication")).toBeInTheDocument();
+    });
+    it("displays replication rules when available", ()=>{
+        mockUseGetBucketReplication.mockReturnValue({
+            data: {
+                ReplicationConfiguration: {
+                    Role: "arn:aws:iam::123456789012:role/replication-role",
+                    Rules: [
+                        {
+                            ID: "repl-rule-1",
+                            Status: "Enabled",
+                            Priority: 1,
+                            Destination: {
+                                Bucket: "arn:aws:s3:::destination-bucket"
+                            }
+                        }
+                    ]
+                }
+            },
+            status: "success",
+            error: null
+        });
+        renderBucketDetails();
+        expect(screen.getByText("Replication")).toBeInTheDocument();
+    });
+    it("shows message when bucket name is missing", ()=>{
+        mockUseParams.mockReturnValue({
+            bucketName: void 0
+        });
+        renderBucketDetails();
+        expect(screen.getByText("No bucket selected")).toBeInTheDocument();
+    });
+    describe("extraBucketTabs support", ()=>{
+        it("renders extra tabs when configured", async ()=>{
+            const CustomTab = ()=>/*#__PURE__*/ jsx("div", {
+                    children: "Custom Tab Content"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketTabs: [
+                    {
+                        id: "customTab",
+                        title: "Custom Tab",
+                        render: CustomTab
+                    }
+                ]
+            });
+            renderBucketDetails();
+            await waitFor(()=>{
+                expect(screen.getByText("Custom Tab")).toBeInTheDocument();
+            });
+        });
+        it("renders multiple extra tabs", async ()=>{
+            const Tab1 = ()=>/*#__PURE__*/ jsx("div", {
+                    children: "Tab 1 Content"
+                });
+            const Tab2 = ()=>/*#__PURE__*/ jsx("div", {
+                    children: "Tab 2 Content"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketTabs: [
+                    {
+                        id: "tab1",
+                        title: "Tab 1",
+                        render: Tab1
+                    },
+                    {
+                        id: "tab2",
+                        title: "Tab 2",
+                        render: Tab2
+                    }
+                ]
+            });
+            renderBucketDetails();
+            await waitFor(()=>{
+                expect(screen.getByText("Tab 1")).toBeInTheDocument();
+                expect(screen.getByText("Tab 2")).toBeInTheDocument();
+            });
+        });
+        it("can replace default tabs using matching IDs", async ()=>{
+            const CustomOverview = ()=>/*#__PURE__*/ jsx("div", {
+                    children: "Custom Overview Content"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketTabs: [
+                    {
+                        id: "overview",
+                        title: "Custom Overview",
+                        render: CustomOverview
+                    }
+                ]
+            });
+            renderBucketDetails();
+            await waitFor(()=>{
+                expect(screen.getByText("Custom Overview")).toBeInTheDocument();
+                expect(screen.queryByText("Overview")).not.toBeInTheDocument();
+            });
+        });
+        it("supports withoutPadding option for extra tabs", async ()=>{
+            const CustomTab = ()=>/*#__PURE__*/ jsx("div", {
+                    children: "No Padding Content"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketTabs: [
+                    {
+                        id: "noPaddingTab",
+                        title: "No Padding",
+                        withoutPadding: true,
+                        render: CustomTab
+                    }
+                ]
+            });
+            renderBucketDetails();
+            await waitFor(()=>{
+                expect(screen.getByText("No Padding")).toBeInTheDocument();
+            });
+        });
+        it("supports custom path for extra tabs", async ()=>{
+            const CustomTab = ()=>/*#__PURE__*/ jsx("div", {
+                    children: "Custom Path Content"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketTabs: [
+                    {
+                        id: "customPath",
+                        title: "Custom Path Tab",
+                        path: "/custom-path",
+                        render: CustomTab
+                    }
+                ]
+            });
+            renderBucketDetails();
+            await waitFor(()=>{
+                expect(screen.getByText("Custom Path Tab")).toBeInTheDocument();
+            });
+        });
+        it("maintains correct tab order with extra tabs", async ()=>{
+            const ExtraTab = ()=>/*#__PURE__*/ jsx("div", {
+                    children: "Extra Tab Content"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketTabs: [
+                    {
+                        id: "extraTab",
+                        title: "Extra Tab",
+                        render: ExtraTab
+                    }
+                ]
+            });
+            renderBucketDetails();
+            await waitFor(()=>{
+                const tabs = screen.getAllByRole("tab");
+                const tabTexts = tabs.map((tab)=>tab.textContent);
+                expect(tabTexts).toEqual([
+                    "Overview",
+                    "Lifecycle",
+                    "Replication",
+                    "Extra Tab"
+                ]);
+            });
+        });
+        it("can replace lifecycle tab", async ()=>{
+            const CustomLifecycle = ()=>/*#__PURE__*/ jsx("div", {
+                    children: "Custom Lifecycle Content"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketTabs: [
+                    {
+                        id: "lifecycle",
+                        title: "Custom Lifecycle",
+                        render: CustomLifecycle
+                    }
+                ]
+            });
+            renderBucketDetails();
+            await waitFor(()=>{
+                expect(screen.getByText("Custom Lifecycle")).toBeInTheDocument();
+                expect(screen.queryByText("Lifecycle")).not.toBeInTheDocument();
+            });
+        });
+        it("can replace replication tab", async ()=>{
+            const CustomReplication = ()=>/*#__PURE__*/ jsx("div", {
+                    children: "Custom Replication Content"
+                });
+            mockUseDataBrowserUICustomization({
+                extraBucketTabs: [
+                    {
+                        id: "replication",
+                        title: "Custom Replication",
+                        render: CustomReplication
+                    }
+                ]
+            });
+            renderBucketDetails();
+            await waitFor(()=>{
+                expect(screen.getByText("Custom Replication")).toBeInTheDocument();
+                expect(screen.queryByText("Replication")).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe("Tab query parameters", ()=>{
+        it("creates correct query object for overview tab", ()=>{
+            renderBucketDetails();
+            const overviewTab = screen.getByText("Overview");
+            expect(overviewTab).toBeInTheDocument();
+            expect(overviewTab.closest('[role="tab"]')).toBeInTheDocument();
+        });
+        it("creates correct query object for lifecycle tab", ()=>{
+            renderBucketDetails();
+            const lifecycleTab = screen.getByText("Lifecycle");
+            expect(lifecycleTab).toBeInTheDocument();
+            expect(lifecycleTab.closest('[role="tab"]')).toBeInTheDocument();
+        });
+        it("creates correct query object for replication tab", ()=>{
+            renderBucketDetails();
+            const replicationTab = screen.getByText("Replication");
+            expect(replicationTab).toBeInTheDocument();
+            expect(replicationTab.closest('[role="tab"]')).toBeInTheDocument();
+        });
+    });
+    describe("Status transformation", ()=>{
+        it("transforms pending status to loading", ()=>{
+            mockUseGetBucketLifecycle.mockReturnValue({
+                data: void 0,
+                status: "pending",
+                error: null
+            });
+            renderBucketDetails();
+            expect(screen.getByText("Lifecycle")).toBeInTheDocument();
+        });
+        it("transforms error status correctly", ()=>{
+            mockUseGetBucketLifecycle.mockReturnValue({
+                data: void 0,
+                status: "error",
+                error: new Error("Generic error")
+            });
+            renderBucketDetails();
+            expect(screen.getByText("Lifecycle")).toBeInTheDocument();
+        });
+        it("transforms 404 error to success", ()=>{
+            const notFoundError = new Error("Not found");
+            notFoundError.name = "NoSuchLifecycleConfiguration";
+            notFoundError.$metadata = {
+                httpStatusCode: 404
+            };
+            mockUseGetBucketLifecycle.mockReturnValue({
+                data: void 0,
+                status: "error",
+                error: notFoundError
+            });
+            renderBucketDetails();
+            expect(screen.getByText("Lifecycle")).toBeInTheDocument();
+        });
+    });
+});