@scality/data-browser-library 1.0.4 → 1.0.6

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__/BucketCreate.test.js

@@ -76,7 +76,9 @@ const setupMocks = (overrides = {})=>{
     mockUseSetBucketEncryption.mockReturnValue(createMockMutationResult(mockMutations.setBucketEncryption));
 };
 const fillBucketName = async (name)=>{
-    const nameInput = screen.getByLabelText(/bucket name/i);
+    const nameInput = screen.getByRole('textbox', {
+        name: /bucket name/i
+    });
     await user_event.type(nameInput, name);
 };
 const submitForm = async ()=>{
@@ -101,13 +103,21 @@ describe('BucketCreate', ()=>{
     it('renders form with required fields', ()=>{
         renderBucketCreate();
         expect(screen.getByText('Create a New Bucket')).toBeInTheDocument();
-        expect(screen.getByLabelText(/bucket name/i)).toBeInTheDocument();
-        expect(screen.getByText('Versioning')).toBeInTheDocument();
-        expect(screen.getByText('Object-lock')).toBeInTheDocument();
+        expect(screen.getByRole('textbox', {
+            name: /bucket name/i
+        })).toBeInTheDocument();
+        expect(screen.getByRole('checkbox', {
+            name: /versioning/i
+        })).toBeInTheDocument();
+        expect(screen.getByRole('checkbox', {
+            name: /object-lock/i
+        })).toBeInTheDocument();
     });
     it('shows validation error for invalid bucket name with uppercase', async ()=>{
         renderBucketCreate();
-        await user_event.type(screen.getByLabelText(/bucket name/i), 'INVALID');
+        await user_event.type(screen.getByRole('textbox', {
+            name: /bucket name/i
+        }), 'INVALID');
         await user_event.tab();
         await waitFor(()=>{
             expect(screen.getByText(/bucket names can include only lowercase/i)).toBeInTheDocument();
@@ -115,7 +125,9 @@ describe('BucketCreate', ()=>{
     });
     it('shows validation error for bucket name starting with hyphen', async ()=>{
         renderBucketCreate();
-        await user_event.type(screen.getByLabelText(/bucket name/i), '-invalid');
+        await user_event.type(screen.getByRole('textbox', {
+            name: /bucket name/i
+        }), '-invalid');
         await user_event.tab();
         await waitFor(()=>{
             expect(screen.getByText(/bucket names can include only lowercase/i)).toBeInTheDocument();
@@ -123,7 +135,9 @@ describe('BucketCreate', ()=>{
     });
     it('shows validation error for bucket name ending with hyphen', async ()=>{
         renderBucketCreate();
-        await user_event.type(screen.getByLabelText(/bucket name/i), 'invalid-');
+        await user_event.type(screen.getByRole('textbox', {
+            name: /bucket name/i
+        }), 'invalid-');
         await user_event.tab();
         await waitFor(()=>{
             expect(screen.getByText(/bucket names can include only lowercase/i)).toBeInTheDocument();
@@ -131,7 +145,9 @@ describe('BucketCreate', ()=>{
     });
     it('shows validation error for bucket name with adjacent periods', async ()=>{
         renderBucketCreate();
-        await user_event.type(screen.getByLabelText(/bucket name/i), 'test..bucket');
+        await user_event.type(screen.getByRole('textbox', {
+            name: /bucket name/i
+        }), 'test..bucket');
         await user_event.tab();
         await waitFor(()=>{
             expect(screen.getByText(/bucket names cannot contain two adjacent periods/i)).toBeInTheDocument();
@@ -139,7 +155,9 @@ describe('BucketCreate', ()=>{
     });
     it('shows validation error for bucket name formatted as IP address', async ()=>{
         renderBucketCreate();
-        await user_event.type(screen.getByLabelText(/bucket name/i), '192.168.1.1');
+        await user_event.type(screen.getByRole('textbox', {
+            name: /bucket name/i
+        }), '192.168.1.1');
         await user_event.tab();
         await waitFor(()=>{
             expect(screen.getByText(/bucket names must not be formatted as an ip address/i)).toBeInTheDocument();
@@ -147,7 +165,9 @@ describe('BucketCreate', ()=>{
     });
     it('shows validation error for bucket name with forbidden prefix', async ()=>{
         renderBucketCreate();
-        await user_event.type(screen.getByLabelText(/bucket name/i), 'xn--test');
+        await user_event.type(screen.getByRole('textbox', {
+            name: /bucket name/i
+        }), 'xn--test');
         await user_event.tab();
         await waitFor(()=>{
             expect(screen.getByText(/bucket names must not start with/i)).toBeInTheDocument();
@@ -155,7 +175,9 @@ describe('BucketCreate', ()=>{
     });
     it('shows validation error for bucket name with forbidden suffix', async ()=>{
         renderBucketCreate();
-        await user_event.type(screen.getByLabelText(/bucket name/i), 'test-s3alias');
+        await user_event.type(screen.getByRole('textbox', {
+            name: /bucket name/i
+        }), 'test-s3alias');
         await user_event.tab();
         await waitFor(()=>{
             expect(screen.getByText(/bucket names must not end with/i)).toBeInTheDocument();
@@ -170,7 +192,9 @@ describe('BucketCreate', ()=>{
                 ]
             }
         });
-        await user_event.type(screen.getByLabelText(/bucket name/i), 'existing-bucket');
+        await user_event.type(screen.getByRole('textbox', {
+            name: /bucket name/i
+        }), 'existing-bucket');
         await user_event.tab();
         await waitFor(()=>{
             expect(screen.getByText(/a bucket with this name already exists/i)).toBeInTheDocument();
@@ -185,7 +209,9 @@ describe('BucketCreate', ()=>{
             '123-bucket-456'
         ];
         for (const name of validNames){
-            const input = screen.getByLabelText(/bucket name/i);
+            const input = screen.getByRole('textbox', {
+                name: /bucket name/i
+            });
             await user_event.clear(input);
             await user_event.type(input, name);
             await user_event.tab();
@@ -469,7 +495,9 @@ describe('BucketCreate', ()=>{
             });
             renderBucketCreate();
             await fillBucketName('test-bucket');
-            const encryptionCheckbox = screen.getByLabelText(/encryption/i);
+            const encryptionCheckbox = screen.getByRole('checkbox', {
+                name: /encryption/i
+            });
             await user_event.click(encryptionCheckbox);
             await submitForm();
             const createSuccessCallback = mockMutations.createBucket.mock.calls[0][1].onSuccess;
@@ -516,8 +544,12 @@ describe('BucketCreate', ()=>{
             });
             renderBucketCreate();
             await fillBucketName('test-bucket');
-            await user_event.click(screen.getByLabelText(/versioning/i));
-            await user_event.click(screen.getByLabelText(/encryption/i));
+            await user_event.click(screen.getByRole('checkbox', {
+                name: /versioning/i
+            }));
+            await user_event.click(screen.getByRole('checkbox', {
+                name: /encryption/i
+            }));
             await submitForm();
             const createSuccessCallback = mockMutations.createBucket.mock.calls[0][1].onSuccess;
             createSuccessCallback();
@@ -536,9 +568,15 @@ describe('BucketCreate', ()=>{
             });
             renderBucketCreate();
             await fillBucketName('test-bucket');
-            await user_event.click(screen.getByLabelText(/object-lock/i));
-            await user_event.click(screen.getByLabelText(/default retention/i));
-            await user_event.click(screen.getByLabelText(/encryption/i));
+            await user_event.click(screen.getByRole('checkbox', {
+                name: /object-lock/i
+            }));
+            await user_event.click(screen.getByRole('checkbox', {
+                name: /default retention/i
+            }));
+            await user_event.click(screen.getByRole('checkbox', {
+                name: /encryption/i
+            }));
             await submitForm();
             const createSuccessCallback = mockMutations.createBucket.mock.calls[0][1].onSuccess;
             createSuccessCallback();
@@ -557,7 +595,9 @@ describe('BucketCreate', ()=>{
             });
             renderBucketCreate();
             await fillBucketName('test-bucket');
-            await user_event.click(screen.getByLabelText(/encryption/i));
+            await user_event.click(screen.getByRole('checkbox', {
+                name: /encryption/i
+            }));
             await submitForm();
             const createSuccessCallback = mockMutations.createBucket.mock.calls[0][1].onSuccess;
             createSuccessCallback();

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,15 +38,22 @@ 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({
             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();
+        expect(screen.getByRole('columnheader', {
+            name: /bucket name/i
+        })).toBeInTheDocument();
+        expect(screen.getByRole('columnheader', {
+            name: /storage location/i
+        })).toBeInTheDocument();
+        expect(screen.getByRole('columnheader', {
+            name: /created on/i
+        })).toBeInTheDocument();
     });
     it('displays buckets with their names as clickable links', ()=>{
         const onNavigateToBucket = jest.fn();
@@ -76,7 +84,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({
@@ -107,14 +115,16 @@ describe('BucketList', ()=>{
         });
         const searchInput = screen.getByRole('searchbox');
         expect(searchInput).toBeInTheDocument();
-        expect(searchInput).toHaveAttribute('placeholder', 'Example: Search');
+        expect(searchInput).toHaveAttribute('placeholder', 'Search');
     });
     it('handles empty buckets list', ()=>{
         renderBucketList({
             buckets: []
         });
         expect(screen.getByRole('grid')).toBeInTheDocument();
-        expect(screen.getByText('Bucket Name')).toBeInTheDocument();
+        expect(screen.getByRole('columnheader', {
+            name: /bucket name/i
+        })).toBeInTheDocument();
     });
     it('handles buckets without names gracefully', ()=>{
         const bucketsWithMissingNames = [
@@ -205,6 +215,81 @@ 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.getByRole('columnheader', {
+            name: /created on/i
+        }));
+        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.getByRole('columnheader', {
+            name: /storage location/i
+        }));
+        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__/BucketNotificationFormPage.test.js

@@ -66,11 +66,18 @@ describe('BucketNotificationFormPage', ()=>{
         it('renders create notification form with all fields', ()=>{
             renderCreatePage();
             expect(screen.getByText('Create Bucket Notification')).toBeInTheDocument();
-            expect(screen.getByLabelText(/rule name/i)).toBeInTheDocument();
-            expect(screen.getByText('Events')).toBeInTheDocument();
-            expect(screen.getByLabelText(/destination queue/i)).toBeInTheDocument();
-            expect(screen.getByLabelText(/prefix/i)).toBeInTheDocument();
-            expect(screen.getByLabelText(/suffix/i)).toBeInTheDocument();
+            expect(screen.getByRole('textbox', {
+                name: /rule name/i
+            })).toBeInTheDocument();
+            expect(screen.getByRole('textbox', {
+                name: /destination queue/i
+            })).toBeInTheDocument();
+            expect(screen.getByRole('textbox', {
+                name: /^prefix$/i
+            })).toBeInTheDocument();
+            expect(screen.getByRole('textbox', {
+                name: /^suffix$/i
+            })).toBeInTheDocument();
         });
         it('disables create button when form is pristine', ()=>{
             renderCreatePage();
@@ -80,7 +87,9 @@ describe('BucketNotificationFormPage', ()=>{
         });
         it('shows validation error when rule name is empty', async ()=>{
             renderCreatePage();
-            const ruleNameInput = screen.getByLabelText(/rule name/i);
+            const ruleNameInput = screen.getByRole('textbox', {
+                name: /rule name/i
+            });
             await user_event.type(ruleNameInput, 'a');
             await user_event.clear(ruleNameInput);
             await waitFor(()=>{
@@ -104,7 +113,9 @@ describe('BucketNotificationFormPage', ()=>{
                 status: 'success'
             });
             renderCreatePage();
-            const ruleNameInput = screen.getByLabelText(/rule name/i);
+            const ruleNameInput = screen.getByRole('textbox', {
+                name: /rule name/i
+            });
             await user_event.type(ruleNameInput, 'existing-rule');
             await waitFor(()=>{
                 expect(screen.getByText(/a rule with this name already exists/i)).toBeInTheDocument();
@@ -112,7 +123,9 @@ describe('BucketNotificationFormPage', ()=>{
         });
         it('shows validation error when queue ARN is invalid', async ()=>{
             renderCreatePage();
-            const queueArnInput = screen.getByLabelText(/destination queue/i);
+            const queueArnInput = screen.getByRole('textbox', {
+                name: /destination queue/i
+            });
             await user_event.type(queueArnInput, 'invalid-arn');
             await waitFor(()=>{
                 expect(screen.getByText(/must be a valid arn/i)).toBeInTheDocument();
@@ -120,8 +133,12 @@ describe('BucketNotificationFormPage', ()=>{
         });
         it('enables create button when form is valid', async ()=>{
             renderCreatePage();
-            await user_event.type(screen.getByLabelText(/rule name/i), 'test-rule');
-            await user_event.type(screen.getByLabelText(/destination queue/i), 'arn:aws:sqs:us-east-1:123:queue');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /rule name/i
+            }), 'test-rule');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /destination queue/i
+            }), 'arn:aws:sqs:us-east-1:123:queue');
             const checkbox = screen.getByRole('checkbox', {
                 name: /s3:ObjectCreated:\*/i
             });
@@ -134,13 +151,21 @@ describe('BucketNotificationFormPage', ()=>{
         });
         it('creates notification with all fields and navigates on success', async ()=>{
             renderCreatePage();
-            await user_event.type(screen.getByLabelText(/rule name/i), 'test-rule');
-            await user_event.type(screen.getByLabelText(/destination queue/i), 'arn:aws:sqs:us-east-1:123:my-queue');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /rule name/i
+            }), 'test-rule');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /destination queue/i
+            }), 'arn:aws:sqs:us-east-1:123:my-queue');
             fireEvent.click(screen.getByRole('checkbox', {
                 name: /s3:ObjectCreated:Put/i
             }));
-            await user_event.type(screen.getByLabelText(/prefix/i), 'uploads/');
-            await user_event.type(screen.getByLabelText(/suffix/i), '.jpg');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /^prefix$/i
+            }), 'uploads/');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /^suffix$/i
+            }), '.jpg');
             mockMutate.mockImplementation((_, options)=>{
                 options?.onSuccess?.();
             });
@@ -263,9 +288,15 @@ describe('BucketNotificationFormPage', ()=>{
         it('pre-fills form with existing rule data', async ()=>{
             renderEditPage();
             await waitFor(()=>{
-                expect(screen.getByLabelText(/destination queue/i)).toHaveValue('arn:aws:sqs:us-east-1:123:existing-queue');
-                expect(screen.getByLabelText(/prefix/i)).toHaveValue('data/');
-                expect(screen.getByLabelText(/suffix/i)).toHaveValue('.json');
+                expect(screen.getByRole('textbox', {
+                    name: /destination queue/i
+                })).toHaveValue('arn:aws:sqs:us-east-1:123:existing-queue');
+                expect(screen.getByRole('textbox', {
+                    name: /^prefix$/i
+                })).toHaveValue('data/');
+                expect(screen.getByRole('textbox', {
+                    name: /^suffix$/i
+                })).toHaveValue('.json');
             });
         });
         it('shows Save button instead of Create in edit mode', ()=>{
@@ -280,9 +311,13 @@ describe('BucketNotificationFormPage', ()=>{
         it('updates notification and navigates on success', async ()=>{
             renderEditPage();
             await waitFor(()=>{
-                expect(screen.getByLabelText(/destination queue/i)).toHaveValue('arn:aws:sqs:us-east-1:123:existing-queue');
+                expect(screen.getByRole('textbox', {
+                    name: /destination queue/i
+                })).toHaveValue('arn:aws:sqs:us-east-1:123:existing-queue');
+            });
+            const queueInput = screen.getByRole('textbox', {
+                name: /destination queue/i
             });
-            const queueInput = screen.getByLabelText(/destination queue/i);
             await user_event.clear(queueInput);
             await user_event.type(queueInput, 'arn:aws:sqs:us-east-1:123:updated-queue');
             mockMutate.mockImplementation((_, options)=>{