@scality/data-browser-library 1.0.1 → 1.0.3

package/dist/components/buckets/BucketCorsPage.js

@@ -143,7 +143,7 @@ const BucketCorsPage = ()=>{
             },
             children: [
                 /*#__PURE__*/ jsx(Icon, {
-                    name: "Exclamation-triangle",
+                    name: "Exclamation-circle",
                     size: "2x",
                     color: "statusWarning"
                 }),

package/dist/components/buckets/BucketCreate.js

@@ -80,6 +80,8 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
     const { register, handleSubmit, formState, watch } = useFormMethods;
     const { isValid, errors } = formState;
     const isObjectLockEnabled = watch('isObjectLockEnabled');
+    const isEncryptionEnabled = watch('isEncryptionEnabled');
+    const isVersioning = watch('isVersioning');
     const { s3Capabilities } = useDataBrowserConfig();
     const { mutate: createBucket, isPending: isCreatingBucket } = useCreateBucket();
     const { mutate: setBucketVersioning } = useSetBucketVersioning();
@@ -242,6 +244,7 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
                                 helpErrorPosition: "bottom",
                                 content: /*#__PURE__*/ jsx(Checkbox, {
                                     id: "isEncryptionEnabled",
+                                    label: isEncryptionEnabled ? 'Enabled' : 'Disabled',
                                     ...register('isEncryptionEnabled')
                                 })
                             }),
@@ -263,6 +266,7 @@ const BucketCreate = ({ subTitle, validationSchema, validationContext, defaultVa
                                 helpErrorPosition: "bottom",
                                 content: /*#__PURE__*/ jsx(Checkbox, {
                                     id: "isVersioning",
+                                    label: isVersioning ? 'Enabled' : 'Disabled',
                                     disabled: isObjectLockEnabled,
                                     ...register('isVersioning')
                                 })

package/dist/components/buckets/BucketLifecycleFormPage.js

@@ -257,9 +257,27 @@ const generateStorageClassHelpText = ()=>{
     const hints = [];
     storageClassOptions.forEach((option)=>{
         const minDays = STORAGE_CLASS_MIN_DAYS[option.value];
-        if (minDays > 0) hints.push(`<li>${option.label}: min ${minDays} days</li>`);
+        if (minDays > 0) hints.push({
+            label: option.label,
+            minDays
+        });
+    });
+    if (0 === hints.length) return;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            "Storage class requirements:",
+            /*#__PURE__*/ jsx("ul", {
+                children: hints.map((hint)=>/*#__PURE__*/ jsxs("li", {
+                        children: [
+                            hint.label,
+                            ": min ",
+                            hint.minDays,
+                            " days"
+                        ]
+                    }, hint.label))
+            })
+        ]
     });
-    return hints.length > 0 ? `Storage class requirements:<ul>${hints.join('')}</ul>` : void 0;
 };
 function BucketLifecycleFormPage() {
     const { bucketName, ruleId } = useParams();

package/dist/components/buckets/BucketLifecycleList.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ConstrainedText, FormattedDateTime, Icon, Stack, Tooltip, Wrap, spacing } from "@scality/core-ui";
+import { ConstrainedText, FormattedDateTime, Icon, Stack, Tooltip, spacing } from "@scality/core-ui";
 import { Box, Button, Table } from "@scality/core-ui/dist/next";
 import { useMemo } from "react";
 import { useDeleteBucketLifecycle, useSetBucketLifecycle } from "../../hooks/bucketConfiguration.js";
@@ -242,20 +242,18 @@ function BucketLifecycleList({ bucketName, lifecycleRules, lifecycleStatus, onCr
             }
         },
         children: [
-            /*#__PURE__*/ jsx(Wrap, {
+            /*#__PURE__*/ jsx(Box, {
+                display: "flex",
+                justifyContent: "flex-end",
                 padding: spacing.r16,
-                children: /*#__PURE__*/ jsx(Box, {
-                    display: "flex",
-                    justifyContent: "flex-end",
-                    children: /*#__PURE__*/ jsx(Button, {
-                        icon: /*#__PURE__*/ jsx(Icon, {
-                            name: "Create-add"
-                        }),
-                        label: "Create Rule",
-                        variant: "primary",
-                        onClick: onCreateRule,
-                        type: "button"
-                    })
+                children: /*#__PURE__*/ jsx(Button, {
+                    icon: /*#__PURE__*/ jsx(Icon, {
+                        name: "Create-add"
+                    }),
+                    label: "Create Rule",
+                    variant: "primary",
+                    onClick: onCreateRule,
+                    type: "button"
                 })
             }),
             /*#__PURE__*/ jsx(Table.SingleSelectableContent, {

package/dist/components/buckets/BucketPolicyPage.js

@@ -110,7 +110,7 @@ const BucketPolicyPage = ()=>{
             },
             children: [
                 /*#__PURE__*/ jsx(Icon, {
-                    name: "Exclamation-triangle",
+                    name: "Exclamation-circle",
                     size: "2x",
                     color: "statusWarning"
                 }),
@@ -158,7 +158,7 @@ const BucketPolicyPage = ()=>{
                     variant: "warning",
                     icon: /*#__PURE__*/ jsx(Icon, {
                         color: "statusWarning",
-                        name: "Exclamation-triangle"
+                        name: "Exclamation-circle"
                     }),
                     children: /*#__PURE__*/ jsxs(Text, {
                         children: [

package/dist/components/buckets/BucketReplicationList.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ConstrainedText, Icon, Wrap, spacing } from "@scality/core-ui";
+import { ConstrainedText, Icon, spacing } from "@scality/core-ui";
 import { Box, Button, Table } from "@scality/core-ui/dist/next";
 import { useMemo } from "react";
 import { useDeleteBucketReplication, useSetBucketReplication } from "../../hooks/bucketConfiguration.js";
@@ -166,7 +166,9 @@ function BucketReplicationList({ bucketName, replicationRules, replicationRole,
             }
         },
         children: [
-            /*#__PURE__*/ jsx(Wrap, {
+            /*#__PURE__*/ jsx(Box, {
+                display: "flex",
+                justifyContent: "flex-end",
                 padding: spacing.r16,
                 children: /*#__PURE__*/ jsx(Button, {
                     icon: /*#__PURE__*/ jsx(Icon, {
@@ -174,7 +176,8 @@ function BucketReplicationList({ bucketName, replicationRules, replicationRole,
                     }),
                     label: "Create Rule",
                     variant: "primary",
-                    onClick: onCreateRule
+                    onClick: onCreateRule,
+                    type: "button"
                 })
             }),
             /*#__PURE__*/ jsx(Table.SingleSelectableContent, {

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

@@ -8,6 +8,7 @@ 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',
@@ -47,6 +48,7 @@ const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
     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: {
@@ -57,6 +59,14 @@ const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
         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(()=>{
         setIsInitialized(false);
         copyObjectMutation.reset();
@@ -97,6 +107,7 @@ const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
                 value: ''
             });
             setValue('metadata', rows);
+            setOriginalMetadata(rows);
             setIsInitialized(true);
         }
     }, [
@@ -113,7 +124,10 @@ const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
     const onSubmit = async (data)=>{
         if (!metadata) return;
         try {
-            const validMetadata = data.metadata.filter((row)=>row.keyType && row.value.trim());
+            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 = {
@@ -189,7 +203,7 @@ const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
                         /*#__PURE__*/ jsx(Button, {
                             variant: "primary",
                             label: "Save",
-                            disabled: !isValid || isSubmitting,
+                            disabled: !isValid || isSubmitting || !hasChanges(),
                             type: "submit",
                             icon: /*#__PURE__*/ jsx(Icon, {
                                 name: "Save"
@@ -321,8 +335,20 @@ const ObjectMetadata = ({ bucketName, objectKey, versionId })=>{
                                                         customKey: '',
                                                         value: ''
                                                     }),
-                                                canRemove: true,
-                                                canAdd: !!watch(`metadata.${index}.keyType`) && !!watch(`metadata.${index}.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"
                                             })

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

@@ -7,6 +7,7 @@ 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 { hasFormDataChanged } from "./formUtils.js";
 const MAX_TAGS_PER_OBJECT = 10;
 const MAX_TAG_KEY_LENGTH = 128;
 const MAX_TAG_VALUE_LENGTH = 256;
@@ -24,6 +25,7 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
     const { showToast } = useToast();
     const invalidateQueries = useInvalidateQueries();
     const [isInitialized, setIsInitialized] = useState(false);
+    const [originalTags, setOriginalTags] = useState([]);
     const { control, handleSubmit, setValue, watch, formState: { errors, isValid, isSubmitting } } = useForm({
         mode: 'onChange',
         defaultValues: {
@@ -34,6 +36,11 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
         control,
         name: 'tags'
     });
+    const normalizeTags = (tags)=>tags.filter((tag)=>tag.key.trim() && tag.value.trim()).map((tag)=>({
+                key: tag.key.trim(),
+                value: tag.value.trim()
+            })).sort((a, b)=>a.key.localeCompare(b.key));
+    const hasChanges = ()=>hasFormDataChanged(watch('tags'), originalTags, normalizeTags);
     useEffect(()=>{
         setIsInitialized(false);
         setTaggingMutation.reset();
@@ -55,6 +62,7 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                 value: ''
             });
             setValue('tags', rows);
+            setOriginalTags(rows);
             setIsInitialized(true);
         }
     }, [
@@ -138,7 +146,7 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                         /*#__PURE__*/ jsx(Button, {
                             variant: "primary",
                             label: "Save",
-                            disabled: !isValid || isSubmitting,
+                            disabled: !isValid || isSubmitting || !hasChanges(),
                             type: "submit",
                             icon: /*#__PURE__*/ jsx(Icon, {
                                 name: "Save"
@@ -241,7 +249,7 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                                                         key: '',
                                                         value: ''
                                                     }),
-                                                canRemove: true,
+                                                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"

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

@@ -0,0 +1,15 @@
+interface NormalizedItem {
+    key: string;
+    value: string;
+}
+/**
+ * Detects if form data has actually changed by comparing normalized values.
+ * Filters out empty entries and compares trimmed, sorted values.
+ *
+ * @param currentData - current form values
+ * @param originalData - original form values
+ * @param normalizer - function to normalize field values for comparison
+ * @returns true if data has changed, false otherwise
+ */
+export declare function hasFormDataChanged<T>(currentData: T[], originalData: T[], normalizer: (data: T[]) => NormalizedItem[]): boolean;
+export {};

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

@@ -0,0 +1,7 @@
+function hasFormDataChanged(currentData, originalData, normalizer) {
+    const normalizedCurrent = normalizer(currentData);
+    const normalizedOriginal = normalizer(originalData);
+    if (normalizedCurrent.length !== normalizedOriginal.length) return true;
+    return normalizedCurrent.some((item, index)=>item.key !== normalizedOriginal[index]?.key || item.value !== normalizedOriginal[index]?.value);
+}
+export { hasFormDataChanged };

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
-import type { S3ClientConfig } from "@aws-sdk/client-s3";
-import type { AwsCredentialIdentity } from "@aws-sdk/types";
-import type { ProxyConfiguration, S3EventType } from "../config/types";
+import type { S3ClientConfig } from '@aws-sdk/client-s3';
+import type { AwsCredentialIdentity } from '@aws-sdk/types';
+import type { ProxyConfiguration, S3EventType } from '../config/types';
 export type { _Object, Bucket, BucketCannedACL, BucketLocationConstraint, CopyObjectCommandInput, CopyObjectCommandOutput, CreateBucketCommandInput, CreateBucketCommandOutput, DeleteBucketCommandInput, DeleteBucketCommandOutput, DeleteBucketCorsCommandOutput, DeleteBucketLifecycleCommandOutput, DeleteBucketPolicyCommandOutput, DeleteBucketReplicationCommandOutput, DeleteBucketTaggingCommandOutput, DeleteMarkerEntry, DeleteObjectCommandInput, DeleteObjectCommandOutput, DeleteObjectsCommandInput, DeleteObjectsCommandOutput, DeleteObjectTaggingCommandOutput, GetBucketAclCommandOutput, GetBucketCorsCommandOutput, GetBucketEncryptionCommandOutput, GetBucketLifecycleConfigurationCommandOutput, GetBucketLocationCommandInput, GetBucketLocationCommandOutput, GetBucketNotificationConfigurationCommandOutput, GetBucketPolicyCommandOutput, GetBucketReplicationCommandOutput, GetBucketTaggingCommandOutput, GetBucketVersioningCommandOutput, GetObjectAclCommandOutput, GetObjectAttributesCommandInput, GetObjectAttributesCommandOutput, GetObjectCommandInput, GetObjectCommandOutput, GetObjectLegalHoldCommandOutput, GetObjectLockConfigurationCommandOutput, GetObjectRetentionCommandOutput, GetObjectTaggingCommandOutput, GetObjectTorrentCommandOutput, HeadObjectCommandInput, HeadObjectCommandOutput, ListBucketsCommandOutput, ListMultipartUploadsCommandInput, ListMultipartUploadsCommandOutput, ListObjectsV2CommandInput, ListObjectsV2CommandOutput, ListObjectVersionsCommandInput, ListObjectVersionsCommandOutput, ObjectCannedACL, ObjectVersion, Owner, PutBucketAclCommandInput, PutBucketCorsCommandInput, PutBucketEncryptionCommandInput, PutBucketLifecycleConfigurationCommandInput, PutBucketNotificationConfigurationCommandInput, PutBucketPolicyCommandInput, PutBucketReplicationCommandInput, PutBucketTaggingCommandInput, PutBucketTaggingCommandOutput, PutBucketVersioningCommandInput, PutObjectAclCommandInput, PutObjectCommandInput, PutObjectCommandOutput, PutObjectLegalHoldCommandInput, PutObjectLockConfigurationCommandInput, PutObjectRetentionCommandInput, PutObjectTaggingCommandInput, RestoreObjectCommandInput, RestoreObjectCommandOutput, SelectObjectContentCommandInput, SelectObjectContentCommandOutput, Tag, } from '@aws-sdk/client-s3';
 export type { MonacoJsonDefaults, MonacoLanguagesJson } from './monaco';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/data-browser-library",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A modular React component library for browsing S3 buckets and objects",
   "type": "module",
   "types": "./dist/index.d.ts",