Remove header_icon from search

Signed-off-by: soupette <cyril@strapi.io>

packages/core/admin/admin/src/content-manager/pages/NoContentType/index.js

@@ -27,7 +27,7 @@ const NoContentType = () => {
             <LinkButton
               variant="secondary"
               startIcon={<AddIcon />}
-              to="/plugins/content-type-builder/content-types/plugin::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null"
+              to="/plugins/content-type-builder/content-types/create-content-type"
             >
               {formatMessage({
                 id: 'app.components.HomePage.create',

packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js

@@ -396,7 +396,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
             <a
               aria-disabled="false"
               class="c14 c15"
-              href="/plugins/content-type-builder/content-types/plugin::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null"
+              href="/plugins/content-type-builder/content-types/create-content-type"
               variant="secondary"
             >
               <div

packages/core/admin/admin/src/pages/HomePage/index.js

@@ -36,9 +36,7 @@ const HomePage = () => {
   const handleClick = e => {
     e.preventDefault();
 
-    push(
+    push('/plugins/content-type-builder/content-types/create-content-type');
-      '/plugins/content-type-builder/content-types/plugins::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null'
-    );
   };
 
   const hasAlreadyCreatedContentTypes = useMemo(() => {

packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js

@@ -23,6 +23,7 @@ import { pxToRem } from '@strapi/helper-plugin';
 const iconByTypes = {
   biginteger: Numbers,
   boolean: Boolean,
+  collectionType: CT,
   component: Component,
   contentType: CT,
   date: Date,
@@ -58,11 +59,9 @@ const IconBox = styled(Box)`
 `;
 
 const AttributeIcon = ({ type, ...rest }) => {
-  const iconType = type === 'collectionType' ? 'contentType' : type;
+  const Compo = iconByTypes[type];
 
-  const Compo = iconByTypes[iconType];
+  if (!iconByTypes[type]) {
-
-  if (!iconByTypes[iconType]) {
     return null;
   }
 

packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeOption/index.js

@@ -31,18 +31,12 @@ const AttributeOption = ({ type }) => {
     const header_info_category_1 = query.header_info_category_1 || null;
     const header_info_name_1 = query.header_info_name_1 || null;
     const header_label_2 = query.header_label_2 || null;
-    const header_icon_name_2 = query.header_icon_name_2 || null;
-    const header_icon_isCustom_2 = query.header_icon_isCustom_2 || null;
     const header_info_category_2 = query.header_info_category_2 || null;
     const header_info_name_2 = query.header_info_name_2 || null;
     const header_label_3 = query.header_label_3 || null;
-    const header_icon_name_3 = query.header_icon_name_3 || null;
-    const header_icon_isCustom_3 = query.header_icon_isCustom_3 || null;
     const header_info_category_3 = query.header_info_category_3 || null;
     const header_info_name_3 = query.header_info_name_3 || null;
     const header_label_4 = query.header_label_4 || null;
-    const header_icon_name_4 = query.header_icon_name_4 || null;
-    const header_icon_isCustom_4 = query.header_icon_isCustom_4 || null;
     const header_info_category_4 = query.header_info_category_4 || null;
     const header_info_name_4 = query.header_info_name_4 || null;
 
@@ -59,22 +53,14 @@ const AttributeOption = ({ type }) => {
       header_info_name_1,
       header_info_category_1,
       header_label_2,
-      header_icon_name_2,
-      header_icon_isCustom_2,
       header_info_name_2,
       header_info_category_2,
       header_label_3,
-      header_icon_name_3,
-      header_icon_isCustom_3,
       header_info_name_3,
       header_info_category_3,
       header_label_4,
-      header_icon_name_4,
-      header_icon_isCustom_4,
       header_info_name_4,
       header_info_category_4,
-      header_icon_isCustom_1: false,
-      header_icon_name_1: type,
     });
 
     if (forTarget === 'contentType') {

packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/useContentTypeBuilderMenu.js

@@ -39,13 +39,9 @@ const useContentTypeBuilderMenu = () => {
             id: getTrad('modalForm.header.categories'),
             defaultMessage: 'Categories',
           }),
-          header_icon_name_1: 'component',
-          header_icon_isCustom_1: false,
           header_info_category_1: null,
           header_info_name_1: null,
           header_label_2: data.name,
-          header_icon_name_2: null,
-          header_icon_isCustom_2: false,
           header_info_category_2: null,
           header_info_name_2: null,
 
@@ -86,8 +82,6 @@ const useContentTypeBuilderMenu = () => {
         settingType: 'base',
         forTarget: modalType,
         headerId: getTrad(`modalForm.${type}.header-create`),
-        header_icon_isCustom_1: 'false',
-        header_icon_name_1: type,
         header_label_1: 'null',
       });
       push({

packages/core/content-type-builder/admin/src/components/FormModal/index.js

@@ -130,28 +130,18 @@ const FormModal = () => {
       const settingType = query.get('settingType');
       const headerId = query.get('headerId');
       const header_label_1 = query.get('header_label_1');
-      const header_icon_name_1 = query.get('header_icon_name_1');
-      const header_icon_isCustom_1 = query.get('header_icon_isCustom_1');
       const header_info_category_1 = query.get('header_info_category_1');
       const header_info_name_1 = query.get('header_info_name_1');
       const header_label_2 = query.get('header_label_2');
-      const header_icon_name_2 = query.get('header_icon_name_2');
-      const header_icon_isCustom_2 = query.get('header_icon_isCustom_2');
       const header_info_category_2 = query.get('header_info_category_2');
       const header_info_name_2 = query.get('header_info_name_2');
       const header_label_3 = query.get('header_label_3');
-      const header_icon_name_3 = query.get('header_icon_name_3');
-      const header_icon_isCustom_3 = query.get('header_icon_isCustom_3');
       const header_info_category_3 = query.get('header_info_category_3');
       const header_info_name_3 = query.get('header_info_name_3');
       const header_label_4 = query.get('header_label_4');
-      const header_icon_name_4 = query.get('header_icon_name_4');
-      const header_icon_isCustom_4 = query.get('header_icon_isCustom_4');
       const header_info_category_4 = query.get('header_info_category_4');
       const header_info_name_4 = query.get('header_info_name_4');
       const header_label_5 = query.get('header_label_5');
-      const header_icon_name_5 = query.get('header_icon_name_5');
-      const header_icon_isCustom_5 = query.get('header_icon_isCustom_5');
       const header_info_category_5 = query.get('header_info_category_5');
       const header_info_name_5 = query.get('header_info_name_5');
       const step = query.get('step');
@@ -173,28 +163,18 @@ const FormModal = () => {
         step,
         targetUid,
         header_label_1,
-        header_icon_name_1,
-        header_icon_isCustom_1,
         header_info_name_1,
         header_info_category_1,
         header_label_2,
-        header_icon_name_2,
-        header_icon_isCustom_2,
         header_info_name_2,
         header_info_category_2,
         header_label_3,
-        header_icon_name_3,
-        header_icon_isCustom_3,
         header_info_name_3,
         header_info_category_3,
         header_label_4,
-        header_icon_name_4,
-        header_icon_isCustom_4,
         header_info_name_4,
         header_info_category_4,
         header_label_5,
-        header_icon_name_5,
-        header_icon_isCustom_5,
         header_info_name_5,
         header_info_category_5,
         headerId,
@@ -287,6 +267,7 @@ const FormModal = () => {
           modalType,
           data: {
             name,
+            // FIXME
             collectionName,
             draftAndPublish,
             kind,
@@ -624,17 +605,6 @@ const FormModal = () => {
       await checkFormValidity();
       sendButtonAddMoreFieldEvent(shouldContinue);
       const targetUid = state.forTarget === 'components' ? state.targetUid : uid;
-      let headerIcon;
-
-      if (state.forTarget === 'contentType') {
-        const currentKind = get(allDataSchema, ['contentType', 'schema', 'kind'], 'contentType');
-
-        headerIcon = state.kind || currentKind;
-      } else if (state.forTarget === 'component') {
-        headerIcon = 'component';
-      } else {
-        headerIcon = get(allDataSchema, ['components', state.targetUid, 'schema', 'icon'], '');
-      }
 
       // Remove the last header when editing
       if (state.actionType === 'edit') {
@@ -649,6 +619,7 @@ const FormModal = () => {
         if (isCreating) {
           createSchema({ ...modifiedData, kind: state.kind }, state.modalType, uid);
         } else {
+          // TODO : add comments
           if (canEditContentType(allDataSchema, modifiedData)) {
             push({ search: '' });
             submitData(modifiedData);
@@ -669,8 +640,6 @@ const FormModal = () => {
             forTarget: state.forTarget,
             targetUid,
             header_label_1: modifiedData.name,
-            header_icon_name_1: headerIcon,
-            header_icon_isCustom_1: null,
           }),
         });
       } else if (isCreatingComponent) {
@@ -687,8 +656,6 @@ const FormModal = () => {
               forTarget: state.forTarget,
               targetUid: componentUid,
               header_label_1: modifiedData.name,
-              header_icon_name_1: 'contentType',
-              header_icon_isCustom_1: null,
             }),
             pathname: `/plugins/${pluginId}/component-categories/${category}/${componentUid}`,
           });
@@ -739,8 +706,6 @@ const FormModal = () => {
             actionType: 'create',
             ...headersObject,
             header_label_2: modifiedData.name,
-            header_icon_name_2: null,
-            header_icon_isCustom_2: false,
           });
           const nextSearch = isDynamicZoneAttribute
             ? dzSearch
@@ -750,8 +715,6 @@ const FormModal = () => {
                   forTarget: state.forTarget,
                   targetUid,
                   ...headersObject,
-                  header_icon_isCustom_1: !['contentType', 'component'].includes(state.forTarget),
-                  header_icon_name_1: headerIcon,
                 },
                 shouldContinue
               );
@@ -786,8 +749,6 @@ const FormModal = () => {
             attributeType: 'component',
             step: '2',
             ...headersObject,
-            header_icon_isCustom_1: !['contentType', 'component'].includes(state.forTarget),
-            header_icon_name_1: headerIcon,
           };
 
           push({
@@ -827,8 +788,6 @@ const FormModal = () => {
           forTarget: state.forTarget,
           targetUid: state.targetUid,
           ...headersObject,
-          header_icon_isCustom_1: !['contentType', 'component'].includes(state.forTarget),
-          header_icon_name_1: headerIcon,
         };
 
         push({ search: makeSearch(nextSearch, shouldContinue) });
@@ -855,8 +814,6 @@ const FormModal = () => {
             attributeType: 'component',
             step: '2',
             ...headersObject,
-            header_icon_isCustom_1: false,
-            header_icon_name_1: 'component',
           };
 
           trackUsage('willCreateComponentFromAttributesModal');
@@ -909,11 +866,7 @@ const FormModal = () => {
           forTarget: 'components',
           targetUid: componentUid,
           ...headersObject,
-          header_icon_isCustom_1: true,
-          header_icon_name_1: componentToCreate.icon,
           [`header_label_${nextHeaderIndex}`]: modifiedData.name,
-          [`header_icon_name_${nextHeaderIndex}`]: 'component',
-          [`header_icon_isCustom_${nextHeaderIndex}`]: false,
           [`header_info_category_${nextHeaderIndex}`]: category,
           [`header_info_name_${nextHeaderIndex}`]: componentToCreate.name,
         };
@@ -961,11 +914,7 @@ const FormModal = () => {
               forTarget: 'components',
               targetUid: componentUid,
               ...headersObject,
-              header_icon_isCustom_1: true,
-              header_icon_name_1: modifiedData.componentToCreate.icon,
               [`header_label_${nextHeaderIndex}`]: modifiedData.name,
-              [`header_icon_name_${nextHeaderIndex}`]: 'component',
-              [`header_icon_isCustom_${nextHeaderIndex}`]: false,
               [`header_info_category_${nextHeaderIndex}`]: category,
               [`header_info_name_${nextHeaderIndex}`]: modifiedData.componentToCreate.name,
             };
@@ -999,6 +948,7 @@ const FormModal = () => {
       });
     }
   };
+
   const handleClosed = () => {
     // Close the modal
     push({ search: '' });
@@ -1065,6 +1015,11 @@ const FormModal = () => {
     return null;
   }
 
+  // FIXME
+  if (!state.modalType) {
+    return null;
+  }
+
   const formToDisplay = get(forms, [state.modalType, 'form'], {
     advanced: () => ({
       sections: [],
@@ -1138,7 +1093,15 @@ const FormModal = () => {
   return (
     <>
       <ModalLayout onClose={handleClosed} labelledBy="title">
-        <FormModalHeader headerId={state.headerId} headers={headers} />
+        <FormModalHeader
+          headerId={state.headerId}
+          headers={headers}
+          contentTypeKind={state.kind}
+          modalType={state.modalType}
+          forTarget={state.forTarget}
+          targetUid={state.targetUid}
+          attributeType={state.attributeType}
+        />
         {isPickingAttribute && (
           <AttributeOptions
             attributes={displayedAttributes}

packages/core/content-type-builder/admin/src/components/FormModal/utils/createHeadersArray.js

@@ -1,12 +1,6 @@
 import { set } from 'lodash';
 
-const ALLOWED_KEYS = [
+const ALLOWED_KEYS = ['header_label', 'header_info_category', 'header_info_name'];
-  'header_label',
-  'header_icon_name',
-  'header_icon_isCustom',
-  'header_info_category',
-  'header_info_name',
-];
 const createHeadersArray = obj => {
   const array = Object.keys(obj).reduce((acc, current) => {
     const splitted = current.split('_');
@@ -16,11 +10,7 @@ const createHeadersArray = obj => {
       const currentKeysIndex = parseInt(splitted[splitted.length - 1] - 1, 10);
       const path = [currentKeysIndex, ...currentKeys.filter(key => key !== 'header')];
 
-      let value = obj[current];
+      const value = obj[current];
-
-      if (current.includes('isCustom')) {
-        value = obj[current] === 'true';
-      }
 
       set(acc, path, value);
     }

packages/core/content-type-builder/admin/src/components/FormModal/utils/staticData.js

@@ -12,28 +12,18 @@ const INITIAL_STATE_DATA = {
   targetUid: null,
   headerId: null,
   header_label_1: null,
-  header_icon_name_1: null,
-  header_icon_isCustom_1: null,
   header_info_category_1: null,
   header_info_name_1: null,
   header_label_2: null,
-  header_icon_name_2: null,
-  header_icon_isCustom_2: null,
   header_info_category_2: null,
   header_info_name_2: null,
   header_label_3: null,
-  header_icon_name_3: null,
-  header_icon_isCustom_3: null,
   header_info_category_3: null,
   header_info_name_3: null,
   header_label_4: null,
-  header_icon_name_4: null,
-  header_icon_isCustom_4: null,
   header_info_category_4: null,
   header_info_name_4: null,
   header_label_5: null,
-  header_icon_name_5: null,
-  header_icon_isCustom_5: null,
   header_info_category_5: null,
   header_info_name_5: null,
 };

packages/core/content-type-builder/admin/src/components/FormModal/utils/tests/createHeadersArray.test.js

@@ -15,18 +15,12 @@ describe('FormModal | utils | createHeadersArray', () => {
       targetUid: null,
       headerId: null,
       header_label_1: null,
-      header_icon_name_1: null,
-      header_icon_isCustom_1: null,
       header_info_category_1: null,
       header_info_name_1: null,
       header_label_2: null,
-      header_icon_name_2: null,
-      header_icon_isCustom_2: null,
       header_info_category_2: null,
       header_info_name_2: null,
       header_label_3: null,
-      header_icon_name_3: null,
-      header_icon_isCustom_3: null,
       header_info_category_3: null,
       header_info_name_3: null,
     };
@@ -49,28 +43,19 @@ describe('FormModal | utils | createHeadersArray', () => {
       targetUid: null,
       headerId: null,
       header_label_1: 'restaurant',
-      header_icon_name_1: 'contentType',
-      header_icon_isCustom_1: 'false',
       header_info_category_1: null,
       header_info_name_1: null,
       header_label_2: null,
-      header_icon_name_2: null,
-      header_icon_isCustom_2: null,
       header_info_category_2: null,
       header_info_name_2: null,
       header_label_3: null,
-      header_icon_name_3: null,
-      header_icon_isCustom_3: null,
       header_info_category_3: null,
       header_info_name_3: null,
     };
     const expected = [
       {
         label: 'restaurant',
-        icon: {
+
-          name: 'contentType',
-          isCustom: false,
-        },
         info: {
           name: null,
           category: null,
@@ -97,18 +82,12 @@ describe('FormModal | utils | createHeadersArray', () => {
       targetUid: null,
       headerId: null,
       header_label_1: 'restaurant',
-      header_icon_name_1: 'bool',
-      header_icon_isCustom_1: 'true',
       header_info_category_1: null,
       header_info_name_1: null,
       header_label_2: 'closing period',
-      header_icon_name_2: null,
-      header_icon_isCustom_2: null,
       header_info_category_2: 'default',
       header_info_name_2: 'closingperiod',
       header_label_3: null,
-      header_icon_name_3: null,
-      header_icon_isCustom_3: null,
       header_info_category_3: null,
       header_info_name_3: null,
     };
@@ -116,10 +95,7 @@ describe('FormModal | utils | createHeadersArray', () => {
     const expected = [
       {
         label: 'restaurant',
-        icon: {
+
-          name: 'bool',
-          isCustom: true,
-        },
         info: {
           name: null,
           category: null,
@@ -127,10 +103,7 @@ describe('FormModal | utils | createHeadersArray', () => {
       },
       {
         label: 'closing period',
-        icon: {
+
-          name: null,
-          isCustom: false,
-        },
         info: {
           name: 'closingperiod',
           category: 'default',

packages/core/content-type-builder/admin/src/components/FormModal/utils/tests/createHeadersObjectFromArray.test.js

@@ -5,10 +5,7 @@ describe('FormModal | utils | createHeadersArray', () => {
     const data = [
       {
         label: 'test',
-        icon: {
+
-          name: 'contentType',
-          isCustom: false,
-        },
         info: {
           name: null,
           category: null,
@@ -16,10 +13,7 @@ describe('FormModal | utils | createHeadersArray', () => {
       },
       {
         label: 'test2',
-        icon: {
+
-          name: 'book',
-          isCustom: true,
-        },
         info: {
           name: 'something',
           category: 'default',
@@ -29,13 +23,11 @@ describe('FormModal | utils | createHeadersArray', () => {
 
     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',
     };

packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js

@@ -16,6 +16,7 @@ import { Row } from '@strapi/parts/Row';
 import { Stack } from '@strapi/parts/Stack';
 import { ButtonText } from '@strapi/parts/Text';
 import styled from 'styled-components';
+import useDataManager from '../../hooks/useDataManager';
 import AttributeIcon from '../AttributeIcon';
 
 const IconBox = styled(Box)`
@@ -24,8 +25,49 @@ const IconBox = styled(Box)`
   }
 `;
 
-const FormModalHeader = ({ headerId, headers }) => {
+const FormModalHeader = ({
+  attributeType,
+  contentTypeKind,
+  forTarget,
+  headerId,
+  headers,
+  modalType,
+  targetUid,
+}) => {
   const { formatMessage } = useIntl();
+  const { modifiedData } = useDataManager();
+
+  let icon;
+  let isFontAwesomeIcon = false;
+
+  if (modalType === 'chooseAttribute') {
+    const schema = modifiedData[forTarget][targetUid] || modifiedData[forTarget];
+
+    if (forTarget === 'components') {
+      icon = schema.schema.icon;
+      isFontAwesomeIcon = true;
+    } else if (forTarget === 'component') {
+      icon = 'component';
+    } else {
+      icon = schema.schema.kind;
+    }
+  }
+
+  if (modalType === 'contentType') {
+    icon = contentTypeKind;
+  }
+
+  if (['component', 'editCategory'].includes(modalType)) {
+    icon = 'component';
+  }
+
+  if (modalType === 'addComponentToDynamicZone') {
+    icon = 'dynamiczone';
+  }
+
+  if (modalType === 'attribute') {
+    icon = attributeType;
+  }
 
   // TODO refacto
   // Editing a content type or component
@@ -34,7 +76,7 @@ const FormModalHeader = ({ headerId, headers }) => {
       <ModalHeader>
         <Row>
           <Box>
-            <AttributeIcon type={headers[0].icon.name} />
+            <AttributeIcon type={icon} />
           </Box>
           <Box paddingLeft={3}>
             <ButtonText textColor="neutral800" as="h2" id="title">
@@ -47,15 +89,14 @@ const FormModalHeader = ({ headerId, headers }) => {
   }
 
   const breadcrumbsLabel = headers.map(({ label }) => label).join(',');
-  const { name, isCustom } = headers[0].icon;
 
   return (
     <ModalHeader>
       <Stack horizontal size={3}>
-        {!isCustom && <AttributeIcon type={name} />}
+        {!isFontAwesomeIcon && <AttributeIcon type={icon} />}
-        {isCustom && (
+        {isFontAwesomeIcon && (
           <IconBox>
-            <FontAwesomeIcon icon={name} />
+            <FontAwesomeIcon icon={icon} />
           </IconBox>
         )}
 
@@ -82,10 +123,16 @@ const FormModalHeader = ({ headerId, headers }) => {
 };
 
 FormModalHeader.defaultProps = {
+  attributeType: null,
+  contentTypeKind: null,
   headerId: null,
+  targetUid: null,
 };
 
 FormModalHeader.propTypes = {
+  attributeType: PropTypes.string,
+  contentTypeKind: PropTypes.string,
+  forTarget: PropTypes.oneOf(['contentType', 'component', 'components']).isRequired,
   headerId: PropTypes.string,
   headers: PropTypes.arrayOf(
     PropTypes.shape({
@@ -93,6 +140,8 @@ FormModalHeader.propTypes = {
       label: PropTypes.string.isRequired,
     })
   ).isRequired,
+  modalType: PropTypes.string.isRequired,
+  targetUid: PropTypes.string,
 };
 
 export default FormModalHeader;

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

@@ -50,11 +50,7 @@ function List({
   const { openModalAddField } = useListView();
   const onClickAddField = () => {
     trackUsage('hasClickedCTBAddFieldBanner');
-    const firstComponentIcon = get(
+
-      modifiedData,
-      ['components', firstLoopComponentUid, 'schema', 'icon'],
-      ''
-    );
     const firstComponentCategory = get(
       modifiedData,
       ['components', firstLoopComponentUid, 'category'],
@@ -75,39 +71,21 @@ function List({
       ['components', secondLoopComponentUid, 'schema', 'name'],
       null
     );
-    const secondComponentIcon = get(
-      modifiedData,
-      ['components', secondLoopComponentUid, 'schema', 'icon'],
-      ''
-    );
-    const headerIconName1 =
-      editTarget === 'contentType'
-        ? get(modifiedData, ['contentType', 'schema', 'kind'], null)
-        : editTarget;
 
     let firstHeaderObject = {
       header_label_1: mainTypeName,
-      header_icon_name_1: headerIconName1,
-      header_icon_isCustom_1: false,
       header_info_category_1: null,
       header_info_name_1: null,
     };
     let secondHeaderObject = {
       header_label_2: firstLoopComponentName,
-      header_icon_name_2: 'component',
-      header_icon_isCustom_2: false,
       header_info_category_2: firstComponentCategory,
       header_info_name_2: firstComponentFriendlyName,
     };
     let thirdHeaderObject = {
-      header_icon_name_3: 'component',
-      header_icon_isCustom_3: false,
-      header_info_category_3: secondComponentCategory,
       header_info_name_3: secondComponentFriendlyName,
     };
     let fourthHeaderObject = {
-      header_icon_name_4: null,
-      header_icon_isCustom_4: false,
       header_info_category_4: secondComponentCategory,
       header_info_name_4: secondComponentFriendlyName,
     };
@@ -115,20 +93,15 @@ function List({
     if (firstLoopComponentName) {
       firstHeaderObject = {
         ...firstHeaderObject,
-        header_icon_name_1: firstComponentIcon,
-        header_icon_isCustom_1: true,
       };
     }
 
     if (secondLoopComponentUid) {
       firstHeaderObject = {
         ...firstHeaderObject,
-        header_icon_name_1: secondComponentIcon,
-        header_icon_isCustom_1: true,
       };
       thirdHeaderObject = {
         ...thirdHeaderObject,
-        header_label_3: secondLoopComponentName,
       };
     }
 
@@ -136,14 +109,11 @@ function List({
       secondHeaderObject = {
         ...secondHeaderObject,
         header_label_2: dzName,
-        header_icon_name_2: 'dynamiczone',
-        header_icon_isCustom_2: false,
         header_info_category_2: null,
         header_info_name_2: null,
       };
       thirdHeaderObject = {
         ...thirdHeaderObject,
-        header_icon_name_3: isNestedInDZComponent ? 'component' : null,
         header_label_3: firstLoopComponentName,
         header_info_category_3: firstComponentCategory,
         header_info_name_3: firstComponentFriendlyName,

packages/core/content-type-builder/admin/src/components/ListRow/index.js

@@ -12,7 +12,6 @@ import DeleteIcon from '@strapi/icons/DeleteIcon';
 import { stopPropagation, onRowClick } from '@strapi/helper-plugin';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import useDataManager from '../../hooks/useDataManager';
-import getAttributeDisplayedType from '../../utils/getAttributeDisplayedType';
 import getTrad from '../../utils/getTrad';
 import Curve from '../../icons/Curve';
 import UpperFist from '../UpperFirst';
@@ -74,37 +73,26 @@ function ListRow({
       );
 
       const attrType = type;
-      const icoType = getAttributeDisplayedType(attrType);
 
       let firstHeaderObject = {
         header_label_1: mainTypeName,
-        header_icon_name_1: icoType,
-        header_icon_isCustom_1: false,
         header_info_category_1: null,
         header_info_name_1: null,
       };
       let secondHeaderObject = {
         header_label_2: name,
-        header_icon_name_2: null,
-        header_icon_isCustom_2: false,
         header_info_category_2: null,
         header_info_name_2: null,
       };
       let thirdHeaderObject = {
-        header_icon_name_3: 'component',
-        header_icon_isCustom_3: false,
         header_info_category_3: null,
         header_info_name_3: null,
       };
       let fourthHeaderObject = {
-        header_icon_name_4: null,
-        header_icon_isCustom_4: false,
         header_info_category_4: null,
         header_info_name_4: null,
       };
       let fifthHeaderObject = {
-        header_icon_name_5: null,
-        header_icon_isCustom_5: false,
         header_info_category_5: null,
         header_info_name_5: null,
       };
@@ -112,8 +100,6 @@ function ListRow({
       if (firstLoopComponentName) {
         secondHeaderObject = {
           header_label_2: firstLoopComponentName,
-          header_icon_name_2: 'component',
-          header_icon_isCustom_2: false,
           header_info_category_2: firstComponentCategory,
           header_info_name_2: firstLoopComponentName,
         };
@@ -121,7 +107,6 @@ function ListRow({
         thirdHeaderObject = {
           ...thirdHeaderObject,
           header_label_3: name,
-          header_icon_name_3: null,
         };
       }
 
@@ -129,27 +114,22 @@ function ListRow({
         thirdHeaderObject = {
           ...thirdHeaderObject,
           header_label_3: secondLoopComponentName,
-          header_icon_name_3: 'component',
           header_info_category_3: secondComponentCategory,
           header_info_name_3: secondLoopComponentName,
         };
         fourthHeaderObject = {
           ...fourthHeaderObject,
           header_label_4: name,
-          header_icon_name_4: null,
         };
       }
 
       if (isFromDynamicZone || isNestedInDZComponent) {
         secondHeaderObject = {
           header_label_2: dzName,
-          header_icon_name_2: 'dynamiczone',
-          header_icon_isCustom_2: false,
           header_info_name_2: null,
           header_info_category_2: null,
         };
         thirdHeaderObject = {
-          header_icon_name_3: 'component',
           header_label_3: firstLoopComponentName,
           header_info_name_3: firstComponentCategory,
           header_info_category_3: firstComponentCategory,
@@ -157,15 +137,11 @@ function ListRow({
 
         if (!isNestedInDZComponent) {
           fourthHeaderObject = {
-            header_icon_name_4: null,
-            header_icon_isCustom_4: false,
             header_info_category_4: null,
             header_label_4: name,
           };
         } else {
           fourthHeaderObject = {
-            header_icon_name_4: 'components',
-            header_icon_isCustom_4: false,
             header_info_category_4: secondComponentCategory,
             header_info_name_4: secondLoopComponentName,
             header_label_4: secondLoopComponentName,

packages/core/content-type-builder/admin/src/pages/ListView/index.js

@@ -100,8 +100,6 @@ const ListView = () => {
   const handleClickAddComponentToDZ = async dzName => {
     const firstHeaderObject = {
       header_label_1: currentDataName,
-      header_icon_name_1: 'dynamiczone',
-      header_icon_isCustom_1: false,
     };
     const secondHeaderObj = {
       header_label_2: dzName,
@@ -217,8 +215,6 @@ const ListView = () => {
         forTarget: firstMainDataPath,
         targetUid,
         header_label_1: label,
-        header_icon_isCustom_1: false,
-        header_icon_name_1: contentType === 'singleType' ? contentType : firstMainDataPath,
         headerId: getTrad('modalForm.header-edit'),
       }),
     });
@@ -245,9 +241,6 @@ const ListView = () => {
                     onClick={() => {
                       const headerDisplayObject = {
                         header_label_1: currentDataName,
-                        header_icon_name_1:
-                          forTarget === 'contentType' ? contentTypeKind : forTarget,
-                        header_icon_isCustom_1: false,
                       };
                       handleClickAddField(forTarget, targetUid, headerDisplayObject);
                     }}