fix: rename design-system components for migtration to v2

Author: boazpoolman

admin/src/components/ConfigDiff/index.jsx

@@ -3,11 +3,8 @@ import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
 import { useIntl } from 'react-intl';
 
 import {
-  ModalLayout,
-  ModalBody,
-  ModalHeader,
+  Modal,
   Grid,
-  GridItem,
   Typography,
 } from '@strapi/design-system';
 
@@ -16,32 +13,32 @@ const ConfigDiff = ({ isOpen, onClose, oldValue, newValue, configName }) => {
   if (!isOpen) return null;
 
   return (
-    <ModalLayout
+    <Modal.Root
       onClose={onClose}
       labelledBy="title"
     >
-      <ModalHeader>
+      <Modal.Header>
         <Typography variant="omega" fontWeight="bold" textColor="neutral800">
           {formatMessage({ id: 'config-sync.ConfigDiff.Title' })} {configName}
         </Typography>
-      </ModalHeader>
-      <ModalBody>
-        <Grid paddingBottom={4} style={{ textAlign: 'center' }}>
-          <GridItem col={6}>
+      </Modal.Header>
+      <Modal.Body>
+        <Grid.Root paddingBottom={4} style={{ textAlign: 'center' }}>
+          <Grid.Item col={6}>
             <Typography variant="delta">{formatMessage({ id: 'config-sync.ConfigDiff.SyncDirectory' })}</Typography>
-          </GridItem>
-          <GridItem col={6}>
+          </Grid.Item>
+          <Grid.Item col={6}>
             <Typography variant="delta">{formatMessage({ id: 'config-sync.ConfigDiff.Database' })}</Typography>
-          </GridItem>
-        </Grid>
+          </Grid.Item>
+        </Grid.Root>
         <ReactDiffViewer
           oldValue={JSON.stringify(oldValue, null, 2)}
           newValue={JSON.stringify(newValue, null, 2)}
           splitView
           compareMethod={DiffMethod.WORDS}
         />
-      </ModalBody>
-    </ModalLayout>
+      </Modal.Body>
+    </Modal.Root>
   );
 };
 

admin/src/components/ConfigList/ConfigListRow/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tr, Td, BaseCheckbox } from '@strapi/design-system';
+import { Tr, Td, Checkbox } from '@strapi/design-system';
 
 const CustomRow = ({ row, checked, updateValue }) => {
   const { configName, configType, state, onClick } = row;
@@ -42,7 +42,7 @@ const CustomRow = ({ row, checked, updateValue }) => {
       style={{ cursor: 'pointer' }}
     >
       <Td>
-        <BaseCheckbox
+        <Checkbox
           aria-label={`Select ${configName}`}
           value={checked}
           onValueChange={updateValue}

admin/src/components/ConfigList/index.jsx

@@ -10,7 +10,7 @@ import {
   Tr,
   Th,
   Typography,
-  BaseCheckbox,
+  Checkbox,
   Loader,
 } from '@strapi/design-system';
 
@@ -128,7 +128,7 @@ const ConfigList = ({ diff, isLoading }) => {
         <Thead>
           <Tr>
             <Th>
-              <BaseCheckbox
+              <Checkbox
                 aria-label={formatMessage({ id: 'config-sync.ConfigList.SelectAll' })}
                 indeterminate={isIndeterminate}
                 onValueChange={(value) => setCheckedItems(checkedItems.map(() => value))}

admin/src/components/ConfirmModal/index.jsx

@@ -4,8 +4,6 @@ import { useSelector } from 'react-redux';
 
 import {
   Dialog,
-  DialogBody,
-  DialogFooter,
   Flex,
   Typography,
   Button,
@@ -23,12 +21,12 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
   if (!isOpen) return null;
 
   return (
-    <Dialog
+    <Dialog.Root
       onClose={onClose}
       title={formatMessage({ id: "config-sync.popUpWarning.Confirmation" })}
       isOpen={isOpen}
     >
-      <DialogBody icon={<WarningCircle />}>
+      <Dialog.Body icon={<WarningCircle />}>
         <Flex size={2}>
           <Flex justifyContent="center">
             <Typography variant="omega" id="confirm-description" style={{ textAlign: 'center' }}>
@@ -37,7 +35,7 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
             </Typography>
           </Flex>
         </Flex>
-      </DialogBody>
+      </Dialog.Body>
       {(soft && type === 'import') && (
         <React.Fragment>
           <Divider />
@@ -53,7 +51,7 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
           </Box>
         </React.Fragment>
       )}
-      <DialogFooter
+      <Dialog.Footer
         startAction={(
           <Button
             onClick={() => {
@@ -75,7 +73,7 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
             {formatMessage({ id: `config-sync.popUpWarning.button.${type}` })}
           </Button>
         )} />
-    </Dialog>
+    </Dialog.Root>
   );
 };