From b6e6f7cbbd92142172f92f8639987d86e708edd2 Mon Sep 17 00:00:00 2001
From: soupette <cyril.lpz@gmail.com>
Date: Thu, 17 Sep 2020 16:04:44 +0200
Subject: [PATCH] Fix relation display

Signed-off-by: soupette <cyril.lpz@gmail.com>
---
 .../lib/src/components/LeftMenuLink/index.js  |  4 +--
 .../components/RelationTargetPicker/index.js  | 30 +++++++++++++++++--
 .../DataManagerProvider/utils/cleanData.js    |  1 +
 .../utils/tests/expectedFormattedData.js      |  8 +++++
 .../utils/tests/rawData.js                    | 28 ++++++++++++++---
 .../admin/src/containers/FormModal/reducer.js | 15 ++++++++--
 .../FormModal/tests/reducer.test.js           |  2 +-
 .../admin/src/containers/LeftMenu/index.js    | 24 +++++++++++++--
 .../services/ContentTypes.js                  | 16 +++++-----
 9 files changed, 105 insertions(+), 23 deletions(-)

diff --git a/packages/strapi-helper-plugin/lib/src/components/LeftMenuLink/index.js b/packages/strapi-helper-plugin/lib/src/components/LeftMenuLink/index.js
index 3bd532129c..9bb841aa78 100644
--- a/packages/strapi-helper-plugin/lib/src/components/LeftMenuLink/index.js
+++ b/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>
   );
 }
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/index.js
index 9eaef82a96..8bc9a3aefc 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/index.js
+++ b/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>
             );
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/utils/cleanData.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/utils/cleanData.js
index a8f87a07b0..79f233bf17 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/utils/cleanData.js
+++ b/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,
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/utils/tests/expectedFormattedData.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/utils/tests/expectedFormattedData.js
index 4b1799ead0..afd59db4e4 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/utils/tests/expectedFormattedData.js
+++ b/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,
     },
   ],
 
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/utils/tests/rawData.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/utils/tests/rawData.js
index f36085b334..ef8a757e98 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/utils/tests/rawData.js
+++ b/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
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js
index 404ec7eeb4..90e788c350 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js
+++ b/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'))
               );
             })
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/tests/reducer.test.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/tests/reducer.test.js
index 076ec788f9..ad0fc03851 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/tests/reducer.test.js
+++ b/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);
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/index.js
index 8bf0435dcd..7b429d0c5f 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/index.js
+++ b/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), [
-    sortedContentTypesList,
-  ]);
+  const displayedContentTypes = useMemo(() => {
+    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 = [
     {
diff --git a/packages/strapi-plugin-content-type-builder/services/ContentTypes.js b/packages/strapi-plugin-content-type-builder/services/ContentTypes.js
index 303d9ebf4b..fbc42939ba 100644
--- a/packages/strapi-plugin-content-type-builder/services/ContentTypes.js
+++ b/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') {
-    return 'User (Admin panel)';
-  }
+  // if (isUser && plugin === 'admin') {
+  //   return 'User (Admin panel)';
+  // }
 
-  if (isUser && plugin === 'users-permissions') {
-    return 'User (Permissions plugin)';
-  }
+  // if (isUser && plugin === 'users-permissions') {
+  //   return 'User (Permissions plugin)';
+  // }
 
   return name;
 };