32162 Object store managed attribute labels not attached to correct data

- Changed DinaForm to DinaFormSection in ManagedAttributesViewer to override initialValues
- Changed initial values from array to object, this is where the problem was
- Override managedAttributes values with sorted values
- Changed FieldView name to get the correct managed attributes key

packages/dina-ui/components/managed-attributes/ManagedAttributesViewer.tsx

@@ -1,4 +1,10 @@
-import { DinaForm, FieldView, useApiClient, useIsMounted } from "common-ui";
+import {
+  DinaForm,
+  DinaFormSection,
+  FieldView,
+  useApiClient,
+  useIsMounted
+} from "common-ui";
 import { toPairs } from "lodash";
 import { ManagedAttribute } from "../../types/collection-api";
 import { useEffect, useState } from "react";
@@ -61,18 +67,21 @@ export function ManagedAttributesViewer({
       name: allAttrKeyNameMap[item.key]
     }))
     .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
-
+  const managedAttributesInitialValues = managedAttributeValues.reduce(
+    (prev, curr) => ({ ...prev, [curr.key]: curr.value }),
+    {}
+  );
   return (
-    <DinaForm initialValues={managedAttributeValues} readOnly={true}>
+    <DinaFormSection initialValues={managedAttributesInitialValues}>
       {managedAttributeValues.length ? (
         <div className="row">
-          {managedAttributeValues.map((mav, index) => {
+          {managedAttributeValues.map((mav) => {
             return (
               <FieldView
-                key={mav.key}
                 className="col-6"
                 label={mav.name}
-                name={`${index}.value`}
+                name={`managedAttributes.${mav.key}`}
+                key={mav.key}
               />
             );
           })}
@@ -82,6 +91,6 @@ export function ManagedAttributesViewer({
           <DinaMessage id="noManagedAttributeValues" />
         </div>
       )}
-    </DinaForm>
+    </DinaFormSection>
   );
 }