Fixes #11845

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

packages/core/admin/admin/src/content-manager/components/ComponentInitializer/index.js

@@ -57,13 +57,10 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
       </Box>
       {error?.id && (
         <Typography textColor="danger600" variant="pi">
-          {formatMessage(
+          {formatMessage({
-            {
+            id: error.id,
-              id: error.id,
+            defaultMessage: error.id,
-              defaultMessage: error.defaultMessage,
+          })}
-            },
-            error.values
-          )}
         </Typography>
       )}
     </>
@@ -78,8 +75,6 @@ ComponentInitializer.defaultProps = {
 ComponentInitializer.propTypes = {
   error: PropTypes.shape({
     id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
   }),
   isReadOnly: PropTypes.bool,
   onClick: PropTypes.func.isRequired,

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AccordionGroupCustom/index.js

@@ -92,7 +92,7 @@ const AccordionGroupCustom = ({ children, footer, label, labelAction, error }) =
       {error && (
         <Box paddingTop={1}>
           <Typography variant="pi" textColor="danger600">
-            {formatMessage({ id: error.id, defaultMessage: error.defaultMessage }, error.values)}
+            {formatMessage({ id: error.id, defaultMessage: error.id })}
           </Typography>
         </Box>
       )}
@@ -111,8 +111,6 @@ AccordionGroupCustom.propTypes = {
   children: PropTypes.node.isRequired,
   error: PropTypes.shape({
     id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
   }),
   footer: PropTypes.node,
   label: PropTypes.string,

packages/core/admin/admin/src/content-manager/components/SelectWrapper/index.js

@@ -29,9 +29,9 @@ import { connect, select } from './utils';
 import getSelectStyles from './utils/getSelectStyles';
 
 const initialPaginationState = {
-  _contains: '',
+  contains: '',
-  _limit: 20,
+  limit: 20,
-  _start: 0,
+  start: 0,
 };
 
 const buildParams = (query, paramsToKeep) => {
@@ -141,10 +141,10 @@ function SelectWrapper({
 
       setIsLoading(true);
 
-      const params = { _limit: state._limit, ...defaultParams };
+      const params = { limit: state.limit, ...defaultParams, start: state.start };
 
-      if (state._contains) {
+      if (state.contains) {
-        params[containsKey] = state._contains;
+        params[`filters[${containsKey}][$contains]`] = state.contains;
       }
 
       try {
@@ -183,10 +183,9 @@ function SelectWrapper({
       isFieldAllowed,
       isMorph,
       mainField.name,
-      setIsLoading,
+      state.contains,
-      setOptions,
+      state.limit,
-      state._contains,
+      state.start,
-      state._limit,
     ]
   );
 
@@ -204,11 +203,11 @@ function SelectWrapper({
   const handleInputChange = (inputValue, { action }) => {
     if (action === 'input-change') {
       setState(prevState => {
-        if (prevState._contains === inputValue) {
+        if (prevState.contains === inputValue) {
           return prevState;
         }
 
-        return { ...prevState, _contains: inputValue, _start: 0 };
+        return { ...prevState, contains: inputValue, start: 0 };
       });
     }
 
@@ -216,7 +215,10 @@ function SelectWrapper({
   };
 
   const handleMenuScrollToBottom = () => {
-    setState(prevState => ({ ...prevState, _limit: prevState._limit + 20 }));
+    setState(prevState => ({
+      ...prevState,
+      start: prevState.start + 20,
+    }));
   };
 
   const handleMenuClose = () => {
@@ -304,7 +306,6 @@ function SelectWrapper({
         move={moveRelation}
         name={name}
         options={filteredOptions}
-        // options={temp}
         onChange={handleChange}
         onInputChange={handleInputChange}
         onMenuClose={handleMenuClose}
@@ -320,73 +321,6 @@ function SelectWrapper({
       />
     </Stack>
   );
-
-  // return (
-  //   <Padded>
-  //     <BaselineAlignment />
-  //     <Flex justifyContent="space-between">
-  //       <Flex>
-  //         <Text fontWeight="semiBold">
-  //           <span>
-  //             {label}
-  //             {!isSingle && ` (${associationsLength})`}
-  //           </span>
-  //         </Text>
-  //         {labelIconformatted && (
-  //           <div style={{ lineHeight: '13px' }}>
-  //             <LabelIconWrapper title={labelIconformatted.title}>
-  //               {labelIconformatted.icon}
-  //             </LabelIconWrapper>
-  //           </div>
-  //         )}
-  //       </Flex>
-  //       {isSingle && link}
-  //     </Flex>
-  //     {!isEmpty(description) && (
-  //       <Padded top size="xs">
-  //         <BaselineAlignment />
-  //         <Text fontSize="sm" color="grey" lineHeight="12px" ellipsis>
-  //           {description}
-  //         </Text>
-  //       </Padded>
-  //     )}
-  //     <Padded top size="sm">
-  //       <BaselineAlignment />
-
-  // <Component
-  //   addRelation={handleAddRelation}
-  //   components={{ ClearIndicator, DropdownIndicator, IndicatorSeparator, Option }}
-  //   displayNavigationLink={shouldDisplayRelationLink}
-  //   id={name}
-  //   isDisabled={isDisabled}
-  //   isLoading={isLoading}
-  //   isClearable
-  //   mainField={mainField}
-  //   move={moveRelation}
-  //   name={name}
-  //   options={filteredOptions}
-  //   onChange={handleChange}
-  //   onInputChange={handleInputChange}
-  //   onMenuClose={handleMenuClose}
-  //   onMenuOpen={handleMenuOpen}
-  //   onMenuScrollToBottom={handleMenuScrollToBottom}
-  //   onRemove={onRemoveRelation}
-  //   placeholder={
-  //     isEmpty(placeholder) ? (
-  //       <FormattedMessage id={getTrad('containers.Edit.addAnItem')} />
-  //     ) : (
-  //       placeholder
-  //     )
-  //   }
-  //   searchToPersist={searchToPersist}
-  //   styles={styles}
-  //   targetModel={targetModel}
-  //   value={value}
-  // />
-  //     </Padded>
-  //     <div style={{ marginBottom: 28 }} />
-  //   </Padded>
-  // );
 }
 
 SelectWrapper.defaultProps = {

packages/core/admin/admin/src/content-manager/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -185,7 +185,7 @@ const generateRelationQueryInfos = (contentTypeConfiguration, fieldName, models)
 
   const queryInfos = {
     endPoint,
-    containsKey: `${mainField}_contains`,
+    containsKey: `${mainField}`,
     defaultParams: {},
     shouldDisplayRelationLink,
   };
@@ -210,7 +210,7 @@ const generateRelationQueryInfosForComponents = (
 
   const queryInfos = {
     endPoint,
-    containsKey: `${mainField}_contains`,
+    containsKey: `${mainField}`,
     defaultParams: {
       _component: contentTypeConfiguration.uid,
     },

packages/core/admin/admin/src/content-manager/hooks/useFetchContentTypeLayout/utils/tests/formatLayouts.test.js

@@ -58,7 +58,7 @@ describe('Content Manager | hooks | useFetchContentTypeLayout | utils ', () => {
           },
           queryInfos: {
             endPoint: '/content-manager/relations/api::address.address/categories',
-            containsKey: 'name_contains',
+            containsKey: 'name',
             defaultParams: {},
             shouldDisplayRelationLink: true,
           },
@@ -124,10 +124,7 @@ describe('Content Manager | hooks | useFetchContentTypeLayout | utils ', () => {
             uid: 'compo',
             layouts: {
               edit: [
-                [
+                [{ name: 'full_name', size: 6 }, { name: 'city', size: 6 }],
-                  { name: 'full_name', size: 6 },
-                  { name: 'city', size: 6 },
-                ],
                 [{ name: 'compo', size: 12 }],
               ],
             },
@@ -169,10 +166,7 @@ describe('Content Manager | hooks | useFetchContentTypeLayout | utils ', () => {
             editRelations: [],
             edit: [
               [{ name: 'dz', size: 12 }],
-              [
+              [{ name: 'full_name', size: 6 }, { name: 'city', size: 6 }],
-                { name: 'full_name', size: 6 },
-                { name: 'city', size: 6 },
-              ],
               [{ name: 'compo', size: 12 }],
             ],
           },
@@ -370,10 +364,7 @@ describe('Content Manager | hooks | useFetchContentTypeLayout | utils ', () => {
         layouts: {
           edit: [
             [{ name: 'dz', size: 12 }],
-            [
+            [{ name: 'full_name', size: 6 }, { name: 'city', size: 6 }],
-              { name: 'full_name', size: 6 },
-              { name: 'city', size: 6 },
-            ],
             [{ name: 'compo', size: 12 }],
           ],
         },
@@ -552,7 +543,7 @@ describe('Content Manager | hooks | useFetchContentTypeLayout | utils ', () => {
     it('should return an object with the correct keys', () => {
       expect(generateRelationQueryInfos(addressSchema, 'categories', simpleModels)).toEqual({
         endPoint: '/content-manager/relations/api::address.address/categories',
-        containsKey: 'name_contains',
+        containsKey: 'name',
         defaultParams: {},
         shouldDisplayRelationLink: true,
       });
@@ -570,7 +561,7 @@ describe('Content Manager | hooks | useFetchContentTypeLayout | utils ', () => {
         )
       ).toEqual({
         endPoint: '/content-manager/relations/api::address.address/categories',
-        containsKey: 'name_contains',
+        containsKey: 'name',
         defaultParams: {
           _component: 'api::address.address',
         },
@@ -581,10 +572,7 @@ describe('Content Manager | hooks | useFetchContentTypeLayout | utils ', () => {
 
   describe('getDisplayedModels', () => {
     it('should return an array containing only the displayable models', () => {
-      const models = [
+      const models = [{ uid: 'test', isDisplayed: false }, { uid: 'testtest', isDisplayed: true }];
-        { uid: 'test', isDisplayed: false },
-        { uid: 'testtest', isDisplayed: true },
-      ];
 
       expect(getDisplayedModels([])).toHaveLength(0);
       expect(getDisplayedModels(models)).toHaveLength(1);