@strapi/admin 4.5.2 → 4.5.4

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;

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

@@ -1,3 +1,4 @@
 // eslint-disable-next-line import/prefer-default-export
 export { default as createAttributesLayout } from './createAttributesLayout';
 export { default as getFieldsActionMatchingPermissions } from './getFieldsActionMatchingPermissions';
+export { default as getCustomFieldUidsFromLayout } from './getCustomFieldUidsFromLayout';

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

@@ -30,7 +30,7 @@ const EditViewLayoutManager = ({ layout, ...rest }) => {
     return <LoadingIndicatorPage />;
   }
 
-  return <Permissions {...rest} layout={currentLayout} userPermissions={permissions} />;
+  return <Permissions {...rest} userPermissions={permissions} />;
 };
 
 EditViewLayoutManager.propTypes = {

package/admin/src/content-manager/sharedReducers/crudReducer/actions.js

@@ -6,6 +6,7 @@ import {
   SET_DATA_STRUCTURES,
   SET_STATUS,
   SUBMIT_SUCCEEDED,
+  CLEAR_SET_MODIFIED_DATA_ONLY,
 } from './constants';
 
 export const getData = () => {
@@ -42,3 +43,7 @@ export const submitSucceeded = (data) => ({
   type: SUBMIT_SUCCEEDED,
   data,
 });
+
+export const clearSetModifiedDataOnly = () => ({
+  type: CLEAR_SET_MODIFIED_DATA_ONLY,
+});

package/admin/src/content-manager/sharedReducers/crudReducer/constants.js

@@ -5,3 +5,5 @@ export const RESET_PROPS = 'ContentManager/CrudReducer/RESET_PROPS';
 export const SET_DATA_STRUCTURES = 'ContentManager/CrudReducer/SET_DATA_STRUCTURES';
 export const SET_STATUS = 'ContentManager/CrudReducer/SET_STATUS';
 export const SUBMIT_SUCCEEDED = 'ContentManager/CrudReducer/SUBMIT_SUCCEEDED';
+export const CLEAR_SET_MODIFIED_DATA_ONLY =
+  'ContentManager/CrudReducer/CLEAR_SET_MODIFIED_DATA_ONLY';

package/admin/src/content-manager/sharedReducers/crudReducer/reducer.js

@@ -8,6 +8,7 @@ import produce from 'immer';
 // to do any of this.
 
 import {
+  CLEAR_SET_MODIFIED_DATA_ONLY,
   GET_DATA,
   GET_DATA_SUCCEEDED,
   INIT_FORM,
@@ -23,6 +24,7 @@ const crudInitialState = {
   isLoading: true,
   data: null,
   status: 'resolved',
+  setModifiedDataOnly: false,
 };
 
 const crudReducer = (state = crudInitialState, action) =>
@@ -36,6 +38,7 @@ const crudReducer = (state = crudInitialState, action) =>
       case GET_DATA_SUCCEEDED: {
         draftState.isLoading = false;
         draftState.data = action.data;
+        draftState.setModifiedDataOnly = action.setModifiedDataOnly ?? false;
         break;
       }
       case INIT_FORM: {
@@ -66,6 +69,10 @@ const crudReducer = (state = crudInitialState, action) =>
         draftState.data = action.data;
         break;
       }
+      case CLEAR_SET_MODIFIED_DATA_ONLY: {
+        draftState.setModifiedDataOnly = false;
+        break;
+      }
       default:
         return draftState;
     }

package/admin/src/core/apis/CustomFields.js

@@ -19,6 +19,40 @@ const ALLOWED_TYPES = [
   'uid',
 ];
 
+const ALLOWED_ROOT_LEVEL_OPTIONS = [
+  'min',
+  'minLength',
+  'max',
+  'maxLength',
+  'required',
+  'regex',
+  'enum',
+  'unique',
+  'private',
+  'default',
+];
+
+const optionValidationsReducer = (acc, option) => {
+  if (option.items) {
+    return option.items.reduce(optionValidationsReducer, acc);
+  }
+
+  if (!option.name) {
+    acc.push({
+      isValidOptionPath: false,
+      errorMessage: "The 'name' property is required on an options object",
+    });
+  } else {
+    acc.push({
+      isValidOptionPath:
+        ALLOWED_ROOT_LEVEL_OPTIONS.includes(option.name) || option.name.startsWith('options'),
+      errorMessage: `'${option.name}' must be prefixed with 'options.'`,
+    });
+  }
+
+  return acc;
+};
+
 class CustomFields {
   constructor() {
     this.customFields = {};
@@ -32,7 +66,8 @@ class CustomFields {
       });
     } else {
       // Handle individual custom field
-      const { name, pluginId, type, intlLabel, intlDescription, components } = customFields;
+      const { name, pluginId, type, intlLabel, intlDescription, components, options } =
+        customFields;
 
       // Ensure required attributes are provided
       invariant(name, 'A name must be provided');
@@ -55,6 +90,16 @@ class CustomFields {
         `Custom field name: '${name}' is not a valid object key`
       );
 
+      // Ensure options have valid name paths
+      const allFormOptions = [...(options?.base || []), ...(options?.advanced || [])];
+
+      if (allFormOptions.length) {
+        const optionPathValidations = allFormOptions.reduce(optionValidationsReducer, []);
+        optionPathValidations.forEach(({ isValidOptionPath, errorMessage }) => {
+          invariant(isValidOptionPath, errorMessage);
+        });
+      }
+
       // When no plugin is specified, default to the global namespace
       const uid = pluginId ? `plugin::${pluginId}.${name}` : `global::${name}`;
 

package/admin/src/core/utils/axiosInstance.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { auth } from '@strapi/helper-plugin';
+import { auth, wrapAxiosInstance } from '@strapi/helper-plugin';
 
 const instance = axios.create({
   baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
@@ -33,4 +33,6 @@ instance.interceptors.response.use(
   }
 );
 
-export default instance;
+const wrapper = wrapAxiosInstance(instance);
+
+export default wrapper;

package/admin/src/hooks/index.js

@@ -10,3 +10,4 @@ export { default as usePermissionsDataManager } from './usePermissionsDataManage
 export { default as useReleaseNotification } from './useReleaseNotification';
 export { default as useThemeToggle } from './useThemeToggle';
 export { default as useRegenerate } from './useRegenerate';
+export { default as useFetchClient } from './useFetchClient';

package/admin/src/hooks/useFetchClient/index.js

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+import { getFetchClient } from '../../utils/getFetchClient';
+
+const useFetchClient = () => {
+  const controller = useRef(null);
+
+  if (controller.current === null) {
+    controller.current = new AbortController();
+  }
+  useEffect(() => {
+    return () => {
+      controller.current.abort();
+    };
+  }, []);
+
+  const defaultOptions = {
+    signal: controller.current.signal,
+  };
+
+  return getFetchClient(defaultOptions);
+};
+
+export default useFetchClient;

package/admin/src/pages/App/index.js

@@ -25,7 +25,7 @@ import NotFoundPage from '../NotFoundPage';
 import UseCasePage from '../UseCasePage';
 import { getUID } from './utils';
 import routes from './utils/routes';
-import { useConfigurations } from '../../hooks';
+import { useConfigurations, useFetchClient } from '../../hooks';
 
 const AuthenticatedApp = lazy(() =>
   import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')
@@ -35,8 +35,12 @@ function App() {
   const toggleNotification = useNotification();
   const { updateProjectSettings } = useConfigurations();
   const { formatMessage } = useIntl();
-  const [{ isLoading, hasAdmin, uuid }, setState] = useState({ isLoading: true, hasAdmin: false });
+  const [{ isLoading, hasAdmin, uuid, deviceId }, setState] = useState({
+    isLoading: true,
+    hasAdmin: false,
+  });
   const appInfo = useAppInfos();
+  const { get } = useFetchClient();
 
   const authRoutes = useMemo(() => {
     return makeUniqueRoutes(
@@ -80,27 +84,29 @@ function App() {
         } = await axios.get(`${strapi.backendURL}/admin/init`);
 
         updateProjectSettings({ menuLogo: prefixFileUrlWithBackendUrl(menuLogo) });
+        const deviceId = await getUID();
 
         if (uuid) {
           const {
             data: { data: properties },
-          } = await axios.get(`${strapi.backendURL}/admin/telemetry-properties`);
+          } = await get(`/admin/telemetry-properties`, {
+            // NOTE: needed because the interceptors of the fetchClient redirect to /login when receive a 401 and it would end up in an infinite loop when the user doesn't have a session.
+            validateStatus: (status) => status < 500,
+          });
 
           setTelemetryProperties(properties);
 
           try {
-            const deviceId = await getUID();
-
-            await fetch('https://analytics.strapi.io/track', {
+            await fetch('https://analytics.strapi.io/api/v2/track', {
               method: 'POST',
               body: JSON.stringify({
+                // This event is anonymous
                 event: 'didInitializeAdministration',
-                uuid,
+                userId: '',
                 deviceId,
-                properties: {
-                  ...properties,
-                  environment: appInfo.currentEnvironment,
-                },
+                eventPropeties: {},
+                userProperties: { environment: appInfo.currentEnvironment },
+                groupProperties: { ...properties, projectId: uuid },
               }),
               headers: {
                 'Content-Type': 'application/json',
@@ -111,7 +117,7 @@ function App() {
           }
         }
 
-        setState({ isLoading: false, hasAdmin, uuid });
+        setState({ isLoading: false, hasAdmin, uuid, deviceId });
       } catch (err) {
         toggleNotification({
           type: 'warning',
@@ -130,8 +136,9 @@ function App() {
     () => ({
       uuid,
       telemetryProperties,
+      deviceId,
     }),
-    [uuid, telemetryProperties]
+    [uuid, telemetryProperties, deviceId]
   );
 
   if (isLoading) {

package/admin/src/pages/HomePage/SocialLinks.js

@@ -33,13 +33,13 @@ const StyledReddit = styled(Reddit)`
 `;
 const StyledStrapi = styled(Strapi)`
   > path:first-child {
-    fill: #8e75ff;
+    fill: #4945ff;
   }
   > path:nth-child(2) {
-    fill: #8e75ff;
+    fill: #fff;
   }
-  > path:nth-child(3) {
-    fill: #8e75ff;
+  > path:nth-child(4) {
+    fill: #9593ff;
   }
 `;