refactor(v4): Implement @strapi/design-system

admin/src/components/ActionButtons/index.js

@@ -41,6 +41,8 @@ const ActionButtons = ({ diff }) => {
 
 const ActionButtonsStyling = styled.div`
   padding: 10px 0 20px 0;
+  display: flex;
+  align-items: center;
 
   > button {
     margin-right: 10px;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Tr, Td } from '@strapi/design-system/Table';
 
 const CustomRow = ({ row }) => {
   const { configName, configType, state, onClick } = row;
@@ -32,17 +33,20 @@ const CustomRow = ({ row }) => {
   };
 
   return (
-    <tr onClick={() => onClick(configType, configName)}>
-      <td>
+    <Tr
+      onClick={() => onClick(configType, configName)}
+      style={{ cursor: 'pointer' }}
+    >
+      <Td>
         <p>{configName}</p>
-      </td>
-      <td>
+      </Td>
+      <Td>
         <p>{configType}</p>
-      </td>
-      <td>
+      </Td>
+      <Td>
         <p style={stateStyle(state)}>{state}</p>
-      </td>
-    </tr>
+      </Td>
+    </Tr>
   );
 };
 

admin/src/components/ConfirmModal/index.js

@@ -1,16 +1,16 @@
 import React from 'react';
+import { useIntl } from 'react-intl';
 
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
 import { Flex } from '@strapi/design-system/Flex';
 import { Text } from '@strapi/design-system/Text';
 import { Stack } from '@strapi/design-system/Stack';
 import { Button } from '@strapi/design-system/Button';
-import DeleteIcon from '@strapi/icons/Delete';
 import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
 
-import getTrad from '../../helpers/getTrad';
-
 const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
+  const { formatMessage } = useIntl();
+
   if (!isOpen) return null;
 
   return (
@@ -22,7 +22,10 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
       <DialogBody icon={<AlertWarningIcon />}>
         <Stack size={2}>
           <Flex justifyContent="center">
-            <Text id="confirm-description">{getTrad(`popUpWarning.warning.${type}`)}</Text>
+            <Text id="confirm-description" style={{ textAlign: 'center' }}>
+              {formatMessage({ id: `config-sync.popUpWarning.warning.${type}_1` })}<br />
+              {formatMessage({ id: `config-sync.popUpWarning.warning.${type}_2` })}
+            </Text>
           </Flex>
         </Stack>
       </DialogBody>
@@ -31,16 +34,21 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
           <Button
             onClick={() => {
               onClose();
-              onSubmit();
             }}
             variant="tertiary"
           >
-            Cancel
+            {formatMessage({ id: 'config-sync.popUpWarning.button.cancel' })}
           </Button>
         )}
         endAction={(
-          <Button variant="danger-light" startIcon={<DeleteIcon />}>
-            {getTrad(`popUpWarning.button.${type}`)}
+          <Button
+            variant="secondary"
+            onClick={() => {
+              onClose();
+              onSubmit();
+            }}
+          >
+            {formatMessage({ id: `config-sync.popUpWarning.button.${type}` })}
           </Button>
         )} />
     </Dialog>

admin/src/containers/App/index.js

@@ -7,17 +7,19 @@
 
 import React from 'react';
 import { Provider } from 'react-redux';
-import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { CheckPagePermissions, useNotification } from '@strapi/helper-plugin';
 
 import pluginPermissions from '../../permissions';
 import Header from '../../components/Header';
-import { store } from "../../helpers/configureStore";
+import store from "../../helpers/configureStore";
 import ConfigPage from '../ConfigPage';
 
 const App = () => {
+  const toggleNotification = useNotification();
+
   return (
     <CheckPagePermissions permissions={pluginPermissions.settings}>
-      <Provider store={store}>
+      <Provider store={store(toggleNotification)}>
         <Header />
         <ConfigPage />
       </Provider>

admin/src/containers/ConfigPage/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Map } from 'immutable';
+import { Box } from '@strapi/design-system/Box';
 
 import { getAllConfigDiff } from '../../state/actions/Config';
 import ConfigList from '../../components/ConfigList';
@@ -16,10 +17,10 @@ const ConfigPage = () => {
   }, []);
 
   return (
-    <div>
+    <Box paddingLeft={8} paddingRight={8}>
       <ActionButtons diff={configDiff.toJS()} />
       <ConfigList isLoading={isLoading} diff={configDiff.toJS()} />
-    </div>
+    </Box>
   );
 };
 

admin/src/helpers/configureStore.js

@@ -5,12 +5,12 @@ import { Map } from 'immutable';
 import rootReducer from '../state/reducers';
 import { __DEBUG__ } from '../config/constants';
 
-const configureStore = () => {
+const configureStore = (toggleNotification) => {
   const initialStoreState = Map();
 
   const enhancers = [];
   const middlewares = [
-    thunkMiddleware,
+    thunkMiddleware.withExtraArgument(toggleNotification),
   ];
 
   let devtools;
@@ -43,5 +43,3 @@ const configureStore = () => {
 };
 
 export default configureStore;
-
-export const store = configureStore();

admin/src/state/actions/Config.js

@@ -8,14 +8,14 @@ import { request } from '@strapi/helper-plugin';
 import { Map } from 'immutable';
 
 export function getAllConfigDiff() {
-  return async function(dispatch) {
+  return async function(dispatch, getState, toggleNotification) {
     dispatch(setLoadingState(true));
     try {
       const configDiff = await request('/config-sync/diff', { method: 'GET' });
       dispatch(setConfigDiffInState(configDiff));
       dispatch(setLoadingState(false));
     } catch (err) {
-      strapi.notification.error('notification.error');
+      toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
       dispatch(setLoadingState(false));
     }
   };
@@ -30,32 +30,32 @@ export function setConfigDiffInState(config) {
 }
 
 export function exportAllConfig() {
-  return async function(dispatch) {
+  return async function(dispatch, getState, toggleNotification) {
     dispatch(setLoadingState(true));
     try {
       const { message } = await request('/config-sync/export', { method: 'GET' });
       dispatch(setConfigDiffInState(Map({})));
 
-      strapi.notification.success(message);
+      toggleNotification({ type: 'success', message });
       dispatch(setLoadingState(false));
     } catch (err) {
-      strapi.notification.error('notification.error');
+      toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
       dispatch(setLoadingState(false));
     }
   };
 }
 
 export function importAllConfig() {
-  return async function(dispatch) {
+  return async function(dispatch, getState, toggleNotification) {
     dispatch(setLoadingState(true));
     try {
       const { message } = await request('/config-sync/import', { method: 'GET' });
       dispatch(setConfigDiffInState(Map({})));
 
-      strapi.notification.success(message);
+      toggleNotification({ type: 'success', message });
       dispatch(setLoadingState(false));
     } catch (err) {
-      strapi.notification.error('notification.error');
+      toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
       dispatch(setLoadingState(false));
     }
   };

admin/src/translations/en.json

@@ -1,11 +1,14 @@
 {
-  "popUpWarning.warning.import": "If you continue all your local config files<br></br>will be imported into the database.",
-  "popUpWarning.warning.export": "If you continue all your database config<br></br>will be written into config files.",
+  "popUpWarning.warning.import_1": "If you continue all your local config files",
+  "popUpWarning.warning.import_2": "will be imported into the database.",
+  "popUpWarning.warning.export_1": "If you continue all your database config",
+  "popUpWarning.warning.export_2": "will be written into config files.",
   "popUpWarning.button.import": "Yes, import",
   "popUpWarning.button.export": "Yes, export",
+  "popUpWarning.button.cancel": "Cancel",
 
   "Header.Title": "Config Sync",
   "Header.Description": "Manage your database config across environments.",
 
   "plugin.name": "Config Sync"
-}
+}