@scality/data-browser-library 1.0.4 → 1.0.5

package/dist/components/objects/ObjectDetails/__tests__/ObjectTags.test.js

@@ -0,0 +1,342 @@
+import { jsx } from "react/jsx-runtime";
+import { useToast } from "@scality/core-ui";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import user_event from "@testing-library/user-event";
+import { DataBrowserUICustomizationProvider } from "../../../../contexts/DataBrowserUICustomizationContext.js";
+import { useDeleteObjectTagging, useObjectTagging, useSetObjectTagging } from "../../../../hooks/index.js";
+import { ObjectTags } from "../ObjectTags.js";
+jest.mock('../../../../hooks');
+jest.mock('@scality/core-ui', ()=>{
+    const actual = jest.requireActual('@scality/core-ui');
+    return {
+        ...actual,
+        useToast: jest.fn()
+    };
+});
+jest.mock('../../../providers/DataBrowserProvider', ()=>({
+        ...jest.requireActual('../../../providers/DataBrowserProvider'),
+        useInvalidateQueries: jest.fn(()=>jest.fn().mockResolvedValue(void 0))
+    }));
+const mockUseObjectTagging = jest.mocked(useObjectTagging);
+const mockUseSetObjectTagging = jest.mocked(useSetObjectTagging);
+const mockUseDeleteObjectTagging = jest.mocked(useDeleteObjectTagging);
+const mockUseToast = jest.mocked(useToast);
+const mockShowToast = jest.fn();
+const setupMockDefaults = (tagsData = {
+    TagSet: []
+})=>{
+    mockUseObjectTagging.mockReturnValue({
+        data: tagsData,
+        status: 'success'
+    });
+    mockUseSetObjectTagging.mockReturnValue({
+        mutateAsync: jest.fn().mockResolvedValue({}),
+        reset: jest.fn()
+    });
+    mockUseDeleteObjectTagging.mockReturnValue({
+        mutateAsync: jest.fn().mockResolvedValue({}),
+        reset: jest.fn()
+    });
+    mockUseToast.mockReturnValue({
+        showToast: mockShowToast
+    });
+};
+const renderWithProviders = (ui)=>{
+    const queryClient = new QueryClient({
+        defaultOptions: {
+            queries: {
+                retry: false
+            },
+            mutations: {
+                retry: false
+            }
+        }
+    });
+    return render(/*#__PURE__*/ jsx(QueryClientProvider, {
+        client: queryClient,
+        children: /*#__PURE__*/ jsx(DataBrowserUICustomizationProvider, {
+            config: {},
+            children: ui
+        })
+    }));
+};
+const defaultProps = {
+    bucketName: 'test-bucket',
+    objectKey: 'test-object.txt'
+};
+const getSaveButton = ()=>screen.getByRole('button', {
+        name: /save/i
+    });
+describe('ObjectTags', ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+    });
+    describe('Loading and Error States', ()=>{
+        it('should show loader when tags are loading', ()=>{
+            mockUseObjectTagging.mockReturnValue({
+                data: void 0,
+                status: 'pending'
+            });
+            mockUseSetObjectTagging.mockReturnValue({
+                reset: jest.fn()
+            });
+            mockUseDeleteObjectTagging.mockReturnValue({
+                reset: jest.fn()
+            });
+            mockUseToast.mockReturnValue({
+                showToast: mockShowToast
+            });
+            const { container } = renderWithProviders(/*#__PURE__*/ jsx(ObjectTags, {
+                ...defaultProps
+            }));
+            expect(container.querySelectorAll('svg').length).toBeGreaterThan(0);
+        });
+        it('should show error message when tags fail to load', ()=>{
+            mockUseObjectTagging.mockReturnValue({
+                data: void 0,
+                status: 'error'
+            });
+            mockUseSetObjectTagging.mockReturnValue({
+                reset: jest.fn()
+            });
+            mockUseDeleteObjectTagging.mockReturnValue({
+                reset: jest.fn()
+            });
+            mockUseToast.mockReturnValue({
+                showToast: mockShowToast
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectTags, {
+                ...defaultProps
+            }));
+            expect(screen.getByText('Error loading tags')).toBeInTheDocument();
+        });
+    });
+    describe('Empty Row Validation', ()=>{
+        it('should keep Save disabled when no tags exist and nothing is changed', async ()=>{
+            setupMockDefaults({
+                TagSet: []
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectTags, {
+                ...defaultProps
+            }));
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 1 key')).toBeInTheDocument();
+            });
+            expect(getSaveButton()).toBeDisabled();
+        });
+        it('should not block Save when a filled tag has a trailing empty row', async ()=>{
+            setupMockDefaults({
+                TagSet: []
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectTags, {
+                ...defaultProps
+            }));
+            const user = user_event.setup();
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 1 key')).toBeInTheDocument();
+            });
+            await user.type(screen.getByLabelText('Tag 1 key'), 'env');
+            await user.type(screen.getByLabelText('Tag 1 value'), 'prod');
+            await waitFor(()=>{
+                expect(screen.getByRole('button', {
+                    name: /add tag/i
+                })).toBeEnabled();
+            });
+            await user.click(screen.getByRole('button', {
+                name: /add tag/i
+            }));
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 2 key')).toBeInTheDocument();
+            });
+            await waitFor(()=>{
+                expect(getSaveButton()).toBeEnabled();
+            });
+        });
+        it('should show validation error when only key is filled (value empty)', async ()=>{
+            setupMockDefaults({
+                TagSet: []
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectTags, {
+                ...defaultProps
+            }));
+            const user = user_event.setup();
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 1 key')).toBeInTheDocument();
+            });
+            await user.type(screen.getByLabelText('Tag 1 key'), 'env');
+            await user.type(screen.getByLabelText('Tag 1 value'), 'x');
+            await user.clear(screen.getByLabelText('Tag 1 value'));
+            await waitFor(()=>{
+                expect(screen.getByText('Value cannot be empty or whitespace only')).toBeInTheDocument();
+            });
+        });
+    });
+    describe('Remove Button (canRemove)', ()=>{
+        it('should disable remove button for a single empty placeholder row', async ()=>{
+            setupMockDefaults({
+                TagSet: []
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectTags, {
+                ...defaultProps
+            }));
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 1 key')).toBeInTheDocument();
+            });
+            expect(screen.getByRole('button', {
+                name: /remove tag/i
+            })).toBeDisabled();
+        });
+        it('should enable remove button when there are multiple rows', async ()=>{
+            setupMockDefaults({
+                TagSet: [
+                    {
+                        Key: 'env',
+                        Value: 'prod'
+                    },
+                    {
+                        Key: 'team',
+                        Value: 'platform'
+                    }
+                ]
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectTags, {
+                ...defaultProps
+            }));
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 1 key')).toHaveValue('env');
+            });
+            const removeButtons = screen.getAllByRole('button', {
+                name: /remove tag/i
+            });
+            expect(removeButtons[0]).toBeEnabled();
+            expect(removeButtons[1]).toBeEnabled();
+        });
+        it('should enable Save after removing one of two tags', async ()=>{
+            setupMockDefaults({
+                TagSet: [
+                    {
+                        Key: 'env',
+                        Value: 'prod'
+                    },
+                    {
+                        Key: 'team',
+                        Value: 'platform'
+                    }
+                ]
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectTags, {
+                ...defaultProps
+            }));
+            const user = user_event.setup();
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 1 key')).toHaveValue('env');
+            });
+            const removeButtons = screen.getAllByRole('button', {
+                name: /remove tag/i
+            });
+            await user.click(removeButtons[0]);
+            await waitFor(()=>{
+                expect(getSaveButton()).toBeEnabled();
+            });
+        });
+    });
+    describe('Duplicate Key Validation', ()=>{
+        it('should not count empty rows as duplicates', async ()=>{
+            setupMockDefaults({
+                TagSet: []
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectTags, {
+                ...defaultProps
+            }));
+            const user = user_event.setup();
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 1 key')).toBeInTheDocument();
+            });
+            await user.type(screen.getByLabelText('Tag 1 key'), 'env');
+            await user.type(screen.getByLabelText('Tag 1 value'), 'prod');
+            await waitFor(()=>{
+                expect(screen.getByRole('button', {
+                    name: /add tag/i
+                })).toBeEnabled();
+            });
+            await user.click(screen.getByRole('button', {
+                name: /add tag/i
+            }));
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 2 key')).toBeInTheDocument();
+            });
+            expect(screen.queryByText(/duplicate key/i)).not.toBeInTheDocument();
+        });
+    });
+    describe('Save Button Change Detection', ()=>{
+        it('should disable Save when no actual changes are made', async ()=>{
+            setupMockDefaults({
+                TagSet: [
+                    {
+                        Key: 'env',
+                        Value: 'prod'
+                    }
+                ]
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectTags, {
+                ...defaultProps
+            }));
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 1 key')).toHaveValue('env');
+            });
+            expect(getSaveButton()).toBeDisabled();
+        });
+        it('should enable Save when a tag value is modified', async ()=>{
+            setupMockDefaults({
+                TagSet: [
+                    {
+                        Key: 'env',
+                        Value: 'prod'
+                    }
+                ]
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectTags, {
+                ...defaultProps
+            }));
+            const user = user_event.setup();
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 1 value')).toHaveValue('prod');
+            });
+            await user.clear(screen.getByLabelText('Tag 1 value'));
+            await user.type(screen.getByLabelText('Tag 1 value'), 'staging');
+            await waitFor(()=>{
+                expect(getSaveButton()).toBeEnabled();
+            });
+        });
+        it('should keep Save disabled when adding only an empty trailing row to existing tags', async ()=>{
+            setupMockDefaults({
+                TagSet: [
+                    {
+                        Key: 'env',
+                        Value: 'prod'
+                    }
+                ]
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectTags, {
+                ...defaultProps
+            }));
+            const user = user_event.setup();
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 1 key')).toHaveValue('env');
+            });
+            await waitFor(()=>{
+                expect(screen.getByRole('button', {
+                    name: /add tag/i
+                })).toBeEnabled();
+            });
+            await user.click(screen.getByRole('button', {
+                name: /add tag/i
+            }));
+            await waitFor(()=>{
+                expect(screen.getByLabelText('Tag 2 key')).toBeInTheDocument();
+            });
+            expect(getSaveButton()).toBeDisabled();
+        });
+    });
+});

package/dist/components/objects/ObjectDetails/__tests__/formUtils.test.d.ts

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

package/dist/components/objects/ObjectDetails/__tests__/formUtils.test.js

@@ -0,0 +1,202 @@
+import { hasFormDataChanged } from "../formUtils.js";
+const identity = (data)=>data;
+const normalizeTags = (tags)=>tags.filter((tag)=>tag.key.trim() && tag.value.trim()).map((tag)=>({
+            key: tag.key.trim(),
+            value: tag.value.trim()
+        })).sort((a, b)=>a.key.localeCompare(b.key));
+describe('hasFormDataChanged', ()=>{
+    describe('basic comparison', ()=>{
+        it('should return false when both arrays are empty', ()=>{
+            expect(hasFormDataChanged([], [], identity)).toBe(false);
+        });
+        it('should return false when data is identical', ()=>{
+            const data = [
+                {
+                    key: 'a',
+                    value: '1'
+                }
+            ];
+            expect(hasFormDataChanged(data, data, identity)).toBe(false);
+        });
+        it('should return true when lengths differ', ()=>{
+            const current = [
+                {
+                    key: 'a',
+                    value: '1'
+                }
+            ];
+            const original = [
+                {
+                    key: 'a',
+                    value: '1'
+                },
+                {
+                    key: 'b',
+                    value: '2'
+                }
+            ];
+            expect(hasFormDataChanged(current, original, identity)).toBe(true);
+        });
+        it('should return true when values differ', ()=>{
+            const current = [
+                {
+                    key: 'a',
+                    value: 'changed'
+                }
+            ];
+            const original = [
+                {
+                    key: 'a',
+                    value: '1'
+                }
+            ];
+            expect(hasFormDataChanged(current, original, identity)).toBe(true);
+        });
+        it('should return true when keys differ', ()=>{
+            const current = [
+                {
+                    key: 'b',
+                    value: '1'
+                }
+            ];
+            const original = [
+                {
+                    key: 'a',
+                    value: '1'
+                }
+            ];
+            expect(hasFormDataChanged(current, original, identity)).toBe(true);
+        });
+    });
+    describe('with normalizeTags (filters empty rows, trims, sorts)', ()=>{
+        it('should return false when only difference is empty trailing rows', ()=>{
+            const current = [
+                {
+                    key: 'env',
+                    value: 'prod'
+                },
+                {
+                    key: '',
+                    value: ''
+                }
+            ];
+            const original = [
+                {
+                    key: 'env',
+                    value: 'prod'
+                }
+            ];
+            expect(hasFormDataChanged(current, original, normalizeTags)).toBe(false);
+        });
+        it('should return false when only difference is whitespace', ()=>{
+            const current = [
+                {
+                    key: '  env  ',
+                    value: '  prod  '
+                }
+            ];
+            const original = [
+                {
+                    key: 'env',
+                    value: 'prod'
+                }
+            ];
+            expect(hasFormDataChanged(current, original, normalizeTags)).toBe(false);
+        });
+        it('should return false when both have empty rows only', ()=>{
+            const current = [
+                {
+                    key: '',
+                    value: ''
+                }
+            ];
+            const original = [
+                {
+                    key: '',
+                    value: ''
+                }
+            ];
+            expect(hasFormDataChanged(current, original, normalizeTags)).toBe(false);
+        });
+        it('should return true when a new tag is added', ()=>{
+            const current = [
+                {
+                    key: 'env',
+                    value: 'prod'
+                },
+                {
+                    key: 'team',
+                    value: 'platform'
+                }
+            ];
+            const original = [
+                {
+                    key: 'env',
+                    value: 'prod'
+                }
+            ];
+            expect(hasFormDataChanged(current, original, normalizeTags)).toBe(true);
+        });
+        it('should return true when a tag is removed (plus empty placeholder)', ()=>{
+            const current = [
+                {
+                    key: '',
+                    value: ''
+                }
+            ];
+            const original = [
+                {
+                    key: 'env',
+                    value: 'prod'
+                }
+            ];
+            expect(hasFormDataChanged(current, original, normalizeTags)).toBe(true);
+        });
+        it('should return false regardless of order', ()=>{
+            const current = [
+                {
+                    key: 'team',
+                    value: 'platform'
+                },
+                {
+                    key: 'env',
+                    value: 'prod'
+                }
+            ];
+            const original = [
+                {
+                    key: 'env',
+                    value: 'prod'
+                },
+                {
+                    key: 'team',
+                    value: 'platform'
+                }
+            ];
+            expect(hasFormDataChanged(current, original, normalizeTags)).toBe(false);
+        });
+        it('should return false when multiple empty rows exist alongside unchanged data', ()=>{
+            const current = [
+                {
+                    key: 'env',
+                    value: 'prod'
+                },
+                {
+                    key: '',
+                    value: ''
+                },
+                {
+                    key: '',
+                    value: ''
+                }
+            ];
+            const original = [
+                {
+                    key: 'env',
+                    value: 'prod'
+                }
+            ];
+            expect(hasFormDataChanged(current, original, normalizeTags)).toBe(false);
+        });
+    });
+});

package/dist/components/objects/ObjectDetails/index.d.ts

@@ -19,7 +19,8 @@ interface ObjectDetailsContextValue {
  */
 export declare const ObjectDetailsContext: import("react").Context<ObjectDetailsContextValue | null>;
 export declare function useObjectDetailsContext(): ObjectDetailsContextValue;
-export declare const ObjectDetails: ({ item }: {
+export declare const ObjectDetails: ({ item, multipleSelected }: {
     item: TableItem | null;
+    multipleSelected?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/objects/ObjectDetails/index.js

@@ -44,21 +44,18 @@ const CustomTab = ({ config })=>/*#__PURE__*/ jsx(Fragment, {
         children: config.render()
     });
 CustomTab.displayName = 'ObjectDetails.CustomTab';
-const ObjectDetails = ({ item })=>{
+const ObjectDetails = ({ item, multipleSelected })=>{
     const { bucketName } = useParams();
     const { extraObjectTabs } = useDataBrowserUICustomization();
+    const placeholderMessages = {
+        deleteMarker: 'A "Delete Marker" is selected',
+        folder: 'A "Folder" is selected'
+    };
     const getPlaceholderMessage = ()=>{
-        if (!bucketName || !item || !item.Key) return /*#__PURE__*/ jsx(Text, {
-            children: "Select an object to view details"
-        });
-        if ('deleteMarker' === item.type) return /*#__PURE__*/ jsx(Text, {
-            children: 'A "Delete Marker" is selected'
-        });
-        if ('folder' === item.type) return /*#__PURE__*/ jsx(Text, {
-            children: 'A "Folder" is selected'
-        });
+        const message = multipleSelected ? 'Multiple items selected' : item?.type && placeholderMessages[item.type] || 'Select an object to view details';
         return /*#__PURE__*/ jsx(Text, {
-            children: "Select an object to view details"
+            color: "textSecondary",
+            children: message
         });
     };
     const defaultTabsMap = useMemo(()=>({
@@ -66,7 +63,7 @@ const ObjectDetails = ({ item })=>{
                 id: 'summary',
                 label: 'Summary',
                 path: '',
-                withoutPadding: false,
+                withoutPadding: true,
                 query: {
                     tab: ''
                 },
@@ -77,7 +74,7 @@ const ObjectDetails = ({ item })=>{
                 id: 'metadata',
                 label: 'Metadata',
                 path: '',
-                withoutPadding: false,
+                withoutPadding: true,
                 query: {
                     tab: 'metadata'
                 },
@@ -88,7 +85,7 @@ const ObjectDetails = ({ item })=>{
                 id: 'tags',
                 label: 'Tags',
                 path: '',
-                withoutPadding: false,
+                withoutPadding: true,
                 query: {
                     tab: 'tags'
                 },
@@ -129,13 +126,12 @@ const ObjectDetails = ({ item })=>{
         objectKey,
         versionId
     ]);
-    const isPlaceholder = !bucketName || !item || !item.Key || 'deleteMarker' === item.type || 'folder' === item.type;
+    const isPlaceholder = multipleSelected || !bucketName || !item || !item.Key || 'deleteMarker' === item.type || 'folder' === item.type;
     const placeholderMessage = isPlaceholder ? getPlaceholderMessage() : null;
     const tabsContent = useMemo(()=>allTabs.map((tab)=>/*#__PURE__*/ jsx(Tabs.Tab, {
                 label: tab.label,
                 path: tab.path,
                 query: tab.query,
-                withoutPadding: tab.withoutPadding,
                 children: isPlaceholder ? /*#__PURE__*/ jsx(Box, {
                     padding: spacing.r16,
                     display: "flex",

package/dist/components/objects/ObjectList.d.ts

@@ -35,8 +35,9 @@ export declare const isObjectLike: (item: TableItem) => item is ObjectItem | Ver
 interface ObjectListProps {
     bucketName: string;
     prefix: string;
-    onObjectSelect: (object: TableItem) => void;
+    onObjectSelect: (object: TableItem | null) => void;
     onPrefixChange: (newPrefix: string) => void;
+    onSelectedObjectsChange?: (selectedObjects: TableItem[]) => void;
 }
-export declare const ObjectList: ({ bucketName, prefix, onObjectSelect, onPrefixChange }: ObjectListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ObjectList: ({ bucketName, prefix, onObjectSelect, onPrefixChange, onSelectedObjectsChange, }: ObjectListProps) => import("react/jsx-runtime").JSX.Element;
 export {};