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

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

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

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

@@ -1,9 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, 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 } 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 { hasFormDataChanged } from "./formUtils.js";
 const MAX_TAGS_PER_OBJECT = 10;
 const MAX_TAG_KEY_LENGTH = 128;
 const MAX_TAG_VALUE_LENGTH = 256;
@@ -18,21 +22,27 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
     });
     const setTaggingMutation = useSetObjectTagging();
     const deleteTaggingMutation = useDeleteObjectTagging();
+    const { showToast } = useToast();
+    const invalidateQueries = useInvalidateQueries();
     const [isInitialized, setIsInitialized] = useState(false);
-    const [lastUsedMutation, setLastUsedMutation] = useState(null);
-    const { control, handleSubmit, setValue, formState: { errors, isValid, isSubmitting } } = useForm({
-        mode: "onChange",
+    const [originalTags, setOriginalTags] = useState([]);
+    const { control, handleSubmit, setValue, watch, formState: { errors, isValid, isSubmitting } } = useForm({
+        mode: 'onChange',
         defaultValues: {
             tags: []
         }
     });
     const { fields, append, remove } = useFieldArray({
         control,
-        name: "tags"
+        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);
-        setLastUsedMutation(null);
         setTaggingMutation.reset();
         deleteTaggingMutation.reset();
     }, [
@@ -41,13 +51,18 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
         versionId
     ]);
     useEffect(()=>{
-        if (tagsData && "success" === tagsStatus && !isInitialized) {
+        if (tagsData && 'success' === tagsStatus && !isInitialized) {
             const tags = tagsData.TagSet || [];
             const rows = tags.map((tag)=>({
-                    key: tag.Key || "",
-                    value: tag.Value || ""
+                    key: tag.Key || '',
+                    value: tag.Value || ''
                 }));
-            setValue("tags", rows);
+            if (0 === rows.length) rows.push({
+                key: '',
+                value: ''
+            });
+            setValue('tags', rows);
+            setOriginalTags(rows);
             setIsInitialized(true);
         }
     }, [
@@ -58,38 +73,54 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
     ]);
     const onSubmit = async (data)=>{
         try {
-            if (0 === data.tags.length) {
-                setLastUsedMutation("delete");
-                await deleteTaggingMutation.mutateAsync({
-                    Bucket: bucketName,
-                    Key: objectKey,
-                    ...getVersionParams()
-                });
-            } else {
-                setLastUsedMutation("set");
-                await setTaggingMutation.mutateAsync({
-                    Bucket: bucketName,
-                    Key: objectKey,
-                    ...getVersionParams(),
-                    Tagging: {
-                        TagSet: data.tags.map((row)=>({
-                                Key: row.key.trim(),
-                                Value: row.value.trim()
-                            }))
+            const validTags = data.tags.filter((tag)=>tag.key.trim() && tag.value.trim());
+            if (0 === validTags.length) await deleteTaggingMutation.mutateAsync({
+                Bucket: bucketName,
+                Key: objectKey,
+                ...getVersionParams()
+            });
+            else await setTaggingMutation.mutateAsync({
+                Bucket: bucketName,
+                Key: objectKey,
+                ...getVersionParams(),
+                Tagging: {
+                    TagSet: validTags.map((row)=>({
+                            Key: row.key.trim(),
+                            Value: row.value.trim()
+                        }))
+                }
+            });
+            await invalidateQueries({
+                queryKey: [
+                    'GetObjectTagging',
+                    {
+                        Bucket: bucketName,
+                        Key: objectKey,
+                        ...getVersionParams()
                     }
-                });
-            }
+                ]
+            });
+            showToast({
+                open: true,
+                message: 'Tags saved successfully',
+                status: 'success'
+            });
         } catch (error) {
-            console.error("Failed to save tags:", error);
+            const errorMessage = error instanceof Error ? error.message : 'Failed to save tags';
+            showToast({
+                open: true,
+                message: errorMessage,
+                status: 'error'
+            });
         }
     };
-    if ("pending" === tagsStatus) return /*#__PURE__*/ jsx(Box, {
+    if ('pending' === tagsStatus) return /*#__PURE__*/ jsx(Box, {
         display: "flex",
         justifyContent: "center",
         padding: spacing.r32,
         children: /*#__PURE__*/ jsx(Loader, {})
     });
-    if ("error" === tagsStatus) return /*#__PURE__*/ jsx(Box, {
+    if ('error' === tagsStatus) return /*#__PURE__*/ jsx(Box, {
         padding: spacing.r16,
         children: /*#__PURE__*/ jsx(Text, {
             color: "statusCritical",
@@ -112,37 +143,14 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                             isEmphazed: true,
                             children: "Edit Tags"
                         }),
-                        /*#__PURE__*/ jsxs(Box, {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: spacing.r8,
-                            children: [
-                                "set" === lastUsedMutation && setTaggingMutation.isSuccess && /*#__PURE__*/ jsx(Text, {
-                                    color: "statusHealthy",
-                                    children: "Saved successfully"
-                                }),
-                                "delete" === lastUsedMutation && deleteTaggingMutation.isSuccess && /*#__PURE__*/ jsx(Text, {
-                                    color: "statusHealthy",
-                                    children: "Saved successfully"
-                                }),
-                                "set" === lastUsedMutation && setTaggingMutation.isError && /*#__PURE__*/ jsx(Text, {
-                                    color: "statusCritical",
-                                    children: setTaggingMutation.error?.message || "Failed to save"
-                                }),
-                                "delete" === lastUsedMutation && deleteTaggingMutation.isError && /*#__PURE__*/ jsx(Text, {
-                                    color: "statusCritical",
-                                    children: deleteTaggingMutation.error?.message || "Failed to save"
-                                }),
-                                /*#__PURE__*/ jsx(Button, {
-                                    variant: "primary",
-                                    label: "Save",
-                                    disabled: !isValid || isSubmitting,
-                                    type: "submit",
-                                    icon: /*#__PURE__*/ jsx(Icon, {
-                                        name: "Save"
-                                    })
-                                })
-                            ]
+                        /*#__PURE__*/ jsx(Button, {
+                            variant: "primary",
+                            label: "Save",
+                            disabled: !isValid || isSubmitting || !hasChanges(),
+                            type: "submit",
+                            icon: /*#__PURE__*/ jsx(Icon, {
+                                name: "Save"
+                            })
                         })
                     ]
                 }),
@@ -152,8 +160,9 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                     flexDirection: "column",
                     gap: spacing.r12,
                     children: [
-                        fields.length > 0 && /*#__PURE__*/ jsxs(Box, {
+                        /*#__PURE__*/ jsxs(Box, {
                             display: "flex",
+                            gap: spacing.r8,
                             children: [
                                 /*#__PURE__*/ jsx(Box, {
                                     flex: "1",
@@ -170,16 +179,12 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                                         isEmphazed: true,
                                         children: "Value"
                                     })
+                                }),
+                                /*#__PURE__*/ jsx(Box, {
+                                    width: convertSizeToRem('1/3')
                                 })
                             ]
                         }),
-                        0 === fields.length && "success" === tagsStatus && /*#__PURE__*/ jsx(Box, {
-                            padding: spacing.r16,
-                            children: /*#__PURE__*/ jsx(Text, {
-                                color: "textSecondary",
-                                children: "No tags configured. Add tags to categorize this object."
-                            })
-                        }),
                         fields.map((field, index)=>/*#__PURE__*/ jsxs(Box, {
                                 children: [
                                     /*#__PURE__*/ jsxs(Box, {
@@ -191,13 +196,10 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                                                 control: control,
                                                 name: `tags.${index}.key`,
                                                 rules: {
-                                                    required: "Key is required",
-                                                    maxLength: {
-                                                        value: MAX_TAG_KEY_LENGTH,
-                                                        message: `Key must be ${MAX_TAG_KEY_LENGTH} characters or less`
-                                                    },
                                                     validate: (value, formValues)=>{
-                                                        if (!value.trim()) return "Key cannot be empty or whitespace only";
+                                                        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;
@@ -219,13 +221,10 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                                                 control: control,
                                                 name: `tags.${index}.value`,
                                                 rules: {
-                                                    required: "Value is required",
-                                                    maxLength: {
-                                                        value: MAX_TAG_VALUE_LENGTH,
-                                                        message: `Value must be ${MAX_TAG_VALUE_LENGTH} characters or less`
-                                                    },
-                                                    validate: (value)=>{
-                                                        if (!value.trim()) return "Value cannot be empty or whitespace only";
+                                                    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;
                                                     }
                                                 },
@@ -237,14 +236,23 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                                                         "aria-label": `Tag ${index + 1} value`
                                                     })
                                             }),
-                                            /*#__PURE__*/ jsx(Button, {
-                                                variant: "secondary",
-                                                icon: /*#__PURE__*/ jsx(Icon, {
-                                                    name: "Delete"
-                                                }),
-                                                onClick: ()=>remove(index),
-                                                "aria-label": "Delete row",
-                                                type: "button"
+                                            /*#__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"
                                             })
                                         ]
                                     }),
@@ -262,35 +270,7 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                                         ]
                                     })
                                 ]
-                            }, field.id)),
-                        /*#__PURE__*/ jsxs(Box, {
-                            children: [
-                                /*#__PURE__*/ jsx(Button, {
-                                    variant: "secondary",
-                                    icon: /*#__PURE__*/ jsx(Icon, {
-                                        name: "Create-add"
-                                    }),
-                                    label: "Add Tag",
-                                    onClick: ()=>append({
-                                            key: "",
-                                            value: ""
-                                        }),
-                                    type: "button",
-                                    disabled: fields.length >= MAX_TAGS_PER_OBJECT
-                                }),
-                                fields.length >= MAX_TAGS_PER_OBJECT && /*#__PURE__*/ jsx(Box, {
-                                    paddingTop: spacing.r8,
-                                    children: /*#__PURE__*/ jsxs(Text, {
-                                        color: "statusWarning",
-                                        children: [
-                                            "Maximum ",
-                                            MAX_TAGS_PER_OBJECT,
-                                            " tags allowed per object"
-                                        ]
-                                    })
-                                })
-                            ]
-                        })
+                            }, field.id))
                     ]
                 })
             ]

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

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