feat: initial v5 migration

admin/src/components/ActionButtons/index.jsx

@@ -4,7 +4,7 @@ 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 { useNotification } from '@strapi/strapi/admin';
 import { useIntl } from 'react-intl';
 
 import ConfirmModal from '../ConfirmModal';

admin/src/components/FirstExport/index.jsx

@@ -1,8 +1,8 @@
 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 { useNotification } from '@strapi/strapi/admin';
+import { Button, EmptyStateLayout } from '@strapi/design-system';
 
 import { exportAllConfig } from '../../state/actions/Config';
 import ConfirmModal from '../ConfirmModal';
@@ -21,7 +21,7 @@ const FirstExport = () => {
         type="export"
         onSubmit={() => dispatch(exportAllConfig([], toggleNotification))}
       />
-      <NoContent
+      <EmptyStateLayout
         content={{
           id: 'emptyState',
           defaultMessage:

admin/src/components/NoChanges/index.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { NoContent } from '@strapi/helper-plugin';
+import { EmptyStateLayout } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 const NoChanges = () => {
   const { formatMessage } = useIntl();
   return (
-    <NoContent
+    <EmptyStateLayout
       content={{
         id: 'emptyState',
         defaultMessage:

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.jsx

@@ -7,7 +7,7 @@ import {
   Alert,
   Typography,
 } from '@strapi/design-system';
-import { useNotification } from '@strapi/helper-plugin';
+import { useNotification } from '@strapi/strapi/admin';
 
 import { getAllConfigDiff, getAppEnv } from '../../state/actions/Config';
 import ConfigList from '../../components/ConfigList';

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,13 +4,14 @@
  *
  */
 
-import { request } from '@strapi/helper-plugin';
+import { useFetchClient } from '@strapi/admin/strapi-admin';
 
 export function getAllConfigDiff(toggleNotification) {
   return async function(dispatch) {
+    const { get } = useFetchClient();
     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(setLoadingState(false));
@@ -39,13 +40,11 @@ export function setConfigPartialDiffInState(config) {
 
 export function exportAllConfig(partialDiff, toggleNotification) {
   return async function(dispatch) {
+    const { post } = useFetchClient();
     dispatch(setLoadingState(true));
     try {
-      const { message } = await request('/config-sync/export', {
-        method: 'POST',
-        body: partialDiff,
-      });
-      toggleNotification({ type: 'success', message });
+      const response = await post('/config-sync/export', partialDiff);
+      toggleNotification({ type: 'success', response });
       dispatch(getAllConfigDiff(toggleNotification));
       dispatch(setLoadingState(false));
     } catch (err) {
@@ -57,16 +56,14 @@ export function exportAllConfig(partialDiff, toggleNotification) {
 
 export function importAllConfig(partialDiff, force, toggleNotification) {
   return async function(dispatch) {
+    const { post } = useFetchClient();
     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 });
+      toggleNotification({ type: 'success', response });
       dispatch(getAllConfigDiff(toggleNotification));
       dispatch(setLoadingState(false));
     } catch (err) {
@@ -86,10 +83,9 @@ export function setLoadingState(value) {
 
 export function getAppEnv(toggleNotification) {
   return async function(dispatch) {
+    const { get } = useFetchClient();
     try {
-      const envVars = await request('/config-sync/app-env', {
-        method: 'GET',
-      });
+      const envVars = await get('/config-sync/app-env');
       dispatch(setAppEnvInState(envVars));
     } catch (err) {
       toggleNotification({ type: 'warning', message: { id: 'notification.error' } });

package.json

@@ -57,10 +57,9 @@
     "@strapi/strapi": "^4.0.0"
   },
   "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.0",
     "babel-eslint": "9.0.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -78,7 +77,7 @@
     "jest-styled-components": "^7.0.2",
     "lodash": "^4.17.11",
     "react": "^17.0.2",
-    "react-intl": "^5.20.12",
+    "react-intl": "6.6.2",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
     "styled-components": "^5.2.3"

strapi-admin.js

@@ -1,3 +1,3 @@
-'use strict';
+import admin from './admin/src';
 
-module.exports = require('./admin/src').default;
+export default admin;