Merge branch 'bugfix/ZKUI-240/fix-navigation-between-metadata-and-tag…

…s' into q/1.5

src/react/databrowser/objects/ObjectDetails.tsx

@@ -60,11 +60,25 @@ function ObjectDetails({ toggled, listType }: Props) {
     }
 
     if (tabName === 'metadata') {
-      return <Metadata objectMetadata={objectMetadata} listType={listType} />;
+      return (
+        <Metadata
+          bucketName={objectMetadata.bucketName}
+          objectKey={objectMetadata.objectKey}
+          metadata={objectMetadata.metadata}
+          listType={listType}
+        />
+      );
     }
 
     if (tabName === 'tags') {
-      return <Tags objectMetadata={objectMetadata} />;
+      return (
+        <Tags
+          bucketName={objectMetadata.bucketName}
+          objectKey={objectMetadata.objectKey}
+          tags={objectMetadata.tags}
+          versionId={objectMetadata.versionId}
+        />
+      );
     }
 
     return null;

src/react/databrowser/objects/details/Metadata.tsx

@@ -25,13 +25,13 @@ import type {
   ListObjectsType,
   MetadataItem,
   MetadataItems,
-  ObjectMetadata,
 } from '../../../../types/s3';
 import { LIST_OBJECT_VERSIONS_S3_TYPE } from '../../../utils/s3';
 import { putObjectMetadata } from '../../../actions';
 import FormContainer, * as F from '../../../ui-elements/FormLayout';
 import { useDispatch } from 'react-redux';
 import { useForm, useFieldArray, Controller } from 'react-hook-form';
+import { useEffect } from 'react';
 const userMetadataOption = {
   value: AMZ_META,
   label: AMZ_META,
@@ -72,31 +72,35 @@ const convertToAWSMetadata = (items: MetadataItems) => {
 };
 
 type Props = {
-  objectMetadata: ObjectMetadata;
   listType: ListObjectsType;
+  bucketName: string;
+  objectKey: string;
+  metadata: MetadataItems;
 };
 
 type FormValues = {
   metadata: (MetadataItem & { mdKey: string })[];
 };
 
-function Metadata({ objectMetadata, listType }: Props) {
+const prepareFormData = (metadata: MetadataItems) => ({
+  metadata: metadata.map((item) => ({
+    ...item,
+    key: isUserType(item.type) ? AMZ_META : item.key,
+    mdKey: isUserType(item.type) ? item.key.replace(AMZ_META + '-', '') : '',
+  })),
+});
+
+function Metadata({ bucketName, objectKey, metadata, listType }: Props) {
   const dispatch = useDispatch();
-  const { bucketName, objectKey, metadata } = objectMetadata;
+
   const isVersioningType = listType === LIST_OBJECT_VERSIONS_S3_TYPE;
   const EMPTY_ITEM = {
     key: '',
     value: '',
     mdKey: '',
     type: METADATA_SYSTEM_TYPE,
   };
-  const defaultValues = {
-    metadata: metadata.map((item) => ({
-      ...item,
-      key: isUserType(item.type) ? AMZ_META : item.key,
-      mdKey: isUserType(item.type) ? item.key.replace(AMZ_META + '-', '') : '',
-    })),
-  };
+  const defaultValues = prepareFormData(metadata);
   const {
     register,
     reset,
@@ -107,6 +111,9 @@ function Metadata({ objectMetadata, listType }: Props) {
   } = useForm<FormValues>({
     defaultValues,
   });
+  useEffect(() => {
+    reset(prepareFormData(metadata));
+  }, [metadata]);
 
   const { metadata: metadataFormValues } = getValues();
 
@@ -227,7 +234,9 @@ function Metadata({ objectMetadata, listType }: Props) {
                     index={index}
                     items={metadataFormValues}
                     deleteEntry={() =>
-                      metadataFormValues.length === 1 ? deleteEntry() : remove(index)
+                      metadataFormValues.length === 1
+                        ? deleteEntry()
+                        : remove(index)
                     }
                   />
                   <AddButton

src/react/databrowser/objects/details/Tags.tsx

@@ -18,6 +18,7 @@ import { spacing } from '@scality/core-ui/dist/style/theme';
 import { useDispatch } from 'react-redux';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { SpacedBox } from '@scality/core-ui';
+import { useEffect } from 'react';
 const EMPTY_ITEM = {
   key: '',
   value: '',
@@ -32,19 +33,23 @@ const convertToAWSTags = (tags: Tag[]) =>
     }));
 
 type Props = {
-  objectMetadata: ObjectMetadata;
+  bucketName: string;
+  objectKey: string;
+  tags: Tag[];
+  versionId: string;
 };
 
 type FormValues = {
   tags: Tag[];
 };
 
-function Properties({ objectMetadata }: Props) {
+const prepareFormData = (tags: Tag[]) => ({
+  tags: tags.length > 0 ? tags : [EMPTY_ITEM],
+});
+
+function Properties({ bucketName, objectKey, tags, versionId }: Props) {
   const dispatch = useDispatch();
-  const { bucketName, objectKey, tags, versionId } = objectMetadata;
-  const defaultValues = {
-    tags: tags.length > 0 ? tags : [EMPTY_ITEM],
-  };
+  const defaultValues = prepareFormData(tags);
 
   const {
     register,
@@ -57,7 +62,11 @@ function Properties({ objectMetadata }: Props) {
     defaultValues,
   });
 
-  const tagsFormValues = watch("tags");
+  useEffect(() => {
+    reset(prepareFormData(tags));
+  }, [tags]);
+
+  const tagsFormValues = watch('tags');
 
   const onSubmit = (data: FormValues) => {
     const tags = convertToAWSTags(data.tags);

src/react/databrowser/objects/details/__tests__/Metadata.test.tsx

@@ -48,7 +48,12 @@ describe('Metadata', () => {
   });
   it('Metadata should render', () => {
     const { component } = reduxMount(
-      <Metadata objectMetadata={OBJECT_METADATA} listType={'s3'} />,
+      <Metadata
+        objectKey={OBJECT_METADATA.objectKey}
+        bucketName={OBJECT_METADATA.bucketName}
+        metadata={OBJECT_METADATA.metadata}
+        listType={'s3'}
+      />,
       {},
     );
     expect(component.find(Metadata).isEmptyRender()).toBe(false);
@@ -90,16 +95,15 @@ describe('Metadata', () => {
         component: { container },
       } = reduxRender(
         <Metadata
-          objectMetadata={{
-            ...OBJECT_METADATA,
-            metadata: [
-              {
-                key: metadataKey,
-                value: metadataValue,
-                type: METADATA_SYSTEM_TYPE,
-              },
-            ],
-          }}
+          objectKey={OBJECT_METADATA.objectKey}
+          bucketName={OBJECT_METADATA.bucketName}
+          metadata={[
+            {
+              key: metadataKey,
+              value: metadataValue,
+              type: METADATA_SYSTEM_TYPE,
+            },
+          ]}
           listType={'s3'}
         />,
         metadataConfig,
@@ -176,16 +180,15 @@ describe('Metadata', () => {
         component: { container },
       } = reduxRender(
         <Metadata
-          objectMetadata={{
-            ...OBJECT_METADATA,
-            metadata: [
-              {
-                key: metadataKey,
-                value: metadataValue,
-                type: METADATA_SYSTEM_TYPE,
-              },
-            ],
-          }}
+          metadata={[
+            {
+              key: metadataKey,
+              value: metadataValue,
+              type: METADATA_SYSTEM_TYPE,
+            },
+          ]}
+          objectKey={OBJECT_METADATA.objectKey}
+          bucketName={OBJECT_METADATA.bucketName}
           listType={'s3'}
         />,
         metadataConfig,
@@ -233,16 +236,15 @@ describe('Metadata', () => {
     reduxRender(
       <Metadata
         listType="ver"
-        objectMetadata={{
-          ...OBJECT_METADATA,
-          metadata: [
-            {
-              key: 'CacheControl',
-              value: 'no-cache',
-              type: METADATA_SYSTEM_TYPE,
-            },
-          ],
-        }}
+        bucketName={OBJECT_METADATA.bucketName}
+        objectKey={OBJECT_METADATA.objectKey}
+        metadata={[
+          {
+            key: 'CacheControl',
+            value: 'no-cache',
+            type: METADATA_SYSTEM_TYPE,
+          },
+        ]}
       />,
       metadataConfig,
     );
@@ -264,21 +266,20 @@ describe('Metadata', () => {
       } = reduxRender(
         <Metadata
           listType="s3"
-          objectMetadata={{
-            ...OBJECT_METADATA,
-            metadata: [
-              {
-                key: 'CacheControl',
-                value: 'no-cache',
-                type: METADATA_SYSTEM_TYPE,
-              },
-              {
-                key: 'cache-type',
-                value: '1',
-                type: METADATA_USER_TYPE,
-              },
-            ],
-          }}
+          metadata={[
+            {
+              key: 'CacheControl',
+              value: 'no-cache',
+              type: METADATA_SYSTEM_TYPE,
+            },
+            {
+              key: 'cache-type',
+              value: '1',
+              type: METADATA_USER_TYPE,
+            },
+          ]}
+          bucketName={OBJECT_METADATA.bucketName}
+          objectKey={OBJECT_METADATA.objectKey}
         />,
         metadataConfig,
       );