@scality/data-browser-library 1.0.0-preview.13 → 1.0.0-preview.16

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

@@ -3,8 +3,8 @@ import { useEffect, useState } from "react";
 import { Icon, Loader, Text, spacing, useToast } from "@scality/core-ui";
 import { Box, Button, Input } from "@scality/core-ui/dist/next";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { useQueryClient } from "@tanstack/react-query";
 import { useDeleteObjectTagging, useObjectTagging, useSetObjectTagging } from "../../../hooks/index.js";
+import { useInvalidateQueries } from "../../providers/DataBrowserProvider.js";
 import { ArrayFieldActions } from "../../ui/ArrayFieldActions.js";
 import { convertSizeToRem } from "@scality/core-ui/dist/components/inputv2/inputv2";
 const MAX_TAGS_PER_OBJECT = 10;
@@ -22,17 +22,17 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
     const setTaggingMutation = useSetObjectTagging();
     const deleteTaggingMutation = useDeleteObjectTagging();
     const { showToast } = useToast();
-    const queryClient = useQueryClient();
+    const invalidateQueries = useInvalidateQueries();
     const [isInitialized, setIsInitialized] = useState(false);
     const { control, handleSubmit, setValue, watch, formState: { errors, isValid, isSubmitting } } = useForm({
-        mode: "onChange",
+        mode: 'onChange',
         defaultValues: {
             tags: []
         }
     });
     const { fields, append, remove } = useFieldArray({
         control,
-        name: "tags"
+        name: 'tags'
     });
     useEffect(()=>{
         setIsInitialized(false);
@@ -44,17 +44,17 @@ 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 || ''
                 }));
             if (0 === rows.length) rows.push({
-                key: "",
-                value: ""
+                key: '',
+                value: ''
             });
-            setValue("tags", rows);
+            setValue('tags', rows);
             setIsInitialized(true);
         }
     }, [
@@ -82,9 +82,9 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                         }))
                 }
             });
-            await queryClient.invalidateQueries({
+            await invalidateQueries({
                 queryKey: [
-                    "GetObjectTagging",
+                    'GetObjectTagging',
                     {
                         Bucket: bucketName,
                         Key: objectKey,
@@ -94,25 +94,25 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
             });
             showToast({
                 open: true,
-                message: "Tags saved successfully",
-                status: "success"
+                message: 'Tags saved successfully',
+                status: 'success'
             });
         } catch (error) {
-            const errorMessage = error instanceof Error ? error.message : "Failed to save tags";
+            const errorMessage = error instanceof Error ? error.message : 'Failed to save tags';
             showToast({
                 open: true,
                 message: errorMessage,
-                status: "error"
+                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",
@@ -173,7 +173,7 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                                     })
                                 }),
                                 /*#__PURE__*/ jsx(Box, {
-                                    width: convertSizeToRem("1/3")
+                                    width: convertSizeToRem('1/3')
                                 })
                             ]
                         }),
@@ -190,7 +190,7 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                                                 rules: {
                                                     validate: (value, formValues)=>{
                                                         if (1 === formValues.tags.length && !value.trim() && !formValues.tags[0].value.trim()) return true;
-                                                        if (!value.trim()) return "Key cannot be empty or whitespace only";
+                                                        if (!value.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());
@@ -215,7 +215,7 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                                                 rules: {
                                                     validate: (value, formValues)=>{
                                                         if (1 === formValues.tags.length && !value.trim() && !formValues.tags[0].key.trim()) return true;
-                                                        if (!value.trim()) return "Value cannot be empty or whitespace only";
+                                                        if (!value.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;
                                                     }
@@ -233,13 +233,13 @@ const ObjectTags = ({ bucketName, objectKey, versionId })=>{
                                                 onRemove: ()=>{
                                                     remove(index);
                                                     if (1 === fields.length) append({
-                                                        key: "",
-                                                        value: ""
+                                                        key: '',
+                                                        value: ''
                                                     });
                                                 },
                                                 onAdd: ()=>append({
-                                                        key: "",
-                                                        value: ""
+                                                        key: '',
+                                                        value: ''
                                                     }),
                                                 canRemove: true,
                                                 canAdd: fields.length < MAX_TAGS_PER_OBJECT && !!watch(`tags.${index}.key`) && !!watch(`tags.${index}.value`),