Merge pull request #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.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.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.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.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.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.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.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.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { NoContent } from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-
-const NoChanges = () => {
-  const { formatMessage } = useIntl();
-  return (
-    <NoContent
-      content={{
-        id: 'emptyState',
-        defaultMessage:
-          formatMessage({ id: 'config-sync.NoChanges.Message' }),
-      }}
-    />
-  );
-};
-
-export default NoChanges;

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

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

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

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-config-sync",
-  "version": "1.2.5",
+  "version": "2.0.0-beta.4",
   "description": "Migrate your config data across environments using the CLI or Strapi admin panel.",
   "strapi": {
     "displayName": "Config Sync",
@@ -31,6 +31,7 @@
     "immutable": "^3.8.2",
     "inquirer": "^8.2.0",
     "react-diff-viewer-continued": "3.2.6",
+    "react-intl": "6.6.2",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.3.0"
   },
@@ -54,13 +55,13 @@
     "strapi-server.js"
   ],
   "peerDependencies": {
-    "@strapi/strapi": "^4.0.0"
+    "@strapi/strapi": "^5.0.0-rc.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": "2.0.0-rc.7",
+    "@strapi/icons": "2.0.0-rc.7",
+    "@strapi/strapi": "5.0.0-rc.2",
+    "@strapi/utils": "5.0.0-rc.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

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

playground/.strapi/client/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <!--
 This file was automatically generated by Strapi.
@@ -58,5 +58,6 @@ Any modifications made will be discarded.
         </div>
       </div></noscript
     >
+    <script type="module" src="/.strapi/client/app.js"></script>
   </body>
 </html>

playground/README.md

@@ -1,3 +1,57 @@
-# Strapi application
+# 🚀 Getting started with Strapi
 
-A quick description of your strapi application
+Strapi comes with a full featured [Command Line Interface](https://docs.strapi.io/dev-docs/cli) (CLI) which lets you scaffold and manage your project in seconds.
+
+### `develop`
+
+Start your Strapi application with autoReload enabled. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-develop)
+
+```
+npm run develop
+# or
+yarn develop
+```
+
+### `start`
+
+Start your Strapi application with autoReload disabled. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-start)
+
+```
+npm run start
+# or
+yarn start
+```
+
+### `build`
+
+Build your admin panel. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-build)
+
+```
+npm run build
+# or
+yarn build
+```
+
+## ⚙️ Deployment
+
+Strapi gives you many possible deployment options for your project including [Strapi Cloud](https://cloud.strapi.io). Browse the [deployment section of the documentation](https://docs.strapi.io/dev-docs/deployment) to find the best solution for your use case.
+
+## 📚 Learn more
+
+- [Resource center](https://strapi.io/resource-center) - Strapi resource center.
+- [Strapi documentation](https://docs.strapi.io) - Official Strapi documentation.
+- [Strapi tutorials](https://strapi.io/tutorials) - List of tutorials made by the core team and the community.
+- [Strapi blog](https://strapi.io/blog) - Official Strapi blog containing articles made by the Strapi team and the community.
+- [Changelog](https://strapi.io/changelog) - Find out about the Strapi product updates, new features and general improvements.
+
+Feel free to check out the [Strapi GitHub repository](https://github.com/strapi/strapi). Your feedback and contributions are welcome!
+
+## ✨ Community
+
+- [Discord](https://discord.strapi.io) - Come chat with the Strapi community including the core team.
+- [Forum](https://forum.strapi.io/) - Place to discuss, ask questions and find answers, show your Strapi project and get feedback or just talk with other Community members.
+- [Awesome Strapi](https://github.com/strapi/awesome-strapi) - A curated list of awesome things related to Strapi.
+
+---
+
+<sub>🤫 Psst! [Strapi is hiring](https://strapi.io/careers).</sub>

playground/__tests__/helpers.js

@@ -1,11 +1,12 @@
 const fs = require('fs');
-const Strapi = require('@strapi/strapi');
+const { createStrapi, compileStrapi } = require('@strapi/strapi');
 
 let instance;
 
 async function setupStrapi() {
   if (!instance) {
-    await Strapi().load();
+    const appContext = await compileStrapi();
+    await createStrapi(appContext).load();
     instance = strapi;
 
     await instance.server.mount();

playground/config/admin.js

@@ -1,10 +1,7 @@
 module.exports = ({ env }) => ({
   auth: {
-    secret: env('ADMIN_JWT_SECRET', 'c27c3833823a12b0761e32b22dc0113a'),
+    secret: env('ADMIN_JWT_SECRET'),
   },
-  watchIgnoreFiles: [
-    '**/config/sync/**',
-  ],
   apiToken: {
     salt: env('API_TOKEN_SALT'),
   },
@@ -13,4 +10,8 @@ module.exports = ({ env }) => ({
       salt: env('TRANSFER_TOKEN_SALT'),
     },
   },
+  flags: {
+    nps: env.bool('FLAG_NPS', true),
+    promoteEE: env.bool('FLAG_PROMOTE_EE', true),
+  },
 });

playground/config/middlewares.js

@@ -1,11 +1,12 @@
 module.exports = [
+  'strapi::logger',
   'strapi::errors',
   'strapi::security',
   'strapi::cors',
   'strapi::poweredBy',
-  'strapi::logger',
   'strapi::query',
   'strapi::body',
+  'strapi::session',
   'strapi::favicon',
   'strapi::public',
 ];

playground/config/server.js

@@ -1,4 +1,10 @@
 module.exports = ({ env }) => ({
   host: env('HOST', '0.0.0.0'),
   port: env.int('PORT', 1337),
+  app: {
+    keys: env.array('APP_KEYS'),
+  },
+  webhooks: {
+    populateRelations: env.bool('WEBHOOKS_POPULATE_RELATIONS', false),
+  },
 });

playground/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "nodenext",
+    "target": "ES2021",
+    "checkJs": true,
+    "allowJs": true
+  }
+}

playground/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "playground",
+  "name": "strapi-5-beta",
   "private": true,
   "version": "0.1.0",
   "description": "A Strapi application",
@@ -16,24 +16,24 @@
     "supertest": "^6.3.3"
   },
   "dependencies": {
-    "@strapi/plugin-i18n": "^4.19.0",
-    "@strapi/plugin-users-permissions": "^4.19.0",
-    "@strapi/strapi": "^4.19.0",
-    "better-sqlite3": "^8.6.0",
+    "@strapi/strapi": "5.0.0-rc.2",
+    "@strapi/plugin-users-permissions": "5.0.0-rc.2",
+    "@strapi/plugin-cloud": "5.0.0-rc.2",
+    "better-sqlite3": "9.4.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.0.0",
     "strapi-plugin-config-sync": "./..",
-    "styled-components": "^5.2.1"
+    "styled-components": "^6.0.0"
   },
   "author": {
     "name": "A Strapi developer"
   },
   "strapi": {
-    "uuid": "2e84e366-1e09-43c2-a99f-a0d0acbc2ca5"
+    "uuid": "edadddbd-0f25-4da7-833b-d4cd7dcae2fc"
   },
   "engines": {
-    "node": ">=18.x.x <=20.x.x",
+    "node": ">=18.0.0 <=20.x.x",
     "npm": ">=6.0.0"
   },
   "license": "MIT"

playground/types/generated/components.d.ts

@@ -1,5 +1,5 @@
-import type { Schema, Attribute } from '@strapi/strapi';
+import type { Struct, Schema } from '@strapi/strapi';
 
-declare module '@strapi/types' {
-  export module Shared {}
+declare module '@strapi/strapi' {
+  export module Public {}
 }

server/bootstrap.js

@@ -23,21 +23,21 @@ module.exports = async () => {
 
     // The default types provided by the plugin.
     defaultTypes(strapi).map((type) => {
-      if (!strapi.config.get('plugin.config-sync.excludedTypes').includes(type.configName)) {
+      if (!strapi.config.get('plugin::config-sync.excludedTypes').includes(type.configName)) {
         types[type.configName] = new ConfigType(type);
       }
     });
 
     // The types provided by other plugins.
     strapi.plugin('config-sync').pluginTypes.map((type) => {
-      if (!strapi.config.get('plugin.config-sync.excludedTypes').includes(type.configName)) {
+      if (!strapi.config.get('plugin::config-sync.excludedTypes').includes(type.configName)) {
         types[type.configName] = new ConfigType(type);
       }
     });
 
     // The custom types provided by the user.
-    strapi.config.get('plugin.config-sync.customTypes').map((type) => {
-      if (!strapi.config.get('plugin.config-sync.excludedTypes').includes(type.configName)) {
+    strapi.config.get('plugin::config-sync.customTypes').map((type) => {
+      if (!strapi.config.get('plugin::config-sync.excludedTypes').includes(type.configName)) {
         types[type.configName] = new ConfigType(type);
       }
     });
@@ -47,12 +47,12 @@ module.exports = async () => {
   strapi.plugin('config-sync').types = registerTypes();
 
   // Import on bootstrap.
-  if (strapi.config.get('plugin.config-sync.importOnBootstrap')) {
+  if (strapi.config.get('plugin::config-sync.importOnBootstrap')) {
     if (strapi.server.app.env === 'development') {
       strapi.log.warn(logMessage(`You can't use the 'importOnBootstrap' setting in the development env.`));
     } else if (process.env.CONFIG_SYNC_CLI === 'true') {
       strapi.log.warn(logMessage(`The 'importOnBootstrap' setting was ignored because Strapi was started from the config-sync CLI itself.`));
-    } else if (fs.existsSync(strapi.config.get('plugin.config-sync.syncDir'))) {
+    } else if (fs.existsSync(strapi.config.get('plugin::config-sync.syncDir'))) {
       await strapi.plugin('config-sync').service('main').importAllConfig();
     }
   }

server/cli.js

@@ -6,7 +6,7 @@ const Table = require('cli-table');
 const chalk = require('chalk');
 const inquirer = require('inquirer');
 const { isEmpty } = require('lodash');
-const strapi = require('@strapi/strapi'); // eslint-disable-line
+const { createStrapi, compileStrapi } = require('@strapi/strapi');
 const gitDiff = require('git-diff');
 
 const warnings = require('./warnings');
@@ -15,33 +15,11 @@ const packageJSON = require('../package.json');
 const program = new Command();
 
 const getStrapiApp = async () => {
-  process.env.CONFIG_SYNC_CLI = true;
+  process.env.CONFIG_SYNC_CLI = 'true';
 
-  try {
-    const tsUtils = require('@strapi/typescript-utils'); // eslint-disable-line
-
-    const appDir = process.cwd();
-    const isTSProject = await tsUtils.isUsingTypeScript(appDir);
-    const outDir = await tsUtils.resolveOutDir(appDir);
-    const alreadyCompiled = await fs.existsSync(outDir);
-
-    if (isTSProject && !alreadyCompiled) {
-      await tsUtils.compile(appDir, {
-        watch: false,
-        configOptions: { options: { incremental: true } },
-      });
-    }
-
-    const distDir = isTSProject ? outDir : appDir;
-
-    const app = await strapi({ appDir, distDir }).load();
-
-    return app;
-  } catch (e) {
-    // Fallback for pre Strapi 4.2.
-    const app = await strapi().load();
-    return app;
-  }
+  const appContext = await compileStrapi();
+  const app = await createStrapi(appContext).load();
+  return app;
 };
 
 const initTable = (head) => {
@@ -100,7 +78,7 @@ const getConfigState = (diff, configName, syncType) => {
 
 const handleAction = async (syncType, skipConfirm, configType, partials, force) => {
   const app = await getStrapiApp();
-  const hasSyncDir = fs.existsSync(app.config.get('plugin.config-sync.syncDir'));
+  const hasSyncDir = fs.existsSync(app.config.get('plugin::config-sync.syncDir'));
 
   // No import with empty sync dir.
   if (!hasSyncDir && syncType === 'import') {

server/config/type.js

@@ -39,10 +39,10 @@ const ConfigType = class ConfigType {
    */
   importSingle = async (configName, configContent, force) => {
     // Check if the config should be excluded.
-    const shouldExclude = !isEmpty(strapi.config.get('plugin.config-sync.excludedConfig').filter((option) => `${this.configPrefix}.${configName}`.startsWith(option)));
+    const shouldExclude = !isEmpty(strapi.config.get('plugin::config-sync.excludedConfig').filter((option) => `${this.configPrefix}.${configName}`.startsWith(option)));
     if (shouldExclude) return;
 
-    const softImport = strapi.config.get('plugin.config-sync.soft');
+    const softImport = strapi.config.get('plugin::config-sync.soft');
     const queryAPI = strapi.query(this.queryString);
     const uidParams = getUidParamsFromName(this.uidKeys, configName);
     const combinedUidWhereFilter = getCombinedUidWhereFilter(this.uidKeys, uidParams);
@@ -177,7 +177,7 @@ const ConfigType = class ConfigType {
     const formattedDiff = await strapi.plugin('config-sync').service('main').getFormattedDiff(this.configPrefix);
 
     // Check if the config should be excluded.
-    const shouldExclude = !isEmpty(strapi.config.get('plugin.config-sync.excludedConfig').filter((option) => configName.startsWith(option)));
+    const shouldExclude = !isEmpty(strapi.config.get('plugin::config-sync.excludedConfig').filter((option) => configName.startsWith(option)));
     if (shouldExclude) return;
 
     const currentConfig = formattedDiff.databaseConfig[configName];
@@ -214,7 +214,7 @@ const ConfigType = class ConfigType {
       }
 
       // Check if the config should be excluded.
-      const shouldExclude = !isEmpty(strapi.config.get('plugin.config-sync.excludedConfig').filter((option) => `${this.configPrefix}.${combinedUid}`.startsWith(option)));
+      const shouldExclude = !isEmpty(strapi.config.get('plugin::config-sync.excludedConfig').filter((option) => `${this.configPrefix}.${combinedUid}`.startsWith(option)));
       if (shouldExclude) return;
 
       const formattedConfig = { ...sanitizeConfig({ config, configName }) };

server/controllers/config.js

@@ -25,7 +25,7 @@ module.exports = {
 
 
     ctx.send({
-      message: `Config was successfully exported to ${strapi.config.get('plugin.config-sync.syncDir')}.`,
+      message: `Config was successfully exported to ${strapi.config.get('plugin::config-sync.syncDir')}.`,
     });
   },
 
@@ -37,7 +37,7 @@ module.exports = {
    */
   importAll: async (ctx) => {
     // Check for existance of the config file sync dir.
-    if (!fs.existsSync(strapi.config.get('plugin.config-sync.syncDir'))) {
+    if (!fs.existsSync(strapi.config.get('plugin::config-sync.syncDir'))) {
       ctx.send({
         message: 'No config files were found.',
       });
@@ -73,7 +73,7 @@ module.exports = {
    */
   getDiff: async (ctx) => {
     // Check for existance of the config file sync dir.
-    if (!fs.existsSync(strapi.config.get('plugin.config-sync.syncDir'))) {
+    if (!fs.existsSync(strapi.config.get('plugin::config-sync.syncDir'))) {
       ctx.send({
         message: 'No config files were found.',
       });
@@ -91,7 +91,7 @@ module.exports = {
   getAppEnv: async () => {
     return {
       env: strapi.server.app.env,
-      config: strapi.config.get('plugin.config-sync'),
+      config: strapi.config.get('plugin::config-sync'),
     };
   },
 };

server/services/main.js

@@ -21,23 +21,23 @@ module.exports = () => ({
    */
   writeConfigFile: async (configType, configName, fileContents) => {
     // Check if the config should be excluded.
-    const shouldExclude = !isEmpty(strapi.config.get('plugin.config-sync.excludedConfig').filter((option) => `${configType}.${configName}`.startsWith(option)));
+    const shouldExclude = !isEmpty(strapi.config.get('plugin::config-sync.excludedConfig').filter((option) => `${configType}.${configName}`.startsWith(option)));
     if (shouldExclude) return;
 
     // Replace reserved characters in filenames.
     configName = configName.replace(/:/g, "#").replace(/\//g, "$");
 
     // Check if the JSON content should be minified.
-    const json = !strapi.config.get('plugin.config-sync').minify
+    const json = !strapi.config.get('plugin::config-sync').minify
       ? JSON.stringify(fileContents, null, 2)
       : JSON.stringify(fileContents);
 
-    if (!fs.existsSync(strapi.config.get('plugin.config-sync.syncDir'))) {
-      fs.mkdirSync(strapi.config.get('plugin.config-sync.syncDir'), { recursive: true });
+    if (!fs.existsSync(strapi.config.get('plugin::config-sync.syncDir'))) {
+      fs.mkdirSync(strapi.config.get('plugin::config-sync.syncDir'), { recursive: true });
     }
 
     const writeFile = util.promisify(fs.writeFile);
-    await writeFile(`${strapi.config.get('plugin.config-sync.syncDir')}${configType}.${configName}.json`, json)
+    await writeFile(`${strapi.config.get('plugin::config-sync.syncDir')}${configType}.${configName}.json`, json)
       .then(() => {
         // @TODO:
         // Add logging for successfull config export.
@@ -56,13 +56,13 @@ module.exports = () => ({
    */
    deleteConfigFile: async (configName) => {
     // Check if the config should be excluded.
-    const shouldExclude = !isEmpty(strapi.config.get('plugin.config-sync.excludedConfig').filter((option) => configName.startsWith(option)));
+    const shouldExclude = !isEmpty(strapi.config.get('plugin::config-sync.excludedConfig').filter((option) => configName.startsWith(option)));
     if (shouldExclude) return;
 
     // Replace reserved characters in filenames.
     configName = configName.replace(/:/g, "#").replace(/\//g, "$");
 
-    fs.unlinkSync(`${strapi.config.get('plugin.config-sync.syncDir')}${configName}.json`);
+    fs.unlinkSync(`${strapi.config.get('plugin::config-sync.syncDir')}${configName}.json`);
   },
 
   /**
@@ -77,7 +77,7 @@ module.exports = () => ({
     configName = configName.replace(/:/g, "#").replace(/\//g, "$");
 
     const readFile = util.promisify(fs.readFile);
-    return readFile(`${strapi.config.get('plugin.config-sync.syncDir')}${configType}.${configName}.json`)
+    return readFile(`${strapi.config.get('plugin::config-sync.syncDir')}${configType}.${configName}.json`)
       .then((data) => {
         return JSON.parse(data);
       })
@@ -94,11 +94,11 @@ module.exports = () => ({
    * @returns {object} Object with key value pairs of configs.
    */
   getAllConfigFromFiles: async (configType = null) => {
-    if (!fs.existsSync(strapi.config.get('plugin.config-sync.syncDir'))) {
+    if (!fs.existsSync(strapi.config.get('plugin::config-sync.syncDir'))) {
       return {};
     }
 
-    const configFiles = fs.readdirSync(strapi.config.get('plugin.config-sync.syncDir'));
+    const configFiles = fs.readdirSync(strapi.config.get('plugin::config-sync.syncDir'));
 
     const getConfigs = async () => {
       const fileConfigs = {};
@@ -113,7 +113,7 @@ module.exports = () => ({
         if (
           configType && configType !== type
           || !strapi.plugin('config-sync').types[type]
-          || !isEmpty(strapi.config.get('plugin.config-sync.excludedConfig').filter((option) => `${type}.${name}`.startsWith(option)))
+          || !isEmpty(strapi.config.get('plugin::config-sync.excludedConfig').filter((option) => `${type}.${name}`.startsWith(option)))
         ) {
           return;
         }
@@ -219,7 +219,7 @@ module.exports = () => ({
    */
   importSingleConfig: async (configName, onSuccess, force) => {
     // Check if the config should be excluded.
-    const shouldExclude = !isEmpty(strapi.config.get('plugin.config-sync.excludedConfig').filter((option) => configName.startsWith(option)));
+    const shouldExclude = !isEmpty(strapi.config.get('plugin::config-sync.excludedConfig').filter((option) => configName.startsWith(option)));
     if (shouldExclude) return;
 
     const type = configName.split('.')[0]; // Grab the first part of the filename.
@@ -244,7 +244,7 @@ module.exports = () => ({
    */
    exportSingleConfig: async (configName, onSuccess) => {
      // Check if the config should be excluded.
-    const shouldExclude = !isEmpty(strapi.config.get('plugin.config-sync.excludedConfig').filter((option) => configName.startsWith(option)));
+    const shouldExclude = !isEmpty(strapi.config.get('plugin::config-sync.excludedConfig').filter((option) => configName.startsWith(option)));
     if (shouldExclude) return;
 
     const type = configName.split('.')[0]; // Grab the first part of the filename.

server/utils/index.js

@@ -56,6 +56,7 @@ const sanitizeConfig = ({
   delete config.id;
   delete config.updatedAt;
   delete config.createdAt;
+  delete config.publishedAt;
 
   if (relation) {
     const formattedRelations = [];
@@ -64,6 +65,7 @@ const sanitizeConfig = ({
       delete relationEntity._id;
       delete relationEntity.id;
       delete relationEntity.updatedAt;
+      delete config.publishedAt;
       delete relationEntity.createdAt;
       relationEntity = sortByKeys(relationEntity);
 

strapi-admin.js

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