diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/forms/index.js b/packages/core/content-type-builder/admin/src/components/FormModal/forms/index.js index 1003499109..1b2bff56bf 100644 --- a/packages/core/content-type-builder/admin/src/components/FormModal/forms/index.js +++ b/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; }, diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/index.js b/packages/core/content-type-builder/admin/src/components/FormModal/index.js index 9680da119e..0987a324fc 100644 --- a/packages/core/content-type-builder/admin/src/components/FormModal/index.js +++ b/packages/core/content-type-builder/admin/src/components/FormModal/index.js @@ -122,6 +122,7 @@ 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'); @@ -153,6 +154,7 @@ const FormModal = () => { actionType, attributeName, attributeType, + categoryName, kind, dynamicZoneTarget, forTarget, @@ -1093,8 +1095,10 @@ const FormModal = () => { 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]; - - if (forTarget === 'components') { - icon = schema.schema.icon; - isFontAwesomeIcon = true; - } else if (forTarget === 'component') { - icon = 'component'; - } else { - icon = schema.schema.kind; - } - } + const schema = modifiedData?.[forTarget]?.[targetUid] || modifiedData?.[forTarget] || null; 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 = ({ - {formatMessage({ id: headerId }, { name: headers[0].label })} + {formatMessage({ id: headerId }, { name: schema.schema.name })} @@ -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 ( - {!isFontAwesomeIcon && } - {isFontAwesomeIcon && ( - - - - )} + {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, - headers: PropTypes.arrayOf( - PropTypes.shape({ - icon: PropTypes.shape({ name: PropTypes.string, isCustom: PropTypes.bool }), - label: PropTypes.string.isRequired, - }) - ).isRequired, + dynamicZoneTarget: PropTypes.string, + forTarget: PropTypes.oneOf(['contentType', 'component', 'components']), modalType: PropTypes.string.isRequired, targetUid: PropTypes.string, };