Merge pull request #13256 from strapi/fix/component-icons-optional

Make component icons optional

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

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Wrapper from './Wrapper';
-
-const DynamicComponentCard = ({ children, componentUid, friendlyName, icon, onClick }) => {
-  return (
-    <Wrapper
-      onClick={e => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        onClick(componentUid);
-      }}
-    >
-      <button className="component-icon" type="button">
-        <FontAwesomeIcon icon={icon} />
-      </button>
-
-      <div className="component-uid">
-        <span>{friendlyName}</span>
-      </div>
-      {children}
-    </Wrapper>
-  );
-};
-
-DynamicComponentCard.defaultProps = {
-  children: null,
-  friendlyName: '',
-  onClick: () => {},
-  icon: 'smile',
-};
-
-DynamicComponentCard.propTypes = {
-  children: PropTypes.node,
-  componentUid: PropTypes.string.isRequired,
-  friendlyName: PropTypes.string,
-  icon: PropTypes.string,
-  onClick: PropTypes.func,
-};
-
-export default DynamicComponentCard;

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/Category/ComponentCard/index.js

@@ -74,7 +74,7 @@ function ComponentCard({ componentUid, intlLabel, icon, onClick }) {
 }
 
 ComponentCard.defaultProps = {
-  icon: 'smile',
+  icon: 'dice-d6',
   onClick: () => {},
 };
 

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

@@ -106,7 +106,7 @@ function ComponentCard({ component, dzName, index, isActive, isInDevelopmentMode
         paddingRight={4}
       >
         <StackCentered spacing={1}>
-          <StyledFontAwesomeIcon icon={icon} />
+          <StyledFontAwesomeIcon icon={icon || 'dice-d6'} />
           <Box maxWidth={`calc(${pxToRem(140)} - 32px)`}>
             <Typography variant="pi" fontWeight="bold" ellipsis>
               {displayName}

packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js

@@ -16,23 +16,14 @@ import Cell from './Cell';
 
 const CELL_WIDTH = 44;
 
-const ComponentIconPicker = ({ error, isCreating, intlLabel, name, onChange, value }) => {
+const ComponentIconPicker = ({ error, intlLabel, name, onChange, value }) => {
-  const { allIcons, allComponentsIconAlreadyTaken } = useDataManager();
+  const { allIcons } = useDataManager();
   const { formatMessage } = useIntl();
-  const [originalIcon] = useState(value);
-  const initialIcons = allIcons.filter(ico => {
-    if (isCreating) {
-      return !allComponentsIconAlreadyTaken.includes(ico);
-    }
-
-    // Edition
-    return !allComponentsIconAlreadyTaken.filter(icon => icon !== originalIcon).includes(ico);
-  });
 
   const searchWrapperRef = useRef();
   const [showSearch, setShowSearch] = useState(false);
   const [search, setSearch] = useState('');
-  const [icons, setIcons] = useState(initialIcons);
+  const [icons, setIcons] = useState(allIcons);
   const toggleSearch = () => setShowSearch(prev => !prev);
 
   useEffect(() => {
@@ -43,7 +34,7 @@ const ComponentIconPicker = ({ error, isCreating, intlLabel, name, onChange, val
 
   const handleChangeSearch = ({ target: { value } }) => {
     setSearch(value);
-    setIcons(() => initialIcons.filter(icon => icon.includes(value)));
+    setIcons(() => allIcons.filter(icon => icon.includes(value)));
   };
 
   const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
@@ -91,7 +82,7 @@ const ComponentIconPicker = ({ error, isCreating, intlLabel, name, onChange, val
                 }}
                 onClear={() => {
                   setSearch('');
-                  setIcons(initialIcons);
+                  setIcons(allIcons);
                   toggleSearch();
                 }}
                 value={search}
@@ -175,7 +166,6 @@ ComponentIconPicker.defaultProps = {
 
 ComponentIconPicker.propTypes = {
   error: PropTypes.string,
-  isCreating: PropTypes.bool.isRequired,
   intlLabel: PropTypes.shape({
     id: PropTypes.string.isRequired,
     defaultMessage: PropTypes.string.isRequired,

packages/core/content-type-builder/admin/src/components/DataManagerProvider/index.js

@@ -541,10 +541,6 @@ const DataManagerProvider = ({
         addAttribute,
         addCreatedComponentToDynamicZone,
         allComponentsCategories: retrieveSpecificInfoFromComponents(components, ['category']),
-        allComponentsIconAlreadyTaken: retrieveSpecificInfoFromComponents(components, [
-          'schema',
-          'icon',
-        ]),
         allIcons,
         changeDynamicZoneComponents,
         components,

packages/core/content-type-builder/admin/src/components/FormModal/component/createComponentSchema.js

@@ -39,7 +39,7 @@ const createComponentSchema = (usedComponentNames, reservedNames, category) => {
       .matches(CATEGORY_NAME_REGEX, errorsTrads.regex)
       .required(errorsTrads.required),
 
-    icon: yup.string().required(errorsTrads.required),
+    icon: yup.string(),
   };
 
   return yup.object(shape);

packages/core/content-type-builder/server/controllers/validation/component.js

@@ -22,8 +22,7 @@ const componentSchema = createSchema(VALID_TYPES, VALID_RELATIONS, {
     icon: yup
       .string()
       .nullable()
-      .test(isValidIcon)
+      .test(isValidIcon),
-      .required('icon.required'),
     category: yup
       .string()
       .nullable()

packages/core/content-type-builder/tests/components.test.e2e.js

@@ -47,11 +47,6 @@ describe('Content Type Builder - Components', () => {
                 name: 'ValidationError',
                 path: ['component', 'displayName'],
               },
-              {
-                message: 'icon.required',
-                name: 'ValidationError',
-                path: ['component', 'icon'],
-              },
               {
                 message: 'category.required',
                 name: 'ValidationError',
@@ -59,7 +54,7 @@ describe('Content Type Builder - Components', () => {
               },
             ],
           },
-          message: '4 errors occurred',
+          message: '3 errors occurred',
           name: 'ValidationError',
         },
       });
@@ -242,11 +237,6 @@ describe('Content Type Builder - Components', () => {
                 name: 'ValidationError',
                 path: ['component', 'displayName'],
               },
-              {
-                message: 'icon.required',
-                name: 'ValidationError',
-                path: ['component', 'icon'],
-              },
               {
                 message: 'category.required',
                 name: 'ValidationError',
@@ -254,7 +244,7 @@ describe('Content Type Builder - Components', () => {
               },
             ],
           },
-          message: '3 errors occurred',
+          message: '2 errors occurred',
           name: 'ValidationError',
         },
       });