fix component display name

examples/getstarted/components/blog/killer-compo.json

@@ -2,7 +2,7 @@
   "connection": "default",
   "collectionName": "components_blog_killer_compos",
   "info": {
-    "name": "killer compo",
+    "name": "killer compo long name",
     "icon": "ad"
   },
   "attributes": {

packages/strapi-plugin-content-manager/admin/src/components/DynamicComponentCard/index.js

@@ -3,12 +3,19 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Wrapper from './Wrapper';
 
-const DynamicComponentCard = ({ children, componentUid, icon, onClick }) => {
+const DynamicComponentCard = ({
+  children,
+  componentUid,
+  friendlyName,
+  icon,
+  onClick,
+}) => {
   return (
     <Wrapper
       onClick={e => {
         e.preventDefault();
         e.stopPropagation();
+        console.log('oooo');
         onClick(componentUid);
       }}
     >
@@ -18,7 +25,7 @@ const DynamicComponentCard = ({ children, componentUid, icon, onClick }) => {
       </button>
 
       <div className="component-uid">
-        <span>{componentUid}</span>
+        <span>{friendlyName}</span>
       </div>
       {children}
     </Wrapper>
@@ -27,6 +34,7 @@ const DynamicComponentCard = ({ children, componentUid, icon, onClick }) => {
 
 DynamicComponentCard.defaultProps = {
   children: null,
+  friendlyName: '',
   onClick: () => {},
   icon: 'smile',
 };
@@ -34,6 +42,7 @@ DynamicComponentCard.defaultProps = {
 DynamicComponentCard.propTypes = {
   children: PropTypes.node,
   componentUid: PropTypes.string.isRequired,
+  friendlyName: PropTypes.string,
   icon: PropTypes.string,
   onClick: PropTypes.func,
 };

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js

@@ -42,12 +42,12 @@ const DynamicZone = ({ max, min, name }) => {
     return schema;
   };
 
-  const getDynamicComponentIcon = componentUid => {
+  const getDynamicComponentInfos = componentUid => {
     const {
-      info: { icon },
+      info: { icon, name },
     } = getDynamicComponentSchemaData(componentUid);
 
-    return icon;
+    return { icon, name };
   };
 
   const dynamicZoneErrors = Object.keys(formErrors)
@@ -118,7 +118,7 @@ const DynamicZone = ({ max, min, name }) => {
               </RoundCTA>
               <FieldComponent
                 componentUid={componentUid}
-                icon={getDynamicComponentIcon(componentUid)}
+                icon={getDynamicComponentInfos(componentUid).icon}
                 label=""
                 name={`${name}.${index}`}
                 isFromDynamicZone={true}
@@ -137,7 +137,7 @@ const DynamicZone = ({ max, min, name }) => {
               setIsOpen(prev => !prev);
             } else {
               strapi.notification.info(
-                `${pluginId}.components.components.notification.info.maximum-requirement`
+                `${pluginId}.components.notification.info.maximum-requirement`
               );
             }
           }}
@@ -170,11 +170,16 @@ const DynamicZone = ({ max, min, name }) => {
             </p>
             <div className="componentsList">
               {dynamicZoneAvailableComponents.map(componentUid => {
+                const { icon, name: friendlyName } = getDynamicComponentInfos(
+                  componentUid
+                );
+
                 return (
                   <DynamicComponentCard
                     key={componentUid}
                     componentUid={componentUid}
-                    icon={getDynamicComponentIcon(componentUid)}
+                    friendlyName={friendlyName}
+                    icon={icon}
                     onClick={() => {
                       setIsOpen(false);
                       const shouldCheckErrors = hasError;

packages/strapi-plugin-content-type-builder/admin/src/components/ComponentCard/Close.js

@@ -2,10 +2,12 @@ import styled from 'styled-components';
 import { Remove } from '@buffetjs/icons';
 
 const Close = styled(Remove)`
-  > path {
-    fill: #007eff;
-    &:hover {
-      fill: #aed4fb;
+  > g {
+    > path {
+      fill: #007eff;
+      &:hover {
+        fill: #aed4fb;
+      }
     }
   }
 `;

packages/strapi-plugin-content-type-builder/admin/src/components/ComponentCard/Wrapper.js

@@ -14,6 +14,7 @@ const Wrapper = styled.button`
   border-radius: 2px;
   border: 0;
   padding: 0;
+  padding-top: 5px;
   text-align: center;
   border: solid 1px #fafafb;
   &:focus {

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

@@ -15,23 +15,18 @@ import Close from './Close';
 
 function ComponentCard({ component, dzName, index, isActive, onClick }) {
   const { modifiedData, removeComponentFromDynamicZone } = useDataManager();
-
-  const getComponentSchema = componentName => {
-    return get(modifiedData, ['components', componentName], {
-      schema: { icon: null },
-    });
-  };
-
   const {
-    schema: { icon },
-  } = getComponentSchema(component);
+    schema: { icon, name },
+  } = get(modifiedData, ['components', component], {
+    schema: { icon: null },
+  });
 
   return (
     <Wrapper onClick={onClick} className={isActive ? 'active' : ''}>
       <div>
         <FontAwesomeIcon icon={icon} />
       </div>
-      <p>{component}</p>
+      <p>{name}</p>
 
       <div
         className="close-btn"
@@ -41,6 +36,7 @@ function ComponentCard({ component, dzName, index, isActive, onClick }) {
         }}
       >
         <Close width="7px" height="7px" />
+        {/* <Remove /> */}
       </div>
     </Wrapper>
   );

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

@@ -63,6 +63,10 @@ function List({
     },
   };
 
+  if (!targetUid) {
+    return null;
+  }
+
   return (
     <>
       <Wrapper className={className}>
@@ -131,13 +135,14 @@ List.defaultProps = {
   addComponentToDZ: () => {},
   className: null,
   customRowComponent: null,
-  items: [],
 
   firstLoopComponentName: null,
   firstLoopComponentUid: null,
+  isSub: false,
+  items: [],
   secondLoopComponentName: null,
   secondLoopComponentUid: null,
-  isSub: false,
+  targetUid: null,
 };
 
 List.propTypes = {
@@ -151,7 +156,7 @@ List.propTypes = {
   mainTypeName: PropTypes.string.isRequired,
   secondLoopComponentName: PropTypes.string,
   secondLoopComponentUid: PropTypes.string,
-  targetUid: PropTypes.string.isRequired,
+  targetUid: PropTypes.string,
   isSub: PropTypes.bool,
 };