@strapi/admin 4.5.1 → 4.5.3

package/admin/src/components/LeftMenu/index.js

@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { NavLink as RouterNavLink } from 'react-router-dom';
+import { NavLink as RouterNavLink, useLocation } from 'react-router-dom';
 import { Divider } from '@strapi/design-system/Divider';
 import {
   MainNav,
@@ -19,7 +19,7 @@ import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import Write from '@strapi/icons/Write';
 import Exit from '@strapi/icons/Exit';
-import { auth, usePersistentState, useAppInfos } from '@strapi/helper-plugin';
+import { auth, usePersistentState, useAppInfos, useTracking } from '@strapi/helper-plugin';
 import useConfigurations from '../../hooks/useConfigurations';
 
 const LinkUserWrapper = styled(Box)`
@@ -59,6 +59,8 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const [condensed, setCondensed] = usePersistentState('navbar-condensed', false);
   const { userDisplayName } = useAppInfos();
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const { pathname } = useLocation();
 
   const initials = userDisplayName
     .split(' ')
@@ -82,6 +84,10 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
     }
   };
 
+  const handleClickOnLink = (destination = null) => {
+    trackUsage('willNavigate', { from: pathname, to: destination });
+  };
+
   const menuTitle = formatMessage({
     id: 'app.components.LeftMenu.navbrand.title',
     defaultMessage: 'Strapi Dashboard',
@@ -110,7 +116,12 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
       <Divider />
 
       <NavSections>
-        <NavLink as={RouterNavLink} to="/content-manager" icon={<Write />}>
+        <NavLink
+          as={RouterNavLink}
+          to="/content-manager"
+          icon={<Write />}
+          onClick={() => handleClickOnLink('/content-manager')}
+        >
           {formatMessage({ id: 'global.content-manager', defaultMessage: 'Content manager' })}
         </NavLink>
 
@@ -125,7 +136,13 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
               const Icon = link.icon;
 
               return (
-                <NavLink as={RouterNavLink} to={link.to} key={link.to} icon={<Icon />}>
+                <NavLink
+                  as={RouterNavLink}
+                  to={link.to}
+                  key={link.to}
+                  icon={<Icon />}
+                  onClick={() => handleClickOnLink(link.to)}
+                >
                   {formatMessage(link.intlLabel)}
                 </NavLink>
               );
@@ -152,6 +169,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                   to={link.to}
                   key={link.to}
                   icon={<LinkIcon />}
+                  onClick={() => handleClickOnLink(link.to)}
                 >
                   {formatMessage(link.intlLabel)}
                 </NavLink>

package/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/index.js

@@ -5,6 +5,7 @@ import { useIntl } from 'react-intl';
 import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
 import { Badge } from '@strapi/design-system/Badge';
+import { Flex } from '@strapi/design-system/Flex';
 import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
 import { Loader } from '@strapi/design-system/Loader';
 import styled from 'styled-components';
@@ -38,8 +39,8 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
   const [isOpen, setIsOpen] = useState(false);
 
   const Label = (
-    <>
-      <Badge>{value.count}</Badge>{' '}
+    <Flex gap={1} wrap="nowrap">
+      <Badge>{value.count}</Badge>
       {formatMessage(
         {
           id: 'content-manager.containers.ListPage.items',
@@ -47,7 +48,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
         },
         { number: value.count }
       )}
-    </>
+    </Flex>
   );
 
   const notify = () => {

package/admin/src/content-manager/components/Inputs/index.js

@@ -5,7 +5,7 @@ import get from 'lodash/get';
 import omit from 'lodash/omit';
 import take from 'lodash/take';
 import isEqual from 'react-fast-compare';
-import { GenericInput, NotAllowedInput, useLibrary, useCustomFields } from '@strapi/helper-plugin';
+import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin';
 import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
@@ -37,11 +37,11 @@ function Inputs({
   queryInfos,
   value,
   size,
+  customFieldInputs,
 }) {
   const { fields } = useLibrary();
   const { formatMessage } = useIntl();
   const { contentType: currentContentTypeLayout } = useContentTypeLayout();
-  const customFieldsRegistry = useCustomFields();
 
   const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);
   const { type, customField: customFieldUid } = fieldSchema;
@@ -194,19 +194,6 @@ function Inputs({
     return minutes % metadatas.step === 0 ? metadatas.step : step;
   }, [inputType, inputValue, metadatas.step, step]);
 
-  // Memoize the component to avoid remounting it and losing state
-  const CustomFieldInput = useMemo(() => {
-    if (customFieldUid) {
-      const customField = customFieldsRegistry.get(customFieldUid);
-      const CustomFieldInput = React.lazy(customField.components.Input);
-
-      return CustomFieldInput;
-    }
-
-    // Not a custom field, component won't be used
-    return null;
-  }, [customFieldUid, customFieldsRegistry]);
-
   if (visible === false) {
     return null;
   }
@@ -268,12 +255,9 @@ function Inputs({
     media: fields.media,
     wysiwyg: Wysiwyg,
     ...fields,
+    ...customFieldInputs,
   };
 
-  if (customFieldUid) {
-    customInputs[customFieldUid] = CustomFieldInput;
-  }
-
   return (
     <GenericInput
       attribute={fieldSchema}
@@ -309,6 +293,7 @@ Inputs.defaultProps = {
   size: undefined,
   value: null,
   queryInfos: {},
+  customFieldInputs: {},
 };
 
 Inputs.propTypes = {
@@ -330,6 +315,7 @@ Inputs.propTypes = {
     defaultParams: PropTypes.object,
     endPoint: PropTypes.string,
   }),
+  customFieldInputs: PropTypes.object,
 };
 
 const Memoized = memo(Inputs, isEqual);

package/admin/src/content-manager/hooks/useLazyComponents/index.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { useCustomFields } from '@strapi/helper-plugin';
+
+/**
+ * @description
+ * A hook to lazy load custom field components
+ * @param {Array.<string>} componentUids - The uids to look up components
+ * @returns object
+ */
+const useLazyComponents = (componentUids) => {
+  const [lazyComponentStore, setLazyComponentStore] = useState({});
+  const [loading, setLoading] = useState(true);
+  const customFieldsRegistry = useCustomFields();
+
+  useEffect(() => {
+    const lazyLoadComponents = async (uids, components) => {
+      const modules = await Promise.all(components);
+
+      uids.forEach((uid, index) => {
+        if (!Object.keys(lazyComponentStore).includes(uid)) {
+          setLazyComponentStore({ ...lazyComponentStore, [uid]: modules[index].default });
+        }
+      });
+    };
+
+    if (componentUids.length) {
+      const componentPromises = componentUids.map((uid) => {
+        const customField = customFieldsRegistry.get(uid);
+
+        return customField.components.Input();
+      });
+
+      lazyLoadComponents(componentUids, componentPromises);
+    }
+
+    if (componentUids.length === Object.keys(lazyComponentStore).length) {
+      setLoading(false);
+    }
+  }, [componentUids, customFieldsRegistry, loading, lazyComponentStore]);
+
+  return { isLazyLoading: loading, lazyComponentStore };
+};
+
+export default useLazyComponents;

package/admin/src/content-manager/pages/CollectionTypeRecursivePath/components/ErrorFallback.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AnErrorOccurred } from '@strapi/helper-plugin';
+import { Box } from '@strapi/design-system/Box';
+
+const ErrorFallback = () => {
+  return (
+    <Box padding={8}>
+      <AnErrorOccurred />
+    </Box>
+  );
+};
+
+export default ErrorFallback;

package/admin/src/content-manager/pages/CollectionTypeRecursivePath/index.js

@@ -3,7 +3,7 @@ import { Switch, Route } from 'react-router-dom';
 import { ErrorBoundary } from 'react-error-boundary';
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
-import { ErrorFallback, LoadingIndicatorPage, CheckPagePermissions } from '@strapi/helper-plugin';
+import { LoadingIndicatorPage, CheckPagePermissions } from '@strapi/helper-plugin';
 import permissions from '../../../permissions';
 import { ContentTypeLayoutContext } from '../../contexts';
 import { useFetchContentTypeLayout } from '../../hooks';
@@ -12,6 +12,7 @@ import EditViewLayoutManager from '../EditViewLayoutManager';
 import EditSettingsView from '../EditSettingsView';
 import ListViewLayout from '../ListViewLayoutManager';
 import ListSettingsView from '../ListSettingsView';
+import ErrorFallback from './components/ErrorFallback';
 
 const cmPermissions = permissions.contentManager;
 

package/admin/src/content-manager/pages/EditView/GridRow/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import Inputs from '../../../components/Inputs';
+import FieldComponent from '../../../components/FieldComponent';
+
+const GridRow = ({ columns, customFieldInputs }) => {
+  return (
+    <Grid gap={4}>
+      {columns.map(({ fieldSchema, labelAction, metadatas, name, size, queryInfos }) => {
+        const isComponent = fieldSchema.type === 'component';
+
+        if (isComponent) {
+          const { component, max, min, repeatable = false, required = false } = fieldSchema;
+
+          return (
+            <GridItem col={size} s={12} xs={12} key={component}>
+              <FieldComponent
+                componentUid={component}
+                labelAction={labelAction}
+                isRepeatable={repeatable}
+                intlLabel={{
+                  id: metadatas.label,
+                  defaultMessage: metadatas.label,
+                }}
+                max={max}
+                min={min}
+                name={name}
+                required={required}
+              />
+            </GridItem>
+          );
+        }
+
+        return (
+          <GridItem col={size} key={name} s={12} xs={12}>
+            <Inputs
+              size={size}
+              fieldSchema={fieldSchema}
+              keys={name}
+              labelAction={labelAction}
+              metadatas={metadatas}
+              queryInfos={queryInfos}
+              customFieldInputs={customFieldInputs}
+            />
+          </GridItem>
+        );
+      })}
+    </Grid>
+  );
+};
+
+GridRow.defaultProps = {
+  customFieldInputs: {},
+};
+
+GridRow.propTypes = {
+  columns: PropTypes.array.isRequired,
+  customFieldInputs: PropTypes.object,
+};
+
+export default GridRow;

package/admin/src/content-manager/pages/EditView/index.js

@@ -1,11 +1,11 @@
-import React, { Suspense, memo, useCallback, useMemo } from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import get from 'lodash/get';
+import { useSelector } from 'react-redux';
 import {
   CheckPermissions,
-  LoadingIndicatorPage,
   useTracking,
   LinkButton,
+  LoadingIndicatorPage,
 } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { ContentLayout } from '@strapi/design-system/Layout';
@@ -18,73 +18,60 @@ import Pencil from '@strapi/icons/Pencil';
 import { InjectionZone } from '../../../shared/components';
 import permissions from '../../../permissions';
 import DynamicZone from '../../components/DynamicZone';
-import FieldComponent from '../../components/FieldComponent';
-import Inputs from '../../components/Inputs';
+
 import CollectionTypeFormWrapper from '../../components/CollectionTypeFormWrapper';
 import EditViewDataManagerProvider from '../../components/EditViewDataManagerProvider';
 import SingleTypeFormWrapper from '../../components/SingleTypeFormWrapper';
 import { getTrad } from '../../utils';
+import useLazyComponents from '../../hooks/useLazyComponents';
 import DraftAndPublishBadge from './DraftAndPublishBadge';
 import Informations from './Informations';
 import Header from './Header';
-import { createAttributesLayout, getFieldsActionMatchingPermissions } from './utils';
+import { getFieldsActionMatchingPermissions } from './utils';
 import DeleteLink from './DeleteLink';
+import GridRow from './GridRow';
+import { selectCurrentLayout, selectAttributesLayout, selectCustomFieldUids } from './selectors';
 
 const cmPermissions = permissions.contentManager;
 const ctbPermissions = [{ action: 'plugin::content-type-builder.read', subject: null }];
 
 /* eslint-disable  react/no-array-index-key */
-const EditView = ({
-  allowedActions,
-  isSingleType,
-  goBack,
-  layout,
-  slug,
-  id,
-  origin,
-  userPermissions,
-}) => {
+const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, userPermissions }) => {
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
+
+  const { layout, formattedContentTypeLayout, customFieldUids } = useSelector((state) => ({
+    layout: selectCurrentLayout(state),
+    formattedContentTypeLayout: selectAttributesLayout(state),
+    customFieldUids: selectCustomFieldUids(state),
+  }));
+
+  const { isLazyLoading, lazyComponentStore } = useLazyComponents(customFieldUids);
+
   const { createActionAllowedFields, readActionAllowedFields, updateActionAllowedFields } =
-    useMemo(() => {
-      return getFieldsActionMatchingPermissions(userPermissions, slug);
-    }, [userPermissions, slug]);
+    getFieldsActionMatchingPermissions(userPermissions, slug);
 
-  const configurationPermissions = useMemo(() => {
-    return isSingleType
-      ? cmPermissions.singleTypesConfigurations
-      : cmPermissions.collectionTypesConfigurations;
-  }, [isSingleType]);
+  const configurationPermissions = isSingleType
+    ? cmPermissions.singleTypesConfigurations
+    : cmPermissions.collectionTypesConfigurations;
 
   // // FIXME when changing the routing
   const configurationsURL = `/content-manager/${
     isSingleType ? 'singleType' : 'collectionType'
   }/${slug}/configurations/edit`;
-  const currentContentTypeLayoutData = get(layout, ['contentType'], {});
 
-  const DataManagementWrapper = useMemo(
-    () => (isSingleType ? SingleTypeFormWrapper : CollectionTypeFormWrapper),
-    [isSingleType]
-  );
+  const DataManagementWrapper = isSingleType ? SingleTypeFormWrapper : CollectionTypeFormWrapper;
 
   // Check if a block is a dynamic zone
-  const isDynamicZone = useCallback((block) => {
+  const isDynamicZone = (block) => {
     return block.every((subBlock) => {
       return subBlock.every((obj) => obj.fieldSchema.type === 'dynamiczone');
     });
-  }, []);
+  };
 
-  const formattedContentTypeLayout = useMemo(() => {
-    if (!currentContentTypeLayoutData.layouts) {
-      return [];
-    }
-
-    return createAttributesLayout(
-      currentContentTypeLayoutData.layouts.edit,
-      currentContentTypeLayoutData.attributes
-    );
-  }, [currentContentTypeLayoutData]);
+  if (isLazyLoading) {
+    return <LoadingIndicatorPage />;
+  }
 
   return (
     <DataManagementWrapper allLayoutData={layout} slug={slug} id={id} origin={origin}>
@@ -132,110 +119,56 @@ const EditView = ({
               <ContentLayout>
                 <Grid gap={4}>
                   <GridItem col={9} s={12}>
-                    <Suspense fallback={<LoadingIndicatorPage />}>
-                      <Stack spacing={6}>
-                        {formattedContentTypeLayout.map((row, index) => {
-                          if (isDynamicZone(row)) {
-                            const {
-                              0: {
-                                0: { name, fieldSchema, metadatas, labelAction },
-                              },
-                            } = row;
-
-                            return (
-                              <Box key={index}>
-                                <Grid gap={4}>
-                                  <GridItem col={12} s={12} xs={12}>
-                                    <DynamicZone
-                                      name={name}
-                                      fieldSchema={fieldSchema}
-                                      labelAction={labelAction}
-                                      metadatas={metadatas}
-                                    />
-                                  </GridItem>
-                                </Grid>
-                              </Box>
-                            );
-                          }
+                    <Stack spacing={6}>
+                      {formattedContentTypeLayout.map((row, index) => {
+                        if (isDynamicZone(row)) {
+                          const {
+                            0: {
+                              0: { name, fieldSchema, metadatas, labelAction },
+                            },
+                          } = row;
 
                           return (
-                            <Box
-                              key={index}
-                              hasRadius
-                              background="neutral0"
-                              shadow="tableShadow"
-                              paddingLeft={6}
-                              paddingRight={6}
-                              paddingTop={6}
-                              paddingBottom={6}
-                              borderColor="neutral150"
-                            >
-                              <Stack spacing={6}>
-                                {row.map((grid, gridIndex) => {
-                                  return (
-                                    <Grid gap={4} key={gridIndex}>
-                                      {grid.map(
-                                        ({
-                                          fieldSchema,
-                                          labelAction,
-                                          metadatas,
-                                          name,
-                                          size,
-                                          queryInfos,
-                                        }) => {
-                                          const isComponent = fieldSchema.type === 'component';
-
-                                          if (isComponent) {
-                                            const {
-                                              component,
-                                              max,
-                                              min,
-                                              repeatable = false,
-                                              required = false,
-                                            } = fieldSchema;
-
-                                            return (
-                                              <GridItem col={size} s={12} xs={12} key={component}>
-                                                <FieldComponent
-                                                  componentUid={component}
-                                                  labelAction={labelAction}
-                                                  isRepeatable={repeatable}
-                                                  intlLabel={{
-                                                    id: metadatas.label,
-                                                    defaultMessage: metadatas.label,
-                                                  }}
-                                                  max={max}
-                                                  min={min}
-                                                  name={name}
-                                                  required={required}
-                                                />
-                                              </GridItem>
-                                            );
-                                          }
-
-                                          return (
-                                            <GridItem col={size} key={name} s={12} xs={12}>
-                                              <Inputs
-                                                size={size}
-                                                fieldSchema={fieldSchema}
-                                                keys={name}
-                                                labelAction={labelAction}
-                                                metadatas={metadatas}
-                                                queryInfos={queryInfos}
-                                              />
-                                            </GridItem>
-                                          );
-                                        }
-                                      )}
-                                    </Grid>
-                                  );
-                                })}
-                              </Stack>
+                            <Box key={index}>
+                              <Grid gap={4}>
+                                <GridItem col={12} s={12} xs={12}>
+                                  <DynamicZone
+                                    name={name}
+                                    fieldSchema={fieldSchema}
+                                    labelAction={labelAction}
+                                    metadatas={metadatas}
+                                  />
+                                </GridItem>
+                              </Grid>
                             </Box>
                           );
-                        })}
-                      </Stack>
-                    </Suspense>
+                        }
+
+                        return (
+                          <Box
+                            key={index}
+                            hasRadius
+                            background="neutral0"
+                            shadow="tableShadow"
+                            paddingLeft={6}
+                            paddingRight={6}
+                            paddingTop={6}
+                            paddingBottom={6}
+                            borderColor="neutral150"
+                          >
+                            <Stack spacing={6}>
+                              {row.map((grid, gridRowIndex) => (
+                                <GridRow
+                                  columns={grid}
+                                  customFieldInputs={lazyComponentStore}
+                                  key={gridRowIndex}
+                                />
+                              ))}
+                            </Stack>
+                          </Box>
+                        );
+                      })}
+                    </Stack>
                   </GridItem>
                   <GridItem col={3} s={12}>
                     <Stack spacing={2}>
@@ -328,16 +261,6 @@ EditView.propTypes = {
     canCreate: PropTypes.bool.isRequired,
     canDelete: PropTypes.bool.isRequired,
   }).isRequired,
-  layout: PropTypes.shape({
-    components: PropTypes.object.isRequired,
-    contentType: PropTypes.shape({
-      uid: PropTypes.string.isRequired,
-      settings: PropTypes.object.isRequired,
-      metadatas: PropTypes.object.isRequired,
-      options: PropTypes.object.isRequired,
-      attributes: PropTypes.object.isRequired,
-    }).isRequired,
-  }).isRequired,
   id: PropTypes.string,
   isSingleType: PropTypes.bool,
   goBack: PropTypes.func.isRequired,
@@ -346,7 +269,4 @@ EditView.propTypes = {
   userPermissions: PropTypes.array,
 };
 
-export { EditView };
 export default memo(EditView);
-
-// export default () => 'TODO Edit view';

package/admin/src/content-manager/pages/EditView/selectors.js

@@ -0,0 +1,14 @@
+import { createSelector } from 'reselect';
+import { createAttributesLayout, getCustomFieldUidsFromLayout } from './utils';
+
+const selectCurrentLayout = (state) => state['content-manager_editViewLayoutManager'].currentLayout;
+
+const selectAttributesLayout = createSelector(selectCurrentLayout, (layout) =>
+  createAttributesLayout(layout?.contentType ?? {})
+);
+
+const selectCustomFieldUids = createSelector(selectCurrentLayout, (layout) =>
+  getCustomFieldUidsFromLayout(layout)
+);
+
+export { selectCurrentLayout, selectAttributesLayout, selectCustomFieldUids };

package/admin/src/content-manager/pages/EditView/utils/createAttributesLayout.js

@@ -1,14 +1,19 @@
 import { get, isEmpty } from 'lodash';
-// TODO: refacto this file to avoid eslint issues
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable no-unused-vars */
 
-const createAttributesLayout = (currentLayout, attributes) => {
+const createAttributesLayout = (currentContentTypeLayoutData) => {
+  if (!currentContentTypeLayoutData.layouts) {
+    return [];
+  }
+
+  const currentLayout = currentContentTypeLayoutData.layouts.edit;
+  const attributes = currentContentTypeLayoutData.attributes;
+
   const getType = (name) => get(attributes, [name, 'type'], '');
+
   let currentRowIndex = 0;
   const newLayout = [];
 
-  for (let row of currentLayout) {
+  currentLayout.forEach((row) => {
     const hasDynamicZone = row.some(({ name }) => getType(name) === 'dynamiczone');
 
     if (!newLayout[currentRowIndex]) {
@@ -27,7 +32,7 @@ const createAttributesLayout = (currentLayout, attributes) => {
     } else {
       newLayout[currentRowIndex].push(row);
     }
-  }
+  });
 
   return newLayout.filter((arr) => arr.length > 0);
 };

package/admin/src/content-manager/pages/EditView/utils/getCustomFieldUidsFromLayout.js

@@ -0,0 +1,18 @@
+const getCustomFieldUidsFromLayout = (layout) => {
+  if (!layout) return [];
+  // Get all the fields on the content-type and its components
+  const allFields = [
+    ...layout.contentType.layouts.edit,
+    ...Object.values(layout.components).flatMap((component) => component.layouts.edit),
+  ].flat();
+  // Filter that down to custom fields and map the uids
+  const customFieldUids = allFields
+    .filter((field) => field.fieldSchema.customField)
+    .map((customField) => customField.fieldSchema.customField);
+  // Make sure the list is unique
+  const uniqueCustomFieldUids = [...new Set(customFieldUids)];
+
+  return uniqueCustomFieldUids;
+};
+
+export default getCustomFieldUidsFromLayout;