Merge pull request #126 from pluginpal/feature/migrate-v5

feat: initial v5 migration

.eslintrc

@@ -26,6 +26,13 @@
     "strapi": true
   },
   "rules": {
+    "import/no-unresolved": [2, {
+      "ignore": [
+        "@strapi/strapi/admin",
+        "@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/FirstExport/index.js → admin/src/components/FirstExport/index.jsx

@@ -1,14 +1,16 @@
 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';
 
 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 +21,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/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';
+
+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

@@ -7,22 +7,27 @@ import {
   Alert,
   Typography,
 } from '@strapi/design-system';
-import { useNotification } from '@strapi/helper-plugin';
+import { useNotification } from '@strapi/strapi/admin';
+import { getFetchClient } 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 (

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 };

admin/src/index.js

@@ -1,6 +1,6 @@
-import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './helpers/pluginId';
+import { prefixPluginTranslations } from './helpers/prefixPluginTranslations';
 import pluginPermissions from './permissions';
 // import pluginIcon from './components/PluginIcon';
 // import getTrad from './helpers/getTrad';

admin/src/state/actions/Config.js

@@ -4,18 +4,16 @@
  *
  */
 
-import { request } from '@strapi/helper-plugin';
-
-export function getAllConfigDiff(toggleNotification) {
+export function getAllConfigDiff(toggleNotification, formatMessage, get) {
   return async function(dispatch) {
     dispatch(setLoadingState(true));
     try {
-      const configDiff = await request('/config-sync/diff', { method: 'GET' });
+      const configDiff = await get('/config-sync/diff');
       dispatch(setConfigPartialDiffInState([]));
-      dispatch(setConfigDiffInState(configDiff));
+      dispatch(setConfigDiffInState(configDiff.data));
       dispatch(setLoadingState(false));
     } catch (err) {
-      toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
+      toggleNotification({ type: 'warning', message: formatMessage({ id: 'notification.error' }) });
       dispatch(setLoadingState(false));
     }
   };
@@ -37,40 +35,34 @@ export function setConfigPartialDiffInState(config) {
   };
 }
 
-export function exportAllConfig(partialDiff, toggleNotification) {
+export function exportAllConfig(partialDiff, toggleNotification, formatMessage, post, get) {
   return async function(dispatch) {
     dispatch(setLoadingState(true));
     try {
-      const { message } = await request('/config-sync/export', {
-        method: 'POST',
-        body: partialDiff,
-      });
-      toggleNotification({ type: 'success', message });
-      dispatch(getAllConfigDiff(toggleNotification));
+      const response = await post('/config-sync/export', partialDiff);
+      toggleNotification({ type: 'success', message: response.data.message });
+      dispatch(getAllConfigDiff(toggleNotification, formatMessage, get));
       dispatch(setLoadingState(false));
     } catch (err) {
-      toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
+      toggleNotification({ type: 'warning', message: formatMessage({ id: 'notification.error' }) });
       dispatch(setLoadingState(false));
     }
   };
 }
 
-export function importAllConfig(partialDiff, force, toggleNotification) {
+export function importAllConfig(partialDiff, force, toggleNotification, formatMessage, post, get) {
   return async function(dispatch) {
     dispatch(setLoadingState(true));
     try {
-      const { message } = await request('/config-sync/import', {
-        method: 'POST',
-        body: {
-          force,
-          config: partialDiff,
-        },
+      const response = await post('/config-sync/import', {
+        force,
+        config: partialDiff,
       });
-      toggleNotification({ type: 'success', message });
-      dispatch(getAllConfigDiff(toggleNotification));
+      toggleNotification({ type: 'success', message: response.data.message });
+      dispatch(getAllConfigDiff(toggleNotification, formatMessage, get));
       dispatch(setLoadingState(false));
     } catch (err) {
-      toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
+      toggleNotification({ type: 'warning', message: formatMessage({ id: 'notification.error' }) });
       dispatch(setLoadingState(false));
     }
   };
@@ -84,15 +76,13 @@ export function setLoadingState(value) {
   };
 }
 
-export function getAppEnv(toggleNotification) {
+export function getAppEnv(toggleNotification, formatMessage, get) {
   return async function(dispatch) {
     try {
-      const envVars = await request('/config-sync/app-env', {
-        method: 'GET',
-      });
-      dispatch(setAppEnvInState(envVars));
+      const envVars = await get('/config-sync/app-env');
+      dispatch(setAppEnvInState(envVars.data));
     } catch (err) {
-      toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
+      toggleNotification({ type: 'warning', message: formatMessage({ id: 'notification.error' }) });
     }
   };
 }

package.json

@@ -32,6 +32,7 @@
     "inquirer": "^8.2.0",
     "react-diff-viewer-continued": "3.2.6",
     "redux-immutable": "^4.0.0",
+    "react-intl": "6.6.2",
     "redux-thunk": "^2.3.0"
   },
   "author": {
@@ -54,13 +55,13 @@
     "strapi-server.js"
   ],
   "peerDependencies": {
-    "@strapi/strapi": "^4.0.0"
+    "@strapi/strapi": "^5.0.0-beta.2"
   },
   "devDependencies": {
-    "@strapi/design-system": "^1.14.1",
-    "@strapi/helper-plugin": "^4.19.0",
-    "@strapi/icons": "^1.14.1",
-    "@strapi/utils": "^4.19.0",
+    "@strapi/design-system": "^1.16.0",
+    "@strapi/icons": "^1.16.0",
+    "@strapi/utils": "5.0.0-beta.2",
+    "@strapi/strapi": "5.0.0-beta.2",
     "babel-eslint": "9.0.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -78,7 +79,6 @@
     "jest-styled-components": "^7.0.2",
     "lodash": "^4.17.11",
     "react": "^17.0.2",
-    "react-intl": "^5.20.12",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
     "styled-components": "^5.2.3"

playground/.env

@@ -1,7 +1,10 @@
 HOST=0.0.0.0
 PORT=1337
-APP_KEYS=SIwLyqu+IpSHIuUBDQfPZg==,Nzqbq2C3ATsR19u5XEAJQA==,/Agk5Sn8M4EzfoSiIHcDlQ==,gSxT2T0k2zbQatKXUV0zCA==
-API_TOKEN_SALT=reQcUBbGXD2KWG2QpRn7DA==
-ADMIN_JWT_SECRET= 69mzgwRGfEBUhPEaas8EBA==
-TRANSFER_TOKEN_SALT=/LTsSGpC5afHICjZu0oEuQ==
-JWT_SECRET=E0TTVdsr+M/FXAjfrNIgXA==
+APP_KEYS=ujfpKPEst1tv0WDxJEhjJw==,MOnFjWYKbWYmtrBZ3cQTFQ==,zQpX70tJw/Mw+Y656kXfVA==,xJT1vbsiz3cgabfgpLu72w==
+API_TOKEN_SALT=5FoJkYoZV8IA6+NnZJDzng==
+ADMIN_JWT_SECRET=tkeg3+HqE+QmTd2ITEivtA==
+TRANSFER_TOKEN_SALT=UUMCRQ2cx9qvKw/RkB815Q==
+# Database
+DATABASE_CLIENT=sqlite
+DATABASE_FILENAME=.tmp/data.db
+JWT_SECRET=Dn/nUGQsREUw4/lfQYOScw==

playground/.env.example

@@ -1,2 +1,7 @@
 HOST=0.0.0.0
 PORT=1337
+APP_KEYS="toBeModified1,toBeModified2"
+API_TOKEN_SALT=tobemodified
+ADMIN_JWT_SECRET=tobemodified
+TRANSFER_TOKEN_SALT=tobemodified
+JWT_SECRET=tobemodified

playground/.strapi/client/app.js

@@ -0,0 +1,14 @@
+/**
+ * This file was automatically generated by Strapi.
+ * Any modifications made will be discarded.
+ */
+import usersPermissions from "@strapi/plugin-users-permissions/strapi-admin";
+import strapiCloud from "@strapi/plugin-cloud/strapi-admin";
+import { renderAdmin } from "@strapi/strapi/admin";
+
+renderAdmin(document.getElementById("strapi"), {
+  plugins: {
+    "users-permissions": usersPermissions,
+    "strapi-cloud": strapiCloud,
+  },
+});