@scality/data-browser-library 1.0.0-preview.9 → 1.0.3

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

@@ -1,47 +1,74 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Icon, Loader, Text, spacing } from "@scality/core-ui";
+import { Icon, Loader, Text, spacing, useToast } from "@scality/core-ui";
+import { convertSizeToRem } from "@scality/core-ui/dist/components/inputv2/inputv2";
 import { Box, Button, Input, Select } from "@scality/core-ui/dist/next";
+import { useEffect, useState } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { useCopyObject, useObjectMetadata } from "../../../hooks/index.js";
+import { useInvalidateQueries } from "../../providers/DataBrowserProvider.js";
+import { ArrayFieldActions } from "../../ui/ArrayFieldActions.js";
 import { TableContainer } from "../../ui/Table.elements.js";
+import { hasFormDataChanged } from "./formUtils.js";
 const METADATA_KEYS = [
     {
-        key: "CacheControl",
-        label: "cache-control"
+        key: 'CacheControl',
+        label: 'cache-control'
     },
     {
-        key: "ContentDisposition",
-        label: "content-disposition"
+        key: 'ContentDisposition',
+        label: 'content-disposition'
     },
     {
-        key: "ContentEncoding",
-        label: "content-encoding"
+        key: 'ContentEncoding',
+        label: 'content-encoding'
     },
     {
-        key: "ContentType",
-        label: "content-type"
+        key: 'ContentType',
+        label: 'content-type'
     },
     {
-        key: "WebsiteRedirectLocation",
-        label: "website-redirect-location"
+        key: 'WebsiteRedirectLocation',
+        label: 'website-redirect-location'
     },
     {
-        key: "x-amz-meta",
-        label: "x-amz-meta"
+        key: 'x-amz-meta',
+        label: 'x-amz-meta'
     }
 ];
 const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
+    const getVersionParams = ()=>versionId ? {
+            VersionId: versionId
+        } : {};
     const { data: metadata, status: metadataStatus } = useObjectMetadata({
         Bucket: bucketName,
         Key: objectKey,
-        ...versionId && {
-            VersionId: versionId
-        }
+        ...getVersionParams()
     });
     const copyObjectMutation = useCopyObject();
-    const [metadataRows, setMetadataRows] = useState([]);
+    const { showToast } = useToast();
+    const invalidateQueries = useInvalidateQueries();
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [originalMetadata, setOriginalMetadata] = useState([]);
+    const { control, handleSubmit, setValue, watch, formState: { errors, isValid, isSubmitting } } = useForm({
+        mode: 'onChange',
+        defaultValues: {
+            metadata: []
+        }
+    });
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: 'metadata'
+    });
+    const normalizeMetadata = (metadata)=>metadata.filter((row)=>{
+            const hasKey = 'x-amz-meta' === row.keyType ? row.customKey.trim() : row.keyType;
+            return hasKey && row.value.trim();
+        }).map((row)=>({
+                key: 'x-amz-meta' === row.keyType ? `x-amz-meta-${row.customKey.trim()}` : row.keyType,
+                value: row.value.trim()
+            })).sort((a, b)=>a.key.localeCompare(b.key));
+    const hasChanges = ()=>hasFormDataChanged(watch('metadata'), originalMetadata, normalizeMetadata);
     useEffect(()=>{
-        setMetadataRows([]);
+        setIsInitialized(false);
         copyObjectMutation.reset();
     }, [
         bucketName,
@@ -49,114 +76,98 @@ const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
         versionId
     ]);
     useEffect(()=>{
-        if (metadata && "success" === metadataStatus) {
+        if (metadata && 'success' === metadataStatus && !isInitialized) {
             const rows = [];
             const standardKeys = [
-                "CacheControl",
-                "ContentDisposition",
-                "ContentEncoding",
-                "ContentType",
-                "WebsiteRedirectLocation"
+                'CacheControl',
+                'ContentDisposition',
+                'ContentEncoding',
+                'ContentType',
+                'WebsiteRedirectLocation'
             ];
             standardKeys.forEach((keyType)=>{
                 const value = metadata[keyType];
                 if (value) rows.push({
-                    id: `init-${rows.length}`,
                     keyType,
-                    customKey: "",
+                    customKey: '',
                     value
                 });
             });
             const userMetadata = metadata.Metadata || {};
             Object.entries(userMetadata).forEach(([key, value])=>{
                 rows.push({
-                    id: `init-${rows.length}`,
-                    keyType: "x-amz-meta",
+                    keyType: 'x-amz-meta',
                     customKey: key,
                     value: value
                 });
             });
-            setMetadataRows(rows);
+            if (0 === rows.length) rows.push({
+                keyType: '',
+                customKey: '',
+                value: ''
+            });
+            setValue('metadata', rows);
+            setOriginalMetadata(rows);
+            setIsInitialized(true);
         }
     }, [
         metadata,
-        metadataStatus
-    ]);
-    const handleAddRow = useCallback(()=>{
-        setMetadataRows((prev)=>[
-                ...prev,
-                {
-                    id: `new-${Date.now()}`,
-                    keyType: "",
-                    customKey: "",
-                    value: ""
-                }
-            ]);
-    }, []);
-    const handleDeleteRow = useCallback((id)=>{
-        setMetadataRows((prev)=>prev.filter((row)=>row.id !== id));
-    }, []);
-    const handleRowChange = useCallback((id, field, value)=>{
-        setMetadataRows((prev)=>prev.map((row)=>row.id === id ? {
-                    ...row,
-                    [field]: value,
-                    ..."keyType" === field && "x-amz-meta" !== value && {
-                        customKey: ""
-                    }
-                } : row));
-    }, []);
-    const validationErrors = useMemo(()=>{
-        const errors = [];
-        const seenKeys = new Set();
-        metadataRows.forEach((row, index)=>{
-            if (!row.keyType) return void errors.push(`Row ${index + 1}: Please select a metadata key`);
-            if ("x-amz-meta" === row.keyType && !row.customKey.trim()) return void errors.push(`Row ${index + 1}: Please provide a custom key name`);
-            if (!row.value.trim()) return void errors.push(`Row ${index + 1}: Please provide a value`);
-            const fullKey = "x-amz-meta" === row.keyType ? `x-amz-meta-${row.customKey}` : row.keyType;
-            if (seenKeys.has(fullKey)) errors.push(`Row ${index + 1}: Duplicate key "${"x-amz-meta" === row.keyType ? `x-amz-meta-${row.customKey}` : row.keyType}"`);
-            else seenKeys.add(fullKey);
-        });
-        return errors;
-    }, [
-        metadataRows
-    ]);
-    const canSave = metadataRows.length > 0 && 0 === validationErrors.length;
-    const getAvailableOptions = useCallback((currentRowId)=>{
-        const usedKeys = new Set(metadataRows.filter((row)=>row.id !== currentRowId && "x-amz-meta" !== row.keyType).map((row)=>row.keyType));
-        return METADATA_KEYS.filter((key)=>"x-amz-meta" === key.key || !usedKeys.has(key.key));
-    }, [
-        metadataRows
+        metadataStatus,
+        setValue,
+        isInitialized
     ]);
-    const handleSave = useCallback(async ()=>{
-        if (!canSave || !metadata) return;
+    const getAvailableOptions = (currentIndex)=>{
+        const allMetadata = watch('metadata') || [];
+        const usedKeys = new Set(allMetadata.filter((row, idx)=>idx !== currentIndex && 'x-amz-meta' !== row.keyType).map((row)=>row.keyType));
+        return METADATA_KEYS.filter((key)=>'x-amz-meta' === key.key || !usedKeys.has(key.key));
+    };
+    const onSubmit = async (data)=>{
+        if (!metadata) return;
         try {
+            const validMetadata = data.metadata.filter((row)=>{
+                const hasKey = 'x-amz-meta' === row.keyType ? row.customKey.trim() : row.keyType;
+                return hasKey && row.value.trim();
+            });
             const encodedKey = encodeURIComponent(objectKey);
             const copySource = versionId ? `${bucketName}/${encodedKey}?versionId=${versionId}` : `${bucketName}/${encodedKey}`;
             const copyParams = {
                 Bucket: bucketName,
                 Key: objectKey,
                 CopySource: copySource,
-                MetadataDirective: "REPLACE",
+                MetadataDirective: 'REPLACE',
                 Metadata: {}
             };
-            metadataRows.forEach((row)=>{
-                if ("x-amz-meta" === row.keyType) copyParams.Metadata[row.customKey] = row.value;
-                else if (row.keyType) copyParams[row.keyType] = row.value;
+            validMetadata.forEach((row)=>{
+                if ('x-amz-meta' === row.keyType) copyParams.Metadata[row.customKey.trim()] = row.value.trim();
+                else if (row.keyType) copyParams[row.keyType] = row.value.trim();
             });
             if (!copyParams.ContentType && metadata.ContentType) copyParams.ContentType = metadata.ContentType;
             await copyObjectMutation.mutateAsync(copyParams);
+            await invalidateQueries({
+                queryKey: [
+                    'HeadObject',
+                    {
+                        Bucket: bucketName,
+                        Key: objectKey,
+                        ...getVersionParams()
+                    }
+                ]
+            });
+            showToast({
+                open: true,
+                message: 'Metadata saved successfully',
+                status: 'success'
+            });
         } catch (error) {
-            console.error("Failed to save metadata:", error);
+            const errorMessage = error instanceof Error ? error.message : 'Failed to save metadata';
+            showToast({
+                open: true,
+                message: errorMessage,
+                status: 'error'
+            });
         }
-    }, [
-        canSave,
-        metadata,
-        bucketName,
-        objectKey,
-        metadataRows,
-        copyObjectMutation
-    ]);
-    if ("pending" === metadataStatus) return /*#__PURE__*/ jsx(TableContainer, {
+    };
+    if ('pending' === metadataStatus) return /*#__PURE__*/ jsx(TableContainer, {
         children: /*#__PURE__*/ jsx(Box, {
             display: "flex",
             justifyContent: "center",
@@ -164,7 +175,7 @@ const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
             children: /*#__PURE__*/ jsx(Loader, {})
         })
     });
-    if ("error" === metadataStatus) return /*#__PURE__*/ jsx(TableContainer, {
+    if ('error' === metadataStatus) return /*#__PURE__*/ jsx(TableContainer, {
         children: /*#__PURE__*/ jsx(Box, {
             padding: spacing.r16,
             children: /*#__PURE__*/ jsx(Text, {
@@ -173,151 +184,199 @@ const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
             })
         })
     });
-    return /*#__PURE__*/ jsxs(TableContainer, {
-        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 Metadata"
-                    }),
-                    /*#__PURE__*/ jsxs(Box, {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: spacing.r8,
-                        children: [
-                            copyObjectMutation.isSuccess && /*#__PURE__*/ jsx(Text, {
-                                color: "statusHealthy",
-                                children: "Saved successfully"
-                            }),
-                            copyObjectMutation.isError && /*#__PURE__*/ jsx(Text, {
-                                color: "statusCritical",
-                                children: "Failed to save"
-                            }),
-                            /*#__PURE__*/ jsx(Button, {
-                                variant: "primary",
-                                label: "Save",
-                                disabled: !canSave || copyObjectMutation.isPending,
-                                onClick: handleSave,
-                                icon: /*#__PURE__*/ jsx(Icon, {
-                                    name: "Save"
-                                })
-                            })
-                        ]
-                    })
-                ]
-            }),
-            validationErrors.length > 0 && /*#__PURE__*/ jsxs(Box, {
-                padding: spacing.r16,
-                backgroundColor: "backgroundLevel2",
-                borderLeft: "3px solid",
-                borderColor: "statusCritical",
-                children: [
-                    /*#__PURE__*/ jsx(Text, {
-                        color: "statusCritical",
-                        isEmphazed: true,
-                        children: "Validation Errors:"
-                    }),
-                    validationErrors.map((error, index)=>/*#__PURE__*/ jsx(Box, {
-                            paddingLeft: spacing.r8,
-                            children: /*#__PURE__*/ jsxs(Text, {
-                                color: "statusCritical",
-                                children: [
-                                    "• ",
-                                    error
-                                ]
-                            })
-                        }, index))
-                ]
-            }),
-            /*#__PURE__*/ jsxs(Box, {
-                padding: spacing.r16,
-                display: "flex",
-                flexDirection: "column",
-                gap: spacing.r12,
-                flex: "1",
-                children: [
-                    metadataRows.length > 0 && /*#__PURE__*/ jsxs(Box, {
-                        display: "flex",
-                        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"
-                                })
+    return /*#__PURE__*/ jsx(TableContainer, {
+        children: /*#__PURE__*/ jsxs("form", {
+            onSubmit: handleSubmit(onSubmit),
+            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 Metadata"
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            variant: "primary",
+                            label: "Save",
+                            disabled: !isValid || isSubmitting || !hasChanges(),
+                            type: "submit",
+                            icon: /*#__PURE__*/ jsx(Icon, {
+                                name: "Save"
                             })
-                        ]
-                    }),
-                    metadataRows.map((row)=>/*#__PURE__*/ jsxs(Box, {
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(Box, {
+                    padding: spacing.r16,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: spacing.r12,
+                    children: [
+                        /*#__PURE__*/ jsxs(Box, {
                             display: "flex",
                             gap: spacing.r8,
-                            alignItems: "center",
                             children: [
-                                /*#__PURE__*/ jsx(Select, {
-                                    id: `key-${row.id}`,
-                                    value: row.keyType,
-                                    onChange: (value)=>handleRowChange(row.id, "keyType", value),
-                                    placeholder: "Select key",
-                                    children: getAvailableOptions(row.id).map((key)=>/*#__PURE__*/ jsx(Select.Option, {
-                                            value: key.key,
-                                            children: key.label
-                                        }, key.key))
+                                /*#__PURE__*/ jsx(Box, {
+                                    flex: "1",
+                                    children: /*#__PURE__*/ jsx(Text, {
+                                        color: "textSecondary",
+                                        isEmphazed: true,
+                                        children: "Key"
+                                    })
                                 }),
-                                "x-amz-meta" === row.keyType && /*#__PURE__*/ jsx(Input, {
-                                    id: `customKey-${row.id}`,
-                                    value: row.customKey,
-                                    onChange: (e)=>handleRowChange(row.id, "customKey", e.target.value),
-                                    placeholder: "custom-key"
+                                /*#__PURE__*/ jsx(Box, {
+                                    flex: "1",
+                                    children: /*#__PURE__*/ jsx(Text, {
+                                        color: "textSecondary",
+                                        isEmphazed: true,
+                                        children: "Value"
+                                    })
                                 }),
-                                /*#__PURE__*/ jsx(Text, {
-                                    color: "textSecondary",
-                                    children: ":"
-                                }),
-                                /*#__PURE__*/ jsx(Input, {
-                                    id: `value-${row.id}`,
-                                    value: row.value,
-                                    onChange: (e)=>handleRowChange(row.id, "value", e.target.value),
-                                    placeholder: "Value"
-                                }),
-                                /*#__PURE__*/ jsx(Button, {
-                                    variant: "secondary",
-                                    icon: /*#__PURE__*/ jsx(Icon, {
-                                        name: "Delete"
-                                    }),
-                                    onClick: ()=>handleDeleteRow(row.id),
-                                    "aria-label": "Delete row"
+                                /*#__PURE__*/ jsx(Box, {
+                                    width: convertSizeToRem('1/3')
                                 })
                             ]
-                        }, row.id)),
-                    /*#__PURE__*/ jsx(Box, {
-                        children: /*#__PURE__*/ jsx(Button, {
-                            variant: "secondary",
-                            icon: /*#__PURE__*/ jsx(Icon, {
-                                name: "Create-add"
-                            }),
-                            label: "Add Metadata",
-                            onClick: handleAddRow
-                        })
-                    })
-                ]
-            })
-        ]
+                        }),
+                        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: `metadata.${index}.keyType`,
+                                                rules: {
+                                                    validate: (value, formValues)=>{
+                                                        if (1 === formValues.metadata.length && !value && !formValues.metadata[0].value.trim()) return true;
+                                                        if (!value) return 'Please select a metadata key';
+                                                        const allMetadata = formValues.metadata;
+                                                        const usedKeys = allMetadata.map((row, idx)=>{
+                                                            if (idx === index) return null;
+                                                            if ('x-amz-meta' === row.keyType) return row.customKey ? `x-amz-meta-${row.customKey.trim()}` : null;
+                                                            return row.keyType;
+                                                        }).filter(Boolean);
+                                                        const currentKey = 'x-amz-meta' === value ? formValues.metadata[index].customKey ? `x-amz-meta-${formValues.metadata[index].customKey.trim()}` : null : value;
+                                                        if (currentKey && usedKeys.includes(currentKey)) return `Duplicate key "${currentKey}"`;
+                                                        return true;
+                                                    }
+                                                },
+                                                render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Select, {
+                                                        id: `key-${field.id}`,
+                                                        value: value,
+                                                        onChange: (newValue)=>{
+                                                            onChange(newValue);
+                                                            if ('x-amz-meta' !== newValue) setValue(`metadata.${index}.customKey`, '');
+                                                        },
+                                                        placeholder: "Select key",
+                                                        children: getAvailableOptions(index).map((key)=>/*#__PURE__*/ jsx(Select.Option, {
+                                                                value: key.key,
+                                                                children: key.label
+                                                            }, key.key))
+                                                    })
+                                            }),
+                                            'x-amz-meta' === watch(`metadata.${index}.keyType`) && /*#__PURE__*/ jsx(Controller, {
+                                                control: control,
+                                                name: `metadata.${index}.customKey`,
+                                                rules: {
+                                                    validate: (value, formValues)=>{
+                                                        if ('x-amz-meta' === formValues.metadata[index].keyType) {
+                                                            if (!value.trim()) return 'Custom key required';
+                                                        }
+                                                        return true;
+                                                    }
+                                                },
+                                                render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Input, {
+                                                        id: `customKey-${field.id}`,
+                                                        value: value,
+                                                        onChange: onChange,
+                                                        size: "1/3"
+                                                    })
+                                            }),
+                                            /*#__PURE__*/ jsx(Text, {
+                                                color: "textSecondary",
+                                                children: ":"
+                                            }),
+                                            /*#__PURE__*/ jsx(Controller, {
+                                                control: control,
+                                                name: `metadata.${index}.value`,
+                                                rules: {
+                                                    validate: (value, formValues)=>{
+                                                        if (1 === formValues.metadata.length && !value.trim() && !formValues.metadata[0].keyType) return true;
+                                                        if (!value.trim()) return 'Value cannot be empty';
+                                                        return true;
+                                                    }
+                                                },
+                                                render: ({ field: { onChange, value } })=>/*#__PURE__*/ jsx(Input, {
+                                                        id: `value-${field.id}`,
+                                                        value: value,
+                                                        onChange: onChange,
+                                                        placeholder: "Value"
+                                                    })
+                                            }),
+                                            /*#__PURE__*/ jsx(ArrayFieldActions, {
+                                                showAdd: index === fields.length - 1,
+                                                onRemove: ()=>{
+                                                    remove(index);
+                                                    if (1 === fields.length) append({
+                                                        keyType: '',
+                                                        customKey: '',
+                                                        value: ''
+                                                    });
+                                                },
+                                                onAdd: ()=>append({
+                                                        keyType: '',
+                                                        customKey: '',
+                                                        value: ''
+                                                    }),
+                                                canRemove: (()=>{
+                                                    const keyType = watch(`metadata.${index}.keyType`);
+                                                    const customKey = watch(`metadata.${index}.customKey`);
+                                                    const value = watch(`metadata.${index}.value`);
+                                                    const hasKey = 'x-amz-meta' === keyType ? customKey : keyType;
+                                                    return !!hasKey && !!value;
+                                                })(),
+                                                canAdd: (()=>{
+                                                    const keyType = watch(`metadata.${index}.keyType`);
+                                                    const customKey = watch(`metadata.${index}.customKey`);
+                                                    const value = watch(`metadata.${index}.value`);
+                                                    const hasKey = 'x-amz-meta' === keyType ? customKey : keyType;
+                                                    return !!hasKey && !!value;
+                                                })(),
+                                                removeLabel: "Remove metadata",
+                                                addLabel: "Add metadata"
+                                            })
+                                        ]
+                                    }),
+                                    (errors.metadata?.[index]?.keyType || errors.metadata?.[index]?.customKey || errors.metadata?.[index]?.value) && /*#__PURE__*/ jsxs(Box, {
+                                        paddingTop: spacing.r4,
+                                        children: [
+                                            errors.metadata?.[index]?.keyType && /*#__PURE__*/ jsx(Text, {
+                                                color: "statusCritical",
+                                                children: errors.metadata[index]?.keyType?.message
+                                            }),
+                                            errors.metadata?.[index]?.customKey && /*#__PURE__*/ jsx(Text, {
+                                                color: "statusCritical",
+                                                children: errors.metadata[index]?.customKey?.message
+                                            }),
+                                            errors.metadata?.[index]?.value && /*#__PURE__*/ jsx(Text, {
+                                                color: "statusCritical",
+                                                children: errors.metadata[index]?.value?.message
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, field.id))
+                    ]
+                })
+            ]
+        })
     });
 };
 export { ObjectMetadata };

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

@@ -1,3 +1,3 @@
-import { ObjectCommonProps } from ".";
-declare const ObjectSummary: ({ bucketName, objectKey, versionId, }: ObjectCommonProps) => import("react/jsx-runtime").JSX.Element;
+import type { ObjectCommonProps } from '.';
+declare const ObjectSummary: ({ bucketName, objectKey, versionId }: ObjectCommonProps) => import("react/jsx-runtime").JSX.Element;
 export { ObjectSummary };