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

Remove headers from search
This commit is contained in:
cyril lopez 2021-10-15 15:10:36 +02:00 committed by GitHub
commit d2564af7f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 83 additions and 655 deletions

View File

@ -27,18 +27,6 @@ const AttributeOption = ({ type }) => {
// FIXME refacto // FIXME refacto
const forTarget = query.forTarget || null; const forTarget = query.forTarget || null;
const targetUid = query.targetUid || 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({ const search = makeSearch({
modalType: 'attribute', modalType: 'attribute',
@ -48,19 +36,6 @@ const AttributeOption = ({ type }) => {
targetUid, targetUid,
attributeType: type, attributeType: type,
step: type === 'component' ? '1' : null, 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') { if (forTarget === 'contentType') {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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;

View File

@ -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;

View File

@ -1,6 +1,4 @@
export { default as canEditContentType } from './canEditContentType'; 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 getAttributesToDisplay } from './getAttributesToDisplay';
export { default as getModalTitleSubHeader } from './getModalTitleSubHeader'; export { default as getModalTitleSubHeader } from './getModalTitleSubHeader';
export { default as getNextSearch } from './getNextSearch'; export { default as getNextSearch } from './getNextSearch';

View File

@ -2,6 +2,7 @@ const INITIAL_STATE_DATA = {
actionType: null, actionType: null,
attributeName: null, attributeName: null,
attributeType: null, attributeType: null,
categoryName: null,
dynamicZoneTarget: null, dynamicZoneTarget: null,
forTarget: null, forTarget: null,
modalType: null, modalType: null,
@ -10,21 +11,6 @@ const INITIAL_STATE_DATA = {
settingType: null, settingType: null,
step: null, step: null,
targetUid: 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 }; export { INITIAL_STATE_DATA };

View File

@ -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);
});
});

View File

@ -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);
});
});

View File

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

View File

@ -7,7 +7,6 @@
/* eslint-disable import/no-cycle */ /* eslint-disable import/no-cycle */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import get from 'lodash/get';
import { EmptyBodyTable, useTracking } from '@strapi/helper-plugin'; import { EmptyBodyTable, useTracking } from '@strapi/helper-plugin';
import { Box } from '@strapi/parts/Box'; import { Box } from '@strapi/parts/Box';
import { Button } from '@strapi/parts/Button'; import { Button } from '@strapi/parts/Button';
@ -27,21 +26,17 @@ import NestedTFooter from '../NestedTFooter';
/* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/no-static-element-interactions */
function List({ function List({
customRowComponent,
items,
addComponentToDZ, addComponentToDZ,
targetUid, customRowComponent,
mainTypeName,
editTarget, editTarget,
isFromDynamicZone,
isNestedInDZComponent,
isMain,
firstLoopComponentName,
firstLoopComponentUid, firstLoopComponentUid,
secondLoopComponentName, isFromDynamicZone,
secondLoopComponentUid, isMain,
isNestedInDZComponent,
isSub, isSub,
dzName, items,
secondLoopComponentUid,
targetUid,
}) { }) {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const { trackUsage } = useTracking(); const { trackUsage } = useTracking();
@ -51,87 +46,7 @@ function List({
const onClickAddField = () => { const onClickAddField = () => {
trackUsage('hasClickedCTBAddFieldBanner'); 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) { if (!targetUid) {
@ -239,15 +154,11 @@ function List({
<React.Fragment key={item.name}> <React.Fragment key={item.name}>
<CustomRow <CustomRow
{...item} {...item}
dzName={dzName}
isNestedInDZComponent={isNestedInDZComponent} isNestedInDZComponent={isNestedInDZComponent}
targetUid={targetUid} targetUid={targetUid}
mainTypeName={mainTypeName}
editTarget={editTarget} editTarget={editTarget}
firstLoopComponentName={firstLoopComponentName}
firstLoopComponentUid={firstLoopComponentUid} firstLoopComponentUid={firstLoopComponentUid}
isFromDynamicZone={isFromDynamicZone} isFromDynamicZone={isFromDynamicZone}
secondLoopComponentName={secondLoopComponentName}
secondLoopComponentUid={secondLoopComponentUid} secondLoopComponentUid={secondLoopComponentUid}
/> />
@ -256,11 +167,8 @@ function List({
{...item} {...item}
customRowComponent={customRowComponent} customRowComponent={customRowComponent}
targetUid={targetUid} targetUid={targetUid}
dzName={dzName}
isNestedInDZComponent={isFromDynamicZone} isNestedInDZComponent={isFromDynamicZone}
mainTypeName={mainTypeName}
editTarget={editTarget} editTarget={editTarget}
firstLoopComponentName={firstLoopComponentName}
firstLoopComponentUid={firstLoopComponentUid} firstLoopComponentUid={firstLoopComponentUid}
/> />
)} )}
@ -271,7 +179,6 @@ function List({
customRowComponent={customRowComponent} customRowComponent={customRowComponent}
addComponent={addComponentToDZ} addComponent={addComponentToDZ}
targetUid={targetUid} targetUid={targetUid}
mainTypeName={mainTypeName}
/> />
)} )}
</React.Fragment> </React.Fragment>
@ -315,15 +222,12 @@ function List({
List.defaultProps = { List.defaultProps = {
addComponentToDZ: () => {}, addComponentToDZ: () => {},
customRowComponent: null, customRowComponent: null,
dzName: null,
firstLoopComponentName: null,
firstLoopComponentUid: null, firstLoopComponentUid: null,
isFromDynamicZone: false, isFromDynamicZone: false,
isNestedInDZComponent: false, isNestedInDZComponent: false,
isMain: false, isMain: false,
isSub: false, isSub: false,
items: [], items: [],
secondLoopComponentName: null,
secondLoopComponentUid: null, secondLoopComponentUid: null,
targetUid: null, targetUid: null,
}; };
@ -331,16 +235,12 @@ List.defaultProps = {
List.propTypes = { List.propTypes = {
addComponentToDZ: PropTypes.func, addComponentToDZ: PropTypes.func,
customRowComponent: PropTypes.func, customRowComponent: PropTypes.func,
dzName: PropTypes.string,
editTarget: PropTypes.string.isRequired, editTarget: PropTypes.string.isRequired,
firstLoopComponentName: PropTypes.string,
firstLoopComponentUid: PropTypes.string, firstLoopComponentUid: PropTypes.string,
isFromDynamicZone: PropTypes.bool, isFromDynamicZone: PropTypes.bool,
isNestedInDZComponent: PropTypes.bool, isNestedInDZComponent: PropTypes.bool,
isMain: PropTypes.bool, isMain: PropTypes.bool,
items: PropTypes.instanceOf(Array), items: PropTypes.instanceOf(Array),
mainTypeName: PropTypes.string.isRequired,
secondLoopComponentName: PropTypes.string,
secondLoopComponentUid: PropTypes.string, secondLoopComponentUid: PropTypes.string,
targetUid: PropTypes.string, targetUid: PropTypes.string,
isSub: PropTypes.bool, isSub: PropTypes.bool,

View File

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

View File

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

View File

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