@strapi/admin 4.6.0-alpha.0 → 4.6.0-beta.0

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;

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/content-manager/utils/ItemTypes.js

@@ -1,7 +1,7 @@
 export default {
   COMPONENT: 'component',
   EDIT_FIELD: 'editField',
-  EDIT_RELATION: 'editRelation',
   FIELD: 'field',
+  DYNAMIC_ZONE: 'dynamicZone',
   RELATION: 'relation',
 };

package/admin/src/content-manager/utils/composeRefs.js

@@ -0,0 +1,28 @@
+/**
+ * @typedef PossibleRef<T>
+ * @type {React.Ref<T> | undefined;}
+ *
+ * @typedef setRef
+ * @type {<T>(ref: PossibleRef<T>, value: T) => React.RefCallback<T>}
+ */
+
+/**
+ * @type {setRef}
+ */
+const setRef = (ref, value) => {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref !== null && ref !== undefined) {
+    ref.current = value;
+  }
+};
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ *
+ * @type {<T>(...refs: PossibleRef<T>[]) => (node: T) => void}
+ */
+export const composeRefs = (...refs) => {
+  return (node) => refs.forEach((ref) => setRef(ref, node));
+};

package/admin/src/content-manager/utils/getMaxTempKey.js

@@ -5,7 +5,7 @@ const getMaxTempKey = (arr) => {
 
   return Math.max.apply(
     Math,
-    arr.map((o) => o.__temp_key__)
+    arr.map((o) => o.__temp_key__ ?? o.id)
   );
 };
 

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

@@ -1,13 +1,20 @@
 export { default as arrayMoveItem } from './arrayMoveItem';
+
 export { default as checkIfAttributeIsDisplayable } from './checkIfAttributeIsDisplayable';
+export { composeRefs } from './composeRefs';
 export { default as createDefaultForm } from './createDefaultForm';
+
 export { default as formatLayoutToApi } from './formatLayoutToApi';
+
 export { default as generatePermissionsObject } from './generatePermissionsObject';
 export { default as getFieldName } from './getFieldName';
 export { default as getMaxTempKey } from './getMaxTempKey';
 export { default as getRequestUrl } from './getRequestUrl';
 export { default as getTrad } from './getTrad';
+
 export { default as ItemTypes } from './ItemTypes';
+
 export { default as mergeMetasWithSchema } from './mergeMetasWithSchema';
+
 export { default as removeKeyInObject } from './removeKeyInObject';
 export { default as removePasswordFieldsFromData } from './removePasswordFieldsFromData';

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/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;
   }
 `;