Strapi v5 compatibility (#59)

* strapi v5 compatibility

* refactor: changed from commonjs to module

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 node_modules
 .idea
+dist

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

@@ -5,7 +5,6 @@
  */
 
 import { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
 import pluginId from '../../pluginId';
 
 const Initializer = ({ setPlugin }) => {
@@ -19,8 +18,4 @@ const Initializer = ({ setPlugin }) => {
   return null;
 };
 
-Initializer.propTypes = {
-  setPlugin: PropTypes.func.isRequired,
-};
-
 export default Initializer;

admin/src/index.js

@@ -1,4 +1,4 @@
-import {prefixPluginTranslations} from '@strapi/helper-plugin';
+import { getTranslation } from './utils/getTranslation';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 import Initializer from './components/Initializer';
@@ -9,7 +9,7 @@ const name = pluginPkg.strapi.displayName;
 export default {
   register(app) {
     app.addMenuLink({
-      to: `/plugins/${pluginId}`,
+      to: `/plugins/${PluginIcon}`,
       icon: PluginIcon,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
@@ -35,7 +35,7 @@ export default {
         return import(`./translations/${locale}.json`)
           .then(({ default: data }) => {
             return {
-              data: prefixPluginTranslations(data, pluginId),
+              data: getTranslation(data),
               locale,
             };
           })

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

@@ -6,16 +6,17 @@
  */
 
 import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import pluginId from '../../pluginId';
+import { Routes, Route } from 'react-router-dom';
+import { Page } from '@strapi/strapi/admin';
 import HomePage from '../HomePage';
 
 const App = () => {
   return (
     <div>
-      <Switch>
-        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
-      </Switch>
+      <Routes>
+          <Route index element={<HomePage />} />
+          <Route path="*" element={<Page.Error />} />
+      </Routes>
     </div>
   );
 };

admin/src/pages/HomePage/index.js → admin/src/pages/HomePage/index.jsx

@@ -3,20 +3,17 @@ import {
   Alert,
   Button,
   Checkbox,
-  HeaderLayout,
   Box,
-  BaseCheckbox,
   Table,
   Thead,
   Tbody,
   Tr,
   Td,
   Th
 } from '@strapi/design-system';
-import {CheckPermissions} from '@strapi/helper-plugin';
+import { Page, Layouts } from '@strapi/strapi/admin';
 import {useIntl} from 'react-intl';
-import {Helmet} from 'react-helmet';
-import axios from '../../utils/axiosInstance'
+import { useFetchClient } from '@strapi/strapi/admin';
 import styled from 'styled-components'
 import getTrad from "../../utils/getTrad";
 
@@ -48,12 +45,14 @@ const HomePage = () => {
   const [showSuccess, setSuccess] = useState(false)
   const [showError, setError] = useState(false)
 
+  const { get, put } = useFetchClient();
+
   useEffect( () => {
     const init = async () => {
-      const ssoRoleResponse = await axios.get(`/strapi-plugin-sso/sso-roles`)
+      const ssoRoleResponse = await get(`/strapi-plugin-sso/sso-roles`)
       setSSORoles(ssoRoleResponse.data)
 
-      const roleResponse = await axios.get(`/admin/roles`)
+      const roleResponse = await get(`/admin/roles`)
       setRoles(roleResponse.data.data)
     }
     init()
@@ -77,7 +76,7 @@ const HomePage = () => {
   }
   const onClickSave = async () => {
     try {
-      await axios.put('/strapi-plugin-sso/sso-roles', {
+      await put('/strapi-plugin-sso/sso-roles', {
         roles: ssoRoles.map(role => ({
           'oauth_type': role['oauth_type'], role: role['role']
         }))
@@ -96,9 +95,8 @@ const HomePage = () => {
   }
 
   return (
-    <CheckPermissions permissions={[{action: 'plugin::strapi-plugin-sso.read', subject: null}]}>
-      <Helmet title={'Single Sign On'}/>
-      <HeaderLayout
+    <Page.Protect permissions={[{action: 'plugin::strapi-plugin-sso.read', subject: null}]}>
+      <Layouts.Header
         title={'Single Sign On'}
         subtitle={formatMessage({
           id: getTrad('page.title'),
@@ -145,7 +143,7 @@ const HomePage = () => {
             <Tr>
               <Th>
                 {/* Not required, but if it doesn't exist, it's an error. */}
-                <BaseCheckbox style={{display: 'none'}}/>
+                <Checkbox style={{display: 'none'}}/>
               </Th>
               {
                 roles.map(role => (
@@ -165,8 +163,8 @@ const HomePage = () => {
                     roles.map((role) => (
                       <Th key={role['id']}>
                         <Checkbox
-                          value={ssoRole['role'] && ssoRole['role'].includes(role['id'])}
-                          onValueChange={(value) => {
+                          checked={ssoRole['role'] && ssoRole['role'].includes(role['id'])}
+                          onCheckedChange={(value) => {
                             onChangeCheck(value, ssoRole['oauth_type'], role['id'])
                           }}
                         >{''}</Checkbox>
@@ -189,7 +187,7 @@ const HomePage = () => {
           })}</Button>
         </ButtonWrapper>
       </Box>
-    </CheckPermissions>
+    </Page.Protect>
   );
 }
 

admin/src/pluginId.js

@@ -1,5 +1,5 @@
-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/utils/getTranslation.js

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getTranslation = (id) => `${pluginId}.${id}`;
+
+export { getTranslation };

eslint.config.mjs

@@ -0,0 +1,27 @@
+import globals from "globals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [...compat.extends("eslint:recommended"), {
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+            ...globals.commonjs,
+        },
+
+        ecmaVersion: "latest",
+        sourceType: "script",
+    },
+
+    rules: {},
+}];