@scality/data-browser-library 1.0.3 → 1.0.5

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

@@ -1,12 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Icon, Loader, Text, spacing, useToast } from "@scality/core-ui";
-import { convertSizeToRem } from "@scality/core-ui/dist/components/inputv2/inputv2";
-import { Box, Button, Input } from "@scality/core-ui/dist/next";
+import { Text, spacing, useToast } from "@scality/core-ui";
+import { Box, Input } from "@scality/core-ui/dist/next";
 import { useEffect, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { useDeleteObjectTagging, useObjectTagging, useSetObjectTagging } from "../../../hooks/index.js";
 import { useInvalidateQueries } from "../../providers/DataBrowserProvider.js";
 import { ArrayFieldActions } from "../../ui/ArrayFieldActions.js";
+import { Table, TableContainer } from "../../ui/Table.elements.js";
+import { FormCell, FormColumnHeaders, FormError, FormHeader, FormLoading, FormRow } from "./FormComponents.js";
 import { hasFormDataChanged } from "./formUtils.js";
 const MAX_TAGS_PER_OBJECT = 10;
 const MAX_TAG_KEY_LENGTH = 128;
@@ -100,6 +101,7 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                     }
                 ]
             });
+            setIsInitialized(false);
             showToast({
                 open: true,
                 message: 'Tags saved successfully',
@@ -114,164 +116,117 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
             });
         }
     };
-    if ('pending' === tagsStatus) return /*#__PURE__*/ jsx(Box, {
-        display: "flex",
-        justifyContent: "center",
-        padding: spacing.r32,
-        children: /*#__PURE__*/ jsx(Loader, {})
+    if ('pending' === tagsStatus) return /*#__PURE__*/ jsx(FormLoading, {});
+    if ('error' === tagsStatus) return /*#__PURE__*/ jsx(FormError, {
+        message: "Error loading tags"
     });
-    if ('error' === tagsStatus) return /*#__PURE__*/ jsx(Box, {
-        padding: spacing.r16,
-        children: /*#__PURE__*/ jsx(Text, {
-            color: "statusCritical",
-            children: "Error loading tags"
-        })
-    });
-    return /*#__PURE__*/ jsx(Box, {
+    return /*#__PURE__*/ jsx(TableContainer, {
         children: /*#__PURE__*/ jsxs("form", {
             onSubmit: handleSubmit(onSubmit),
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight: 0,
+                flex: 1
+            },
             children: [
-                /*#__PURE__*/ jsxs(Box, {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    padding: spacing.r16,
-                    borderBottom: "1px solid",
-                    borderColor: "backgroundLevel3",
-                    children: [
-                        /*#__PURE__*/ jsx(Text, {
-                            isEmphazed: true,
-                            children: "Edit Tags"
-                        }),
-                        /*#__PURE__*/ jsx(Button, {
-                            variant: "primary",
-                            label: "Save",
-                            disabled: !isValid || isSubmitting || !hasChanges(),
-                            type: "submit",
-                            icon: /*#__PURE__*/ jsx(Icon, {
-                                name: "Save"
-                            })
-                        })
-                    ]
+                /*#__PURE__*/ jsx(FormHeader, {
+                    disabled: !isValid || !hasChanges(),
+                    isSubmitting: isSubmitting
                 }),
-                /*#__PURE__*/ jsxs(Box, {
-                    padding: spacing.r16,
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: spacing.r12,
-                    children: [
-                        /*#__PURE__*/ jsxs(Box, {
-                            display: "flex",
-                            gap: spacing.r8,
-                            children: [
-                                /*#__PURE__*/ jsx(Box, {
-                                    flex: "1",
-                                    children: /*#__PURE__*/ jsx(Text, {
-                                        color: "textSecondary",
-                                        isEmphazed: true,
-                                        children: "Key"
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Box, {
-                                    flex: "1",
-                                    children: /*#__PURE__*/ jsx(Text, {
-                                        color: "textSecondary",
-                                        isEmphazed: true,
-                                        children: "Value"
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Box, {
-                                    width: convertSizeToRem('1/3')
-                                })
-                            ]
-                        }),
-                        fields.map((field, index)=>/*#__PURE__*/ jsxs(Box, {
-                                children: [
-                                    /*#__PURE__*/ jsxs(Box, {
-                                        display: "flex",
-                                        gap: spacing.r8,
-                                        alignItems: "center",
-                                        children: [
-                                            /*#__PURE__*/ jsx(Controller, {
-                                                control: control,
-                                                name: `tags.${index}.key`,
-                                                rules: {
-                                                    validate: (value, formValues)=>{
-                                                        if (1 === formValues.tags.length && !value.trim() && !formValues.tags[0].value.trim()) return true;
-                                                        if (!value.trim()) return 'Key cannot be empty or whitespace only';
-                                                        if (value.length > MAX_TAG_KEY_LENGTH) return `Key must be ${MAX_TAG_KEY_LENGTH} characters or less`;
-                                                        const keys = formValues.tags.map((t)=>t.key.trim());
-                                                        const duplicates = keys.filter((k)=>k === value.trim());
-                                                        return duplicates.length > 1 ? `Duplicate key "${value.trim()}"` : true;
-                                                    }
-                                                },
-                                                render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Input, {
-                                                        id: `key-${field.id}`,
-                                                        value: value,
-                                                        onChange: onChange,
-                                                        placeholder: "Key",
-                                                        "aria-label": `Tag ${index + 1} key`
+                /*#__PURE__*/ jsx(Table, {
+                    children: /*#__PURE__*/ jsxs(Box, {
+                        paddingTop: spacing.r16,
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: spacing.r12,
+                        children: [
+                            /*#__PURE__*/ jsx(FormColumnHeaders, {}),
+                            fields.map((field, index)=>/*#__PURE__*/ jsxs(Box, {
+                                    children: [
+                                        /*#__PURE__*/ jsxs(FormRow, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(FormCell, {
+                                                    children: /*#__PURE__*/ jsx(Controller, {
+                                                        control: control,
+                                                        name: `tags.${index}.key`,
+                                                        rules: {
+                                                            validate: (value, formValues)=>{
+                                                                if (!value.trim() && !formValues.tags[index].value.trim()) return true;
+                                                                if (!value.trim()) return 'Key cannot be empty or whitespace only';
+                                                                if (value.length > MAX_TAG_KEY_LENGTH) return `Key must be ${MAX_TAG_KEY_LENGTH} characters or less`;
+                                                                const keys = formValues.tags.map((t)=>t.key.trim()).filter(Boolean);
+                                                                const duplicates = keys.filter((k)=>k === value.trim());
+                                                                return duplicates.length > 1 ? `Duplicate key "${value.trim()}"` : true;
+                                                            }
+                                                        },
+                                                        render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Input, {
+                                                                id: `key-${field.id}`,
+                                                                value: value,
+                                                                onChange: onChange,
+                                                                placeholder: "Key",
+                                                                "aria-label": `Tag ${index + 1} key`
+                                                            })
                                                     })
-                                            }),
-                                            /*#__PURE__*/ jsx(Text, {
-                                                color: "textSecondary",
-                                                children: ":"
-                                            }),
-                                            /*#__PURE__*/ jsx(Controller, {
-                                                control: control,
-                                                name: `tags.${index}.value`,
-                                                rules: {
-                                                    validate: (value, formValues)=>{
-                                                        if (1 === formValues.tags.length && !value.trim() && !formValues.tags[0].key.trim()) return true;
-                                                        if (!value.trim()) return 'Value cannot be empty or whitespace only';
-                                                        if (value.length > MAX_TAG_VALUE_LENGTH) return `Value must be ${MAX_TAG_VALUE_LENGTH} characters or less`;
-                                                        return true;
-                                                    }
-                                                },
-                                                render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Input, {
-                                                        id: `value-${field.id}`,
-                                                        value: value,
-                                                        onChange: onChange,
-                                                        placeholder: "Value",
-                                                        "aria-label": `Tag ${index + 1} value`
+                                                }),
+                                                /*#__PURE__*/ jsx(FormCell, {
+                                                    children: /*#__PURE__*/ jsx(Controller, {
+                                                        control: control,
+                                                        name: `tags.${index}.value`,
+                                                        rules: {
+                                                            validate: (value, formValues)=>{
+                                                                if (!value.trim() && !formValues.tags[index].key.trim()) return true;
+                                                                if (!value.trim()) return 'Value cannot be empty or whitespace only';
+                                                                if (value.length > MAX_TAG_VALUE_LENGTH) return `Value must be ${MAX_TAG_VALUE_LENGTH} characters or less`;
+                                                                return true;
+                                                            }
+                                                        },
+                                                        render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Input, {
+                                                                id: `value-${field.id}`,
+                                                                value: value,
+                                                                onChange: onChange,
+                                                                placeholder: "Value",
+                                                                "aria-label": `Tag ${index + 1} value`
+                                                            })
                                                     })
-                                            }),
-                                            /*#__PURE__*/ jsx(ArrayFieldActions, {
-                                                showAdd: index === fields.length - 1,
-                                                onRemove: ()=>{
-                                                    remove(index);
-                                                    if (1 === fields.length) append({
-                                                        key: '',
-                                                        value: ''
-                                                    });
-                                                },
-                                                onAdd: ()=>append({
-                                                        key: '',
-                                                        value: ''
-                                                    }),
-                                                canRemove: !!watch(`tags.${index}.key`) && !!watch(`tags.${index}.value`),
-                                                canAdd: fields.length < MAX_TAGS_PER_OBJECT && !!watch(`tags.${index}.key`) && !!watch(`tags.${index}.value`),
-                                                removeLabel: "Remove tag",
-                                                addLabel: "Add tag"
-                                            })
-                                        ]
-                                    }),
-                                    (errors.tags?.[index]?.key || errors.tags?.[index]?.value) && /*#__PURE__*/ jsxs(Box, {
-                                        paddingTop: spacing.r4,
-                                        children: [
-                                            errors.tags?.[index]?.key && /*#__PURE__*/ jsx(Text, {
-                                                color: "statusCritical",
-                                                children: errors.tags[index]?.key?.message
-                                            }),
-                                            errors.tags?.[index]?.value && /*#__PURE__*/ jsx(Text, {
-                                                color: "statusCritical",
-                                                children: errors.tags[index]?.value?.message
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }, field.id))
-                    ]
+                                                }),
+                                                /*#__PURE__*/ jsx(ArrayFieldActions, {
+                                                    showAdd: index === fields.length - 1,
+                                                    onRemove: ()=>{
+                                                        remove(index);
+                                                        if (1 === fields.length) append({
+                                                            key: '',
+                                                            value: ''
+                                                        });
+                                                    },
+                                                    onAdd: ()=>append({
+                                                            key: '',
+                                                            value: ''
+                                                        }),
+                                                    canRemove: !!watch(`tags.${index}.key`) || !!watch(`tags.${index}.value`),
+                                                    canAdd: fields.length < MAX_TAGS_PER_OBJECT && !!watch(`tags.${index}.key`) && !!watch(`tags.${index}.value`),
+                                                    removeLabel: "Remove tag",
+                                                    addLabel: "Add tag"
+                                                })
+                                            ]
+                                        }),
+                                        (errors.tags?.[index]?.key || errors.tags?.[index]?.value) && /*#__PURE__*/ jsxs(Box, {
+                                            paddingTop: spacing.r4,
+                                            children: [
+                                                errors.tags?.[index]?.key && /*#__PURE__*/ jsx(Text, {
+                                                    color: "statusCritical",
+                                                    children: errors.tags[index]?.key?.message
+                                                }),
+                                                errors.tags?.[index]?.value && /*#__PURE__*/ jsx(Text, {
+                                                    color: "statusCritical",
+                                                    children: errors.tags[index]?.value?.message
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }, field.id))
+                        ]
+                    })
                 })
             ]
         })

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

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

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

@@ -0,0 +1,230 @@
+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 { useCopyObject, useObjectMetadata } from "../../../../hooks/index.js";
+import { ObjectMetadata } from "../ObjectMetadata.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 mockUseObjectMetadata = jest.mocked(useObjectMetadata);
+const mockUseCopyObject = jest.mocked(useCopyObject);
+const mockUseToast = jest.mocked(useToast);
+const mockShowToast = jest.fn();
+const setupMockDefaults = (metadataOverrides = {})=>{
+    mockUseObjectMetadata.mockReturnValue({
+        data: {
+            ContentType: 'text/plain',
+            ...metadataOverrides
+        },
+        status: 'success'
+    });
+    mockUseCopyObject.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('ObjectMetadata', ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+    });
+    describe('Loading and Error States', ()=>{
+        it('should show loader when metadata is loading', ()=>{
+            mockUseObjectMetadata.mockReturnValue({
+                data: void 0,
+                status: 'pending'
+            });
+            mockUseCopyObject.mockReturnValue({
+                reset: jest.fn()
+            });
+            mockUseToast.mockReturnValue({
+                showToast: mockShowToast
+            });
+            const { container } = renderWithProviders(/*#__PURE__*/ jsx(ObjectMetadata, {
+                ...defaultProps
+            }));
+            expect(container.querySelectorAll('svg').length).toBeGreaterThan(0);
+        });
+        it('should show error message when metadata fails to load', ()=>{
+            mockUseObjectMetadata.mockReturnValue({
+                data: void 0,
+                status: 'error'
+            });
+            mockUseCopyObject.mockReturnValue({
+                reset: jest.fn()
+            });
+            mockUseToast.mockReturnValue({
+                showToast: mockShowToast
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectMetadata, {
+                ...defaultProps
+            }));
+            expect(screen.getByText('Error loading metadata')).toBeInTheDocument();
+        });
+    });
+    describe('Empty Row Validation', ()=>{
+        it('should keep Save disabled when no metadata exists and nothing is changed', async ()=>{
+            setupMockDefaults({
+                ContentType: void 0,
+                Metadata: {}
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectMetadata, {
+                ...defaultProps
+            }));
+            await waitFor(()=>{
+                expect(screen.getByText('Key')).toBeInTheDocument();
+            });
+            expect(getSaveButton()).toBeDisabled();
+        });
+        it('should allow empty rows alongside filled rows without blocking Save', async ()=>{
+            setupMockDefaults({
+                ContentType: 'text/plain',
+                Metadata: {
+                    customKey: 'customValue'
+                }
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectMetadata, {
+                ...defaultProps
+            }));
+            await waitFor(()=>{
+                expect(screen.getByText('Key')).toBeInTheDocument();
+            });
+            await waitFor(()=>{
+                expect(screen.getByDisplayValue('text/plain')).toBeInTheDocument();
+            });
+            const user = user_event.setup();
+            const valueInput = screen.getByDisplayValue('text/plain');
+            await user.clear(valueInput);
+            await user.type(valueInput, 'application/json');
+            await waitFor(()=>{
+                expect(getSaveButton()).toBeEnabled();
+            });
+        });
+    });
+    describe('Remove Button (canRemove)', ()=>{
+        it('should disable remove for a single empty placeholder row', async ()=>{
+            setupMockDefaults({
+                ContentType: void 0,
+                Metadata: {}
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectMetadata, {
+                ...defaultProps
+            }));
+            await waitFor(()=>{
+                expect(screen.getByText('Key')).toBeInTheDocument();
+            });
+            expect(screen.getByRole('button', {
+                name: /remove metadata/i
+            })).toBeDisabled();
+        });
+        it('should enable remove for any row when there are multiple rows', async ()=>{
+            setupMockDefaults({
+                CacheControl: 'max-age=300',
+                ContentType: 'text/plain'
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectMetadata, {
+                ...defaultProps
+            }));
+            await waitFor(()=>{
+                expect(screen.getByDisplayValue('max-age=300')).toBeInTheDocument();
+            });
+            const removeButtons = screen.getAllByRole('button', {
+                name: /remove metadata/i
+            });
+            expect(removeButtons[0]).toBeEnabled();
+            expect(removeButtons[1]).toBeEnabled();
+        });
+        it('should enable Save after removing one of two metadata entries', async ()=>{
+            setupMockDefaults({
+                CacheControl: 'max-age=300',
+                ContentType: 'text/plain'
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectMetadata, {
+                ...defaultProps
+            }));
+            const user = user_event.setup();
+            await waitFor(()=>{
+                expect(screen.getByDisplayValue('max-age=300')).toBeInTheDocument();
+            });
+            const removeButtons = screen.getAllByRole('button', {
+                name: /remove metadata/i
+            });
+            await user.click(removeButtons[0]);
+            await waitFor(()=>{
+                expect(getSaveButton()).toBeEnabled();
+            });
+        });
+    });
+    describe('Save Button Change Detection', ()=>{
+        it('should disable Save when no changes are made to existing metadata', async ()=>{
+            setupMockDefaults({
+                ContentType: 'text/plain'
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectMetadata, {
+                ...defaultProps
+            }));
+            await waitFor(()=>{
+                expect(screen.getByDisplayValue('text/plain')).toBeInTheDocument();
+            });
+            expect(getSaveButton()).toBeDisabled();
+        });
+        it('should enable Save when a metadata value is modified', async ()=>{
+            setupMockDefaults({
+                ContentType: 'text/plain'
+            });
+            renderWithProviders(/*#__PURE__*/ jsx(ObjectMetadata, {
+                ...defaultProps
+            }));
+            const user = user_event.setup();
+            await waitFor(()=>{
+                expect(screen.getByDisplayValue('text/plain')).toBeInTheDocument();
+            });
+            const valueInput = screen.getByDisplayValue('text/plain');
+            await user.clear(valueInput);
+            await user.type(valueInput, 'application/json');
+            await waitFor(()=>{
+                expect(getSaveButton()).toBeEnabled();
+            });
+        });
+    });
+});

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

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