@scality/data-browser-library 1.0.3 → 1.0.5

package/dist/components/DataBrowserUI.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AppContainer } from "@scality/core-ui";
+import { AppContainer, ScrollbarWrapper } from "@scality/core-ui";
 import { Route, Routes } from "react-router";
 import styled_components from "styled-components";
 import { DataBrowserUICustomizationProvider } from "../contexts/DataBrowserUICustomizationContext.js";
@@ -12,14 +12,22 @@ const RoutesContainer = styled_components.div`
   width: 100%;
   overflow: hidden;
 `;
+const HeaderSlot = styled_components.div`
+  &:has([data-header-content]:empty) {
+    display: none;
+  }
+`;
 const DataBrowserUIContent = ({ header })=>{
     useS3ConfigSwitch();
     return /*#__PURE__*/ jsx(AppContainer, {
         children: /*#__PURE__*/ jsxs(Fragment, {
             children: [
-                header && /*#__PURE__*/ jsx(AppContainer.ContextContainer, {
-                    children: /*#__PURE__*/ jsx("div", {
-                        children: header
+                header && /*#__PURE__*/ jsx(HeaderSlot, {
+                    children: /*#__PURE__*/ jsx(AppContainer.ContextContainer, {
+                        children: /*#__PURE__*/ jsx("div", {
+                            "data-header-content": true,
+                            children: header
+                        })
                     })
                 }),
                 /*#__PURE__*/ jsx(AppContainer.MainContent, {
@@ -90,10 +98,12 @@ const DataBrowserUIContent = ({ header })=>{
         })
     });
 };
-const DataBrowserUI = (props)=>/*#__PURE__*/ jsx(DataBrowserUICustomizationProvider, {
-        config: props,
-        children: /*#__PURE__*/ jsx(DataBrowserUIContent, {
-            header: props.header
+const DataBrowserUI = (props)=>/*#__PURE__*/ jsx(ScrollbarWrapper, {
+        children: /*#__PURE__*/ jsx(DataBrowserUICustomizationProvider, {
+            config: props,
+            children: /*#__PURE__*/ jsx(DataBrowserUIContent, {
+                header: props.header
+            })
         })
     });
 export { DataBrowserUI };

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

@@ -3,6 +3,7 @@ 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__hooks_index_js_a0d26731 from "../../hooks/index.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);
@@ -37,6 +38,7 @@ describe('BucketList', ()=>{
         jest.clearAllMocks();
         mockOffsetSize(800, 600);
         mockUseDataBrowserUICustomization({});
+        jest.spyOn(__rspack_external__hooks_index_js_a0d26731, 'useBucketLocations').mockReturnValue(new Map());
     });
     it('shows a table with proper headers', ()=>{
         renderBucketList({
@@ -76,7 +78,7 @@ describe('BucketList', ()=>{
         });
         const rows = screen.getAllByRole('row');
         fireEvent.click(rows[1]);
-        expect(onBucketSelect).toHaveBeenCalledWith('test-bucket-3');
+        expect(onBucketSelect).toHaveBeenCalledWith('test-bucket-1');
     });
     it('shows selected bucket when selectedBucketName is provided', ()=>{
         renderBucketList({
@@ -205,6 +207,77 @@ describe('BucketList', ()=>{
         fireEvent.click(bucketName.closest('[role="row"]') || bucketName);
         expect(onBucketSelect).not.toHaveBeenCalled();
     });
+    it('sorts by creation date by default, not by bucket name', ()=>{
+        const bucketsWithReversedDateOrder = [
+            {
+                Name: 'alpha-bucket',
+                CreationDate: new Date('2024-03-01T00:00:00Z')
+            },
+            {
+                Name: 'beta-bucket',
+                CreationDate: new Date('2024-01-01T00:00:00Z')
+            },
+            {
+                Name: 'gamma-bucket',
+                CreationDate: new Date('2024-02-01T00:00:00Z')
+            }
+        ];
+        renderBucketList({
+            buckets: bucketsWithReversedDateOrder
+        });
+        const rows = screen.getAllByRole('row');
+        expect(rows[1]).toHaveTextContent('beta-bucket');
+        expect(rows[2]).toHaveTextContent('gamma-bucket');
+        expect(rows[3]).toHaveTextContent('alpha-bucket');
+    });
+    it('toggles to date descending when Created on header is clicked', ()=>{
+        const bucketsWithReversedDateOrder = [
+            {
+                Name: 'alpha-bucket',
+                CreationDate: new Date('2024-03-01T00:00:00Z')
+            },
+            {
+                Name: 'beta-bucket',
+                CreationDate: new Date('2024-01-01T00:00:00Z')
+            },
+            {
+                Name: 'gamma-bucket',
+                CreationDate: new Date('2024-02-01T00:00:00Z')
+            }
+        ];
+        renderBucketList({
+            buckets: bucketsWithReversedDateOrder
+        });
+        fireEvent.click(screen.getByText('Created on'));
+        const rows = screen.getAllByRole('row');
+        expect(rows[1]).toHaveTextContent('alpha-bucket');
+        expect(rows[2]).toHaveTextContent('gamma-bucket');
+        expect(rows[3]).toHaveTextContent('beta-bucket');
+    });
+    it('sorts by storage location when location column header is clicked', ()=>{
+        jest.spyOn(__rspack_external__hooks_index_js_a0d26731, 'useBucketLocations').mockReturnValue(new Map([
+            [
+                'test-bucket-1',
+                'us-west-2'
+            ],
+            [
+                'test-bucket-2',
+                'eu-west-1'
+            ],
+            [
+                'test-bucket-3',
+                'ap-southeast-1'
+            ]
+        ]));
+        renderBucketList({
+            buckets: mockBuckets
+        });
+        fireEvent.click(screen.getByText('Storage Location'));
+        const rows = screen.getAllByRole('row');
+        expect(rows[1]).toHaveTextContent('test-bucket-3');
+        expect(rows[2]).toHaveTextContent('test-bucket-2');
+        expect(rows[3]).toHaveTextContent('test-bucket-1');
+    });
     describe('extraBucketListColumns support', ()=>{
         it('renders extra columns when extraBucketListColumns is configured', ()=>{
             const CustomColumn = ({ data })=>/*#__PURE__*/ jsxs("span", {

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router";
 import { DataBrowserUICustomizationProvider } from "../../contexts/DataBrowserUICustomizationContext.js";
 import { useListObjectVersions, useListObjects } from "../../hooks/index.js";
@@ -281,14 +281,42 @@ describe('ObjectList', ()=>{
                 expect(screen.getByText('Version ID')).toBeInTheDocument();
             });
         });
+        it('notifies parent to clear selection when toggling versions', async ()=>{
+            const onObjectSelect = jest.fn();
+            renderObjectList({
+                onObjectSelect
+            });
+            await waitFor(()=>{
+                expect(screen.getByText('file1.txt')).toBeInTheDocument();
+            });
+            const rows = screen.getAllByRole('row');
+            const objectRow = rows.find((row)=>row.textContent?.includes('file1.txt'));
+            expect(objectRow).toBeDefined();
+            fireEvent.click(objectRow);
+            expect(onObjectSelect).toHaveBeenCalledWith(expect.objectContaining({
+                Key: 'file1.txt',
+                type: 'object'
+            }));
+            onObjectSelect.mockClear();
+            const toggleLabel = screen.getByText(/list versions/i);
+            const toggle = toggleLabel.closest('label')?.querySelector('input[type="checkbox"]');
+            fireEvent.click(toggle);
+            await waitFor(()=>{
+                expect(screen.getByText('Version ID')).toBeInTheDocument();
+            });
+            expect(onObjectSelect).toHaveBeenCalledWith(null);
+        });
     });
     describe('Search Features', ()=>{
-        it('renders table search when metadata-search feature is disabled', async ()=>{
+        it('renders SearchInput when metadata-search feature is disabled', async ()=>{
             jest.spyOn(__rspack_external__hooks_useFeatures_js_a6a84786, 'useFeatures').mockReturnValue(false);
             renderObjectList();
             await waitFor(()=>{
                 expect(screen.getByRole('grid')).toBeInTheDocument();
             });
+            expect(screen.getByRole('searchbox', {
+                name: 'search'
+            })).toBeInTheDocument();
             expect(screen.queryByPlaceholderText(/Metadata Search/i)).not.toBeInTheDocument();
         });
         it('renders MetadataSearch component when metadata-search feature is enabled', async ()=>{
@@ -299,6 +327,70 @@ describe('ObjectList', ()=>{
             });
             expect(screen.getByPlaceholderText(/Metadata Search/i)).toBeInTheDocument();
         });
+        it('filters table rows when typing in search input', async ()=>{
+            jest.useFakeTimers();
+            jest.spyOn(__rspack_external__hooks_useFeatures_js_a6a84786, 'useFeatures').mockReturnValue(false);
+            renderObjectList();
+            await waitFor(()=>{
+                expect(screen.getByText('file1.txt')).toBeInTheDocument();
+                expect(screen.getByText('file2.txt')).toBeInTheDocument();
+                expect(screen.getByText('folder1/')).toBeInTheDocument();
+            });
+            const searchInput = screen.getByRole('searchbox', {
+                name: 'search'
+            });
+            fireEvent.change(searchInput, {
+                target: {
+                    value: 'file1'
+                }
+            });
+            act(()=>{
+                jest.advanceTimersByTime(300);
+            });
+            await waitFor(()=>{
+                expect(screen.getByText('file1.txt')).toBeInTheDocument();
+                expect(screen.queryByText('file2.txt')).not.toBeInTheDocument();
+                expect(screen.queryByText('folder1/')).not.toBeInTheDocument();
+            });
+            jest.useRealTimers();
+        });
+        it('shows all rows when search is cleared', async ()=>{
+            jest.useFakeTimers();
+            jest.spyOn(__rspack_external__hooks_useFeatures_js_a6a84786, 'useFeatures').mockReturnValue(false);
+            renderObjectList();
+            await waitFor(()=>{
+                expect(screen.getByText('file1.txt')).toBeInTheDocument();
+                expect(screen.getByText('file2.txt')).toBeInTheDocument();
+            });
+            const searchInput = screen.getByRole('searchbox', {
+                name: 'search'
+            });
+            fireEvent.change(searchInput, {
+                target: {
+                    value: 'file1'
+                }
+            });
+            act(()=>{
+                jest.advanceTimersByTime(300);
+            });
+            await waitFor(()=>{
+                expect(screen.queryByText('file2.txt')).not.toBeInTheDocument();
+            });
+            fireEvent.change(searchInput, {
+                target: {
+                    value: ''
+                }
+            });
+            act(()=>{
+                jest.advanceTimersByTime(300);
+            });
+            await waitFor(()=>{
+                expect(screen.getByText('file1.txt')).toBeInTheDocument();
+                expect(screen.getByText('file2.txt')).toBeInTheDocument();
+                expect(screen.getByText('folder1/')).toBeInTheDocument();
+            });
+            jest.useRealTimers();
+        });
     });
     describe('Multi-Selection', ()=>{
         it('integrates with MultiSelectableContent', async ()=>{

package/dist/components/buckets/BucketCreate.d.ts

@@ -5,6 +5,7 @@ export declare const bucketNameValidationSchema: Joi.StringSchema<string>;
 export declare const baseBucketCreateSchema: Joi.ObjectSchema<any>;
 export type BucketCreateFormData = {
     name: string;
+    locationConstraint?: string;
     isVersioning: boolean;
     isEncryptionEnabled: boolean;
     isObjectLockEnabled: boolean;

package/dist/components/buckets/BucketCreate.js

@@ -4,7 +4,9 @@ import { Checkbox, Form, FormGroup, FormSection, Stack, useToast } from "@scalit
 import { Button, Input } from "@scality/core-ui/dist/next";
 import { convertRemToPixels } from "@scality/core-ui/dist/utils";
 import joi from "joi";
-import { FormProvider, useForm } from "react-hook-form";
+import { useMemo } from "react";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { useDataBrowserUICustomization } from "../../contexts/DataBrowserUICustomizationContext.js";
 import { useCreateBucket, useSetBucketEncryption, useSetBucketObjectLockConfiguration, useSetBucketVersioning } from "../../hooks/index.js";
 import { useDataBrowserNavigate } from "../../hooks/useDataBrowserNavigate.js";
 import ObjectLockRetentionSettings from "../objects/ObjectLock/ObjectLockRetentionSettings.js";
@@ -58,8 +60,12 @@ const baseBucketCreateSchema = joi.object({
 const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultValues: customDefaultValues, children, onSubmit: onSubmitProp, onCancel: onCancelProp })=>{
     const navigate = useDataBrowserNavigate();
     const { showToast } = useToast();
+    const { locationSelector: LocationSelector, bucketCreateExtraFields, transformBucketCreateData, bucketCreateVersioning: VersioningRenderer } = useDataBrowserUICustomization();
     const baseDefaultValues = {
         name: '',
+        ...LocationSelector ? {
+            locationConstraint: ''
+        } : {},
         isVersioning: false,
         isEncryptionEnabled: false,
         isObjectLockEnabled: false,
@@ -69,15 +75,32 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
         retentionPeriodFrequencyChoice: 'DAYS',
         ...customDefaultValues
     };
+    const hasExtraFields = !!bucketCreateExtraFields;
+    const resolvedSchema = useMemo(()=>{
+        let schema = validationSchema || baseBucketCreateSchema;
+        if (LocationSelector) schema = schema.keys({
+            locationConstraint: joi.string().required().messages({
+                'string.empty': 'Location is required'
+            })
+        });
+        if (hasExtraFields) schema = schema.options({
+            allowUnknown: true
+        });
+        return schema;
+    }, [
+        validationSchema,
+        LocationSelector,
+        hasExtraFields
+    ]);
     const useFormMethods = useForm({
         mode: 'all',
-        resolver: joiResolver(validationSchema || baseBucketCreateSchema, {
+        resolver: joiResolver(resolvedSchema, {
             context: validationContext || {}
         }),
         defaultValues: baseDefaultValues,
         context: validationContext
     });
-    const { register, handleSubmit, formState, watch } = useFormMethods;
+    const { register, handleSubmit, formState, watch, control } = useFormMethods;
     const { isValid, errors } = formState;
     const isObjectLockEnabled = watch('isObjectLockEnabled');
     const isEncryptionEnabled = watch('isEncryptionEnabled');
@@ -106,15 +129,21 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
             status: 'error'
         });
     };
-    const onSubmit = (data)=>{
-        if (onSubmitProp) return void onSubmitProp(data);
+    const onSubmit = (rawData)=>{
+        if (onSubmitProp) return void onSubmitProp(rawData);
+        const data = transformBucketCreateData ? transformBucketCreateData(rawData) : rawData;
         const bucketName = data.name;
         const needsExplicitVersioning = data.isVersioning && !data.isObjectLockEnabled;
         const needsRetentionConfig = data.isObjectLockEnabled && data.isDefaultRetentionEnabled;
         const needsEncryption = data.isEncryptionEnabled;
         createBucket({
             Bucket: bucketName,
-            ObjectLockEnabledForBucket: data.isObjectLockEnabled || void 0
+            ObjectLockEnabledForBucket: data.isObjectLockEnabled || void 0,
+            ...data.locationConstraint ? {
+                CreateBucketConfiguration: {
+                    LocationConstraint: data.locationConstraint
+                }
+            } : {}
         }, {
             onSuccess: ()=>{
                 if (needsExplicitVersioning) setBucketVersioning({
@@ -236,6 +265,24 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
                                 helpErrorPosition: "bottom",
                                 error: errors.name ? errors.name?.type === 'string.pattern.base' ? bucketErrorMessage : errors.name?.message : void 0
                             }),
+                            LocationSelector && /*#__PURE__*/ jsx(FormGroup, {
+                                id: "locationConstraint",
+                                label: "Storage Service Location",
+                                required: true,
+                                direction: "horizontal",
+                                labelHelpTooltip: "Cannot be modified after creation",
+                                helpErrorPosition: "bottom",
+                                error: errors?.locationConstraint?.message,
+                                content: /*#__PURE__*/ jsx(Controller, {
+                                    name: "locationConstraint",
+                                    control: control,
+                                    render: ({ field })=>/*#__PURE__*/ jsx(LocationSelector, {
+                                            value: field.value ?? '',
+                                            onChange: field.onChange
+                                        })
+                                })
+                            }),
+                            bucketCreateExtraFields,
                             children,
                             s3Capabilities?.bucketEncryption && /*#__PURE__*/ jsx(FormGroup, {
                                 id: "isEncryptionEnabled",
@@ -248,7 +295,10 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
                                     ...register('isEncryptionEnabled')
                                 })
                             }),
-                            /*#__PURE__*/ jsx(FormGroup, {
+                            VersioningRenderer ? /*#__PURE__*/ jsx(VersioningRenderer, {
+                                isVersioning: isVersioning,
+                                isObjectLockEnabled: isObjectLockEnabled
+                            }) : /*#__PURE__*/ jsx(FormGroup, {
                                 id: "isVersioning",
                                 label: "Versioning",
                                 disabled: isObjectLockEnabled,

package/dist/components/buckets/BucketDetails.js

@@ -179,7 +179,6 @@ const DefaultTabs = ()=>{
                 id: 'overview',
                 label: 'Overview',
                 path: '',
-                withoutPadding: false,
                 query: {
                     tab: ''
                 },