diff --git a/packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeOption/index.js b/packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeOption/index.js index d2939602ea..330d4351e0 100644 --- a/packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeOption/index.js +++ b/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') { diff --git a/packages/core/content-type-builder/admin/src/components/ComponentList/index.js b/packages/core/content-type-builder/admin/src/components/ComponentList/index.js index 2397a62180..586e397887 100644 --- a/packages/core/content-type-builder/admin/src/components/ComponentList/index.js +++ b/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({ @@ -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; diff --git a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/useContentTypeBuilderMenu.js b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/useContentTypeBuilderMenu.js index 87afa9f135..9917af003a 100644 --- a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/useContentTypeBuilderMenu.js +++ b/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, diff --git a/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js b/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js index ee5b58f729..9c8de7b0f0 100644 --- a/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js +++ b/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js @@ -56,14 +56,7 @@ const ComponentStack = styled(Stack)` align-items: center; `; -function DynamicZoneList({ - customRowComponent, - components, - addComponent, - mainTypeName, - name, - targetUid, -}) { +function DynamicZoneList({ customRowComponent, components, addComponent, name, targetUid }) { const { isInDevelopmentMode } = useDataManager(); const [activeTab, setActiveTab] = useState(0); const { formatMessage } = useIntl(); @@ -129,8 +122,6 @@ function DynamicZoneList({ @@ -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, }; 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..535de55e1b 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 @@ -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 = () => { { - 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; diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/utils/createHeadersObjectFromArray.js b/packages/core/content-type-builder/admin/src/components/FormModal/utils/createHeadersObjectFromArray.js deleted file mode 100644 index 9712d9e0c8..0000000000 --- a/packages/core/content-type-builder/admin/src/components/FormModal/utils/createHeadersObjectFromArray.js +++ /dev/null @@ -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; diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/utils/index.js b/packages/core/content-type-builder/admin/src/components/FormModal/utils/index.js index deb9fc6e48..ef375947e1 100644 --- a/packages/core/content-type-builder/admin/src/components/FormModal/utils/index.js +++ b/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'; diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/utils/staticData.js b/packages/core/content-type-builder/admin/src/components/FormModal/utils/staticData.js index 733121ba91..47c7b0adad 100644 --- a/packages/core/content-type-builder/admin/src/components/FormModal/utils/staticData.js +++ b/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 }; diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/utils/tests/createHeadersArray.test.js b/packages/core/content-type-builder/admin/src/components/FormModal/utils/tests/createHeadersArray.test.js deleted file mode 100644 index f682b97601..0000000000 --- a/packages/core/content-type-builder/admin/src/components/FormModal/utils/tests/createHeadersArray.test.js +++ /dev/null @@ -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); - }); -}); diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/utils/tests/createHeadersObjectFromArray.test.js b/packages/core/content-type-builder/admin/src/components/FormModal/utils/tests/createHeadersObjectFromArray.test.js deleted file mode 100644 index 18061d5428..0000000000 --- a/packages/core/content-type-builder/admin/src/components/FormModal/utils/tests/createHeadersObjectFromArray.test.js +++ /dev/null @@ -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); - }); -}); diff --git a/packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js b/packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js index 30b22517b4..c7d9a39ced 100644 --- a/packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js +++ b/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]; - - 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, }; diff --git a/packages/core/content-type-builder/admin/src/components/List/index.js b/packages/core/content-type-builder/admin/src/components/List/index.js index fa866873c8..55cabc9414 100644 --- a/packages/core/content-type-builder/admin/src/components/List/index.js +++ b/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, - mainTypeName, + customRowComponent, editTarget, - isFromDynamicZone, - isNestedInDZComponent, - isMain, - firstLoopComponentName, firstLoopComponentUid, - secondLoopComponentName, - secondLoopComponentUid, + isFromDynamicZone, + 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( - 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 - ); + openModalAddField(editTarget, targetUid); }; if (!targetUid) { @@ -239,15 +154,11 @@ function List({ @@ -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} /> )} @@ -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, diff --git a/packages/core/content-type-builder/admin/src/components/ListRow/index.js b/packages/core/content-type-builder/admin/src/components/ListRow/index.js index 0a81f41e4f..06059c8d4a 100644 --- a/packages/core/content-type-builder/admin/src/components/ListRow/index.js +++ b/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, - firstHeaderObject, - secondHeaderObject, - thirdHeaderObject, - fourthHeaderObject, - fifthHeaderObject + attrType ); } }; @@ -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, diff --git a/packages/core/content-type-builder/admin/src/components/SelectComponent/index.js b/packages/core/content-type-builder/admin/src/components/SelectComponent/index.js index ab986b6257..a013dbcab6 100644 --- a/packages/core/content-type-builder/admin/src/components/SelectComponent/index.js +++ b/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 }, ]; diff --git a/packages/core/content-type-builder/admin/src/pages/ListView/index.js b/packages/core/content-type-builder/admin/src/pages/ListView/index.js index 9ca7a5381f..d85e1eb577 100644 --- a/packages/core/content-type-builder/admin/src/pages/ListView/index.js +++ b/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 ( - forTarget, - targetUid, - firstHeaderObj, - secondHeaderObj, - thirdHeaderObj, - fourthHeaderObj - ) => { + const handleClickAddField = async (forTarget, targetUid) => { // 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 ( - forTarget, - targetUid, - attributeName, - type, - firstHeaderObj, - secondHeaderObj, - thirdHeaderObj, - fourthHeaderObj, - fifthHeaderObj - ) => { + const handleClickEditField = async (forTarget, targetUid, attributeName, type) => { 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={} variant="secondary" onClick={() => { - const headerDisplayObject = { - header_label_1: currentDataName, - }; - handleClickAddField(forTarget, targetUid, headerDisplayObject); + handleClickAddField(forTarget, targetUid); }} > {formatMessage({ id: getTrad('button.attributes.add.another') })}