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

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js

@@ -1,15 +1,11 @@
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import ChevronDown from '@strapi/icons/ChevronDown';
-import ChevronUp from '@strapi/icons/ChevronUp';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { ChevronDown, ChevronUp } from '@strapi/icons';
+import { BaseCheckbox, Box, Flex } from '@strapi/design-system';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/utils/constants';
 import { usePermissionsDataManager } from '../../../../../../../../hooks';
 import ConditionsButton from '../../ConditionsButton';
 import ConditionsModal from '../../ConditionsModal';
@@ -182,7 +178,7 @@ const Collapse = ({
                   <Cell key={actionId} justifyContent="center" alignItems="center">
                     {hasConditions && <TinyDot />}
                     <BaseCheckbox
-                      disabled={isFormDisabled || IS_DISABLED}
+                      disabled={isFormDisabled}
                       name={checkboxName}
                       aria-label={formatMessage(
                         {
@@ -211,7 +207,7 @@ const Collapse = ({
                 <Cell key={actionId} justifyContent="center" alignItems="center">
                   {hasConditions && <TinyDot />}
                   <BaseCheckbox
-                    disabled={isFormDisabled || IS_DISABLED}
+                    disabled={isFormDisabled}
                     indeterminate={hasConditions}
                     name={checkboxName}
                     // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/utils/generateCheckboxesActions.js

@@ -1,4 +1,5 @@
-import { get, isEmpty } from 'lodash';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
 import { createArrayOfValues, getCheckboxState } from '../../../utils';
 
 const generateCheckboxesActions = (availableActions, modifiedData, pathToData) => {

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js

@@ -2,10 +2,8 @@ import React, { memo, useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Flex } from '@strapi/design-system/Flex';
+import { BaseCheckbox, Flex } from '@strapi/design-system';
 import get from 'lodash/get';
-import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/constants';
 import { usePermissionsDataManager } from '../../../../../../../../../hooks';
 import HiddenAction from '../../../HiddenAction';
 import { cellWidth, rowHeight } from '../../../Permissions/utils/constants';
@@ -134,7 +132,7 @@ const ActionRow = ({
                 return (
                   <Cell key={actionId} justifyContent="center" alignItems="center">
                     <BaseCheckbox
-                      disabled={isFormDisabled || IS_DISABLED}
+                      disabled={isFormDisabled}
                       name={checkboxName.join('..')}
                       aria-label={formatMessage(
                         {
@@ -165,7 +163,7 @@ const ActionRow = ({
               return (
                 <Cell key={label} justifyContent="center" alignItems="center">
                   <BaseCheckbox
-                    disabled={isFormDisabled || IS_DISABLED}
+                    disabled={isFormDisabled}
                     name={checkboxName.join('..')}
                     // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
                     onValueChange={(value) => {

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/getRowLabelCheckboxeState.js

@@ -1,4 +1,5 @@
-import { get } from 'lodash';
+import get from 'lodash/get';
+
 import { getCheckboxState } from '../../../../utils';
 
 /**

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/CarretIcon/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import CarretDown from '@strapi/icons/CarretDown';
+import { CarretDown } from '@strapi/icons';
 
 const CarretIcon = styled(CarretDown)`
   display: none;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Flex, Typography } from '@strapi/design-system';
 import { cellWidth, firstRowWidth, rowHeight } from '../../../Permissions/utils/constants';
 
 const HeaderLabel = styled(Flex)`

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js

@@ -4,11 +4,7 @@ import get from 'lodash/get';
 import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/utils/constants';
+import { BaseCheckbox, Box, Flex, Typography } from '@strapi/design-system';
 import { usePermissionsDataManager } from '../../../../../../../../../hooks';
 import CollapseLabel from '../../../CollapseLabel';
 import Curve from '../../../Curve';
@@ -153,7 +149,7 @@ const SubActionRow = ({
                         return (
                           <Cell key={propertyLabel} justifyContent="center" alignItems="center">
                             <BaseCheckbox
-                              disabled={isFormDisabled || IS_DISABLED}
+                              disabled={isFormDisabled}
                               name={checkboxName.join('..')}
                               aria-label={formatMessage(
                                 {
@@ -184,7 +180,7 @@ const SubActionRow = ({
                         <Cell key={propertyLabel} justifyContent="center" alignItems="center">
                           <BaseCheckbox
                             key={propertyLabel}
-                            disabled={isFormDisabled || IS_DISABLED}
+                            disabled={isFormDisabled}
                             name={checkboxName.join('..')}
                             aria-label={formatMessage(
                               {

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/index.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import generateHeadersFromActions from './utils/generateHeadersFromActions';
 import Header from './Header';
 import ActionRow from './ActionRow';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/utils/activeStyle.js

@@ -1,4 +1,4 @@
-import { Typography } from '@strapi/design-system/Typography';
+import { Typography } from '@strapi/design-system';
 import CarretIcon from '../CollapsePropertyMatrix/CarretIcon';
 
 const activeStyle = (theme) => `

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypes/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import styled from 'styled-components';
 import sortBy from 'lodash/sortBy';
 import ContentTypeCollapses from '../ContentTypeCollapses';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Curve/index.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 
 const StyledBox = styled(Box)`
   transform: translate(-4px, -12px);

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/index.js

@@ -1,20 +1,14 @@
 import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
+import { BaseCheckbox, Box, Flex, Typography } from '@strapi/design-system';
 import styled from 'styled-components';
 import get from 'lodash/get';
-import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/utils/constants';
 import { useIntl } from 'react-intl';
 import { usePermissionsDataManager } from '../../../../../../../hooks';
 import { cellWidth, firstRowWidth } from '../Permissions/utils/constants';
 import { findDisplayedActions, getCheckboxesState } from './utils';
 
-const CenteredStack = styled(Stack)`
-  align-items: center;
-  justify-content: center;
+const CenteredStack = styled(Flex)`
   width: ${cellWidth};
   flex-shrink: 0;
 `;
@@ -33,10 +27,16 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => {
 
   return (
     <Box paddingBottom={4} paddingTop={6} style={{ paddingLeft: firstRowWidth }}>
-      <Stack horizontal spacing={0}>
+      <Flex gap={0}>
         {displayedActions.map(({ label, actionId }) => {
           return (
-            <CenteredStack key={actionId} spacing={3}>
+            <CenteredStack
+              direction="column"
+              alignItems="center"
+              justifyContent="center"
+              key={actionId}
+              gap={3}
+            >
               <Typography variant="sigma" textColor="neutral500">
                 {formatMessage({
                   id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
@@ -44,7 +44,7 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => {
                 })}
               </Typography>
               <BaseCheckbox
-                disabled={isFormDisabled || IS_DISABLED}
+                disabled={isFormDisabled}
                 onValueChange={(value) => {
                   onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, value);
                 }}
@@ -67,7 +67,7 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => {
             </CenteredStack>
           );
         })}
-      </Stack>
+      </Flex>
     </Box>
   );
 };

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/utils/getRowLabelCheckboxesState.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { getCheckboxState, removeConditionKeyFromData } from '../../utils';
 
 const getActionsIds = (array) => array.map(({ actionId }) => actionId);

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Permissions/index.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, memo, useCallback, useImperativeHandle, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { difference } from '@strapi/helper-plugin';
-import { Tab, TabGroup, TabPanel, TabPanels, Tabs } from '@strapi/design-system/Tabs';
+import { Tab, TabGroup, TabPanel, TabPanels, Tabs } from '@strapi/design-system';
 import has from 'lodash/has';
 import isEmpty from 'lodash/isEmpty';
 import { useIntl } from 'react-intl';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Permissions/reducer.js

@@ -1,5 +1,10 @@
 import produce from 'immer';
-import { cloneDeep, has, isObject, get, set } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
+import has from 'lodash/has';
+import isObject from 'lodash/isObject';
+import get from 'lodash/get';
+import set from 'lodash/set';
+
 import updateConditionsToFalse from './utils/updateConditionsToFalse';
 import updateValues from './utils/updateValues';
 

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Permissions/utils/createDefaultCTFormFromLayout.js

@@ -1,4 +1,8 @@
-import { merge, get, isEmpty, set } from 'lodash';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import merge from 'lodash/merge';
+import set from 'lodash/set';
+
 import findMatchingPermission from './findMatchingPermissions';
 /**
  * Creates the default condition form: { [conditionId]: false }

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Permissions/utils/createDefaultPluginsFormFromLayout.js

@@ -1,4 +1,3 @@
-import { get } from 'lodash';
 import { createDefaultConditionsForm } from './createDefaultCTFormFromLayout';
 import findMatchingPermission from './findMatchingPermissions';
 
@@ -12,7 +11,7 @@ const createSubCategoryForm = (actions, conditions, permissions) => {
       },
       conditions: createDefaultConditionsForm(
         conditions,
-        get(foundMatchingPermission, 'conditions', [])
+        foundMatchingPermission?.conditions ?? []
       ),
     };
 

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Permissions/utils/formatContentTypesPermissionToAPI.js

@@ -1,4 +1,4 @@
-import { has, isObject } from 'lodash';
+import isObject from 'lodash/isObject';
 import { createArrayOfValues } from '../../utils';
 import { createConditionsArray } from './formatSettingsPermissionsToAPI';
 
@@ -77,7 +77,7 @@ const createSubjectPermissions = (subject, actions) => {
       return acc;
     }
 
-    if (!has(permissions, 'properties.enabled')) {
+    if (!permissions?.properties?.enabled) {
       const createdPermissionsArray = createPermissionWithProperties(
         actionName,
         subject,

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Permissions/utils/formatLayoutForSettingsAndPlugins.js

@@ -1,23 +1,19 @@
-import { chain } from 'lodash';
+import groupBy from 'lodash/groupBy';
 
 const replaceName = (name) => name.split(' ').join('-');
 
 const formatLayout = (layout, groupByKey) => {
-  return chain(layout)
-    .groupBy(groupByKey)
-    .map((item, itemName) => ({
-      category: itemName,
-      categoryId: replaceName(itemName),
-      childrenForm: chain(item)
-        .groupBy('subCategory')
-        .map((actions, subCategoryName) => ({
-          subCategoryName,
-          subCategoryId: replaceName(subCategoryName),
-          actions,
-        }))
-        .value(),
-    }))
-    .value();
+  return Object.entries(groupBy(layout, groupByKey)).map(([itemName, item]) => ({
+    category: itemName,
+    categoryId: replaceName(itemName),
+    childrenForm: Object.entries(groupBy(item, 'subCategory')).map(
+      ([subCategoryName, actions]) => ({
+        subCategoryName,
+        subCategoryId: replaceName(subCategoryName),
+        actions,
+      })
+    ),
+  }));
 };
 
 export default formatLayout;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Permissions/utils/updateConditionsToFalse.js

@@ -1,4 +1,7 @@
-import { isObject, has, omit } from 'lodash';
+import isObject from 'lodash/isObject';
+import has from 'lodash/has';
+import omit from 'lodash/omit';
+
 import { createArrayOfValues } from '../../utils';
 
 /**

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Permissions/utils/updateValues.js

@@ -1,4 +1,4 @@
-import { isObject } from 'lodash';
+import isObject from 'lodash/isObject';
 
 /**
  * Sets all the none object values of an object to the given one

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/Row/index.js

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Accordion, AccordionContent, AccordionToggle } from '@strapi/design-system/Accordion';
-import { Box } from '@strapi/design-system/Box';
+import { Accordion, AccordionContent, AccordionToggle, Box } from '@strapi/design-system';
 import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
 import SubCategory from '../SubCategory';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/index.js

@@ -1,14 +1,9 @@
 import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Box } from '@strapi/design-system/Box';
-import { Checkbox } from '@strapi/design-system/Checkbox';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Grid, GridItem, Box, Checkbox, Flex, Typography } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
-import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/utils/constants';
 import { usePermissionsDataManager } from '../../../../../../../../hooks';
 import { getCheckboxState, removeConditionKeyFromData } from '../../utils';
 import ConditionsButton from '../../ConditionsButton';
@@ -81,7 +76,7 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
           <Box paddingLeft={4}>
             <Checkbox
               name={pathToData.join('..')}
-              disabled={isFormDisabled || IS_DISABLED}
+              disabled={isFormDisabled}
               // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
               onValueChange={(value) => {
                 onChangeParentCheckbox({
@@ -103,13 +98,10 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
             {formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
               return (
                 <GridItem col={3} key={action}>
-                  <CheckboxWrapper
-                    disabled={isFormDisabled || IS_DISABLED}
-                    hasConditions={hasConditions}
-                  >
+                  <CheckboxWrapper disabled={isFormDisabled} hasConditions={hasConditions}>
                     <Checkbox
                       name={checkboxName}
-                      disabled={isFormDisabled || IS_DISABLED}
+                      disabled={isFormDisabled}
                       // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
                       onValueChange={(value) => {
                         onChangeSimpleCheckbox({

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/utils/formatActions.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { createArrayOfValues } from '../../../utils';
 
 /**

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import PermissionRow from './Row';
 
 const PluginsAndSettingsPermissions = ({ isFormDisabled, kind, layout }) => {

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import { Textarea } from '@strapi/design-system/Textarea';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Button } from '@strapi/design-system/Button';
+import {
+  Box,
+  Grid,
+  GridItem,
+  Flex,
+  Typography,
+  Textarea,
+  TextInput,
+  Button,
+} from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
@@ -15,7 +17,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
 
   return (
     <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
-      <Stack spacing={4}>
+      <Flex direction="column" alignItems="stretch" gap={4}>
         <Flex justifyContent="space-between">
           <Box>
             <Box>
@@ -81,7 +83,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
             </Textarea>
           </GridItem>
         </Grid>
-      </Stack>
+      </Flex>
     </Box>
   );
 };

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RowLabelWithCheckbox/index.js

@@ -1,9 +1,6 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { BaseCheckbox, Box, Flex, Typography } from '@strapi/design-system';
 import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
 import CollapseLabel from '../CollapseLabel';

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/utils/createArrayOfValues.js

@@ -1,4 +1,5 @@
-import { flattenDeep, isObject } from 'lodash';
+import flattenDeep from 'lodash/flattenDeep';
+import isObject from 'lodash/isObject';
 
 const createArrayOfValues = (obj) => {
   if (!isObject(obj)) {

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js

@@ -8,13 +8,9 @@ import {
   SettingsPageTitle,
   Link,
 } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Stack } from '@strapi/design-system/Stack';
+import { Box, Button, ContentLayout, HeaderLayout, Main, Flex } from '@strapi/design-system';
 import { Formik } from 'formik';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
+import { ArrowLeft } from '@strapi/icons';
 import get from 'lodash/get';
 import { useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
@@ -108,7 +104,7 @@ const EditPage = () => {
           <form onSubmit={handleSubmit}>
             <HeaderLayout
               primaryAction={
-                <Stack horizontal spacing={2}>
+                <Flex gap={2}>
                   <Button
                     disabled={role.code === 'strapi-super-admin'}
                     onClick={handleSubmit}
@@ -120,7 +116,7 @@ const EditPage = () => {
                       defaultMessage: 'Save',
                     })}
                   </Button>
-                </Stack>
+                </Flex>
               }
               title={formatMessage({
                 id: 'Settings.roles.edit.title',
@@ -140,7 +136,7 @@ const EditPage = () => {
               }
             />
             <ContentLayout>
-              <Stack spacing={6}>
+              <Flex direction="column" alignItems="stretch" gap={6}>
                 <RoleForm
                   isLoading={isRoleLoading}
                   disabled={isFormDisabled}
@@ -164,7 +160,7 @@ const EditPage = () => {
                     <LoadingIndicatorPage />
                   </Box>
                 )}
-              </Stack>
+              </Flex>
             </ContentLayout>
           </form>
         )}

package/admin/src/pages/SettingsPage/pages/Roles/ListPage/components/RoleRow/index.js

@@ -1,10 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Td, Tr } from '@strapi/design-system/Table';
-import { Typography } from '@strapi/design-system/Typography';
-import { IconButton } from '@strapi/design-system/IconButton';
+import { Box, Flex, Td, Tr, Typography, IconButton } from '@strapi/design-system';
 import { stopPropagation, onRowClick, pxToRem } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';