@strapi/admin 4.9.0-alpha.0 → 4.9.0-beta.1

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

@@ -7,8 +7,7 @@ import {
   NotFound,
   useGuidedTour,
 } from '@strapi/helper-plugin';
-import { Layout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
+import { Layout, HeaderLayout, Main } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import sortBy from 'lodash/sortBy';
 import permissions from '../../../permissions';

package/admin/src/content-manager/pages/App/useModels.js

@@ -6,7 +6,7 @@ import {
 } from '@strapi/helper-plugin';
 import { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { useNotifyAT } from '@strapi/design-system';
 import axios from 'axios';
 import { useIntl } from 'react-intl';
 import { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } from '../../../exposedHooks';

package/admin/src/content-manager/pages/App/utils/generateModelsLinks.js

@@ -1,4 +1,5 @@
-import { chain, get } from 'lodash';
+import groupBy from 'lodash/groupBy';
+import sortBy from 'lodash/sortBy';
 import { stringify } from 'qs';
 
 const generateLinks = (links, type, configurations = []) => {
@@ -44,19 +45,19 @@ const generateLinks = (links, type, configurations = []) => {
 };
 
 const generateModelsLinks = (models, modelsConfigurations) => {
-  const [collectionTypes, singleTypes] = chain(models)
-    .groupBy('kind')
-    .map((value, key) => ({ name: key, links: value }))
-    .sortBy('name')
-    .value();
+  const groupedModels = Object.entries(groupBy(models, 'kind')).map(([key, value]) => ({
+    name: key,
+    links: value,
+  }));
+  const [collectionTypes, singleTypes] = sortBy(groupedModels, 'name');
 
   return {
     collectionTypesSectionLinks: generateLinks(
-      get(collectionTypes, 'links', []),
+      collectionTypes?.links || [],
       'collectionTypes',
       modelsConfigurations
     ),
-    singleTypesSectionLinks: generateLinks(get(singleTypes, 'links', []), 'singleTypes'),
+    singleTypesSectionLinks: generateLinks(singleTypes?.links ?? [], 'singleTypes'),
   };
 };
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnErrorOccurred } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 
 const ErrorFallback = () => {
   return (

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

@@ -1,7 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { ErrorBoundary } from 'react-error-boundary';
-import { get } from 'lodash';
 import PropTypes from 'prop-types';
 import { LoadingIndicatorPage, CheckPagePermissions } from '@strapi/helper-plugin';
 import permissions from '../../../permissions';
@@ -43,7 +42,7 @@ const CollectionTypeRecursivePath = ({
     return { rawContentTypeLayout, rawComponentsLayouts };
   }, [layout]);
 
-  const uid = get(layout, ['contentType', 'uid'], null);
+  const uid = layout?.contentType?.uid ?? null;
 
   // This statement is needed in order to prevent the CollectionTypeFormWrapper effects clean up phase to be run twice.
   // What can happen is that when navigating from one entry to another the cleanup phase of the fetch data effect is run twice : once when

package/admin/src/content-manager/pages/EditSettingsView/components/ComponentFieldList.js

@@ -1,13 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import Cog from '@strapi/icons/Cog';
+import { Box, Flex, Typography, Grid, GridItem } from '@strapi/design-system';
+import { Cog } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
 import useLayoutDnd from '../../../hooks/useLayoutDnd';
 import getTrad from '../../../utils/getTrad';
 

package/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFieldButton.js

@@ -3,10 +3,8 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useDrop, useDrag } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { GridItem } from '@strapi/design-system/Grid';
-import Drag from '@strapi/icons/Drag';
+import { Flex, Box, GridItem } from '@strapi/design-system';
+import { Drag } from '@strapi/icons';
 import { ItemTypes } from '../../../utils';
 import FieldButtonContent from './FieldButtonContent';
 import { useLayoutDnd } from '../../../hooks';

package/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js

@@ -1,13 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import Plus from '@strapi/icons/Plus';
+import { Button, Box, Typography, Flex, SimpleMenu, MenuItem } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
 import { getTrad } from '../../../utils';
 import RowsLayout from './RowsLayout';
 import LinkToCTB from './LinkToCTB';
@@ -16,7 +11,7 @@ const DisplayedFields = ({ editLayout, fields, onRemoveField, onAddField }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Stack spacing={4}>
+    <Flex direction="column" alignItems="stretch" gap={4}>
       <Flex justifyContent="space-between">
         <div>
           <Box>
@@ -39,7 +34,7 @@ const DisplayedFields = ({ editLayout, fields, onRemoveField, onAddField }) => {
         <LinkToCTB />
       </Flex>
       <Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           {editLayout.map((row, index) => (
             <RowsLayout key={row.rowId} row={row} rowIndex={index} onRemoveField={onRemoveField} />
           ))}
@@ -63,9 +58,9 @@ const DisplayedFields = ({ editLayout, fields, onRemoveField, onAddField }) => {
               </MenuItem>
             ))}
           </SimpleMenu>
-        </Stack>
+        </Flex>
       </Box>
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/content-manager/pages/EditSettingsView/components/DynamicZoneList.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { Box, Flex, Typography, Stack } from '@strapi/design-system';
+import { Box, Flex, Typography } from '@strapi/design-system';
 
 import { ComponentIcon } from '../../../components/ComponentIcon';
 import useLayoutDnd from '../../../hooks/useLayoutDnd';
@@ -33,7 +33,7 @@ const DynamicZoneList = ({ components }) => {
   const { componentLayouts } = useLayoutDnd();
 
   return (
-    <Stack spacing={2} horizontal overflow="scroll hidden" padding={3}>
+    <Flex gap={2} overflow="scroll hidden" padding={3}>
       {components.map((componentUid) => (
         <CustomLink
           hasRadius
@@ -58,7 +58,7 @@ const DynamicZoneList = ({ components }) => {
           </Box>
         </CustomLink>
       ))}
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/content-manager/pages/EditSettingsView/components/FieldButtonContent.js

@@ -2,12 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Typography } from '@strapi/design-system/Typography';
-import Pencil from '@strapi/icons/Pencil';
-import Trash from '@strapi/icons/Trash';
+import { Box, Flex, IconButton, Typography } from '@strapi/design-system';
+import { Pencil, Trash } from '@strapi/icons';
 import { getTrad } from '../../../utils';
 import ComponentFieldList from './ComponentFieldList';
 import DynamicZoneList from './DynamicZoneList';

package/admin/src/content-manager/pages/EditSettingsView/components/FormModal.js

@@ -7,11 +7,11 @@ import {
   ModalHeader,
   ModalFooter,
   ModalBody,
-} from '@strapi/design-system/ModalLayout';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import { Flex } from '@strapi/design-system/Flex';
-import { Grid } from '@strapi/design-system/Grid';
+  Typography,
+  Button,
+  Flex,
+  Grid,
+} from '@strapi/design-system';
 import styled from 'styled-components';
 import { getTrad } from '../../../utils';
 import { useLayoutDnd } from '../../../hooks';

package/admin/src/content-manager/pages/EditSettingsView/components/GenericInput.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { ToggleInput } from '@strapi/design-system/ToggleInput';
-import { Select, Option } from '@strapi/design-system/Select';
+import { TextInput, ToggleInput, Select, Option } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 const GenericInput = ({ type, options, onChange, value, name, ...inputProps }) => {

package/admin/src/content-manager/pages/EditSettingsView/components/LinkToCTB.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { useTracking, CheckPermissions, LinkButton } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
-import Pencil from '@strapi/icons/Pencil';
+import { Pencil } from '@strapi/icons';
 import getTrad from '../../../utils/getTrad';
 import useLayoutDnd from '../../../hooks/useLayoutDnd';
 

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -1,8 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { GridItem } from '@strapi/design-system/Grid';
-import { Select, Option } from '@strapi/design-system/Select';
+import { GridItem, Select, Option } from '@strapi/design-system';
 import { useSelector, shallowEqual } from 'react-redux';
 import { useIntl } from 'react-intl';
 import { useLayoutDnd } from '../../../hooks';

package/admin/src/content-manager/pages/EditSettingsView/components/RowsLayout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from '@strapi/design-system/Grid';
+import { Grid } from '@strapi/design-system';
 import RowItemsLayout from './RowItemsLayout';
 
 const RowsLayout = ({ row, onRemoveField, rowIndex }) => {

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

@@ -11,17 +11,21 @@ import get from 'lodash/get';
 import set from 'lodash/set';
 import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
 import { useHistory } from 'react-router-dom';
-import { Main } from '@strapi/design-system/Main';
-import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Stack } from '@strapi/design-system/Stack';
-import { Divider } from '@strapi/design-system/Divider';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Check from '@strapi/icons/Check';
+import {
+  Main,
+  HeaderLayout,
+  ContentLayout,
+  Button,
+  Box,
+  Typography,
+  Grid,
+  GridItem,
+  Select,
+  Option,
+  Flex,
+  Divider,
+} from '@strapi/design-system';
+import { ArrowLeft, Check } from '@strapi/icons';
 import { getTrad } from '../../utils';
 import reducer, { initialState } from './reducer';
 import init from './init';
@@ -260,7 +264,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
               paddingLeft={7}
               paddingRight={7}
             >
-              <Stack spacing={4}>
+              <Flex direction="column" alignItems="stretch" gap={4}>
                 <Typography variant="delta" as="h2">
                   {formatMessage({
                     id: getTrad('containers.SettingPage.settings'),
@@ -324,7 +328,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
                     });
                   }}
                 />
-              </Stack>
+              </Flex>
             </Box>
           </ContentLayout>
           <ConfirmDialog

package/admin/src/content-manager/pages/EditSettingsView/init.js

@@ -1,4 +1,6 @@
-import { cloneDeep, set } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
+import set from 'lodash/set';
+
 import { createLayout, formatLayout } from './utils/layout';
 
 const init = (initialState, mainLayout, components) => {

package/admin/src/content-manager/pages/EditSettingsView/utils/createPossibleMainFieldsForModelsAndComponents.js

@@ -1,8 +1,6 @@
-import { get } from 'lodash';
-
 const createPossibleMainFieldsForModelsAndComponents = (array) => {
   return array.reduce((acc, current) => {
-    const attributes = get(current, ['attributes'], {});
+    const attributes = current?.attributes ?? {};
     const possibleMainFields = Object.keys(attributes).filter((attr) => {
       return ![
         'boolean',
@@ -14,7 +12,7 @@ const createPossibleMainFieldsForModelsAndComponents = (array) => {
         'relation',
         'text',
         'richtext',
-      ].includes(get(attributes, [attr, 'type'], ''));
+      ].includes(attributes?.[attr]?.type ?? '');
     });
 
     acc[current.uid] = possibleMainFields;

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

@@ -1,8 +1,8 @@
 import React, { memo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import isEqual from 'react-fast-compare';
-import { Button } from '@strapi/design-system/Button';
-import Trash from '@strapi/icons/Trash';
+import { Button } from '@strapi/design-system';
+import { Trash } from '@strapi/icons';
 import { ConfirmDialog, useNotification, useAPIErrorHandler } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { getTrad } from '../../../utils';

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

@@ -1,4 +1,4 @@
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 function useSelect() {

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

@@ -2,15 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import Bullet from '@strapi/icons/Dot';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { Dot } from '@strapi/icons';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
 
-const CustomBullet = styled(Bullet)`
+const CustomBullet = styled(Dot)`
   width: ${pxToRem(6)};
   height: ${pxToRem(6)};
   * {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Grid, GridItem } from '@strapi/design-system';
 import Inputs from '../../../components/Inputs';
 import FieldComponent from '../../../components/FieldComponent';
 

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

@@ -6,17 +6,18 @@ import isEqualFastCompare from 'react-fast-compare';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
+import { ArrowLeft, Check, ExclamationMarkCircle } from '@strapi/icons';
 import { Link } from '@strapi/helper-plugin';
-import { HeaderLayout } from '@strapi/design-system/Layout';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Check from '@strapi/icons/Check';
+import {
+  HeaderLayout,
+  Box,
+  Button,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Flex,
+  Typography,
+} from '@strapi/design-system';
 import styled from 'styled-components';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
@@ -68,7 +69,7 @@ const Header = ({
 
   if (isCreatingEntry && canCreate) {
     primaryAction = (
-      <Stack horizontal spacing={2}>
+      <Flex gap={2}>
         {hasDraftAndPublish && (
           <Button disabled startIcon={<Check />} variant="secondary">
             {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
@@ -80,7 +81,7 @@ const Header = ({
             defaultMessage: 'Save',
           })}
         </Button>
-      </Stack>
+      </Flex>
     );
   }
 
@@ -166,7 +167,7 @@ const Header = ({
         isOpen={showWarningUnpublish}
       >
         <DialogBody icon={<ExclamationMarkCircle />}>
-          <Stack spacing={2}>
+          <Flex direction="column" alignItems="stretch" gap={2}>
             <Flex justifyContent="center" style={{ textAlign: 'center' }}>
               <Typography id="confirm-description">
                 {formatMessage(
@@ -189,7 +190,7 @@ const Header = ({
                 })}
               </Typography>
             </Flex>
-          </Stack>
+          </Flex>
         </DialogBody>
         <DialogFooter
           startAction={
@@ -221,7 +222,7 @@ const Header = ({
         isOpen={showPublishConfirmation}
       >
         <DialogBody icon={<ExclamationMarkCircle />}>
-          <Stack spacing={2}>
+          <Flex direction="column" alignItems="stretch" gap={2}>
             <FlexTextAlign justifyContent="center">
               <Typography id="confirm-description">
                 {draftCount}
@@ -246,7 +247,7 @@ const Header = ({
                 })}
               </Typography>
             </FlexTextAlign>
-          </Stack>
+          </Flex>
         </DialogBody>
         <DialogFooter
           startAction={

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

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import propTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { Box, Divider, Flex, Stack, Typography } from '@strapi/design-system';
+import { Box, Divider, Flex, Typography } from '@strapi/design-system';
 
 import { getTrad } from '../../../utils';
 import getUnits from './utils/getUnits';
@@ -49,7 +49,7 @@ const Information = () => {
   const created = getFieldInfo('createdAt', 'createdBy');
 
   return (
-    <Stack spacing={2}>
+    <Flex direction="column" alignItems="stretch" gap={2}>
       <Typography variant="sigma" textColor="neutral600" id="additional-information">
         {formatMessage({
           id: getTrad('containers.Edit.information'),
@@ -61,8 +61,8 @@ const Information = () => {
         <Divider />
       </Box>
 
-      <Stack spacing={4}>
-        <Stack spacing={2} as="dl">
+      <Flex direction="column" alignItems="stretch" gap={4}>
+        <Flex direction="column" alignItems="stretch" gap={2} as="dl">
           <KeyValuePair
             label={formatMessage({
               id: getTrad('containers.Edit.information.created'),
@@ -78,9 +78,9 @@ const Information = () => {
             })}
             value={created.by}
           />
-        </Stack>
+        </Flex>
 
-        <Stack spacing={2} as="dl">
+        <Flex direction="column" alignItems="stretch" gap={2} as="dl">
           <KeyValuePair
             label={formatMessage({
               id: getTrad('containers.Edit.information.lastUpdate'),
@@ -96,9 +96,9 @@ const Information = () => {
             })}
             value={updated.by}
           />
-        </Stack>
-      </Stack>
-    </Stack>
+        </Flex>
+      </Flex>
+    </Flex>
   );
 };
 

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

@@ -8,13 +8,8 @@ import {
   LoadingIndicatorPage,
 } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { ContentLayout } from '@strapi/design-system/Layout';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Main } from '@strapi/design-system/Main';
-import { Stack } from '@strapi/design-system/Stack';
-import Layer from '@strapi/icons/Layer';
-import Pencil from '@strapi/icons/Pencil';
+import { ContentLayout, Box, Grid, GridItem, Main, Flex } from '@strapi/design-system';
+import { Pencil, Layer } from '@strapi/icons';
 import { InjectionZone } from '../../../shared/components';
 import permissions from '../../../permissions';
 import DynamicZone from '../../components/DynamicZone';
@@ -119,7 +114,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
               <ContentLayout>
                 <Grid gap={4}>
                   <GridItem col={9} s={12}>
-                    <Stack spacing={6}>
+                    <Flex direction="column" alignItems="stretch" gap={6}>
                       {formattedContentTypeLayout.map((row, index) => {
                         if (isDynamicZone(row)) {
                           const {
@@ -156,7 +151,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                             paddingBottom={6}
                             borderColor="neutral150"
                           >
-                            <Stack spacing={6}>
+                            <Flex direction="column" alignItems="stretch" gap={6}>
                               {row.map((grid, gridRowIndex) => (
                                 <GridRow
                                   columns={grid}
@@ -164,14 +159,14 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                                   key={gridRowIndex}
                                 />
                               ))}
-                            </Stack>
+                            </Flex>
                           </Box>
                         );
                       })}
-                    </Stack>
+                    </Flex>
                   </GridItem>
                   <GridItem col={3} s={12}>
-                    <Stack spacing={2}>
+                    <Flex direction="column" alignItems="stretch" gap={2}>
                       <DraftAndPublishBadge />
                       <Box
                         as="aside"
@@ -189,7 +184,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                         <InjectionZone area="contentManager.editView.informations" />
                       </Box>
                       <Box as="aside" aria-labelledby="links">
-                        <Stack spacing={2}>
+                        <Flex direction="column" alignItems="stretch" gap={2}>
                           <InjectionZone area="contentManager.editView.right-links" slug={slug} />
                           {slug !== 'strapi::administrator' && (
                             <CheckPermissions permissions={ctbPermissions}>
@@ -233,9 +228,9 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                               onDeleteSucceeded={onDeleteSucceeded}
                             />
                           )}
-                        </Stack>
+                        </Flex>
                       </Box>
-                    </Stack>
+                    </Flex>
                   </GridItem>
                 </Grid>
               </ContentLayout>

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

@@ -1,4 +1,5 @@
-import { get, isEmpty } from 'lodash';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
 
 const createAttributesLayout = (currentContentTypeLayoutData) => {
   if (!currentContentTypeLayoutData.layouts) {

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

@@ -1,4 +1,5 @@
-import { uniq, flatMap } from 'lodash';
+import uniq from 'lodash/uniq';
+import flatMap from 'lodash/flatMap';
 import { findMatchingPermissions } from '@strapi/helper-plugin';
 
 const getFieldsActionMatchingPermissions = (userPermissions, slug) => {