Merge pull request #11273 from strapi/ctb/remove-headers-from-search

Remove headers from search

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

@@ -27,18 +27,6 @@ const AttributeOption = ({ type }) => {
     // FIXME refacto
     const forTarget = query.forTarget || null;
     const targetUid = query.targetUid || null;
-    const header_label_1 = query.header_label_1 || null;
-    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_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_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_info_category_4 = query.header_info_category_4 || null;
-    const header_info_name_4 = query.header_info_name_4 || null;
 
     const search = makeSearch({
       modalType: 'attribute',
@@ -48,19 +36,6 @@ const AttributeOption = ({ type }) => {
       targetUid,
       attributeType: type,
       step: type === 'component' ? '1' : null,
-
-      header_label_1,
-      header_info_name_1,
-      header_info_category_1,
-      header_label_2,
-      header_info_name_2,
-      header_info_category_2,
-      header_label_3,
-      header_info_name_3,
-      header_info_category_3,
-      header_label_4,
-      header_info_name_4,
-      header_info_category_4,
     });
 
     if (forTarget === 'contentType') {

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

@@ -5,7 +5,7 @@
  */
 /* eslint-disable import/no-cycle */
 import React from 'react';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import List from '../List';
 import useDataManager from '../../hooks/useDataManager';
@@ -14,16 +14,13 @@ import Tr from '../Tr';
 function ComponentList({
   customRowComponent,
   component,
-  dzName,
-  mainTypeName,
   isFromDynamicZone,
   isNestedInDZComponent,
-  firstLoopComponentName,
   firstLoopComponentUid,
 }) {
   const { modifiedData } = useDataManager();
   const {
-    schema: { name: componentName, attributes },
+    schema: { attributes },
   } = get(modifiedData, ['components', component], {
     schema: { attributes: [] },
   });
@@ -33,17 +30,13 @@ function ComponentList({
       <td colSpan={12}>
         <List
           customRowComponent={customRowComponent}
-          dzName={dzName}
           items={attributes}
           targetUid={component}
-          mainTypeName={mainTypeName}
-          firstLoopComponentName={firstLoopComponentName || componentName}
           firstLoopComponentUid={firstLoopComponentUid || component}
           editTarget="components"
           isFromDynamicZone={isFromDynamicZone}
           isNestedInDZComponent={isNestedInDZComponent}
           isSub
-          secondLoopComponentName={firstLoopComponentName ? componentName : null}
           secondLoopComponentUid={firstLoopComponentUid ? component : null}
         />
       </td>
@@ -54,8 +47,6 @@ function ComponentList({
 ComponentList.defaultProps = {
   component: null,
   customRowComponent: null,
-  dzName: null,
-  firstLoopComponentName: null,
   firstLoopComponentUid: null,
   isFromDynamicZone: false,
   isNestedInDZComponent: false,
@@ -64,12 +55,9 @@ ComponentList.defaultProps = {
 ComponentList.propTypes = {
   component: PropTypes.string,
   customRowComponent: PropTypes.func,
-  dzName: PropTypes.string,
-  firstLoopComponentName: PropTypes.string,
   firstLoopComponentUid: PropTypes.string,
   isFromDynamicZone: PropTypes.bool,
   isNestedInDZComponent: PropTypes.bool,
-  mainTypeName: PropTypes.string.isRequired,
 };
 
 export default ComponentList;

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

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { useNotification, useTracking } from '@strapi/helper-plugin';
 import { camelCase, isEmpty, sortBy, toLower, upperFirst } from 'lodash';
 import matchSorter from 'match-sorter';
-import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import useDataManager from '../../hooks/useDataManager';
 import pluginId from '../../pluginId';
@@ -19,7 +18,6 @@ const useContentTypeBuilderMenu = () => {
   } = useDataManager();
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
-  const { formatMessage } = useIntl();
   const { push } = useHistory();
   const [search, setSearch] = useState('');
 
@@ -35,16 +33,6 @@ const useContentTypeBuilderMenu = () => {
           actionType: 'edit',
           modalType: 'editCategory',
           categoryName: data.name,
-          header_label_1: formatMessage({
-            id: getTrad('modalForm.header.categories'),
-            defaultMessage: 'Categories',
-          }),
-          header_info_category_1: null,
-          header_info_name_1: null,
-          header_label_2: data.name,
-          header_info_category_2: null,
-          header_info_name_2: null,
-
           settingType: 'base',
         });
 
@@ -81,7 +69,6 @@ const useContentTypeBuilderMenu = () => {
         actionType: 'create',
         settingType: 'base',
         forTarget: modalType,
-        header_label_1: 'null',
       });
       push({
         search,

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

@@ -56,14 +56,7 @@ const ComponentStack = styled(Stack)`
   align-items: center;
 `;
 
-function DynamicZoneList({
+function DynamicZoneList({ customRowComponent, components, addComponent, name, targetUid }) {
-  customRowComponent,
-  components,
-  addComponent,
-  mainTypeName,
-  name,
-  targetUid,
-}) {
   const { isInDevelopmentMode } = useDataManager();
   const [activeTab, setActiveTab] = useState(0);
   const { formatMessage } = useIntl();
@@ -129,8 +122,6 @@ function DynamicZoneList({
                     <ComponentList
                       {...props}
                       isFromDynamicZone
-                      dzName={name}
-                      mainTypeName={mainTypeName}
                       targetUid={targetUid}
                       key={component}
                     />
@@ -156,7 +147,6 @@ DynamicZoneList.propTypes = {
   addComponent: PropTypes.func,
   components: PropTypes.instanceOf(Array),
   customRowComponent: PropTypes.func,
-  mainTypeName: PropTypes.string.isRequired,
   name: PropTypes.string,
   targetUid: PropTypes.string.isRequired,
 };

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

@@ -189,6 +189,7 @@ const forms = {
       return createCategorySchema(allowedCategories);
     },
     form: {
+      advanced: () => ({ sections: [] }),
       base() {
         return categoryForm.base;
       },

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

@@ -44,8 +44,6 @@ import getTrad from '../../utils/getTrad';
 import makeSearch from '../../utils/makeSearch';
 import {
   canEditContentType,
-  createHeadersArray,
-  createHeadersObjectFromArray,
   getAttributesToDisplay,
   getFormInputNames,
   getModalTitleSubHeader,
@@ -122,27 +120,13 @@ const FormModal = () => {
       // Returns 'null' if there isn't any attributeType search params
       const attributeName = query.get('attributeName');
       const attributeType = query.get('attributeType');
+      const categoryName = query.get('categoryName');
       const dynamicZoneTarget = query.get('dynamicZoneTarget');
       const forTarget = query.get('forTarget');
       const modalType = query.get('modalType');
       const kind = query.get('kind') || get(allDataSchema, ['contentType', 'schema', 'kind'], null);
       const targetUid = query.get('targetUid');
       const settingType = query.get('settingType');
-      const header_label_1 = query.get('header_label_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_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_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_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_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');
       const pathToSchema =
         forTarget === 'contentType' || forTarget === 'component'
@@ -153,6 +137,7 @@ const FormModal = () => {
         actionType,
         attributeName,
         attributeType,
+        categoryName,
         kind,
         dynamicZoneTarget,
         forTarget,
@@ -161,21 +146,6 @@ const FormModal = () => {
         settingType,
         step,
         targetUid,
-        header_label_1,
-        header_info_name_1,
-        header_info_category_1,
-        header_label_2,
-        header_info_name_2,
-        header_info_category_2,
-        header_label_3,
-        header_info_name_3,
-        header_info_category_3,
-        header_label_4,
-        header_info_name_4,
-        header_info_category_4,
-        header_label_5,
-        header_info_name_5,
-        header_info_category_5,
       });
 
       const collectionTypesForRelation = sortedContentTypesList.filter(
@@ -352,8 +322,6 @@ const FormModal = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [search]);
 
-  const headers = createHeadersArray(state);
-
   // FIXME rename this constant
   const isCreatingContentType = state.modalType === 'contentType';
   const isCreatingComponent = state.modalType === 'component';
@@ -369,6 +337,8 @@ const FormModal = () => {
   const isPickingAttribute = state.modalType === 'chooseAttribute';
   const uid = createUid(modifiedData.name || '');
   const attributes = get(allDataSchema, [...state.pathToSchema, 'schema', 'attributes'], null);
+  // FIXME when displayName
+  const mainSchemaName = get(allDataSchema, [...state.pathToSchema, 'schema', 'name'], '');
 
   const checkFormValidity = async () => {
     let schema;
@@ -604,14 +574,6 @@ const FormModal = () => {
       sendButtonAddMoreFieldEvent(shouldContinue);
       const targetUid = state.forTarget === 'components' ? state.targetUid : uid;
 
-      // Remove the last header when editing
-      if (state.actionType === 'edit') {
-        headers.pop();
-      }
-
-      const headersObject = createHeadersObjectFromArray(headers);
-      const nextHeaderIndex = headers.length + 1;
-
       if (isCreatingContentType) {
         // Create the content type schema
         if (isCreating) {
@@ -637,7 +599,6 @@ const FormModal = () => {
             modalType: 'chooseAttribute',
             forTarget: state.forTarget,
             targetUid,
-            header_label_1: modifiedData.name,
           }),
         });
       } else if (isCreatingComponent) {
@@ -653,7 +614,6 @@ const FormModal = () => {
               modalType: 'chooseAttribute',
               forTarget: state.forTarget,
               targetUid: componentUid,
-              header_label_1: modifiedData.name,
             }),
             pathname: `/plugins/${pluginId}/component-categories/${category}/${componentUid}`,
           });
@@ -702,8 +662,6 @@ const FormModal = () => {
             settingType: 'base',
             step: '1',
             actionType: 'create',
-            ...headersObject,
-            header_label_2: modifiedData.name,
           });
           const nextSearch = isDynamicZoneAttribute
             ? dzSearch
@@ -712,7 +670,6 @@ const FormModal = () => {
                   modalType: 'chooseAttribute',
                   forTarget: state.forTarget,
                   targetUid,
-                  ...headersObject,
                 },
                 shouldContinue
               );
@@ -746,7 +703,6 @@ const FormModal = () => {
             targetUid: state.targetUid,
             attributeType: 'component',
             step: '2',
-            ...headersObject,
           };
 
           push({
@@ -785,7 +741,6 @@ const FormModal = () => {
           modalType: 'chooseAttribute',
           forTarget: state.forTarget,
           targetUid: state.targetUid,
-          ...headersObject,
         };
 
         push({ search: makeSearch(nextSearch, shouldContinue) });
@@ -811,7 +766,6 @@ const FormModal = () => {
             targetUid: state.targetUid,
             attributeType: 'component',
             step: '2',
-            ...headersObject,
           };
 
           trackUsage('willCreateComponentFromAttributesModal');
@@ -863,10 +817,6 @@ const FormModal = () => {
           modalType: 'chooseAttribute',
           forTarget: 'components',
           targetUid: componentUid,
-          ...headersObject,
-          [`header_label_${nextHeaderIndex}`]: modifiedData.name,
-          [`header_info_category_${nextHeaderIndex}`]: category,
-          [`header_info_name_${nextHeaderIndex}`]: componentToCreate.name,
         };
 
         push({
@@ -911,10 +861,6 @@ const FormModal = () => {
               modalType: 'chooseAttribute',
               forTarget: 'components',
               targetUid: componentUid,
-              ...headersObject,
-              [`header_label_${nextHeaderIndex}`]: modifiedData.name,
-              [`header_info_category_${nextHeaderIndex}`]: category,
-              [`header_info_name_${nextHeaderIndex}`]: modifiedData.componentToCreate.name,
             };
 
             push({ search: makeSearch(searchToOpenAddField, true) });
@@ -1050,7 +996,7 @@ const FormModal = () => {
     formErrors,
     isAddingAComponentToAnotherComponent,
     isCreatingComponentWhileAddingAField,
-    mainBoxHeader: get(headers, [0, 'label'], ''),
+    mainBoxHeader: mainSchemaName,
     modifiedData,
     naturePickerType: state.forTarget,
     isCreating,
@@ -1093,8 +1039,10 @@ const FormModal = () => {
       <ModalLayout onClose={handleClosed} labelledBy="title">
         <FormModalHeader
           actionType={state.actionType}
-          headers={headers}
+          attributeName={state.attributeName}
+          categoryName={state.categoryName}
           contentTypeKind={state.kind}
+          dynamicZoneTarget={state.dynamicZoneTarget}
           modalType={state.modalType}
           forTarget={state.forTarget}
           targetUid={state.targetUid}

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

@@ -1,24 +0,0 @@
-import { set } from 'lodash';
-
-const ALLOWED_KEYS = ['header_label', 'header_info_category', 'header_info_name'];
-const createHeadersArray = obj => {
-  const array = Object.keys(obj).reduce((acc, current) => {
-    const splitted = current.split('_');
-    const currentKeys = splitted.filter((_, i) => i !== splitted.length - 1);
-
-    if (ALLOWED_KEYS.includes(currentKeys.join('_'))) {
-      const currentKeysIndex = parseInt(splitted[splitted.length - 1] - 1, 10);
-      const path = [currentKeysIndex, ...currentKeys.filter(key => key !== 'header')];
-
-      const value = obj[current];
-
-      set(acc, path, value);
-    }
-
-    return acc;
-  }, []);
-
-  return array.filter(obj => obj.label !== null);
-};
-
-export default createHeadersArray;

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

@@ -1,27 +0,0 @@
-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/core/content-type-builder/admin/src/components/FormModal/utils/index.js

@@ -1,6 +1,4 @@
 export { default as canEditContentType } from './canEditContentType';
-export { default as createHeadersArray } from './createHeadersArray';
-export { default as createHeadersObjectFromArray } from './createHeadersObjectFromArray';
 export { default as getAttributesToDisplay } from './getAttributesToDisplay';
 export { default as getModalTitleSubHeader } from './getModalTitleSubHeader';
 export { default as getNextSearch } from './getNextSearch';

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

@@ -2,6 +2,7 @@ const INITIAL_STATE_DATA = {
   actionType: null,
   attributeName: null,
   attributeType: null,
+  categoryName: null,
   dynamicZoneTarget: null,
   forTarget: null,
   modalType: null,
@@ -10,21 +11,6 @@ const INITIAL_STATE_DATA = {
   settingType: null,
   step: null,
   targetUid: null,
-  header_label_1: null,
-  header_info_category_1: null,
-  header_info_name_1: null,
-  header_label_2: null,
-  header_info_category_2: null,
-  header_info_name_2: null,
-  header_label_3: null,
-  header_info_category_3: null,
-  header_info_name_3: null,
-  header_label_4: null,
-  header_info_category_4: null,
-  header_info_name_4: null,
-  header_label_5: null,
-  header_info_category_5: null,
-  header_info_name_5: null,
 };
 
 export { INITIAL_STATE_DATA };

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

@@ -1,112 +0,0 @@
-import createHeadersArray from '../createHeadersArray';
-
-describe('FormModal | utils | createHeadersArray', () => {
-  it('should return an empty array if no header key is set', () => {
-    const data = {
-      actionType: null,
-      attributeName: null,
-      attributeType: null,
-      dynamicZoneTarget: null,
-      forTarget: null,
-      modalType: null,
-      pathToSchema: [],
-      settingType: null,
-      step: null,
-      targetUid: null,
-      header_label_1: null,
-      header_info_category_1: null,
-      header_info_name_1: null,
-      header_label_2: null,
-      header_info_category_2: null,
-      header_info_name_2: null,
-      header_label_3: null,
-      header_info_category_3: null,
-      header_info_name_3: null,
-    };
-
-    expect(createHeadersArray(data)).toEqual([]);
-  });
-
-  it('should return an array containing a header object', () => {
-    const data = {
-      actionType: 'something',
-      attributeName: null,
-      attributeType: null,
-      dynamicZoneTarget: null,
-      forTarget: null,
-      modalType: null,
-      pathToSchema: [],
-      settingType: null,
-      step: null,
-      targetUid: null,
-      header_label_1: 'restaurant',
-      header_info_category_1: null,
-      header_info_name_1: null,
-      header_label_2: null,
-      header_info_category_2: null,
-      header_info_name_2: null,
-      header_label_3: null,
-      header_info_category_3: null,
-      header_info_name_3: null,
-    };
-    const expected = [
-      {
-        label: 'restaurant',
-
-        info: {
-          name: null,
-          category: null,
-        },
-      },
-    ];
-
-    expect(createHeadersArray(data)).toEqual(expected);
-  });
-
-  it('should handle multiple headers correctly', () => {
-    const data = {
-      actionType: 'something',
-      attributeName: null,
-      attributeType: null,
-      dynamicZoneTarget: null,
-      forTarget: null,
-
-      modalType: null,
-      pathToSchema: [],
-      settingType: null,
-      step: null,
-
-      targetUid: null,
-      header_label_1: 'restaurant',
-      header_info_category_1: null,
-      header_info_name_1: null,
-      header_label_2: 'closing period',
-      header_info_category_2: 'default',
-      header_info_name_2: 'closingperiod',
-      header_label_3: null,
-      header_info_category_3: null,
-      header_info_name_3: null,
-    };
-
-    const expected = [
-      {
-        label: 'restaurant',
-
-        info: {
-          name: null,
-          category: null,
-        },
-      },
-      {
-        label: 'closing period',
-
-        info: {
-          name: 'closingperiod',
-          category: 'default',
-        },
-      },
-    ];
-
-    expect(createHeadersArray(data)).toEqual(expected);
-  });
-});

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

@@ -1,37 +0,0 @@
-import createHeadersObjectFromArray from '../createHeadersObjectFromArray';
-
-describe('FormModal | utils | createHeadersArray', () => {
-  it('should return a header object', () => {
-    const data = [
-      {
-        label: 'test',
-
-        info: {
-          name: null,
-          category: null,
-        },
-      },
-      {
-        label: 'test2',
-
-        info: {
-          name: 'something',
-          category: 'default',
-        },
-      },
-    ];
-
-    const expected = {
-      header_label_1: 'test',
-
-      header_info_name_1: null,
-      header_info_category_1: null,
-      header_label_2: 'test2',
-
-      header_info_name_2: 'something',
-      header_info_category_2: 'default',
-    };
-
-    expect(createHeadersObjectFromArray(data)).toEqual(expected);
-  });
-});

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

@@ -8,30 +8,24 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import upperFirst from 'lodash/upperFirst';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Breadcrumbs, Crumb } from '@strapi/parts/Breadcrumbs';
 import { ModalHeader } from '@strapi/parts/ModalLayout';
 import { Box } from '@strapi/parts/Box';
 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 getTrad from '../../utils/getTrad';
 import AttributeIcon from '../AttributeIcon';
 
-const IconBox = styled(Box)`
-  svg {
-    color: ${({ theme }) => theme.colors.primary600};
-  }
-`;
-
 const FormModalHeader = ({
   actionType,
+  attributeName,
   attributeType,
+  categoryName,
   contentTypeKind,
+  dynamicZoneTarget,
   forTarget,
-  headers,
   modalType,
   targetUid,
 }) => {
@@ -39,20 +33,9 @@ const FormModalHeader = ({
   const { modifiedData } = useDataManager();
 
   let icon;
-  let isFontAwesomeIcon = false;
+  let headers = [];
 
-  if (modalType === 'chooseAttribute') {
+  const schema = modifiedData?.[forTarget]?.[targetUid] || modifiedData?.[forTarget] || null;
-    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;
@@ -62,14 +45,6 @@ const FormModalHeader = ({
     icon = 'component';
   }
 
-  if (modalType === 'addComponentToDynamicZone') {
-    icon = 'dynamiczone';
-  }
-
-  if (modalType === 'attribute') {
-    icon = attributeType;
-  }
-
   const isCreatingMainSchema = ['component', 'contentType'].includes(modalType);
 
   if (isCreatingMainSchema) {
@@ -91,7 +66,7 @@ const FormModalHeader = ({
           </Box>
           <Box paddingLeft={3}>
             <ButtonText textColor="neutral800" as="h2" id="title">
-              {formatMessage({ id: headerId }, { name: headers[0].label })}
+              {formatMessage({ id: headerId }, { name: schema?.schema.name })}
             </ButtonText>
           </Box>
         </Row>
@@ -99,25 +74,54 @@ const FormModalHeader = ({
     );
   }
 
+  headers = [
+    {
+      label: schema?.schema.name || null,
+      info: { category: schema?.category || null, name: schema?.schema.name },
+    },
+  ];
+
+  if (modalType === 'chooseAttribute') {
+    icon = ['component', 'components'].includes(forTarget) ? 'component' : schema.schema.kind;
+  }
+
+  if (modalType === 'addComponentToDynamicZone') {
+    icon = 'dynamiczone';
+    headers.push({ label: dynamicZoneTarget });
+  }
+
+  if (modalType === 'attribute') {
+    icon = attributeType;
+    headers.push({ label: attributeName });
+  }
+
+  if (modalType === 'editCategory') {
+    const label = formatMessage({
+      id: getTrad('modalForm.header.categories'),
+      defaultMessage: 'Categories',
+    });
+
+    headers = [{ label }, { label: categoryName }];
+  }
+
   const breadcrumbsLabel = headers.map(({ label }) => label).join(',');
 
   return (
     <ModalHeader>
       <Stack horizontal size={3}>
-        {!isFontAwesomeIcon && <AttributeIcon type={icon} />}
+        <AttributeIcon type={icon} />
-        {isFontAwesomeIcon && (
-          <IconBox>
-            <FontAwesomeIcon icon={icon} />
-          </IconBox>
-        )}
 
         <Breadcrumbs label={breadcrumbsLabel}>
           {headers.map((header, index) => {
             const label = upperFirst(header.label);
 
+            if (!label) {
+              return null;
+            }
+
             const key = `${header.label}.${index}`;
 
-            if (header.info.category) {
+            if (header.info?.category) {
               const content = `${label} (${upperFirst(header.info.category)} - ${upperFirst(
                 header.info.name
               )})`;
@@ -135,22 +139,23 @@ const FormModalHeader = ({
 
 FormModalHeader.defaultProps = {
   actionType: null,
+  attributeName: null,
   attributeType: null,
+  categoryName: null,
+  dynamicZoneTarget: null,
+  forTarget: null,
   contentTypeKind: null,
   targetUid: null,
 };
 
 FormModalHeader.propTypes = {
   actionType: PropTypes.string,
+  attributeName: PropTypes.string,
   attributeType: PropTypes.string,
+  categoryName: PropTypes.string,
   contentTypeKind: PropTypes.string,
-  forTarget: PropTypes.oneOf(['contentType', 'component', 'components']).isRequired,
+  dynamicZoneTarget: PropTypes.string,
-  headers: PropTypes.arrayOf(
+  forTarget: PropTypes.oneOf(['contentType', 'component', 'components']),
-    PropTypes.shape({
-      icon: PropTypes.shape({ name: PropTypes.string, isCustom: PropTypes.bool }),
-      label: PropTypes.string.isRequired,
-    })
-  ).isRequired,
   modalType: PropTypes.string.isRequired,
   targetUid: PropTypes.string,
 };

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

@@ -7,7 +7,6 @@
 /* eslint-disable import/no-cycle */
 import React from 'react';
 import PropTypes from 'prop-types';
-import get from 'lodash/get';
 import { EmptyBodyTable, useTracking } from '@strapi/helper-plugin';
 import { Box } from '@strapi/parts/Box';
 import { Button } from '@strapi/parts/Button';
@@ -27,21 +26,17 @@ import NestedTFooter from '../NestedTFooter';
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
 function List({
-  customRowComponent,
-  items,
   addComponentToDZ,
-  targetUid,
+  customRowComponent,
-  mainTypeName,
   editTarget,
-  isFromDynamicZone,
-  isNestedInDZComponent,
-  isMain,
-  firstLoopComponentName,
   firstLoopComponentUid,
-  secondLoopComponentName,
+  isFromDynamicZone,
-  secondLoopComponentUid,
+  isMain,
+  isNestedInDZComponent,
   isSub,
-  dzName,
+  items,
+  secondLoopComponentUid,
+  targetUid,
 }) {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
@@ -51,87 +46,7 @@ function List({
   const onClickAddField = () => {
     trackUsage('hasClickedCTBAddFieldBanner');
 
-    const firstComponentCategory = get(
+    openModalAddField(editTarget, targetUid);
-      modifiedData,
-      ['components', firstLoopComponentUid, 'category'],
-      null
-    );
-    const firstComponentFriendlyName = get(
-      modifiedData,
-      ['components', firstLoopComponentUid, 'schema', 'name'],
-      null
-    );
-    const secondComponentCategory = get(
-      modifiedData,
-      ['components', secondLoopComponentUid, 'category'],
-      null
-    );
-    const secondComponentFriendlyName = get(
-      modifiedData,
-      ['components', secondLoopComponentUid, 'schema', 'name'],
-      null
-    );
-
-    let firstHeaderObject = {
-      header_label_1: mainTypeName,
-      header_info_category_1: null,
-      header_info_name_1: null,
-    };
-    let secondHeaderObject = {
-      header_label_2: firstLoopComponentName,
-      header_info_category_2: firstComponentCategory,
-      header_info_name_2: firstComponentFriendlyName,
-    };
-    let thirdHeaderObject = {
-      header_info_name_3: secondComponentFriendlyName,
-    };
-    let fourthHeaderObject = {
-      header_info_category_4: secondComponentCategory,
-      header_info_name_4: secondComponentFriendlyName,
-    };
-
-    if (firstLoopComponentName) {
-      firstHeaderObject = {
-        ...firstHeaderObject,
-      };
-    }
-
-    if (secondLoopComponentUid) {
-      firstHeaderObject = {
-        ...firstHeaderObject,
-      };
-      thirdHeaderObject = {
-        ...thirdHeaderObject,
-      };
-    }
-
-    if (isFromDynamicZone || isNestedInDZComponent) {
-      secondHeaderObject = {
-        ...secondHeaderObject,
-        header_label_2: dzName,
-        header_info_category_2: null,
-        header_info_name_2: null,
-      };
-      thirdHeaderObject = {
-        ...thirdHeaderObject,
-        header_label_3: firstLoopComponentName,
-        header_info_category_3: firstComponentCategory,
-        header_info_name_3: firstComponentFriendlyName,
-      };
-      fourthHeaderObject = {
-        ...fourthHeaderObject,
-        header_label_4: secondLoopComponentName,
-      };
-    }
-
-    openModalAddField(
-      editTarget,
-      targetUid,
-      firstHeaderObject,
-      secondHeaderObject,
-      thirdHeaderObject,
-      fourthHeaderObject
-    );
   };
 
   if (!targetUid) {
@@ -239,15 +154,11 @@ function List({
                   <React.Fragment key={item.name}>
                     <CustomRow
                       {...item}
-                      dzName={dzName}
                       isNestedInDZComponent={isNestedInDZComponent}
                       targetUid={targetUid}
-                      mainTypeName={mainTypeName}
                       editTarget={editTarget}
-                      firstLoopComponentName={firstLoopComponentName}
                       firstLoopComponentUid={firstLoopComponentUid}
                       isFromDynamicZone={isFromDynamicZone}
-                      secondLoopComponentName={secondLoopComponentName}
                       secondLoopComponentUid={secondLoopComponentUid}
                     />
 
@@ -256,11 +167,8 @@ function List({
                         {...item}
                         customRowComponent={customRowComponent}
                         targetUid={targetUid}
-                        dzName={dzName}
                         isNestedInDZComponent={isFromDynamicZone}
-                        mainTypeName={mainTypeName}
                         editTarget={editTarget}
-                        firstLoopComponentName={firstLoopComponentName}
                         firstLoopComponentUid={firstLoopComponentUid}
                       />
                     )}
@@ -271,7 +179,6 @@ function List({
                         customRowComponent={customRowComponent}
                         addComponent={addComponentToDZ}
                         targetUid={targetUid}
-                        mainTypeName={mainTypeName}
                       />
                     )}
                   </React.Fragment>
@@ -315,15 +222,12 @@ function List({
 List.defaultProps = {
   addComponentToDZ: () => {},
   customRowComponent: null,
-  dzName: null,
-  firstLoopComponentName: null,
   firstLoopComponentUid: null,
   isFromDynamicZone: false,
   isNestedInDZComponent: false,
   isMain: false,
   isSub: false,
   items: [],
-  secondLoopComponentName: null,
   secondLoopComponentUid: null,
   targetUid: null,
 };
@@ -331,16 +235,12 @@ List.defaultProps = {
 List.propTypes = {
   addComponentToDZ: PropTypes.func,
   customRowComponent: PropTypes.func,
-  dzName: PropTypes.string,
   editTarget: PropTypes.string.isRequired,
-  firstLoopComponentName: PropTypes.string,
   firstLoopComponentUid: PropTypes.string,
   isFromDynamicZone: PropTypes.bool,
   isNestedInDZComponent: PropTypes.bool,
   isMain: PropTypes.bool,
   items: PropTypes.instanceOf(Array),
-  mainTypeName: PropTypes.string.isRequired,
-  secondLoopComponentName: PropTypes.string,
   secondLoopComponentUid: PropTypes.string,
   targetUid: PropTypes.string,
   isSub: PropTypes.bool,

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

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@strapi/parts/IconButton';
@@ -20,25 +20,20 @@ import AttributeIcon from '../AttributeIcon';
 
 function ListRow({
   configurable,
+  editTarget,
+  firstLoopComponentUid,
+  isFromDynamicZone,
   name,
-  dzName,
   onClick,
   plugin,
+  relation,
+  repeatable,
+  secondLoopComponentUid,
   target,
   targetUid,
   type,
-  mainTypeName,
-  editTarget,
-  firstLoopComponentName,
-  firstLoopComponentUid,
-  isFromDynamicZone,
-  repeatable,
-  secondLoopComponentName,
-  secondLoopComponentUid,
-  isNestedInDZComponent,
-  relation,
 }) {
-  const { contentTypes, isInDevelopmentMode, modifiedData, removeAttribute } = useDataManager();
+  const { contentTypes, isInDevelopmentMode, removeAttribute } = useDataManager();
   const { formatMessage } = useIntl();
 
   const isMorph = type === 'relation' && relation.includes('morph');
@@ -61,99 +56,8 @@ function ListRow({
     }
 
     if (configurable !== false) {
-      const firstComponentCategory = get(
-        modifiedData,
-        ['components', firstLoopComponentUid, 'category'],
-        null
-      );
-      const secondComponentCategory = get(
-        modifiedData,
-        ['components', secondLoopComponentUid, 'category'],
-        null
-      );
-
       const attrType = type;
 
-      let firstHeaderObject = {
-        header_label_1: mainTypeName,
-        header_info_category_1: null,
-        header_info_name_1: null,
-      };
-      let secondHeaderObject = {
-        header_label_2: name,
-        header_info_category_2: null,
-        header_info_name_2: null,
-      };
-      let thirdHeaderObject = {
-        header_info_category_3: null,
-        header_info_name_3: null,
-      };
-      let fourthHeaderObject = {
-        header_info_category_4: null,
-        header_info_name_4: null,
-      };
-      let fifthHeaderObject = {
-        header_info_category_5: null,
-        header_info_name_5: null,
-      };
-
-      if (firstLoopComponentName) {
-        secondHeaderObject = {
-          header_label_2: firstLoopComponentName,
-          header_info_category_2: firstComponentCategory,
-          header_info_name_2: firstLoopComponentName,
-        };
-
-        thirdHeaderObject = {
-          ...thirdHeaderObject,
-          header_label_3: name,
-        };
-      }
-
-      if (secondLoopComponentUid) {
-        thirdHeaderObject = {
-          ...thirdHeaderObject,
-          header_label_3: secondLoopComponentName,
-          header_info_category_3: secondComponentCategory,
-          header_info_name_3: secondLoopComponentName,
-        };
-        fourthHeaderObject = {
-          ...fourthHeaderObject,
-          header_label_4: name,
-        };
-      }
-
-      if (isFromDynamicZone || isNestedInDZComponent) {
-        secondHeaderObject = {
-          header_label_2: dzName,
-          header_info_name_2: null,
-          header_info_category_2: null,
-        };
-        thirdHeaderObject = {
-          header_label_3: firstLoopComponentName,
-          header_info_name_3: firstComponentCategory,
-          header_info_category_3: firstComponentCategory,
-        };
-
-        if (!isNestedInDZComponent) {
-          fourthHeaderObject = {
-            header_info_category_4: null,
-            header_label_4: name,
-          };
-        } else {
-          fourthHeaderObject = {
-            header_info_category_4: secondComponentCategory,
-            header_info_name_4: secondLoopComponentName,
-            header_label_4: secondLoopComponentName,
-          };
-
-          fifthHeaderObject = {
-            ...fifthHeaderObject,
-            header_label_5: name,
-          };
-        }
-      }
-
       onClick(
         // Tells where the attribute is located in the main modifiedData object : contentType, component or components
         editTarget,
@@ -162,12 +66,7 @@ function ListRow({
         // Name of the attribute
         name,
         // Type of the attribute
-        attrType,
+        attrType
-        firstHeaderObject,
-        secondHeaderObject,
-        thirdHeaderObject,
-        fourthHeaderObject,
-        fifthHeaderObject
       );
     }
   };
@@ -277,16 +176,12 @@ function ListRow({
 
 ListRow.defaultProps = {
   configurable: true,
-  dzName: null,
-  firstLoopComponentName: null,
   firstLoopComponentUid: null,
   isFromDynamicZone: false,
-  isNestedInDZComponent: false,
   onClick: () => {},
   plugin: null,
   relation: '',
   repeatable: false,
-  secondLoopComponentName: null,
   secondLoopComponentUid: null,
   target: null,
   targetUid: null,
@@ -295,19 +190,14 @@ ListRow.defaultProps = {
 
 ListRow.propTypes = {
   configurable: PropTypes.bool,
-  dzName: PropTypes.string,
   editTarget: PropTypes.string.isRequired,
-  firstLoopComponentName: PropTypes.string,
   firstLoopComponentUid: PropTypes.string,
   isFromDynamicZone: PropTypes.bool,
-  isNestedInDZComponent: PropTypes.bool,
-  mainTypeName: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   onClick: PropTypes.func,
   plugin: PropTypes.string,
   relation: PropTypes.string,
   repeatable: PropTypes.bool,
-  secondLoopComponentName: PropTypes.string,
   secondLoopComponentUid: PropTypes.string,
   target: PropTypes.string,
   targetUid: PropTypes.string,

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

@@ -60,8 +60,6 @@ const SelectComponent = ({
   }
 
   if (isCreatingComponentWhileAddingAField) {
-    console.log({ componentToCreate });
-
     options = [
       { uid: value, label: componentToCreate.name, categoryName: componentToCreate.category },
     ];

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

@@ -73,14 +73,7 @@ const ListView = () => {
   // const hasModelBeenModified = !isEqual(modifiedData, initialData);
   const forTarget = isInContentTypeView ? 'contentType' : 'component';
 
-  const handleClickAddField = async (
+  const handleClickAddField = async (forTarget, targetUid) => {
-    forTarget,
-    targetUid,
-    firstHeaderObj,
-    secondHeaderObj,
-    thirdHeaderObj,
-    fourthHeaderObj
-  ) => {
     // disable the prompt
     // await wait();
 
@@ -88,22 +81,12 @@ const ListView = () => {
       modalType: 'chooseAttribute',
       forTarget,
       targetUid,
-      ...firstHeaderObj,
-      ...secondHeaderObj,
-      ...thirdHeaderObj,
-      ...fourthHeaderObj,
     };
 
     push({ search: makeSearch(searchObj) });
   };
 
   const handleClickAddComponentToDZ = async dzName => {
-    const firstHeaderObject = {
-      header_label_1: currentDataName,
-    };
-    const secondHeaderObj = {
-      header_label_2: dzName,
-    };
     const search = {
       modalType: 'addComponentToDynamicZone',
       forTarget: 'contentType',
@@ -112,8 +95,6 @@ const ListView = () => {
       settingType: 'base',
       step: '1',
       actionType: 'edit',
-      ...firstHeaderObject,
-      ...secondHeaderObj,
     };
 
     // await wait();
@@ -121,17 +102,7 @@ const ListView = () => {
     push({ search: makeSearch(search, true) });
   };
 
-  const handleClickEditField = async (
+  const handleClickEditField = async (forTarget, targetUid, attributeName, type) => {
-    forTarget,
-    targetUid,
-    attributeName,
-    type,
-    firstHeaderObj,
-    secondHeaderObj,
-    thirdHeaderObj,
-    fourthHeaderObj,
-    fifthHeaderObj
-  ) => {
     const attributeType = getAttributeDisplayedType(type);
 
     // await wait();
@@ -145,11 +116,6 @@ const ListView = () => {
       attributeName,
       attributeType,
       step: type === 'component' ? '2' : null,
-      ...firstHeaderObj,
-      ...secondHeaderObj,
-      ...thirdHeaderObj,
-      ...fourthHeaderObj,
-      ...fifthHeaderObj,
     };
 
     // await wait();
@@ -214,7 +180,6 @@ const ListView = () => {
         settingType: 'base',
         forTarget: firstMainDataPath,
         targetUid,
-        header_label_1: label,
       }),
     });
   };
@@ -238,10 +203,7 @@ const ListView = () => {
                     startIcon={<AddIcon />}
                     variant="secondary"
                     onClick={() => {
-                      const headerDisplayObject = {
+                      handleClickAddField(forTarget, targetUid);
-                        header_label_1: currentDataName,
-                      };
-                      handleClickAddField(forTarget, targetUid, headerDisplayObject);
                     }}
                   >
                     {formatMessage({ id: getTrad('button.attributes.add.another') })}