@strapi/admin 4.4.0-rc.0 → 4.5.0-alpha.0

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

@@ -1,20 +1,13 @@
-import React, { Suspense, memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import {
-  CheckPermissions,
-  LoadingIndicatorPage,
-  useTracking,
-  LinkButton,
-} from '@strapi/helper-plugin';
+import { CheckPermissions, useTracking, LinkButton } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { ContentLayout } from '@strapi/design-system/Layout';
 import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Main } from '@strapi/design-system/Main';
 import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
 import Layer from '@strapi/icons/Layer';
 import Pencil from '@strapi/icons/Pencil';
 import { InjectionZone } from '../../../shared/components';
@@ -22,7 +15,6 @@ import permissions from '../../../permissions';
 import DynamicZone from '../../components/DynamicZone';
 import FieldComponent from '../../components/FieldComponent';
 import Inputs from '../../components/Inputs';
-import SelectWrapper from '../../components/SelectWrapper';
 import CollectionTypeFormWrapper from '../../components/CollectionTypeFormWrapper';
 import EditViewDataManagerProvider from '../../components/EditViewDataManagerProvider';
 import SingleTypeFormWrapper from '../../components/SingleTypeFormWrapper';
@@ -89,9 +81,6 @@ const EditView = ({
     );
   }, [currentContentTypeLayoutData]);
 
-  const relationsLayout = currentContentTypeLayoutData.layouts.editRelations;
-  const displayedRelationsLength = relationsLayout.length;
-
   return (
     <DataManagementWrapper allLayoutData={layout} slug={slug} id={id} origin={origin}>
       {({
@@ -136,101 +125,108 @@ 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 }) => {
-                                          const isComponent = fieldSchema.type === 'component';
+                            <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>
+                          );
+                        }
 
-                                          if (isComponent) {
-                                            const {
-                                              component,
-                                              max,
-                                              min,
-                                              repeatable = false,
-                                              required = false,
-                                            } = fieldSchema;
+                        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';
 
-                                            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>
-                                            );
-                                          }
+                                        if (isComponent) {
+                                          const {
+                                            component,
+                                            max,
+                                            min,
+                                            repeatable = false,
+                                            required = false,
+                                          } = fieldSchema;
 
                                           return (
-                                            <GridItem col={size} key={name} s={12} xs={12}>
-                                              <Inputs
-                                                fieldSchema={fieldSchema}
-                                                keys={name}
+                                            <GridItem col={size} s={12} xs={12} key={component}>
+                                              <FieldComponent
+                                                componentUid={component}
                                                 labelAction={labelAction}
-                                                metadatas={metadatas}
+                                                isRepeatable={repeatable}
+                                                intlLabel={{
+                                                  id: metadatas.label,
+                                                  defaultMessage: metadatas.label,
+                                                }}
+                                                max={max}
+                                                min={min}
+                                                name={name}
+                                                required={required}
                                               />
                                             </GridItem>
                                           );
                                         }
-                                      )}
-                                    </Grid>
-                                  );
-                                })}
-                              </Stack>
-                            </Box>
-                          );
-                        })}
-                      </Stack>
-                    </Suspense>
+
+                                        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>
+                        );
+                      })}
+                    </Stack>
                   </GridItem>
                   <GridItem col={3} s={12}>
                     <Stack spacing={2}>
@@ -250,64 +246,6 @@ const EditView = ({
                         <Informations />
                         <InjectionZone area="contentManager.editView.informations" />
                       </Box>
-                      {displayedRelationsLength > 0 && (
-                        <Box
-                          as="aside"
-                          aria-labelledby="relations-title"
-                          background="neutral0"
-                          borderColor="neutral150"
-                          hasRadius
-                          paddingBottom={4}
-                          paddingLeft={4}
-                          paddingRight={4}
-                          paddingTop={6}
-                          shadow="tableShadow"
-                        >
-                          <Typography variant="sigma" textColor="neutral600" id="relations-title">
-                            {formatMessage(
-                              {
-                                id: getTrad('containers.Edit.relations'),
-                                defaultMessage:
-                                  '{number, plural, =0 {relations} one {relation} other {relations}}',
-                              },
-                              { number: displayedRelationsLength }
-                            )}
-                          </Typography>
-                          <Box paddingTop={2} paddingBottom={6}>
-                            <Divider />
-                          </Box>
-                          <Stack spacing={4}>
-                            {relationsLayout.map(
-                              ({ name, fieldSchema, labelAction, metadatas, queryInfos }) => {
-                                return (
-                                  <SelectWrapper
-                                    {...fieldSchema}
-                                    {...metadatas}
-                                    key={name}
-                                    description={metadatas.description}
-                                    intlLabel={{
-                                      id: metadatas.label,
-                                      defaultMessage: metadatas.label,
-                                    }}
-                                    labelAction={labelAction}
-                                    name={name}
-                                    relationsType={fieldSchema.relationType}
-                                    queryInfos={queryInfos}
-                                    placeholder={
-                                      metadatas.placeholder
-                                        ? {
-                                            id: metadatas.placeholder,
-                                            defaultMessage: metadatas.placeholder,
-                                          }
-                                        : null
-                                    }
-                                  />
-                                );
-                              }
-                            )}
-                          </Stack>
-                        </Box>
-                      )}
                       <Box as="aside" aria-labelledby="links">
                         <Stack spacing={2}>
                           <InjectionZone area="contentManager.editView.right-links" slug={slug} />

package/admin/src/content-manager/pages/ListView/FieldPicker/index.js

@@ -85,7 +85,6 @@ FieldPicker.propTypes = {
       metadatas: PropTypes.object.isRequired,
       layouts: PropTypes.shape({
         list: PropTypes.array.isRequired,
-        editRelations: PropTypes.array,
       }).isRequired,
       options: PropTypes.object.isRequired,
       settings: PropTypes.object.isRequired,

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

@@ -361,7 +361,6 @@ ListView.propTypes = {
       info: PropTypes.shape({ displayName: PropTypes.string.isRequired }).isRequired,
       layouts: PropTypes.shape({
         list: PropTypes.array.isRequired,
-        editRelations: PropTypes.array,
       }).isRequired,
       options: PropTypes.object.isRequired,
       settings: PropTypes.object.isRequired,

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

@@ -45,7 +45,6 @@ ListViewLayout.propTypes = {
       metadatas: PropTypes.object.isRequired,
       layouts: PropTypes.shape({
         list: PropTypes.array.isRequired,
-        editRelations: PropTypes.array,
       }).isRequired,
       options: PropTypes.object.isRequired,
       settings: PropTypes.object.isRequired,

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

@@ -8,8 +8,6 @@ const formatLayoutToApi = ({ layouts, metadatas, ...rest }) => {
 
     return obj;
   });
-  const editRelations = layouts.editRelations.map(({ name }) => name);
-
   const formattedMetadatas = Object.keys(metadatas).reduce((acc, current) => {
     const currentMetadatas = get(metadatas, [current], {});
     let editMetadatas = currentMetadatas.edit;
@@ -36,7 +34,7 @@ const formatLayoutToApi = ({ layouts, metadatas, ...rest }) => {
 
   return {
     ...rest,
-    layouts: { edit, editRelations, list },
+    layouts: { edit, list },
     metadatas: formattedMetadatas,
   };
 };

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

@@ -3,4 +3,3 @@ export { default as Components } from './Components';
 export { default as Middlewares } from './Middlewares';
 export { default as Plugin } from './Plugin';
 export { default as Reducers } from './Reducers';
-export { default as customFields } from './CustomFields';

package/admin/src/hooks/index.js

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