Fix relation display

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-helper-plugin/lib/src/components/LeftMenuLink/index.js

@@ -4,11 +4,11 @@ import { NavLink } from 'react-router-dom';
 
 import Icon from './Icon';
 
-function LeftMenuLink({ children, to }) {
+function LeftMenuLink({ children, to, Component }) {
   return (
     <NavLink to={to}>
       <Icon />
-      <p>{children}</p>
+      {Component ? <Component /> : <p>{children}</p>}
     </NavLink>
   );
 }

packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/index.js

@@ -22,7 +22,23 @@ const RelationTargetPicker = ({ onChange, oneThatIsCreatingARelationWithAnother,
     [sortedContentTypesList]
   );
 
-  const targetFriendlyName = get(contentTypes, [target, 'schema', 'name'], 'error');
+  const pluginInfo = useMemo(() => {
+    const plugin = get(contentTypes, [target, 'plugin'], null);
+
+    if (plugin) {
+      return (
+        <span style={{ fontStyle: 'italic', textTransform: 'none' }}>&nbsp; (from: {plugin})</span>
+      );
+    }
+
+    return null;
+  }, [contentTypes, target]);
+
+  const targetFriendlyName = useMemo(() => {
+    const name = get(contentTypes, [target, 'schema', 'name'], 'error');
+
+    return name;
+  }, [contentTypes, target]);
 
   return (
     <Wrapper>
@@ -39,22 +55,25 @@ const RelationTargetPicker = ({ onChange, oneThatIsCreatingARelationWithAnother,
               style={{ fontSize: 12, marginTop: '-3px' }}
             />
             {targetFriendlyName}
+            {pluginInfo}
           </p>
         </DropdownToggle>
         <DropdownMenu style={{ paddingTop: '3px' }}>
-          {allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo }) => {
+          {allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo, plugin }) => {
             return (
               <DropdownItem
                 key={uid}
                 onClick={() => {
                   // Change the target
+                  const selectedContentTypeFriendlyName = plugin ? `${plugin}_${title}` : title;
+
                   onChange({
                     target: {
                       name: 'target',
                       value: uid,
                       type: 'relation',
                       oneThatIsCreatingARelationWithAnother,
-                      selectedContentTypeFriendlyName: title,
+                      selectedContentTypeFriendlyName,
                       targetContentTypeAllowedRelations: restrictRelationsTo,
                     },
                   });
@@ -66,6 +85,11 @@ const RelationTargetPicker = ({ onChange, oneThatIsCreatingARelationWithAnother,
                     style={{ fontSize: 12, marginTop: '-3px' }}
                   />
                   {title}
+                  {plugin && (
+                    <span style={{ fontStyle: 'italic', textTransform: 'none' }}>
+                      &nbsp; (from: {plugin})
+                    </span>
+                  )}
                 </p>
               </DropdownItem>
             );

packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/utils/cleanData.js

@@ -148,6 +148,7 @@ const sortContentType = types =>
         editable: types[uid].schema.editable,
         name: uid,
         title: types[uid].schema.name,
+        plugin: types[uid].plugin || null,
         uid,
         to: `/plugins/${pluginId}/content-types/${uid}`,
         kind: types[uid].schema.kind,

packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/utils/tests/expectedFormattedData.js

@@ -100,6 +100,8 @@ const expectedData = {
       to: '/plugins/content-type-builder/content-types/plugins::myplugins.atest',
       kind: 'collectionType',
       editable: true,
+      plugin: null,
+      restrictRelationsTo: [],
     },
     {
       uid: 'plugins::myplugins.btest',
@@ -108,6 +110,8 @@ const expectedData = {
       to: '/plugins/content-type-builder/content-types/plugins::myplugins.btest',
       kind: 'collectionType',
       editable: true,
+      plugin: null,
+      restrictRelationsTo: null,
     },
     {
       uid: 'plugins::myplugins.ctest',
@@ -116,6 +120,8 @@ const expectedData = {
       to: '/plugins/content-type-builder/content-types/plugins::myplugins.ctest',
       kind: 'collectionType',
       editable: true,
+      plugin: null,
+      restrictRelationsTo: ['oneWay'],
     },
     {
       uid: 'plugins::myplugins.test',
@@ -124,6 +130,8 @@ const expectedData = {
       to: '/plugins/content-type-builder/content-types/plugins::myplugins.test',
       kind: 'singleType',
       editable: true,
+      plugin: null,
+      restrictRelationsTo: null,
     },
   ],
 

packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/utils/tests/rawData.js

@@ -150,19 +150,39 @@ const data = {
     contentTypesToSort: {
       'plugins::myplugins.test': {
         uid: 'plugins::myplugins.test',
-        schema: { name: 'plugins::myplugins.test', kind: 'singleType', editable: true },
+        schema: {
+          name: 'plugins::myplugins.test',
+          kind: 'singleType',
+          editable: true,
+          restrictRelationsTo: null,
+        },
       },
       'plugins::myplugins.btest': {
         uid: 'plugins::myplugins.btest',
-        schema: { name: 'plugins::myplugins.btest', kind: 'collectionType', editable: true },
+        schema: {
+          name: 'plugins::myplugins.btest',
+          kind: 'collectionType',
+          editable: true,
+          restrictRelationsTo: null,
+        },
       },
       'plugins::myplugins.atest': {
         uid: 'plugins::myplugins.atest',
-        schema: { name: 'plugins::myplugins.atest', kind: 'collectionType', editable: true },
+        schema: {
+          name: 'plugins::myplugins.atest',
+          kind: 'collectionType',
+          editable: true,
+          restrictRelationsTo: [],
+        },
       },
       'plugins::myplugins.ctest': {
         uid: 'plugins::myplugins.ctest',
-        schema: { name: 'plugins::myplugins.ctest', kind: 'collectionType', editable: true },
+        schema: {
+          name: 'plugins::myplugins.ctest',
+          kind: 'collectionType',
+          editable: true,
+          restrictRelationsTo: ['oneWay'],
+        },
       },
     },
     // TODO add test for component

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js

@@ -84,24 +84,35 @@ const reducer = (state, action) => {
         }
 
         if (keys.length === 1 && keys.includes('target')) {
+          const { targetContentTypeAllowedRelations } = action;
+          let didChangeNatureBecauseOfRestrictedRelation = false;
+
           return obj
             .update('target', () => value)
             .update('nature', currentNature => {
-              const { targetContentTypeAllowedRelations } = action;
-
               if (targetContentTypeAllowedRelations === null) {
                 return currentNature;
               }
 
               if (!targetContentTypeAllowedRelations.includes(currentNature)) {
+                didChangeNatureBecauseOfRestrictedRelation = true;
+
                 return targetContentTypeAllowedRelations[0];
               }
 
               return currentNature;
             })
             .update('name', () => {
+              if (didChangeNatureBecauseOfRestrictedRelation) {
                 return pluralize(
                   snakeCase(selectedContentTypeFriendlyName),
+                  shouldPluralizeName(targetContentTypeAllowedRelations[0])
+                );
+              }
+
+              return pluralize(
+                snakeCase(selectedContentTypeFriendlyName),
+
                 shouldPluralizeName(obj.get('nature'))
               );
             })

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/tests/reducer.test.js

@@ -244,7 +244,7 @@ describe('CTB | containers | FormModal | reducer | actions', () => {
       };
       const expected = state
         .setIn(['modifiedData', 'target'], 'application::country.country')
-        .setIn(['modifiedData', 'name'], 'countries')
+        .setIn(['modifiedData', 'name'], 'country')
         .setIn(['modifiedData', 'nature'], 'oneWay');
 
       expect(reducer(state, action)).toEqual(expected);

packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/index.js

@@ -107,9 +107,27 @@ function LeftMenu({ wait }) {
     }
   };
 
-  const displayedContentTypes = useMemo(() => sortedContentTypesList.filter(obj => obj.editable), [
+  const displayedContentTypes = useMemo(() => {
-    sortedContentTypesList,
+    return sortedContentTypesList
-  ]);
+      .filter(obj => obj.editable)
+      .map(obj => {
+        if (obj.plugin) {
+          return {
+            ...obj,
+            Component: () => (
+              <p style={{ justifyContent: 'normal' }}>
+                {obj.title}&nbsp;
+                <span style={{ fontStyle: 'italic', textTransform: 'none' }}>
+                  ({formatMessage({ id: getTrad('from') })}): : {obj.plugin})
+                </span>
+              </p>
+            ),
+          };
+        }
+
+        return obj;
+      });
+  }, [sortedContentTypesList, formatMessage]);
 
   const data = [
     {

packages/strapi-plugin-content-type-builder/services/ContentTypes.js

@@ -29,17 +29,17 @@ const getRestrictRelationsTo = (contentType = {}) => {
 };
 
 const getformattedName = (contentType = {}) => {
-  const { uid, info, plugin } = contentType;
+  const { uid, info } = contentType;
   const name = _.get(info, 'name') || _.upperFirst(pluralize(uid));
-  const isUser = name.toLowerCase() === 'user';
+  // const isUser = name.toLowerCase() === 'user';
 
-  if (isUser && plugin === 'admin') {
+  // if (isUser && plugin === 'admin') {
-    return 'User (Admin panel)';
+  //   return 'User (Admin panel)';
-  }
+  // }
 
-  if (isUser && plugin === 'users-permissions') {
+  // if (isUser && plugin === 'users-permissions') {
-    return 'User (Permissions plugin)';
+  //   return 'User (Permissions plugin)';
-  }
+  // }
 
   return name;
 };