ambiser
/
strapi-plugin-config-sync
mirror of https://github.com/boazpoolman/strapi-plugin-config-sync
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: rename design-system components for migtration to v2

pull/130/head
Boaz Poolman 2024-07-10 10:23:57 +02:00
parent 1ccd3d28f2
commit e8db8c6107
4 changed files with 22 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
admin/src/components/ConfigDiff/index.jsx
View File

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

4
admin/src/components/ConfigList/ConfigListRow/index.jsx
View File

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

4
admin/src/components/ConfigList/index.jsx
View File

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

12
admin/src/components/ConfirmModal/index.jsx
View File

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