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

package/dist/components/DataBrowserUI.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+import type { DataBrowserUIProps } from '../config/types';
+/**
+ * DataBrowserUI component - Main UI component for data browser.
+ * Must be wrapped with DataBrowserProvider for S3 configuration context,
+ * and a BrowserRouter for routing.
+ *
+ * Uses relative routing for route definitions. The `basePath` prop is used internally
+ * by `useDataBrowserNavigate()` to prefix all navigation paths, allowing the UI to be
+ * mounted at any route within your application.
+ */
+export declare const DataBrowserUI: React.FC<DataBrowserUIProps>;

package/dist/components/DataBrowserUI.js

@@ -0,0 +1,99 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AppContainer } from "@scality/core-ui";
+import { Route, Routes } from "react-router";
+import styled_components from "styled-components";
+import { DataBrowserUICustomizationProvider } from "../contexts/DataBrowserUICustomizationContext.js";
+import { useS3ConfigSwitch } from "../hooks/useS3ConfigSwitch.js";
+import { BucketAccessor, BucketCorsPage, BucketCreate, BucketLifecycleFormPage, BucketNotificationFormPage, BucketPage, BucketPolicyPage, BucketReplicationFormPage, ObjectLockSettings, ObjectPage } from "./index.js";
+const RoutesContainer = styled_components.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+`;
+const DataBrowserUIContent = ({ header })=>{
+    useS3ConfigSwitch();
+    return /*#__PURE__*/ jsx(AppContainer, {
+        children: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                header && /*#__PURE__*/ jsx(AppContainer.ContextContainer, {
+                    children: /*#__PURE__*/ jsx("div", {
+                        children: header
+                    })
+                }),
+                /*#__PURE__*/ jsx(AppContainer.MainContent, {
+                    children: /*#__PURE__*/ jsx(RoutesContainer, {
+                        children: /*#__PURE__*/ jsxs(Routes, {
+                            children: [
+                                /*#__PURE__*/ jsx(Route, {
+                                    index: true,
+                                    element: /*#__PURE__*/ jsx(BucketPage, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: "-/access",
+                                    element: /*#__PURE__*/ jsx(BucketAccessor, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: "-/create",
+                                    element: /*#__PURE__*/ jsx(BucketCreate, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: ":bucketName/objects/object-lock-settings",
+                                    element: /*#__PURE__*/ jsx(ObjectLockSettings, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: ":bucketName/lifecycle/edit/:ruleId",
+                                    element: /*#__PURE__*/ jsx(BucketLifecycleFormPage, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: ":bucketName/lifecycle/create",
+                                    element: /*#__PURE__*/ jsx(BucketLifecycleFormPage, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: ":bucketName/replication/edit/:ruleId",
+                                    element: /*#__PURE__*/ jsx(BucketReplicationFormPage, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: ":bucketName/replication/create",
+                                    element: /*#__PURE__*/ jsx(BucketReplicationFormPage, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: ":bucketName/notifications/edit/:ruleId",
+                                    element: /*#__PURE__*/ jsx(BucketNotificationFormPage, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: ":bucketName/notifications/create",
+                                    element: /*#__PURE__*/ jsx(BucketNotificationFormPage, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: ":bucketName/objects",
+                                    element: /*#__PURE__*/ jsx(ObjectPage, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: ":bucketName/policy",
+                                    element: /*#__PURE__*/ jsx(BucketPolicyPage, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: ":bucketName/cors",
+                                    element: /*#__PURE__*/ jsx(BucketCorsPage, {})
+                                }),
+                                /*#__PURE__*/ jsx(Route, {
+                                    path: ":bucketName/*",
+                                    element: /*#__PURE__*/ jsx(BucketPage, {})
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+const DataBrowserUI = (props)=>/*#__PURE__*/ jsx(DataBrowserUICustomizationProvider, {
+        config: props,
+        children: /*#__PURE__*/ jsx(DataBrowserUIContent, {
+            header: props.header
+        })
+    });
+export { DataBrowserUI };

package/dist/components/Editor.d.ts

@@ -1,4 +1,4 @@
-import { EditorProps, BeforeMount } from "@monaco-editor/react";
+import { type BeforeMount, type EditorProps } from '@monaco-editor/react';
 interface EditorComponentProps {
     value: string;
     onChange: (value: string | undefined) => void;

package/dist/components/Editor.js

@@ -1,7 +1,7 @@
 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";
+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,
@@ -16,7 +16,7 @@ const Editor = ({ value, onChange, readOnly = false, language = "json", height =
                 enabled: false
             },
             fontSize: 12,
-            lineNumbers: "on",
+            lineNumbers: 'on',
             automaticLayout: true,
             formatOnPaste: true,
             formatOnType: true

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

@@ -0,0 +1,214 @@
+import { jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from "@testing-library/react";
+import user_event from "@testing-library/user-event";
+import { MemoryRouter } from "react-router";
+import { useAccessibleBuckets, useValidateBucketAccess } from "../../hooks/index.js";
+import { createTestWrapper } from "../../test/testUtils.js";
+import { BucketAccessor } from "../buckets/BucketAccessor.js";
+jest.mock('../../hooks', ()=>({
+        useAccessibleBuckets: jest.fn(),
+        useValidateBucketAccess: jest.fn()
+    }));
+const mockUseAccessibleBuckets = jest.mocked(useAccessibleBuckets);
+const mockUseValidateBucketAccess = jest.mocked(useValidateBucketAccess);
+const mockNavigate = jest.fn();
+const mockShowToast = jest.fn();
+jest.mock('../../hooks/useDataBrowserNavigate', ()=>({
+        useDataBrowserNavigate: ()=>mockNavigate
+    }));
+jest.mock('@scality/core-ui', ()=>({
+        ...jest.requireActual('@scality/core-ui'),
+        useToast: ()=>({
+                showToast: mockShowToast
+            })
+    }));
+const renderBucketAccessor = ()=>{
+    const Wrapper = createTestWrapper();
+    return render(/*#__PURE__*/ jsx(Wrapper, {
+        children: /*#__PURE__*/ jsx(MemoryRouter, {
+            children: /*#__PURE__*/ jsx(BucketAccessor, {})
+        })
+    }));
+};
+const mockRefetch = jest.fn();
+const mockAddAccessibleBucket = jest.fn();
+const setupMocks = (overrides = {})=>{
+    mockUseValidateBucketAccess.mockReturnValue({
+        refetch: mockRefetch,
+        isFetching: false,
+        error: null,
+        ...overrides
+    });
+    mockUseAccessibleBuckets.mockReturnValue({
+        hasLimitedAccess: false,
+        setLimitedAccess: jest.fn(),
+        accessibleBuckets: [],
+        addAccessibleBucket: mockAddAccessibleBucket,
+        clearAccessibleBuckets: jest.fn()
+    });
+};
+const fillBucketName = async (name)=>{
+    const nameInput = screen.getByLabelText(/bucket name/i);
+    await user_event.type(nameInput, name);
+};
+const fillPrefix = async (prefix)=>{
+    const prefixInput = screen.getByLabelText(/prefix/i);
+    await user_event.type(prefixInput, prefix);
+};
+const submitForm = async ()=>{
+    await waitFor(()=>{
+        const accessButton = screen.getByRole('button', {
+            name: /^access$/i
+        });
+        expect(accessButton).not.toBeDisabled();
+    }, {
+        timeout: 3000
+    });
+    const accessButton = screen.getByRole('button', {
+        name: /^access$/i
+    });
+    await user_event.click(accessButton);
+};
+describe('BucketAccessor', ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+        setupMocks();
+    });
+    it('renders form with required fields', ()=>{
+        renderBucketAccessor();
+        expect(screen.getByText('Access a specific S3 Bucket')).toBeInTheDocument();
+        expect(screen.getByLabelText(/bucket name/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/prefix/i)).toBeInTheDocument();
+    });
+    it('disables access button when bucket name is empty', ()=>{
+        renderBucketAccessor();
+        expect(screen.getByRole('button', {
+            name: /^access$/i
+        })).toBeDisabled();
+    });
+    it('enables access button when bucket name is valid', async ()=>{
+        renderBucketAccessor();
+        await fillBucketName('test-bucket');
+        await waitFor(()=>{
+            expect(screen.getByRole('button', {
+                name: /^access$/i
+            })).not.toBeDisabled();
+        });
+    });
+    it('shows validation error when bucket name is empty', async ()=>{
+        renderBucketAccessor();
+        const nameInput = screen.getByLabelText(/bucket name/i);
+        await user_event.type(nameInput, 'test');
+        await user_event.clear(nameInput);
+        await user_event.tab();
+        await waitFor(()=>{
+            expect(screen.getByText(/bucket name is required/i)).toBeInTheDocument();
+        });
+    });
+    it('validates bucket access and navigates on success', async ()=>{
+        mockRefetch.mockResolvedValue({
+            isSuccess: true,
+            error: null
+        });
+        renderBucketAccessor();
+        await fillBucketName('my-bucket');
+        await submitForm();
+        await waitFor(()=>{
+            expect(mockRefetch).toHaveBeenCalled();
+            expect(mockAddAccessibleBucket).toHaveBeenCalledWith('my-bucket');
+            expect(mockNavigate).toHaveBeenCalledWith('/buckets/my-bucket/objects');
+        });
+    });
+    it('validates bucket access with prefix and navigates correctly', async ()=>{
+        mockRefetch.mockResolvedValue({
+            isSuccess: true,
+            error: null
+        });
+        renderBucketAccessor();
+        await fillBucketName('my-bucket');
+        await fillPrefix('my-folder');
+        await submitForm();
+        await waitFor(()=>{
+            expect(mockRefetch).toHaveBeenCalled();
+            expect(mockAddAccessibleBucket).toHaveBeenCalledWith('my-bucket');
+            expect(mockNavigate).toHaveBeenCalledWith('/buckets/my-bucket/objects?prefix=my-folder%2F');
+        });
+    });
+    it('shows error toast when bucket does not exist', async ()=>{
+        const error = new Error('NoSuchBucket: The specified bucket does not exist');
+        error.name = 'NoSuchBucket';
+        mockRefetch.mockResolvedValue({
+            isSuccess: false,
+            error
+        });
+        renderBucketAccessor();
+        await fillBucketName('non-existent-bucket');
+        await submitForm();
+        await waitFor(()=>{
+            expect(mockShowToast).toHaveBeenCalledWith({
+                open: true,
+                message: 'The specified bucket does not exist',
+                status: 'error'
+            });
+            expect(mockNavigate).not.toHaveBeenCalled();
+        });
+    });
+    it('shows error toast when access is denied', async ()=>{
+        const error = new Error('AccessDenied: You do not have permission to access this resource');
+        error.name = 'AccessDenied';
+        mockRefetch.mockResolvedValue({
+            isSuccess: false,
+            error
+        });
+        renderBucketAccessor();
+        await fillBucketName('restricted-bucket');
+        await submitForm();
+        await waitFor(()=>{
+            expect(mockShowToast).toHaveBeenCalledWith({
+                open: true,
+                message: "You don't have permission to access this bucket",
+                status: 'error'
+            });
+            expect(mockNavigate).not.toHaveBeenCalled();
+        });
+    });
+    it('shows generic error message for other errors', async ()=>{
+        const error = new Error('Network error');
+        mockRefetch.mockResolvedValue({
+            isSuccess: false,
+            error
+        });
+        renderBucketAccessor();
+        await fillBucketName('test-bucket');
+        await submitForm();
+        await waitFor(()=>{
+            expect(mockShowToast).toHaveBeenCalledWith({
+                open: true,
+                message: 'Network error',
+                status: 'error'
+            });
+            expect(mockNavigate).not.toHaveBeenCalled();
+        });
+    });
+    it('navigates to buckets list when cancel is clicked', async ()=>{
+        renderBucketAccessor();
+        const cancelButton = screen.getByRole('button', {
+            name: /cancel/i
+        });
+        await user_event.click(cancelButton);
+        expect(mockNavigate).toHaveBeenCalledWith('/buckets');
+    });
+    it('disables form during bucket access validation', async ()=>{
+        setupMocks({
+            isFetching: true
+        });
+        renderBucketAccessor();
+        await fillBucketName('test-bucket');
+        await waitFor(()=>{
+            const accessButton = screen.getByRole('button', {
+                name: /^access$/i
+            });
+            expect(accessButton).toBeDisabled();
+        });
+    });
+});

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

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

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

@@ -0,0 +1,263 @@
+import { jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { useDeleteBucketCors, useGetBucketCors, useSetBucketCors } from "../../hooks/index.js";
+import { createMockMutationResult, createMockQueryResult, createTestWrapper } from "../../test/testUtils.js";
+import { BucketCorsPage } from "../buckets/BucketCorsPage.js";
+jest.mock('../../hooks', ()=>({
+        useGetBucketCors: jest.fn(),
+        useSetBucketCors: jest.fn(),
+        useDeleteBucketCors: jest.fn(),
+        useBucketConfigEditor: jest.requireActual('../../hooks').useBucketConfigEditor
+    }));
+jest.mock('../Editor', ()=>({
+        Editor: ({ value, onChange })=>/*#__PURE__*/ jsx("textarea", {
+                "data-testid": "cors-editor",
+                value: value,
+                onChange: (e)=>onChange(e.target.value)
+            })
+    }));
+const mockUseGetBucketCors = jest.mocked(useGetBucketCors);
+const mockUseSetBucketCors = jest.mocked(useSetBucketCors);
+const mockUseDeleteBucketCors = jest.mocked(useDeleteBucketCors);
+const mockNavigate = jest.fn();
+jest.mock('react-router', ()=>({
+        ...jest.requireActual('react-router'),
+        useNavigate: ()=>mockNavigate
+    }));
+const existingCorsRules = [
+    {
+        AllowedHeaders: [
+            'Authorization'
+        ],
+        AllowedMethods: [
+            'GET',
+            'PUT'
+        ],
+        AllowedOrigins: [
+            'https://example.com'
+        ],
+        ExposeHeaders: [
+            'ETag'
+        ],
+        MaxAgeSeconds: 3600
+    }
+];
+const createNoSuchCorsError = ()=>{
+    const error = new Error('CORS configuration does not exist');
+    error.name = 'NoSuchCORSConfiguration';
+    return error;
+};
+const mockNoCorsExists = ()=>{
+    mockUseGetBucketCors.mockReturnValue(createMockQueryResult({
+        status: 'error',
+        error: createNoSuchCorsError()
+    }));
+};
+const mockCorsExists = (corsRules = existingCorsRules)=>{
+    mockUseGetBucketCors.mockReturnValue(createMockQueryResult({
+        data: {
+            CORSRules: corsRules,
+            $metadata: {}
+        },
+        status: 'success'
+    }));
+};
+const renderBucketCorsPage = (bucketName = 'test-bucket')=>{
+    const Wrapper = createTestWrapper();
+    return render(/*#__PURE__*/ jsx(MemoryRouter, {
+        initialEntries: [
+            `/buckets/${bucketName}/cors`
+        ],
+        children: /*#__PURE__*/ jsx(Wrapper, {
+            children: /*#__PURE__*/ jsx(Routes, {
+                children: /*#__PURE__*/ jsx(Route, {
+                    path: "/buckets/:bucketName/cors",
+                    element: /*#__PURE__*/ jsx(BucketCorsPage, {})
+                })
+            })
+        })
+    }));
+};
+describe('BucketCorsPage', ()=>{
+    const mockSaveMutate = jest.fn();
+    const mockDeleteMutate = jest.fn();
+    beforeEach(()=>{
+        jest.clearAllMocks();
+        mockUseSetBucketCors.mockReturnValue(createMockMutationResult(mockSaveMutate));
+        mockUseDeleteBucketCors.mockReturnValue(createMockMutationResult(mockDeleteMutate));
+    });
+    it('shows loading state while fetching CORS configuration', ()=>{
+        mockUseGetBucketCors.mockReturnValue(createMockQueryResult({
+            status: 'pending'
+        }));
+        renderBucketCorsPage();
+        expect(screen.getByText('Loading CORS configuration...')).toBeInTheDocument();
+    });
+    it('shows create mode with default template when no CORS exists', async ()=>{
+        mockNoCorsExists();
+        renderBucketCorsPage();
+        await waitFor(()=>{
+            expect(screen.getByText('Create Bucket CORS')).toBeInTheDocument();
+        });
+        const editor = screen.getByTestId('cors-editor');
+        expect(editor.value).toContain('AllowedHeaders');
+    });
+    it('shows edit mode with existing CORS rules', async ()=>{
+        mockCorsExists();
+        renderBucketCorsPage();
+        await waitFor(()=>{
+            expect(screen.getByText('Edit Bucket CORS')).toBeInTheDocument();
+        });
+        const editor = screen.getByTestId('cors-editor');
+        expect(JSON.parse(editor.value)).toEqual(existingCorsRules);
+    });
+    it('disables save button for invalid JSON format', async ()=>{
+        mockNoCorsExists();
+        renderBucketCorsPage();
+        await waitFor(()=>{
+            expect(screen.getByTestId('cors-editor')).toBeInTheDocument();
+        });
+        fireEvent.change(screen.getByTestId('cors-editor'), {
+            target: {
+                value: '{ invalid json'
+            }
+        });
+        await waitFor(()=>{
+            expect(screen.getByRole('button', {
+                name: /save/i
+            })).toBeDisabled();
+        });
+    });
+    it('disables save button when form has no changes', async ()=>{
+        mockCorsExists();
+        renderBucketCorsPage();
+        await waitFor(()=>{
+            expect(screen.getByTestId('cors-editor')).toBeInTheDocument();
+        });
+        expect(screen.getByRole('button', {
+            name: /save/i
+        })).toBeDisabled();
+    });
+    it('saves CORS configuration and navigates back', async ()=>{
+        mockNoCorsExists();
+        renderBucketCorsPage();
+        await waitFor(()=>{
+            expect(screen.getByTestId('cors-editor')).toBeInTheDocument();
+        });
+        fireEvent.change(screen.getByTestId('cors-editor'), {
+            target: {
+                value: JSON.stringify(existingCorsRules, null, 2)
+            }
+        });
+        mockSaveMutate.mockImplementation((_, options)=>{
+            options?.onSuccess?.();
+        });
+        await waitFor(()=>{
+            expect(screen.getByRole('button', {
+                name: /save/i
+            })).not.toBeDisabled();
+        });
+        fireEvent.click(screen.getByRole('button', {
+            name: /save/i
+        }));
+        await waitFor(()=>{
+            expect(mockSaveMutate).toHaveBeenCalledWith({
+                Bucket: 'test-bucket',
+                CORSConfiguration: {
+                    CORSRules: existingCorsRules
+                }
+            }, expect.any(Object));
+            expect(mockNavigate).toHaveBeenCalledWith('/buckets/test-bucket');
+        });
+    });
+    it('stays on page and displays error message when save fails', async ()=>{
+        mockNoCorsExists();
+        renderBucketCorsPage();
+        await waitFor(()=>{
+            expect(screen.getByTestId('cors-editor')).toBeInTheDocument();
+        });
+        fireEvent.change(screen.getByTestId('cors-editor'), {
+            target: {
+                value: JSON.stringify(existingCorsRules, null, 2)
+            }
+        });
+        mockSaveMutate.mockImplementation((_, options)=>{
+            options?.onError?.(new Error('Access Denied'));
+        });
+        await waitFor(()=>{
+            expect(screen.getByRole('button', {
+                name: /save/i
+            })).not.toBeDisabled();
+        });
+        fireEvent.click(screen.getByRole('button', {
+            name: /save/i
+        }));
+        await waitFor(()=>{
+            expect(mockNavigate).not.toHaveBeenCalled();
+            expect(screen.getByText('Access Denied')).toBeInTheDocument();
+        });
+    });
+    it('navigates back when clicking cancel', async ()=>{
+        mockNoCorsExists();
+        renderBucketCorsPage();
+        await waitFor(()=>{
+            expect(screen.getByRole('button', {
+                name: /cancel/i
+            })).toBeInTheDocument();
+        });
+        fireEvent.click(screen.getByRole('button', {
+            name: /cancel/i
+        }));
+        expect(mockNavigate).toHaveBeenCalledWith('/buckets/test-bucket');
+    });
+    it('displays the bucket name', async ()=>{
+        mockNoCorsExists();
+        renderBucketCorsPage('my-custom-bucket');
+        await waitFor(()=>{
+            expect(screen.getByText('my-custom-bucket')).toBeInTheDocument();
+        });
+    });
+    it('deletes CORS configuration when saving empty content', async ()=>{
+        mockCorsExists();
+        renderBucketCorsPage();
+        const editor = await screen.findByTestId('cors-editor');
+        await waitFor(()=>{
+            expect(editor.value).toContain('AllowedHeaders');
+        });
+        fireEvent.change(editor, {
+            target: {
+                value: ''
+            }
+        });
+        mockDeleteMutate.mockImplementation((_, options)=>{
+            options?.onSuccess?.();
+        });
+        await waitFor(()=>{
+            expect(screen.getByRole('button', {
+                name: /save/i
+            })).not.toBeDisabled();
+        });
+        fireEvent.click(screen.getByRole('button', {
+            name: /save/i
+        }));
+        await waitFor(()=>{
+            expect(mockDeleteMutate).toHaveBeenCalledWith({
+                Bucket: 'test-bucket'
+            }, expect.any(Object));
+            expect(mockNavigate).toHaveBeenCalledWith('/buckets/test-bucket');
+        });
+    });
+    it('shows error message when fetching CORS fails with unexpected error', ()=>{
+        const accessDeniedError = new Error('Access Denied');
+        accessDeniedError.name = 'AccessDenied';
+        mockUseGetBucketCors.mockReturnValue(createMockQueryResult({
+            status: 'error',
+            error: accessDeniedError
+        }));
+        renderBucketCorsPage();
+        expect(screen.getByText(/Failed to load CORS configuration/i)).toBeInTheDocument();
+        expect(screen.getByText(/Access Denied/i)).toBeInTheDocument();
+        expect(screen.queryByTestId('cors-editor')).not.toBeInTheDocument();
+    });
+});