Merge pull request pluginpal#138 from pluginpal/beta

Beta

.eslintrc

@@ -26,6 +26,14 @@
     "strapi": true
   },
   "rules": {
+    "import/no-unresolved": [2, {
+      "ignore": [
+        "@strapi/strapi/admin",
+        "@strapi/icons/symbols",
+        "@strapi/admin/strapi-admin"
+      ]
+    }],
+
     "template-curly-spacing" : "off",
 
     "indent" : "off",

.github/workflows/tests.yml

@@ -8,6 +8,7 @@ on:
     branches:
       - master
       - develop
+      - beta
 
 jobs:
   lint:

admin/src/components/ActionButtons/index.js → admin/src/components/ActionButtons/index.jsx

@@ -4,15 +4,16 @@ import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty } from 'lodash';
 import { Button } from '@strapi/design-system';
 import { Map } from 'immutable';
-import { useNotification } from '@strapi/helper-plugin';
+import { getFetchClient, useNotification } from '@strapi/strapi/admin';
 import { useIntl } from 'react-intl';
 
 import ConfirmModal from '../ConfirmModal';
 import { exportAllConfig, importAllConfig } from '../../state/actions/Config';
 
 const ActionButtons = () => {
+  const { post, get } = getFetchClient();
   const dispatch = useDispatch();
-  const toggleNotification = useNotification();
+  const { toggleNotification } = useNotification();
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [actionType, setActionType] = useState('');
   const partialDiff = useSelector((state) => state.getIn(['config', 'partialDiff'], Map({}))).toJS();
@@ -43,7 +44,7 @@ const ActionButtons = () => {
         isOpen={modalIsOpen}
         onClose={closeModal}
         type={actionType}
-        onSubmit={(force) => actionType === 'import' ? dispatch(importAllConfig(partialDiff, force, toggleNotification)) : dispatch(exportAllConfig(partialDiff, toggleNotification))}
+        onSubmit={(force) => actionType === 'import' ? dispatch(importAllConfig(partialDiff, force, toggleNotification, formatMessage, post, get)) : dispatch(exportAllConfig(partialDiff, toggleNotification, formatMessage, post, get))}
       />
     </ActionButtonsStyling>
   );

admin/src/components/ConfigDiff/index.js → 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.js → 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.js → 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.js → admin/src/components/ConfirmModal/index.jsx

@@ -4,17 +4,14 @@ import { useSelector } from 'react-redux';
 
 import {
   Dialog,
-  DialogBody,
-  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));
@@ -24,21 +21,21 @@ 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={<ExclamationMarkCircle />}>
-        <Stack size={2}>
+      <Dialog.Body 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>
-      </DialogBody>
+        </Flex>
+      </Dialog.Body>
       {(soft && type === 'import') && (
         <React.Fragment>
           <Divider />
@@ -54,7 +51,7 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
           </Box>
         </React.Fragment>
       )}
-      <DialogFooter
+      <Dialog.Footer
         startAction={(
           <Button
             onClick={() => {
@@ -76,7 +73,7 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
             {formatMessage({ id: `config-sync.popUpWarning.button.${type}` })}
           </Button>
         )} />
-    </Dialog>
+    </Dialog.Root>
   );
 };
 

admin/src/components/FirstExport/index.js → admin/src/components/FirstExport/index.jsx

@@ -1,14 +1,17 @@
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
-import { NoContent, useNotification } from '@strapi/helper-plugin';
-import { Button } from '@strapi/design-system';
+import { getFetchClient, useNotification } from '@strapi/strapi/admin';
+import { Button, EmptyStateLayout } from '@strapi/design-system';
+import { EmptyDocuments } from '@strapi/icons/symbols';
+
 
 import { exportAllConfig } from '../../state/actions/Config';
 import ConfirmModal from '../ConfirmModal';
 
 const FirstExport = () => {
-  const toggleNotification = useNotification();
+  const { post, get } = getFetchClient();
+  const { toggleNotification } = useNotification();
   const dispatch = useDispatch();
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const { formatMessage } = useIntl();
@@ -19,15 +22,12 @@ const FirstExport = () => {
         isOpen={modalIsOpen}
         onClose={() => setModalIsOpen(false)}
         type="export"
-        onSubmit={() => dispatch(exportAllConfig([], toggleNotification))}
+        onSubmit={() => dispatch(exportAllConfig([], toggleNotification, formatMessage, post, get))}
       />
-      <NoContent
-        content={{
-          id: 'emptyState',
-          defaultMessage:
-          formatMessage({ id: 'config-sync.FirstExport.Message' }),
-        }}
+      <EmptyStateLayout
+        content={formatMessage({ id: 'config-sync.FirstExport.Message' })}
         action={<Button onClick={() => setModalIsOpen(true)}>{formatMessage({ id: 'config-sync.FirstExport.Button' })}</Button>}
+        icon={<EmptyDocuments width={160} />}
       />
     </div>
   );

admin/src/components/Header/index.js → 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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { EmptyStateLayout } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { EmptyDocuments } from '@strapi/icons/symbols';
+
+const NoChanges = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <EmptyStateLayout
+      content={formatMessage({ id: 'config-sync.NoChanges.Message', defaultMessage: 'No differences between DB and sync directory. You are up-to-date!' })}
+      icon={<EmptyDocuments width={160} />}
+    />
+  );
+};
+
+export default NoChanges;

admin/src/containers/App/index.js → admin/src/containers/App/index.jsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { Provider } from 'react-redux';
-import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { Page } from '@strapi/strapi/admin';
 
 import pluginPermissions from '../../permissions';
 import Header from '../../components/Header';
@@ -16,12 +16,12 @@ import ConfigPage from '../ConfigPage';
 
 const App = () => {
   return (
-    <CheckPagePermissions permissions={pluginPermissions.settings}>
+    <Page.Protect permissions={pluginPermissions.settings}>
       <Provider store={store}>
         <Header />
         <ConfigPage />
       </Provider>
-    </CheckPagePermissions>
+    </Page.Protect>
   );
 };
 

admin/src/containers/ConfigPage/index.js → admin/src/containers/ConfigPage/index.jsx

@@ -3,30 +3,34 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Map } from 'immutable';
 import {
   Box,
-  ContentLayout,
   Alert,
   Typography,
 } from '@strapi/design-system';
-import { useNotification } from '@strapi/helper-plugin';
+import { useNotification } from '@strapi/strapi/admin';
+import { getFetchClient, Layouts } from '@strapi/admin/strapi-admin';
+import { useIntl } from 'react-intl';
 
 import { getAllConfigDiff, getAppEnv } from '../../state/actions/Config';
 import ConfigList from '../../components/ConfigList';
 import ActionButtons from '../../components/ActionButtons';
 
 const ConfigPage = () => {
-  const toggleNotification = useNotification();
+  const { toggleNotification } = useNotification();
+  const { get } = getFetchClient();
+  const { formatMessage } = useIntl();
+
   const dispatch = useDispatch();
   const isLoading = useSelector((state) => state.getIn(['config', 'isLoading'], Map({})));
   const configDiff = useSelector((state) => state.getIn(['config', 'configDiff'], Map({})));
   const appEnv = useSelector((state) => state.getIn(['config', 'appEnv', 'env']));
 
   useEffect(() => {
-    dispatch(getAllConfigDiff(toggleNotification));
-    dispatch(getAppEnv(toggleNotification));
+    dispatch(getAllConfigDiff(toggleNotification, formatMessage, get));
+    dispatch(getAppEnv(toggleNotification, formatMessage, get));
   }, []);
 
   return (
-    <ContentLayout paddingBottom={8}>
+    <Layouts.Content paddingBottom={8}>
       {appEnv === 'production' && (
         <Box paddingBottom={4}>
           <Alert variant="danger">
@@ -38,7 +42,7 @@ const ConfigPage = () => {
       )}
       <ActionButtons />
       <ConfigList isLoading={isLoading} diff={configDiff.toJS()} />
-    </ContentLayout>
+    </Layouts.Content>
   );
 };
 

admin/src/helpers/pluginId.js

@@ -1,8 +1,8 @@
-const pluginPkg = require('../../../package.json');
+import pluginPkg from '../../../package.json';
 
 const pluginId = pluginPkg.name.replace(
   /^strapi-plugin-/i,
   '',
 );
 
-module.exports = pluginId;
+export default pluginId;

admin/src/helpers/prefixPluginTranslations.js

@@ -0,0 +1,11 @@
+const prefixPluginTranslations = (trad, pluginId) => {
+  if (!pluginId) {
+    throw new TypeError("pluginId can't be empty");
+  }
+  return Object.keys(trad).reduce((acc, current) => {
+    acc[`${pluginId}.${current}`] = trad[current];
+    return acc;
+  }, {});
+};
+
+export { prefixPluginTranslations };