Created util that creates an header object from an array

packages/strapi-plugin-content-type-builder/admin/src/components/List/index.js

@@ -182,7 +182,6 @@ function List({
                     dzName={dzName}
                     isNestedInDZComponent={isNestedInDZComponent}
                     targetUid={targetUid}
-                    // NEW props
                     mainTypeName={mainTypeName}
                     editTarget={editTarget}
                     firstLoopComponentName={firstLoopComponentName}
@@ -197,7 +196,6 @@ function List({
                       {...item}
                       customRowComponent={customRowComponent}
                       targetUid={targetUid}
-                      // NEW PROPS
                       dzName={dzName}
                       isNestedInDZComponent={isFromDynamicZone}
                       mainTypeName={mainTypeName}

packages/strapi-plugin-content-type-builder/admin/src/components/ModalHeader/index.js

@@ -11,6 +11,7 @@ import IconWrapper from './IconWrapper';
 import UpperFirst from '../UpperFirst';
 
 const ModalHeader = ({ headerId, headers }) => {
+  console.log({ headers });
   return (
     <section>
       <HeaderModalTitle style={{ textTransform: 'none' }}>

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js

@@ -564,6 +564,7 @@ const FormModal = () => {
       ...rest,
     });
   };
+
   const handleSubmit = async (e, shouldContinue = isCreating) => {
     e.preventDefault();
 
@@ -603,7 +604,9 @@ const FormModal = () => {
             modalType: 'chooseAttribute',
             forTarget: state.forTarget,
             targetUid,
-            headerDisplayName: modifiedData.name,
+            header_label_1: modifiedData.name,
+            header_icon_name_1: 'contentType',
+            header_icon_isCustom_1: null,
           }),
         });
       } else if (isCreatingComponent) {
@@ -622,7 +625,9 @@ const FormModal = () => {
               modalType: 'chooseAttribute',
               forTarget: state.forTarget,
               targetUid: componentUid,
-              headerDisplayName: modifiedData.name,
+              header_label_1: modifiedData.name,
+              header_icon_name_1: 'contentType',
+              header_icon_isCustom_1: null,
             }),
             pathname: `/plugins/${pluginId}/component-categories/${category}/${componentUid}`,
           });
@@ -636,6 +641,7 @@ const FormModal = () => {
         }
       } else if (isEditingCategory) {
         if (toLower(initialData.name) === toLower(modifiedData.name)) {
+          // Close the modal
           push({ search: '' });
 
           return;

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/createHeadersObjectFromArray.js

@@ -0,0 +1,27 @@
+import { isObject } from 'lodash';
+
+const createHeadersObjectFromArray = array => {
+  return array.reduce((acc, current, index) => {
+    const createHeaderObject = (obj, i, middle = '') =>
+      Object.keys(obj).reduce((acc1, current1) => {
+        if (isObject(obj[current1])) {
+          return {
+            ...acc1,
+            ...createHeaderObject(obj[current1], i, `_${current1}`),
+          };
+        }
+
+        const name = `header${middle}_${current1}_${i}`;
+
+        acc1[name] = obj[current1];
+
+        return acc1;
+      }, {});
+
+    const headerObject = createHeaderObject(current, index + 1);
+
+    return { ...acc, ...headerObject };
+  }, {});
+};
+
+export default createHeadersObjectFromArray;

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/tests/createHeadersObjectFromArray.test.js

@@ -0,0 +1,45 @@
+import createHeadersObjectFromArray from '../createHeadersObjectFromArray';
+
+describe('FormModal | utils | createHeadersArray', () => {
+  it('should return an headers object', () => {
+    const data = [
+      {
+        label: 'test',
+        icon: {
+          name: 'contentType',
+          isCustom: false,
+        },
+        info: {
+          name: null,
+          category: null,
+        },
+      },
+      {
+        label: 'test2',
+        icon: {
+          name: 'book',
+          isCustom: true,
+        },
+        info: {
+          name: 'something',
+          category: 'default',
+        },
+      },
+    ];
+
+    const expected = {
+      header_label_1: 'test',
+      header_icon_name_1: 'contentType',
+      header_icon_isCustom_1: false,
+      header_info_name_1: null,
+      header_info_category_1: null,
+      header_label_2: 'test2',
+      header_icon_name_2: 'book',
+      header_icon_isCustom_2: true,
+      header_info_name_2: 'something',
+      header_info_category_2: 'default',
+    };
+
+    expect(createHeadersObjectFromArray(data)).toEqual(expected);
+  });
+});