Move icons to app for faster loading

packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/EnumerationWrapper.js

@@ -3,7 +3,7 @@ import { Label } from '@buffetjs/core';
 
 const EnumerationWrapper = styled(Label)`
   width: 415px;
-  height: 90px;
+  min-height: 90px;
   position: relative;
   padding-left: 54px;
   padding-top: 17px;

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

@@ -13,8 +13,9 @@ const Wrapper = styled.div`
     will-change: transform, opacity;
     color: #9ea7b8;
     > p {
-      max-width: 300px;
+      max-width: calc(100% - 20px);
-      line-height: 17px;
+      margin-top: -1px;
+      line-height: 18px;
     }
   }
 

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

@@ -6,8 +6,6 @@ import useDataManager from '../../hooks/useDataManager';
 import CellRenderer from './CellRenderer';
 import Wrapper from './Wrapper';
 
-import allIcons from './utils/icons';
-
 const ComponentIconPicker = ({
   error,
   isCreating,
@@ -16,7 +14,7 @@ const ComponentIconPicker = ({
   onChange,
   value,
 }) => {
-  const { allComponentsIconAlreadyTaken } = useDataManager();
+  const { allIcons, allComponentsIconAlreadyTaken } = useDataManager();
 
   const icons = allIcons.filter(ico => {
     if (isCreating) {

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

@@ -11,12 +11,19 @@ import pluginId from '../../pluginId';
 import Wrapper from './Wrapper';
 
 /* istanbul ignore next */
-function HeaderNavLink({ custom, id, isActive, onClick }) {
+function HeaderNavLink({ custom, isDisabled, id, isActive, onClick }) {
   return (
     <Wrapper
       isActive={isActive}
       style={{ cursor: 'pointer' }}
-      onClick={() => onClick(id)}
+      onClick={e => {
+        if (isDisabled) {
+          e.preventDefault();
+
+          return;
+        }
+        onClick(id);
+      }}
     >
       <FormattedMessage
         id={`${pluginId}.popUpForm.navContainer.${custom || id}`}
@@ -29,12 +36,14 @@ HeaderNavLink.defaultProps = {
   custom: null,
   id: 'base',
   isActive: false,
+  isDisabled: false,
 };
 
 HeaderNavLink.propTypes = {
   custom: PropTypes.string,
   id: PropTypes.string,
   isActive: PropTypes.bool,
+  isDisabled: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
 };
 

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

@@ -9,6 +9,7 @@ import { Switch, Route } from 'react-router-dom';
 import { LoadingIndicatorPage } from 'strapi-helper-plugin';
 import pluginId from '../../pluginId';
 import DataManagerProvider from '../DataManagerProvider';
+import icons from './utils/icons';
 import Wrapper from './Wrapper';
 
 const ListPage = lazy(() => import('../ListView'));
@@ -18,7 +19,7 @@ import RecursivePath from '../RecursivePath';
 const App = () => {
   return (
     <Wrapper>
-      <DataManagerProvider>
+      <DataManagerProvider allIcons={icons}>
         <Suspense fallback={<LoadingIndicatorPage />}>
           <Switch>
             <Route

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

@@ -15,7 +15,7 @@ import createModifiedDataSchema, {
 import retrieveSpecificInfoFromComponents from './utils/retrieveSpecificInfoFromComponents';
 import retrieveComponentsFromSchema from './utils/retrieveComponentsFromSchema';
 
-const DataManagerProvider = ({ children }) => {
+const DataManagerProvider = ({ allIcons, children }) => {
   const [reducerState, dispatch] = useReducer(reducer, initialState, init);
   const {
     components,
@@ -126,7 +126,6 @@ const DataManagerProvider = ({ children }) => {
   };
 
   const removeComponentFromDynamicZone = (dzName, componentToRemoveIndex) => {
-    console.log({ dzName, componentToRemoveIndex });
     dispatch({
       type: 'REMOVE_COMPONENT_FROM_DYNAMIC_ZONE',
       dzName,
@@ -201,6 +200,7 @@ const DataManagerProvider = ({ children }) => {
         components,
         contentTypes,
         createSchema,
+        allIcons,
         initialData,
         isInContentTypeView,
         modifiedData,
@@ -226,6 +226,7 @@ const DataManagerProvider = ({ children }) => {
 };
 
 DataManagerProvider.propTypes = {
+  allIcons: PropTypes.array.isRequired,
   children: PropTypes.node.isRequired,
 };
 

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

@@ -28,6 +28,8 @@ const reducer = (state, action) => {
         forTarget,
         targetUid,
       } = action;
+      delete rest.createComponent;
+
       const pathToDataToEdit = ['component', 'contentType'].includes(forTarget)
         ? [forTarget]
         : [forTarget, targetUid];

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

@@ -233,7 +233,10 @@ const FormModal = () => {
       value === ''
     ) {
       val = null;
-    } else if (type === 'radio' && (name === 'multiple' || name === 'single')) {
+    } else if (
+      type === 'radio' &&
+      (name === 'multiple' || name === 'single' || name === 'createComponent')
+    ) {
       val = value === 'false' ? false : true;
     } else if (type === 'radio' && name === 'default') {
       if (value === 'false') {
@@ -367,7 +370,6 @@ const FormModal = () => {
     ? { paddingTop: '0.5rem', paddingBottom: '3rem' }
     : {};
 
-  console.log({ formModal: modifiedData });
   return (
     <Modal
       isOpen={isOpen}
@@ -405,6 +407,7 @@ const FormModal = () => {
                     {NAVLINKS.map((link, index) => {
                       return (
                         <HeaderNavLink
+                          isDisabled={state.step === '1' && index === 1}
                           isActive={state.settingType === link.id}
                           key={link.id}
                           {...link}
@@ -494,6 +497,12 @@ const FormModal = () => {
                               );
                             }
 
+                            if (input.type === 'spacer') {
+                              return (
+                                <div key="spacer" style={{ height: 20 }}></div>
+                              );
+                            }
+
                             if (input.type === 'relation') {
                               return (
                                 <RelationForm

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

@@ -99,8 +99,17 @@ const reducer = (state, action) => {
 
       let dataToSet;
 
-      if (attributeType === 'dynamiczone') {
+      if (attributeType === 'component') {
-        dataToSet = { type: 'dynamiczone', components: [] };
+        dataToSet = {
+          type: 'component',
+          createComponent: true,
+          componentToCreate: { type: 'component' },
+        };
+      } else if (attributeType === 'dynamiczone') {
+        dataToSet = {
+          type: 'dynamiczone',
+          components: [],
+        };
       } else if (attributeType === 'text') {
         dataToSet = { type: 'string' };
       } else if (attributeType === 'number' || attributeType === 'date') {

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

@@ -0,0 +1,50 @@
+import getTrad from '../../../utils/getTrad';
+
+const componentForm = {
+  base(prefix = '') {
+    const items = [
+      [
+        {
+          autoFocus: true,
+          name: `${prefix}name`,
+          type: 'text',
+          label: {
+            id: getTrad('modalForm.attribute.form.base.name'),
+          },
+          description: {
+            id: getTrad('modalForm.attribute.form.base.name.description'),
+          },
+          validations: {
+            required: true,
+          },
+        },
+        {
+          autoFocus: true,
+          name: 'category',
+          type: 'creatableSelect',
+          label: {
+            id: getTrad('modalForm.components.create-component.category.label'),
+          },
+          validations: {
+            required: true,
+          },
+        },
+      ],
+      [
+        {
+          name: `${prefix}icon`,
+          type: 'componentIconPicker',
+          size: 12,
+          label: {
+            id: getTrad('modalForm.components.icon.label'),
+          },
+        },
+      ],
+    ];
+
+    return items;
+  },
+  advanced() {},
+};
+
+export default componentForm;

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

@@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import pluginId from '../../../pluginId';
 import getTrad from '../../../utils/getTrad';
 import { createComponentUid, createUid, nameToSlug } from './createUid';
+import componentForm from './componentForm';
 
 yup.addMethod(yup.mixed, 'defined', function() {
   return this.test(
@@ -54,6 +55,7 @@ const forms = {
       isEditing,
       attributeToEditName,
       initialData
+      // componentCategory
     ) {
       const alreadyTakenAttributes = Object.keys(
         get(currentSchema, ['schema', 'attributes'], {})
@@ -153,6 +155,8 @@ const forms = {
       };
 
       switch (attributeType) {
+        case 'component':
+          return yup.object();
         case 'dynamiczone':
           return yup.object().shape({
             ...commonShape,
@@ -494,6 +498,52 @@ const forms = {
           ],
         ];
 
+        if (type === 'component') {
+          const itemsToConcat =
+            data.createComponent === true
+              ? [[{ type: 'spacer' }]].concat(
+                  componentForm.base('componentToCreate.')
+                )
+              : [];
+
+          return {
+            items: [
+              [
+                {
+                  label: {
+                    id: getTrad('modalForm.attribute.text.type-selection'),
+                  },
+                  name: 'createComponent',
+                  type: 'booleanBox',
+                  size: 12,
+                  options: [
+                    {
+                      headerId: getTrad(
+                        `form.attribute.component.option.create`
+                      ),
+                      descriptionId: getTrad(
+                        `form.attribute.component.option.create.description`
+                      ),
+                      value: true,
+                    },
+                    {
+                      headerId: getTrad(
+                        `form.attribute.component.option.reuse-existing`
+                      ),
+                      descriptionId: getTrad(
+                        `form.attribute.${type}.option.reuse-existing.description`
+                      ),
+                      value: false,
+                    },
+                  ],
+                  validations: {},
+                },
+              ],
+              ...itemsToConcat,
+            ],
+          };
+        }
+
         if (type === 'text' || type === 'media') {
           items.push([
             {
@@ -724,7 +774,7 @@ const forms = {
           .required(errorsTrads.required),
         category: yup.string().required(errorsTrads.required),
         icon: yup.string().required(errorsTrads.required),
-        collectionName: yup.string(),
+        collectionName: yup.string().nullable(),
       });
     },
     form: {
@@ -749,50 +799,8 @@ const forms = {
         };
       },
       base() {
-        const defaultItems = [
-          [
-            {
-              autoFocus: true,
-              name: 'name',
-              type: 'text',
-              label: {
-                id: getTrad('modalForm.attribute.form.base.name'),
-              },
-              description: {
-                id: getTrad('modalForm.attribute.form.base.name.description'),
-              },
-              validations: {
-                required: true,
-              },
-            },
-            {
-              autoFocus: true,
-              name: 'category',
-              type: 'creatableSelect',
-              label: {
-                id: getTrad(
-                  'modalForm.components.create-component.category.label'
-                ),
-              },
-              validations: {
-                required: true,
-              },
-            },
-          ],
-          [
-            {
-              name: 'icon',
-              type: 'componentIconPicker',
-              size: 12,
-              label: {
-                id: getTrad('modalForm.components.icon.label'),
-              },
-            },
-          ],
-        ];
-
         return {
-          items: defaultItems,
+          items: componentForm.base(),
         };
       },
     },

packages/strapi-plugin-content-type-builder/admin/src/translations/en.json

@@ -210,6 +210,10 @@
   "modalForm.attribute.form.base.name.description": "No space is allowed for the name of the attribute",
   "modalForm.attribute.text.type-selection": "Type",
 
+  "form.attribute.component.option.create": "Create a new component",
+  "form.attribute.component.option.create.description": "A component is shared across types, it will be available and accessible in your other components and content types as well.",
+  "form.attribute.component.option.reuse-existing": "Use an existing component",
+  "form.attribute.component.option.reuse-existing.description": "Reuse a component already created to keep your data consistent across content types.",
   "form.attribute.item.defineRelation.fieldName": "Field name",
   "form.attribute.item.settings.name": "Settings",
   "form.attribute.item.date.type.date": "date",