@scality/data-browser-library 1.0.4 → 1.0.5

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

@@ -1,13 +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, Select } from "@scality/core-ui/dist/next";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Text, spacing, useToast } from "@scality/core-ui";
+import { Box, 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 { Table, TableContainer } from "../../ui/Table.elements.js";
+import { FormCell, FormColumnHeaders, FormError, FormHeader, FormLoading, FormRow } from "./FormComponents.js";
 import { hasFormDataChanged } from "./formUtils.js";
 const METADATA_KEYS = [
     {
@@ -153,6 +153,7 @@ const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
                     }
                 ]
             });
+            setIsInitialized(false);
             showToast({
                 open: true,
                 message: 'Metadata saved successfully',
@@ -167,213 +168,190 @@ const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
             });
         }
     };
-    if ('pending' === metadataStatus) return /*#__PURE__*/ jsx(TableContainer, {
-        children: /*#__PURE__*/ jsx(Box, {
-            display: "flex",
-            justifyContent: "center",
-            padding: spacing.r32,
-            children: /*#__PURE__*/ jsx(Loader, {})
-        })
-    });
-    if ('error' === metadataStatus) return /*#__PURE__*/ jsx(TableContainer, {
-        children: /*#__PURE__*/ jsx(Box, {
-            padding: spacing.r16,
-            children: /*#__PURE__*/ jsx(Text, {
-                color: "statusCritical",
-                children: "Error loading metadata"
-            })
-        })
+    if ('pending' === metadataStatus) return /*#__PURE__*/ jsx(FormLoading, {});
+    if ('error' === metadataStatus) return /*#__PURE__*/ jsx(FormError, {
+        message: "Error loading metadata"
     });
     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 Metadata"
-                        }),
-                        /*#__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: `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`, '');
+                /*#__PURE__*/ jsx(Table, {
+                    children: /*#__PURE__*/ jsxs(Box, {
+                        paddingTop: spacing.r16,
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: spacing.r12,
+                        children: [
+                            /*#__PURE__*/ jsx(FormColumnHeaders, {
+                                wideKey: true
+                            }),
+                            fields.map((field, index)=>/*#__PURE__*/ jsxs(Box, {
+                                    children: [
+                                        /*#__PURE__*/ jsxs(FormRow, {
+                                            columns: "3fr auto 2fr",
+                                            children: [
+                                                /*#__PURE__*/ jsxs(Box, {
+                                                    display: "flex",
+                                                    gap: spacing.r8,
+                                                    alignItems: "center",
+                                                    style: {
+                                                        minWidth: 0
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(FormCell, {
+                                                            style: {
+                                                                flex: 1
+                                                            },
+                                                            children: /*#__PURE__*/ jsx(Controller, {
+                                                                control: control,
+                                                                name: `metadata.${index}.keyType`,
+                                                                rules: {
+                                                                    validate: (value, formValues)=>{
+                                                                        if (!value && !formValues.metadata[index].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__*/ jsxs(Fragment, {
+                                                            children: [
+                                                                /*#__PURE__*/ jsx(Text, {
+                                                                    color: "textSecondary",
+                                                                    children: "-"
+                                                                }),
+                                                                /*#__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(FormCell, {
+                                                    children: /*#__PURE__*/ jsx(Controller, {
+                                                        control: control,
+                                                        name: `metadata.${index}.value`,
+                                                        rules: {
+                                                            validate: (value, formValues)=>{
+                                                                if (!value.trim() && !formValues.metadata[index].keyType) return true;
+                                                                if (!value.trim()) return 'Value cannot be empty';
+                                                                return true;
+                                                            }
                                                         },
-                                                        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"
+                                                        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))
-                    ]
+                                                }),
+                                                /*#__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))
+                        ]
+                    })
                 })
             ]
         })

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

@@ -165,7 +165,11 @@ const ObjectSummary = ({ bucketName, objectKey, versionId })=>{
                             width: "15rem",
                             children: /*#__PURE__*/ jsx(ConstrainedText, {
                                 text: objectKey,
-                                lineClamp: 2
+                                lineClamp: 2,
+                                tooltipStyle: {
+                                    maxWidth: '20rem',
+                                    wordBreak: 'break-all'
+                                }
                             })
                         })
                     ]
@@ -187,7 +191,11 @@ const ObjectSummary = ({ bucketName, objectKey, versionId })=>{
                                         minWidth: "0",
                                         children: /*#__PURE__*/ jsx(ConstrainedText, {
                                             text: metadata?.VersionId || versionId || 'N/A',
-                                            lineClamp: 1
+                                            lineClamp: 1,
+                                            tooltipStyle: {
+                                                maxWidth: '20rem',
+                                                wordBreak: 'break-all'
+                                            }
                                         })
                                     }),
                                     /*#__PURE__*/ jsx(ExtraCell, {
@@ -212,7 +220,8 @@ const ObjectSummary = ({ bucketName, objectKey, versionId })=>{
                         }),
                         /*#__PURE__*/ jsx(Value, {
                             children: 'pending' === metadataStatus ? /*#__PURE__*/ jsx(Loader, {}) : 'error' === metadataStatus ? 'Error' : /*#__PURE__*/ jsx(PrettyBytes, {
-                                bytes: metadata?.ContentLength || 0
+                                bytes: metadata?.ContentLength || 0,
+                                decimals: 2
                             })
                         })
                     ]
@@ -251,7 +260,11 @@ const ObjectSummary = ({ bucketName, objectKey, versionId })=>{
                                         minWidth: "0",
                                         children: /*#__PURE__*/ jsx(ConstrainedText, {
                                             text: metadata?.ETag?.replace(/^"|"$/g, '') || 'N/A',
-                                            lineClamp: 1
+                                            lineClamp: 1,
+                                            tooltipStyle: {
+                                                maxWidth: '20rem',
+                                                wordBreak: 'break-all'
+                                            }
                                         })
                                     }),
                                     /*#__PURE__*/ jsx(ExtraCell, {
@@ -418,7 +431,11 @@ const ObjectSummary = ({ bucketName, objectKey, versionId })=>{
                                                 minWidth: "0",
                                                 children: /*#__PURE__*/ jsx(ConstrainedText, {
                                                     text: publicUrl,
-                                                    lineClamp: 1
+                                                    lineClamp: 1,
+                                                    tooltipStyle: {
+                                                        maxWidth: '20rem',
+                                                        wordBreak: 'break-all'
+                                                    }
                                                 })
                                             }),
                                             /*#__PURE__*/ jsx(ExtraCell, {