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

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

@@ -3,10 +3,10 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import user_event from "@testing-library/user-event";
 import { createTestWrapper } from "../../test/testUtils.js";
 import { UploadButton } from "../objects/UploadButton.js";
-describe("UploadButton - Core Functionality", ()=>{
+describe('UploadButton - Core Functionality', ()=>{
     const defaultProps = {
-        bucket: "test-bucket",
-        prefix: "test-prefix"
+        bucket: 'test-bucket',
+        prefix: 'test-prefix'
     };
     const renderUploadButton = (props = {})=>{
         const Wrapper = createTestWrapper();
@@ -17,128 +17,128 @@ describe("UploadButton - Core Functionality", ()=>{
             })
         }));
     };
-    it("renders upload button with default label", ()=>{
+    it('renders upload button with default label', ()=>{
         renderUploadButton();
-        expect(screen.getByRole("button", {
+        expect(screen.getByRole('button', {
             name: /upload/i
         })).toBeInTheDocument();
     });
-    it("renders upload button", ()=>{
+    it('renders upload button', ()=>{
         renderUploadButton();
-        expect(screen.getByRole("button", {
+        expect(screen.getByRole('button', {
             name: /upload/i
         })).toBeInTheDocument();
     });
-    it("opens modal when upload button is clicked", async ()=>{
+    it('opens modal when upload button is clicked', async ()=>{
         renderUploadButton();
-        const uploadButton = screen.getByRole("button", {
+        const uploadButton = screen.getByRole('button', {
             name: /upload/i
         });
         fireEvent.click(uploadButton);
         await waitFor(()=>{
-            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+            expect(screen.getByText('Upload Files')).toBeInTheDocument();
         });
     });
-    it("closes modal when cancel button is clicked", async ()=>{
+    it('closes modal when cancel button is clicked', async ()=>{
         renderUploadButton();
-        const uploadButton = screen.getByRole("button", {
+        const uploadButton = screen.getByRole('button', {
             name: /upload/i
         });
         fireEvent.click(uploadButton);
         await waitFor(()=>{
-            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+            expect(screen.getByText('Upload Files')).toBeInTheDocument();
         });
-        const cancelButton = screen.getByRole("button", {
+        const cancelButton = screen.getByRole('button', {
             name: /cancel/i
         });
         fireEvent.click(cancelButton);
         await waitFor(()=>{
-            expect(screen.queryByText("Upload Files")).not.toBeInTheDocument();
+            expect(screen.queryByText('Upload Files')).not.toBeInTheDocument();
         });
     });
-    it("displays empty state initially", async ()=>{
+    it('displays empty state initially', async ()=>{
         renderUploadButton();
-        const uploadButton = screen.getByRole("button", {
+        const uploadButton = screen.getByRole('button', {
             name: /upload/i
         });
         fireEvent.click(uploadButton);
         await waitFor(()=>{
-            expect(screen.getByText("Drag and drop files and folders here")).toBeInTheDocument();
-            expect(screen.getByRole("button", {
+            expect(screen.getByText('Drag and drop files and folders here')).toBeInTheDocument();
+            expect(screen.getByRole('button', {
                 name: /add files/i
             })).toBeInTheDocument();
         });
     });
-    it("can add files and shows upload button enabled", async ()=>{
+    it('can add files and shows upload button enabled', async ()=>{
         const onUploadSuccess = jest.fn();
         renderUploadButton({
             onUploadSuccess
         });
-        const uploadButton = screen.getByRole("button", {
+        const uploadButton = screen.getByRole('button', {
             name: /upload/i
         });
         fireEvent.click(uploadButton);
         await waitFor(()=>{
-            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+            expect(screen.getByText('Upload Files')).toBeInTheDocument();
         });
-        const uploadButtons = screen.getAllByRole("button", {
-            name: "Upload"
+        const uploadButtons = screen.getAllByRole('button', {
+            name: 'Upload'
         });
-        const modalUploadButton = uploadButtons.find((button)=>!button.querySelector("svg"));
+        const modalUploadButton = uploadButtons.find((button)=>!button.querySelector('svg'));
         expect(modalUploadButton).toBeDisabled();
-        const fileInput = screen.getByRole("presentation").querySelector('input[type="file"]');
+        const fileInput = screen.getByRole('presentation').querySelector('input[type="file"]');
         const testFile = new File([
-            "test content"
-        ], "test.txt", {
-            type: "text/plain"
+            'test content'
+        ], 'test.txt', {
+            type: 'text/plain'
         });
         await user_event.upload(fileInput, testFile);
         await waitFor(()=>{
-            expect(screen.getByText("test.txt")).toBeInTheDocument();
-            expect(screen.getByText("12 B")).toBeInTheDocument();
+            expect(screen.getByText('test.txt')).toBeInTheDocument();
+            expect(screen.getByText('12 B')).toBeInTheDocument();
         });
         expect(modalUploadButton).toBeEnabled();
     });
-    it("displays correct bucket and prefix information", ()=>{
-        const customBucket = "custom-bucket";
-        const customPrefix = "custom/prefix";
+    it('displays correct bucket and prefix information', ()=>{
+        const customBucket = 'custom-bucket';
+        const customPrefix = 'custom/prefix';
         renderUploadButton({
             bucket: customBucket,
             prefix: customPrefix
         });
-        expect(screen.getByRole("button", {
+        expect(screen.getByRole('button', {
             name: /upload/i
         })).toBeInTheDocument();
     });
-    it("handles different button variants", ()=>{
+    it('handles different button variants', ()=>{
         renderUploadButton({
-            variant: "primary"
+            variant: 'primary'
         });
-        const button = screen.getByRole("button", {
+        const button = screen.getByRole('button', {
             name: /upload/i
         });
         expect(button).toBeInTheDocument();
     });
-    it("resets state when modal is closed", async ()=>{
+    it('resets state when modal is closed', async ()=>{
         renderUploadButton();
-        const uploadButton = screen.getByRole("button", {
+        const uploadButton = screen.getByRole('button', {
             name: /upload/i
         });
         fireEvent.click(uploadButton);
         await waitFor(()=>{
-            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+            expect(screen.getByText('Upload Files')).toBeInTheDocument();
         });
-        const cancelButton = screen.getByRole("button", {
+        const cancelButton = screen.getByRole('button', {
             name: /cancel/i
         });
         fireEvent.click(cancelButton);
         await waitFor(()=>{
-            expect(screen.queryByText("Upload Files")).not.toBeInTheDocument();
+            expect(screen.queryByText('Upload Files')).not.toBeInTheDocument();
         });
         fireEvent.click(uploadButton);
         await waitFor(()=>{
-            expect(screen.getByText("Upload Files")).toBeInTheDocument();
-            expect(screen.getByText("Drag and drop files and folders here")).toBeInTheDocument();
+            expect(screen.getByText('Upload Files')).toBeInTheDocument();
+            expect(screen.getByText('Drag and drop files and folders here')).toBeInTheDocument();
         });
     });
 });

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,6 @@
+import type { BreadcrumbItem } from './index';
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+}
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export {};

package/dist/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { Breadcrumb, ConstrainedText, spacing } from "@scality/core-ui";
+import { Box } from "@scality/core-ui/dist/next";
+import { Link } from "react-router";
+import { useDataBrowserNavigate } from "../../hooks/useDataBrowserNavigate.js";
+const Breadcrumb_Breadcrumb = ({ items })=>{
+    const navigate = useDataBrowserNavigate();
+    if (0 === items.length) return null;
+    const paths = items.map((item, index)=>{
+        const isLast = index === items.length - 1;
+        const isOnlyItem = 1 === items.length;
+        const key = `${item.label}-${index}`;
+        if (!item.path || isLast && !isOnlyItem) return /*#__PURE__*/ jsx(ConstrainedText, {
+            text: item.label
+        }, key);
+        const itemPath = item.path;
+        const targetPath = item.search ? `${itemPath}${item.search}` : itemPath;
+        const handleClick = (e)=>{
+            e.preventDefault();
+            navigate(targetPath);
+        };
+        return /*#__PURE__*/ jsx(Link, {
+            to: targetPath,
+            onClick: handleClick,
+            children: /*#__PURE__*/ jsx(ConstrainedText, {
+                text: item.label
+            })
+        }, key);
+    });
+    return /*#__PURE__*/ jsx(Box, {
+        padding: `0 ${spacing.r16}`,
+        children: /*#__PURE__*/ jsx(Breadcrumb, {
+            paths: paths
+        })
+    });
+};
+export { Breadcrumb_Breadcrumb as Breadcrumb };

package/dist/components/breadcrumb/DataBrowserBreadcrumb.d.ts

@@ -0,0 +1 @@
+export declare const DataBrowserBreadcrumb: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/breadcrumb/DataBrowserBreadcrumb.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { useBreadcrumbPaths } from "./useBreadcrumbPaths.js";
+const DataBrowserBreadcrumb = ()=>{
+    const items = useBreadcrumbPaths();
+    return items.length ? /*#__PURE__*/ jsx(Breadcrumb, {
+        items: items
+    }) : null;
+};
+export { DataBrowserBreadcrumb };

package/dist/components/breadcrumb/__tests__/Breadcrumb.test.d.ts

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

package/dist/components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -0,0 +1,196 @@
+import { jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import user_event from "@testing-library/user-event";
+import { MemoryRouter } from "react-router";
+import { createTestWrapper } from "../../../test/testUtils.js";
+import { Breadcrumb } from "../Breadcrumb.js";
+const mockNavigate = jest.fn();
+jest.mock('../../../hooks/useDataBrowserNavigate', ()=>({
+        useDataBrowserNavigate: ()=>mockNavigate
+    }));
+describe('Breadcrumb Component', ()=>{
+    const Wrapper = createTestWrapper();
+    beforeEach(()=>{
+        mockNavigate.mockClear();
+    });
+    const renderBreadcrumb = (items)=>render(/*#__PURE__*/ jsx(MemoryRouter, {
+            children: /*#__PURE__*/ jsx(Wrapper, {
+                children: /*#__PURE__*/ jsx(Breadcrumb, {
+                    items: items
+                })
+            })
+        }));
+    it('renders nothing when items array is empty', ()=>{
+        const { container } = renderBreadcrumb([]);
+        expect(container.firstChild).toBeNull();
+    });
+    it('renders a single breadcrumb item without link', ()=>{
+        renderBreadcrumb([
+            {
+                label: 'Home'
+            }
+        ]);
+        expect(screen.getByText('Home')).toBeInTheDocument();
+        expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    });
+    it('renders multiple items with correct link structure', ()=>{
+        renderBreadcrumb([
+            {
+                label: 'Home',
+                path: '/home'
+            },
+            {
+                label: 'Products',
+                path: '/products'
+            },
+            {
+                label: 'Item'
+            }
+        ]);
+        expect(screen.getByRole('link', {
+            name: /home/i
+        })).toHaveAttribute('href', '/home');
+        expect(screen.getByRole('link', {
+            name: /products/i
+        })).toHaveAttribute('href', '/products');
+        expect(screen.queryByRole('link', {
+            name: /^item$/i
+        })).not.toBeInTheDocument();
+        expect(screen.getByText('Item')).toBeInTheDocument();
+    });
+    it('last item is never a link even if it has a path', ()=>{
+        renderBreadcrumb([
+            {
+                label: 'Home',
+                path: '/home'
+            },
+            {
+                label: 'Current',
+                path: '/current'
+            }
+        ]);
+        expect(screen.getByRole('link', {
+            name: /home/i
+        })).toBeInTheDocument();
+        expect(screen.queryByRole('link', {
+            name: /current/i
+        })).not.toBeInTheDocument();
+        expect(screen.getByText('Current')).toBeInTheDocument();
+    });
+    it('handles items with search parameters', ()=>{
+        renderBreadcrumb([
+            {
+                label: 'Home',
+                path: '/home'
+            },
+            {
+                label: 'Folder',
+                path: '/folder',
+                search: '?prefix=test/'
+            },
+            {
+                label: 'Current'
+            }
+        ]);
+        expect(screen.getByRole('link', {
+            name: /folder/i
+        })).toHaveAttribute('href', '/folder?prefix=test/');
+    });
+    it('calls navigate with correct path on link click', async ()=>{
+        const user = user_event.setup();
+        renderBreadcrumb([
+            {
+                label: 'Home',
+                path: '/home'
+            },
+            {
+                label: 'Current'
+            }
+        ]);
+        await user.click(screen.getByRole('link', {
+            name: /home/i
+        }));
+        expect(mockNavigate).toHaveBeenCalledWith('/home');
+    });
+    it('calls navigate with path and search params on link click', async ()=>{
+        const user = user_event.setup();
+        renderBreadcrumb([
+            {
+                label: 'Home',
+                path: '/home'
+            },
+            {
+                label: 'Folder',
+                path: '/folder',
+                search: '?prefix=test/'
+            },
+            {
+                label: 'Current'
+            }
+        ]);
+        await user.click(screen.getByRole('link', {
+            name: /folder/i
+        }));
+        expect(mockNavigate).toHaveBeenCalledWith('/folder?prefix=test/');
+    });
+    it('prevents default navigation behavior on link click', async ()=>{
+        const user = user_event.setup();
+        renderBreadcrumb([
+            {
+                label: 'Home',
+                path: '/home'
+            },
+            {
+                label: 'Current'
+            }
+        ]);
+        const link = screen.getByRole('link', {
+            name: /home/i
+        });
+        await user.click(link);
+        expect(mockNavigate).toHaveBeenCalled();
+    });
+    it('renders long labels with ConstrainedText', ()=>{
+        const longLabel = 'This is a very long breadcrumb label that should be constrained';
+        renderBreadcrumb([
+            {
+                label: longLabel
+            }
+        ]);
+        expect(screen.getByText(longLabel)).toBeInTheDocument();
+    });
+    it('handles special characters in labels', ()=>{
+        renderBreadcrumb([
+            {
+                label: 'Bucket & Folder',
+                path: '/bucket'
+            },
+            {
+                label: 'File (1).txt'
+            }
+        ]);
+        expect(screen.getByText('Bucket & Folder')).toBeInTheDocument();
+        expect(screen.getByText('File (1).txt')).toBeInTheDocument();
+    });
+    it('renders correct number of breadcrumb items', ()=>{
+        renderBreadcrumb([
+            {
+                label: 'Level 1',
+                path: '/1'
+            },
+            {
+                label: 'Level 2',
+                path: '/2'
+            },
+            {
+                label: 'Level 3',
+                path: '/3'
+            },
+            {
+                label: 'Current'
+            }
+        ]);
+        expect(screen.getAllByRole('link')).toHaveLength(3);
+        expect(screen.getByText('Current')).toBeInTheDocument();
+    });
+});

package/dist/components/breadcrumb/__tests__/DataBrowserBreadcrumb.test.d.ts

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

package/dist/components/breadcrumb/__tests__/DataBrowserBreadcrumb.test.js

@@ -0,0 +1,153 @@
+import { jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { createTestWrapper } from "../../../test/testUtils.js";
+import { DataBrowserBreadcrumb } from "../DataBrowserBreadcrumb.js";
+describe('DataBrowserBreadcrumb - User Experience', ()=>{
+    const renderBreadcrumb = (path)=>{
+        const Wrapper = createTestWrapper();
+        return render(/*#__PURE__*/ jsx(MemoryRouter, {
+            initialEntries: [
+                path
+            ],
+            children: /*#__PURE__*/ jsx(Wrapper, {
+                children: /*#__PURE__*/ jsx(DataBrowserBreadcrumb, {})
+            })
+        }));
+    };
+    it('shows breadcrumb only on BucketPage and ObjectsPage', ()=>{
+        const bucketList = renderBreadcrumb('/buckets');
+        expect(bucketList.container.firstChild).not.toBeNull();
+        const bucketDetail = renderBreadcrumb('/buckets/my-bucket');
+        expect(bucketDetail.container.firstChild).not.toBeNull();
+        const objectsPage = renderBreadcrumb('/buckets/my-bucket/objects');
+        expect(objectsPage.container.firstChild).not.toBeNull();
+        const createPage = renderBreadcrumb('/buckets/-/create');
+        expect(createPage.container.firstChild).toBeNull();
+        const settingsPage = renderBreadcrumb('/buckets/my-bucket/policy');
+        expect(settingsPage.container.firstChild).toBeNull();
+    });
+    it.each([
+        '/buckets/-/create',
+        '/buckets/-/access',
+        '/buckets/my-bucket/policy',
+        '/buckets/my-bucket/cors',
+        '/buckets/my-bucket/lifecycle/create',
+        '/buckets/my-bucket/lifecycle/edit/rule-123',
+        '/buckets/my-bucket/replication/create',
+        '/buckets/my-bucket/replication/edit/rule-456',
+        '/buckets/my-bucket/notifications/create',
+        '/buckets/my-bucket/notifications/edit/notif-789',
+        '/buckets/my-bucket/objects/object-lock-settings',
+        '/buckets/my-bucket/unknown-setting'
+    ])('does not show breadcrumb on %s', (path)=>{
+        const { container } = renderBreadcrumb(path);
+        expect(container.firstChild).toBeNull();
+    });
+    it('shows endpoint URL as clickable link on bucket list page', ()=>{
+        renderBreadcrumb('/buckets');
+        const link = screen.getByRole('link', {
+            name: /s3\.amazonaws\.com/i
+        });
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', '/buckets');
+    });
+    it('shows endpoint URL as clickable link on bucket detail page', ()=>{
+        renderBreadcrumb('/buckets/my-bucket');
+        const link = screen.getByRole('link', {
+            name: /s3\.amazonaws\.com/i
+        });
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', '/buckets');
+    });
+    it('shows endpoint and bucket name when viewing root objects', ()=>{
+        renderBreadcrumb('/buckets/my-bucket/objects');
+        expect(screen.getByText(/s3\.amazonaws\.com/i)).toBeInTheDocument();
+        expect(screen.getByText('my-bucket')).toBeInTheDocument();
+    });
+    it('shows folder navigation path when in a folder', ()=>{
+        renderBreadcrumb('/buckets/my-bucket/objects?prefix=folder1/');
+        expect(screen.getByText(/s3\.amazonaws\.com/i)).toBeInTheDocument();
+        expect(screen.getByText('my-bucket')).toBeInTheDocument();
+        expect(screen.getByText('folder1')).toBeInTheDocument();
+    });
+    it('shows nested folder path', ()=>{
+        renderBreadcrumb('/buckets/my-bucket/objects?prefix=folder1/folder2/');
+        expect(screen.getByText(/s3\.amazonaws\.com/i)).toBeInTheDocument();
+        expect(screen.getByText('my-bucket')).toBeInTheDocument();
+        expect(screen.getByText('folder1')).toBeInTheDocument();
+        expect(screen.getByText('folder2')).toBeInTheDocument();
+    });
+    it('shows file name when viewing a file', ()=>{
+        renderBreadcrumb('/buckets/my-bucket/objects?prefix=folder/file.txt');
+        expect(screen.getByText(/s3\.amazonaws\.com/i)).toBeInTheDocument();
+        expect(screen.getByText('my-bucket')).toBeInTheDocument();
+        expect(screen.getByText('folder')).toBeInTheDocument();
+        expect(screen.getByText('file.txt')).toBeInTheDocument();
+    });
+    it('endpoint URL is always clickable when viewing objects', ()=>{
+        renderBreadcrumb('/buckets/my-bucket/objects');
+        const link = screen.getByRole('link', {
+            name: /s3\.amazonaws\.com/i
+        });
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', '/buckets');
+    });
+    it('bucket name becomes clickable when in a folder', ()=>{
+        renderBreadcrumb('/buckets/my-bucket/objects?prefix=folder1/');
+        const link = screen.getByRole('link', {
+            name: /my-bucket/i
+        });
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', '/buckets/my-bucket/objects');
+    });
+    it('bucket name is not clickable on root objects page', ()=>{
+        renderBreadcrumb('/buckets/my-bucket/objects');
+        expect(screen.queryByRole('link', {
+            name: /^my-bucket$/i
+        })).not.toBeInTheDocument();
+        expect(screen.getByText('my-bucket')).toBeInTheDocument();
+    });
+    it('last item in breadcrumb is never clickable', ()=>{
+        renderBreadcrumb('/buckets/my-bucket/objects?prefix=folder1/folder2/');
+        expect(screen.queryByRole('link', {
+            name: /^folder2$/i
+        })).not.toBeInTheDocument();
+        expect(screen.getByText('folder2')).toBeInTheDocument();
+    });
+    it('file name is not clickable when viewing a file', ()=>{
+        renderBreadcrumb('/buckets/my-bucket/objects?prefix=folder/file.txt');
+        expect(screen.queryByRole('link', {
+            name: /file\.txt/i
+        })).not.toBeInTheDocument();
+        expect(screen.getByText('file.txt')).toBeInTheDocument();
+    });
+    it('parent folder is clickable when viewing a file', ()=>{
+        renderBreadcrumb('/buckets/my-bucket/objects?prefix=folder/file.txt');
+        const link = screen.getByRole('link', {
+            name: /folder/i
+        });
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', '/buckets/my-bucket/objects?prefix=folder%2F');
+    });
+    it('handles bucket names with special characters', ()=>{
+        renderBreadcrumb('/buckets/my-bucket-123/objects');
+        expect(screen.getByText(/s3\.amazonaws\.com/i)).toBeInTheDocument();
+        expect(screen.getByText('my-bucket-123')).toBeInTheDocument();
+    });
+    it('handles folder names with special characters', ()=>{
+        renderBreadcrumb('/buckets/my-bucket/objects?prefix=folder%20with%20spaces/');
+        expect(screen.getByText(/s3\.amazonaws\.com/i)).toBeInTheDocument();
+        expect(screen.getByText('my-bucket')).toBeInTheDocument();
+        expect(screen.getByText('folder with spaces')).toBeInTheDocument();
+    });
+    it('handles deeply nested folder structure', ()=>{
+        renderBreadcrumb('/buckets/my-bucket/objects?prefix=level1/level2/level3/level4/');
+        expect(screen.getByText(/s3\.amazonaws\.com/i)).toBeInTheDocument();
+        expect(screen.getByText('my-bucket')).toBeInTheDocument();
+        expect(screen.getByText('level1')).toBeInTheDocument();
+        expect(screen.getByText('level2')).toBeInTheDocument();
+        expect(screen.getByText('level3')).toBeInTheDocument();
+        expect(screen.getByText('level4')).toBeInTheDocument();
+    });
+});

package/dist/components/breadcrumb/__tests__/useBreadcrumbPaths.test.d.ts

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