refactor: migrate design-system components for Strapi 5

Author: boazpoolman

.eslintrc

@@ -29,6 +29,7 @@
     "import/no-unresolved": [2, {
       "ignore": [
         "@strapi/strapi/admin",
+        "@strapi/icons/symbols",
         "@strapi/admin/strapi-admin"
       ]
     }],

admin/src/components/ConfirmModal/index.jsx

@@ -8,13 +8,12 @@ import {
   DialogFooter,
   Flex,
   Typography,
-  Stack,
   Button,
   Checkbox,
   Divider,
   Box,
 } from '@strapi/design-system';
-import { ExclamationMarkCircle } from '@strapi/icons';
+import { WarningCircle } from '@strapi/icons';
 
 const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
   const soft = useSelector((state) => state.getIn(['config', 'appEnv', 'config', 'soft'], false));
@@ -29,15 +28,15 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
       title={formatMessage({ id: "config-sync.popUpWarning.Confirmation" })}
       isOpen={isOpen}
     >
-      <DialogBody icon={<ExclamationMarkCircle />}>
-        <Stack size={2}>
+      <DialogBody icon={<WarningCircle />}>
+        <Flex size={2}>
           <Flex justifyContent="center">
             <Typography variant="omega" id="confirm-description" style={{ textAlign: 'center' }}>
               {formatMessage({ id: `config-sync.popUpWarning.warning.${type}_1` })}<br />
               {formatMessage({ id: `config-sync.popUpWarning.warning.${type}_2` })}
             </Typography>
           </Flex>
-        </Stack>
+        </Flex>
       </DialogBody>
       {(soft && type === 'import') && (
         <React.Fragment>

admin/src/components/FirstExport/index.jsx

@@ -3,7 +3,8 @@ import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { getFetchClient, useNotification } from '@strapi/strapi/admin';
 import { Button, EmptyStateLayout } from '@strapi/design-system';
-import { EmptyDocuments } from '@strapi/icons';
+import { EmptyDocuments } from '@strapi/icons/symbols';
+
 
 import { exportAllConfig } from '../../state/actions/Config';
 import ConfirmModal from '../ConfirmModal';

admin/src/components/Header/index.jsx

@@ -7,14 +7,15 @@
 import React, { memo } from 'react';
 import { useIntl } from 'react-intl';
 
-import { HeaderLayout, Box } from '@strapi/design-system';
+import { Layouts } from '@strapi/admin/strapi-admin';
+import { Box } from '@strapi/design-system';
 
 const HeaderComponent = () => {
   const { formatMessage } = useIntl();
 
   return (
     <Box background="neutral100">
-      <HeaderLayout
+      <Layouts.Header
         title={formatMessage({ id: 'config-sync.Header.Title' })}
         subtitle={formatMessage({ id: 'config-sync.Header.Description' })}
         as="h2"

admin/src/components/NoChanges/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { EmptyStateLayout } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
-import { EmptyDocuments } from '@strapi/icons';
+import { EmptyDocuments } from '@strapi/icons/symbols';
 
 const NoChanges = () => {
   const { formatMessage } = useIntl();

admin/src/containers/ConfigPage/index.jsx

@@ -3,12 +3,11 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Map } from 'immutable';
 import {
   Box,
-  ContentLayout,
   Alert,
   Typography,
 } from '@strapi/design-system';
 import { useNotification } from '@strapi/strapi/admin';
-import { getFetchClient } from '@strapi/admin/strapi-admin';
+import { getFetchClient, Layouts } from '@strapi/admin/strapi-admin';
 import { useIntl } from 'react-intl';
 
 import { getAllConfigDiff, getAppEnv } from '../../state/actions/Config';
@@ -31,7 +30,7 @@ const ConfigPage = () => {
   }, []);
 
   return (
-    <ContentLayout paddingBottom={8}>
+    <Layouts.Content paddingBottom={8}>
       {appEnv === 'production' && (
         <Box paddingBottom={4}>
           <Alert variant="danger">
@@ -43,7 +42,7 @@ const ConfigPage = () => {
       )}
       <ActionButtons />
       <ConfigList isLoading={isLoading} diff={configDiff.toJS()} />
-    </ContentLayout>
+    </Layouts.Content>
   );
 };