@scality/data-browser-library 1.0.0-preview.2

package/dist/components/Editor.d.ts

@@ -0,0 +1,12 @@
+import { EditorProps, BeforeMount } from "@monaco-editor/react";
+interface EditorComponentProps {
+    value: string;
+    onChange: (value: string | undefined) => void;
+    readOnly?: boolean;
+    language?: string;
+    height?: string;
+    width?: string;
+    beforeMount?: BeforeMount;
+}
+export declare const Editor: React.FC<EditorComponentProps & EditorProps>;
+export {};

package/dist/components/Editor.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import react from "@monaco-editor/react";
+const Editor = ({ value, onChange, readOnly = false, language = "json", height = "400px", width = "100%", beforeMount, ...rest })=>{
+    const editorTheme = "vs-dark";
+    return /*#__PURE__*/ jsx(react, {
+        height: height,
+        width: width,
+        language: language,
+        value: value,
+        theme: editorTheme,
+        onChange: onChange,
+        options: {
+            readOnly,
+            scrollBeyondLastLine: false,
+            minimap: {
+                enabled: false
+            },
+            fontSize: 12,
+            lineNumbers: "on",
+            automaticLayout: true,
+            formatOnPaste: true,
+            formatOnType: true
+        },
+        beforeMount: beforeMount,
+        ...rest
+    });
+};
+export { Editor };

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

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

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

@@ -0,0 +1,225 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+const renderBucketList = (props = {})=>{
+    const Wrapper = createTestWrapper();
+    return render(/*#__PURE__*/ jsx(MemoryRouter, {
+        children: /*#__PURE__*/ jsx(Wrapper, {
+            children: /*#__PURE__*/ jsx(BucketList, {
+                buckets: [],
+                ...props
+            })
+        })
+    }));
+};
+const mockBuckets = [
+    {
+        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-3",
+        CreationDate: new Date("2024-01-17T09:15:00Z")
+    }
+];
+describe("BucketList", ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+        mockOffsetSize(800, 600);
+    });
+    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();
+    });
+    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");
+    });
+    it("displays creation dates in formatted format", ()=>{
+        renderBucketList({
+            buckets: mockBuckets
+        });
+        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", ()=>{
+        const onBucketSelect = jest.fn();
+        renderBucketList({
+            buckets: mockBuckets,
+            onBucketSelect
+        });
+        const rows = screen.getAllByRole("row");
+        fireEvent.click(rows[1]);
+        expect(onBucketSelect).toHaveBeenCalledWith("test-bucket-3");
+    });
+    it("shows selected bucket when selectedBucketName is provided", ()=>{
+        renderBucketList({
+            buckets: mockBuckets,
+            selectedBucketName: "test-bucket-2"
+        });
+        const selectedRow = screen.getByRole("row", {
+            name: /test-bucket-2/
+        });
+        expect(selectedRow).toHaveAttribute("aria-selected", "true");
+    });
+    it("handles create bucket button click", ()=>{
+        const onCreateBucket = jest.fn();
+        renderBucketList({
+            buckets: mockBuckets,
+            onCreateBucket
+        });
+        const createButton = screen.getByRole("button", {
+            name: /create bucket/i
+        });
+        expect(createButton).toBeInTheDocument();
+        fireEvent.click(createButton);
+        expect(onCreateBucket).toHaveBeenCalled();
+    });
+    it("shows search functionality", ()=>{
+        renderBucketList({
+            buckets: mockBuckets
+        });
+        const searchInput = screen.getByRole("searchbox");
+        expect(searchInput).toBeInTheDocument();
+        expect(searchInput).toHaveAttribute("placeholder", "Example: Search");
+    });
+    it("handles empty buckets list", ()=>{
+        renderBucketList({
+            buckets: []
+        });
+        expect(screen.getByRole("grid")).toBeInTheDocument();
+        expect(screen.getByText("Bucket Name")).toBeInTheDocument();
+    });
+    it("handles buckets without names gracefully", ()=>{
+        const bucketsWithMissingNames = [
+            {
+                Name: void 0,
+                CreationDate: new Date()
+            },
+            {
+                Name: "",
+                CreationDate: new Date()
+            },
+            {
+                Name: "valid-bucket",
+                CreationDate: new Date()
+            }
+        ];
+        renderBucketList({
+            buckets: bucketsWithMissingNames
+        });
+        expect(screen.getByText("valid-bucket")).toBeInTheDocument();
+        const dashes = screen.getAllByText("-");
+        expect(dashes.length).toBeGreaterThan(0);
+    });
+    it("handles buckets without creation dates", ()=>{
+        const bucketsWithoutDates = [
+            {
+                Name: "bucket-1",
+                CreationDate: void 0
+            },
+            {
+                Name: "bucket-2"
+            }
+        ];
+        renderBucketList({
+            buckets: bucketsWithoutDates
+        });
+        expect(screen.getByText("bucket-1")).toBeInTheDocument();
+        expect(screen.getByText("bucket-2")).toBeInTheDocument();
+    });
+    it("works when no callbacks are provided", ()=>{
+        renderBucketList({
+            buckets: mockBuckets
+        });
+        expect(()=>{
+            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", ()=>{
+        expect(()=>{
+            renderBucketList({
+                buckets: mockBuckets,
+                bucketStatus: "loading"
+            });
+            renderBucketList({
+                buckets: mockBuckets,
+                bucketStatus: "error"
+            });
+            renderBucketList({
+                buckets: mockBuckets,
+                bucketStatus: "success"
+            });
+        }).not.toThrow();
+    });
+    it("prevents event propagation when clicking bucket name link", ()=>{
+        const onNavigateToBucket = jest.fn();
+        const onBucketSelect = jest.fn();
+        renderBucketList({
+            buckets: mockBuckets,
+            onNavigateToBucket,
+            onBucketSelect
+        });
+        fireEvent.click(screen.getByText("test-bucket-1"));
+        expect(onNavigateToBucket).toHaveBeenCalledWith("test-bucket-1");
+        expect(onBucketSelect).not.toHaveBeenCalled();
+    });
+    it("does not select already selected bucket", ()=>{
+        const onBucketSelect = jest.fn();
+        renderBucketList({
+            buckets: mockBuckets,
+            selectedBucketName: "test-bucket-1",
+            onBucketSelect
+        });
+        const bucketName = screen.getByText("test-bucket-1");
+        fireEvent.click(bucketName.closest('[role="row"]') || bucketName);
+        expect(onBucketSelect).not.toHaveBeenCalled();
+    });
+});

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

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