Merge pull request #17034 from strapi/chore/plugin-permissions

Chore: Move plugin permissions into constants

packages/core/content-type-builder/admin/src/constants.js

@@ -1,9 +1,7 @@
-const pluginPermissions = {
+export const PERMISSIONS = {
   // This permission regards the main component (App) and is used to tell
   // If the plugin link should be displayed in the menu
   // And also if the plugin is accessible. This use case is found when a user types the url of the
   // plugin directly in the browser
   main: [{ action: 'plugin::content-type-builder.read', subject: null }],
 };
-
-export default pluginPermissions;

packages/core/content-type-builder/admin/src/index.js

@@ -3,7 +3,7 @@ import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 
 import PluginIcon from './components/PluginIcon';
-import pluginPermissions from './permissions';
+import { PERMISSIONS } from './constants';
 import pluginId from './pluginId';
 import reducers from './reducers';
 import formsAPI from './utils/formAPI';
@@ -21,7 +21,7 @@ export default {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'Content Types Builder',
       },
-      permissions: pluginPermissions.main,
+      permissions: PERMISSIONS.main,
       async Component() {
         const component = await import(
           /* webpackChunkName: "content-type-builder" */ './pages/App'

packages/core/content-type-builder/admin/src/pages/App/index.js

@@ -15,7 +15,7 @@ import { Route, Switch } from 'react-router-dom';
 import ContentTypeBuilderNav from '../../components/ContentTypeBuilderNav';
 import DataManagerProvider from '../../components/DataManagerProvider';
 import FormModalNavigationProvider from '../../components/FormModalNavigationProvider';
-import pluginPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 import pluginId from '../../pluginId';
 import RecursivePath from '../RecursivePath';
 
@@ -39,7 +39,7 @@ const App = () => {
   }, []);
 
   return (
-    <CheckPagePermissions permissions={pluginPermissions.main}>
+    <CheckPagePermissions permissions={PERMISSIONS.main}>
       <Helmet title={title} />
       <FormModalNavigationProvider>
         <DataManagerProvider>

packages/core/email/admin/src/constants.js

@@ -1,9 +1,7 @@
-const pluginPermissions = {
+export const PERMISSIONS = {
   // This permission regards the main component (App) and is used to tell
   // If the plugin link should be displayed in the menu
   // And also if the plugin is accessible. This use case is found when a user types the url of the
   // plugin directly in the browser
   settings: [{ action: 'plugin::email.settings.read', subject: null }],
 };
-
-export default pluginPermissions;

packages/core/email/admin/src/index.js

@@ -9,7 +9,7 @@ import { prefixPluginTranslations } from '@strapi/helper-plugin';
 
 import pluginPkg from '../../package.json';
 
-import pluginPermissions from './permissions';
+import { PERMISSIONS } from './constants';
 import pluginId from './pluginId';
 import getTrad from './utils/getTrad';
 
@@ -38,7 +38,7 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.settings,
+          permissions: PERMISSIONS.settings,
         },
       ]
     );

packages/core/email/admin/src/pages/Settings/index.js

@@ -23,7 +23,7 @@ import {
 import { Envelop } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 
-import pluginPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 import getTrad from '../../utils/getTrad';
 import schema from '../../utils/schema';
 
@@ -32,7 +32,7 @@ import EmailHeader from './components/EmailHeader';
 import { fetchEmailSettings, postEmailTest } from './utils/api';
 
 const ProtectedSettingsPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.settings}>
+  <CheckPagePermissions permissions={PERMISSIONS.settings}>
     <SettingsPage />
   </CheckPagePermissions>
 );

packages/core/upload/admin/src/constants.js

@@ -174,3 +174,43 @@ export const localStorageKeys = {
   modalView: `STRAPI_UPLOAD_MODAL_VIEW`,
   view: `STRAPI_UPLOAD_LIBRARY_VIEW`,
 };
+
+export const PERMISSIONS = {
+  // This permission regards the main component (App) and is used to tell
+  // If the plugin link should be displayed in the menu
+  // And also if the plugin is accessible. This use case is found when a user types the url of the
+  // plugin directly in the browser
+  main: [
+    { action: 'plugin::upload.read', subject: null },
+    {
+      action: 'plugin::upload.assets.create',
+      subject: null,
+    },
+    {
+      action: 'plugin::upload.assets.update',
+      subject: null,
+    },
+  ],
+  copyLink: [
+    {
+      action: 'plugin::upload.assets.copy-link',
+      subject: null,
+    },
+  ],
+  create: [
+    {
+      action: 'plugin::upload.assets.create',
+      subject: null,
+    },
+  ],
+  download: [
+    {
+      action: 'plugin::upload.assets.download',
+      subject: null,
+    },
+  ],
+  read: [{ action: 'plugin::upload.read', subject: null }],
+  configureView: [{ action: 'plugin::upload.configure-view', subject: null }],
+  settings: [{ action: 'plugin::upload.settings.read', subject: null }],
+  update: [{ action: 'plugin::upload.assets.update', subject: null, fields: null }],
+};

packages/core/upload/admin/src/hooks/useMediaLibraryPermissions.js

@@ -3,10 +3,10 @@ import { useMemo } from 'react';
 import { useRBAC } from '@strapi/helper-plugin';
 import omit from 'lodash/omit';
 
-import pluginPermissions from '../permissions';
+import { PERMISSIONS } from '../constants';
 
 export const useMediaLibraryPermissions = () => {
-  const permissions = useMemo(() => omit(pluginPermissions, 'main'), []);
+  const permissions = useMemo(() => omit(PERMISSIONS, 'main'), []);
   const { allowedActions, isLoading } = useRBAC(permissions);
 
   return { ...allowedActions, isLoading };

packages/core/upload/admin/src/index.js

@@ -11,7 +11,7 @@ import pluginPkg from '../../package.json';
 import { MediaLibraryDialog } from './components/MediaLibraryDialog';
 import { MediaLibraryInput } from './components/MediaLibraryInput';
 import PluginIcon from './components/PluginIcon';
-import pluginPermissions from './permissions';
+import { PERMISSIONS } from './constants';
 import pluginId from './pluginId';
 import getTrad from './utils/getTrad';
 
@@ -26,7 +26,7 @@ export default {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'Media Library',
       },
-      permissions: pluginPermissions.main,
+      permissions: PERMISSIONS.main,
       async Component() {
         const component = await import(/* webpackChunkName: "upload" */ './pages/App');
 
@@ -57,7 +57,7 @@ export default {
 
         return component;
       },
-      permissions: pluginPermissions.settings,
+      permissions: PERMISSIONS.settings,
     });
   },
   async registerTrads({ locales }) {

packages/core/upload/admin/src/pages/App/MediaLibrary/index.js

@@ -45,12 +45,11 @@ import { PaginationFooter } from '../../../components/PaginationFooter';
 import SortPicker from '../../../components/SortPicker';
 import { TableList } from '../../../components/TableList';
 import { UploadAssetDialog } from '../../../components/UploadAssetDialog/UploadAssetDialog';
-import { localStorageKeys, viewOptions } from '../../../constants';
+import { localStorageKeys, PERMISSIONS, viewOptions } from '../../../constants';
 import { useAssets } from '../../../hooks/useAssets';
 import { useFolder } from '../../../hooks/useFolder';
 import { useFolders } from '../../../hooks/useFolders';
 import { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions';
-import pluginPermissions from '../../../permissions';
 import { containsAssetFilter, getBreadcrumbDataML, getFolderURL, getTrad } from '../../../utils';
 
 import { BulkActions } from './components/BulkActions';
@@ -257,7 +256,7 @@ export const MediaLibrary = () => {
           }
           endActions={
             <>
-              <CheckPermissions permissions={pluginPermissions.configureView}>
+              <CheckPermissions permissions={PERMISSIONS.configureView}>
                 <ActionContainer paddingTop={1} paddingBottom={1}>
                   <IconButton
                     forwardedAs={ReactRouterLink}

packages/core/upload/admin/src/pages/SettingsPage/index.js

@@ -27,7 +27,7 @@ import isEqual from 'lodash/isEqual';
 import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 
-import pluginPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 import { getRequestUrl, getTrad } from '../../utils';
 
 import init from './init';
@@ -275,7 +275,7 @@ export const SettingsPage = () => {
 };
 
 const ProtectedSettingsPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.settings}>
+  <CheckPagePermissions permissions={PERMISSIONS.settings}>
     <SettingsPage />
   </CheckPagePermissions>
 );

packages/core/upload/admin/src/permissions.js

@@ -1,41 +0,0 @@
-const pluginPermissions = {
-  // This permission regards the main component (App) and is used to tell
-  // If the plugin link should be displayed in the menu
-  // And also if the plugin is accessible. This use case is found when a user types the url of the
-  // plugin directly in the browser
-  main: [
-    { action: 'plugin::upload.read', subject: null },
-    {
-      action: 'plugin::upload.assets.create',
-      subject: null,
-    },
-    {
-      action: 'plugin::upload.assets.update',
-      subject: null,
-    },
-  ],
-  copyLink: [
-    {
-      action: 'plugin::upload.assets.copy-link',
-      subject: null,
-    },
-  ],
-  create: [
-    {
-      action: 'plugin::upload.assets.create',
-      subject: null,
-    },
-  ],
-  download: [
-    {
-      action: 'plugin::upload.assets.download',
-      subject: null,
-    },
-  ],
-  read: [{ action: 'plugin::upload.read', subject: null }],
-  configureView: [{ action: 'plugin::upload.configure-view', subject: null }],
-  settings: [{ action: 'plugin::upload.settings.read', subject: null }],
-  update: [{ action: 'plugin::upload.assets.update', subject: null, fields: null }],
-};
-
-export default pluginPermissions;

packages/plugins/documentation/admin/src/constants.js

@@ -1,4 +1,4 @@
-const pluginPermissions = {
+export const PERMISSIONS = {
   // This permission regards the main component (App) and is used to tell
   // If the plugin link should be displayed in the menu
   // And also if the plugin is accessible. This use case is found when a user types the url of the
@@ -15,5 +15,3 @@ const pluginPermissions = {
   regenerate: [{ action: 'plugin::documentation.settings.regenerate', subject: null }],
   update: [{ action: 'plugin::documentation.settings.update', subject: null }],
 };
-
-export default pluginPermissions;

packages/plugins/documentation/admin/src/index.js

@@ -9,7 +9,7 @@ import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 
 import PluginIcon from './components/PluginIcon';
-import pluginPermissions from './permissions';
+import { PERMISSIONS } from './constants';
 import pluginId from './pluginId';
 
 const name = pluginPkg.strapi.name;
@@ -23,7 +23,7 @@ export default {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'Documentation',
       },
-      permissions: pluginPermissions.main,
+      permissions: PERMISSIONS.main,
       async Component() {
         const component = await import(
           /* webpackChunkName: "documentation-page" */ './pages/PluginPage'
@@ -53,7 +53,7 @@ export default {
 
         return component;
       },
-      permissions: pluginPermissions.main,
+      permissions: PERMISSIONS.main,
     });
   },
   async registerTrads({ locales }) {

packages/plugins/documentation/admin/src/pages/PluginPage/index.js

@@ -37,7 +37,7 @@ import { Eye as Show, Refresh as Reload, Trash } from '@strapi/icons';
 import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 
-import permissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 import { getTrad } from '../../utils';
 import openWithNewTab from '../../utils/openWithNewTab';
 import useReactQuery from '../utils/useReactQuery';
@@ -107,7 +107,7 @@ const PluginPage = () => {
           })}
           primaryAction={
             //  eslint-disable-next-line
-            <CheckPermissions permissions={permissions.open}>
+            <CheckPermissions permissions={PERMISSIONS.open}>
               <Button onClick={() => openDocVersion(data?.currentVersion)} startIcon={<Show />}>
                 {formatMessage({
                   id: getTrad('pages.PluginPage.Button.open'),
@@ -166,7 +166,7 @@ const PluginPage = () => {
                               { target: `${doc.version}` }
                             )}
                           />
-                          <CheckPermissions permissions={permissions.regenerate}>
+                          <CheckPermissions permissions={PERMISSIONS.regenerate}>
                             <IconButton
                               onClick={() => handleRegenerateDoc(doc.version)}
                               noBorder
@@ -180,7 +180,7 @@ const PluginPage = () => {
                               )}
                             />
                           </CheckPermissions>
-                          <CheckPermissions permissions={permissions.update}>
+                          <CheckPermissions permissions={PERMISSIONS.update}>
                             {doc.version !== data.currentVersion && (
                               <IconButton
                                 onClick={() => handleClickDelete(doc.version)}

packages/plugins/documentation/admin/src/pages/SettingsPage/index.js

@@ -26,7 +26,7 @@ import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 
 import FieldActionWrapper from '../../components/FieldActionWrapper';
-import permissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 import { getTrad } from '../../utils';
 import schema from '../utils/schema';
 import useReactQuery from '../utils/useReactQuery';
@@ -70,7 +70,7 @@ const SettingsPage = () => {
                     defaultMessage: 'Configure the documentation plugin',
                   })}
                   primaryAction={
-                    <CheckPermissions permissions={permissions.update}>
+                    <CheckPermissions permissions={PERMISSIONS.update}>
                       <Button type="submit" startIcon={<Check />}>
                         {formatMessage({
                           id: getTrad('pages.SettingsPage.Button.save'),

packages/plugins/i18n/admin/src/constants.js

@@ -1,9 +1,7 @@
-const i18nPermissions = {
+export const PERMISSIONS = {
   accessMain: [{ action: 'plugin::i18n.locale.read', subject: null }],
   create: [{ action: 'plugin::i18n.locale.create', subject: null }],
   delete: [{ action: 'plugin::i18n.locale.delete', subject: null }],
   update: [{ action: 'plugin::i18n.locale.update', subject: null }],
   read: [{ action: 'plugin::i18n.locale.read', subject: null }],
 };
-
-export default i18nPermissions;

packages/plugins/i18n/admin/src/index.js

@@ -11,13 +11,13 @@ import PublishModalAdditionalInfos from './components/CMListViewInjectedComponen
 import UnpublishModalAdditionalInfos from './components/CMListViewInjectedComponents/UnpublishModalAdditionalInfos';
 import Initializer from './components/Initializer';
 import LocalePicker from './components/LocalePicker';
+import { PERMISSIONS } from './constants';
 import addColumnToTableHook from './contentManagerHooks/addColumnToTable';
 import addLocaleToCollectionTypesLinksHook from './contentManagerHooks/addLocaleToCollectionTypesLinks';
 import addLocaleToSingleTypesLinksHook from './contentManagerHooks/addLocaleToSingleTypesLinks';
 import mutateEditViewLayoutHook from './contentManagerHooks/mutateEditViewLayout';
 import i18nReducers from './hooks/reducers';
 import middlewares from './middlewares';
-import pluginPermissions from './permissions';
 import pluginId from './pluginId';
 import { getTrad } from './utils';
 import LOCALIZED_FIELDS from './utils/localizedFields';
@@ -68,7 +68,7 @@ export default {
 
         return component;
       },
-      permissions: pluginPermissions.accessMain,
+      permissions: PERMISSIONS.accessMain,
     });
 
     app.injectContentManagerComponent('editView', 'informations', {

packages/plugins/i18n/admin/src/pages/SettingsPage/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useRBAC } from '@strapi/helper-plugin';
 
-import i18nPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 
 import LocaleSettingsPage from './LocaleSettingsPage';
 
@@ -10,7 +10,7 @@ const ProtectedLocaleSettingsPage = () => {
   const {
     isLoading,
     allowedActions: { canRead, canUpdate, canCreate, canDelete },
-  } = useRBAC(i18nPermissions);
+  } = useRBAC(PERMISSIONS);
 
   if (isLoading) {
     return null;

packages/plugins/users-permissions/admin/src/constants.js

@@ -1,4 +1,4 @@
-const pluginPermissions = {
+export const PERMISSIONS = {
   // Roles
   accessRoles: [
     { action: 'plugin::users-permissions.roles.create', subject: null },
@@ -27,5 +27,3 @@ const pluginPermissions = {
   readProviders: [{ action: 'plugin::users-permissions.providers.read', subject: null }],
   updateProviders: [{ action: 'plugin::users-permissions.providers.update', subject: null }],
 };
-
-export default pluginPermissions;

packages/plugins/users-permissions/admin/src/index.js

@@ -8,7 +8,7 @@ import { prefixPluginTranslations } from '@strapi/helper-plugin';
 
 import pluginPkg from '../../package.json';
 
-import pluginPermissions from './permissions';
+import { PERMISSIONS } from './constants';
 import pluginId from './pluginId';
 import getTrad from './utils/getTrad';
 
@@ -40,7 +40,7 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.accessRoles,
+          permissions: PERMISSIONS.accessRoles,
         },
         {
           intlLabel: {
@@ -56,7 +56,7 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.readProviders,
+          permissions: PERMISSIONS.readProviders,
         },
         {
           intlLabel: {
@@ -72,7 +72,7 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.readEmailTemplates,
+          permissions: PERMISSIONS.readEmailTemplates,
         },
         {
           intlLabel: {
@@ -88,7 +88,7 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.readAdvancedSettings,
+          permissions: PERMISSIONS.readAdvancedSettings,
         },
       ]
     );

packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js

@@ -30,7 +30,7 @@ import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
-import pluginPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 import { getTrad } from '../../utils';
 
 import { fetchData, putAdvancedSettings } from './utils/api';
@@ -38,7 +38,7 @@ import layout from './utils/layout';
 import schema from './utils/schema';
 
 const ProtectedAdvancedSettingsPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.readAdvancedSettings}>
+  <CheckPagePermissions permissions={PERMISSIONS.readAdvancedSettings}>
     <AdvancedSettingsPage />
   </CheckPagePermissions>
 );
@@ -51,10 +51,7 @@ const AdvancedSettingsPage = () => {
   const queryClient = useQueryClient();
   useFocusWhenNavigate();
 
-  const updatePermissions = useMemo(
+  const updatePermissions = useMemo(() => ({ update: PERMISSIONS.updateAdvancedSettings }), []);
-    () => ({ update: pluginPermissions.updateAdvancedSettings }),
-    []
-  );
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canUpdate },

packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js

@@ -14,7 +14,7 @@ import {
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
-import pluginPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 import { getTrad } from '../../utils';
 
 import EmailForm from './components/EmailForm';
@@ -22,7 +22,7 @@ import EmailTable from './components/EmailTable';
 import { fetchData, putEmailTemplate } from './utils/api';
 
 const ProtectedEmailTemplatesPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.readEmailTemplates}>
+  <CheckPagePermissions permissions={PERMISSIONS.readEmailTemplates}>
     <EmailTemplatesPage />
   </CheckPagePermissions>
 );
@@ -41,7 +41,7 @@ const EmailTemplatesPage = () => {
   const [templateToEdit, setTemplateToEdit] = useState(null);
 
   const updatePermissions = useMemo(() => {
-    return { update: pluginPermissions.updateEmailTemplates };
+    return { update: PERMISSIONS.updateEmailTemplates };
   }, []);
 
   const {

packages/plugins/users-permissions/admin/src/pages/Providers/index.js

@@ -35,7 +35,7 @@ import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
 import FormModal from '../../components/FormModal';
-import pluginPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 import { getTrad } from '../../utils';
 
 import { fetchData, putProvider } from './utils/api';
@@ -56,7 +56,7 @@ export const ProvidersPage = () => {
   const { lockApp, unlockApp } = useOverlayBlocker();
 
   const updatePermissions = useMemo(() => {
-    return { update: pluginPermissions.updateProviders };
+    return { update: PERMISSIONS.updateProviders };
   }, []);
 
   const {
@@ -267,7 +267,7 @@ export const ProvidersPage = () => {
 };
 
 const ProtectedProvidersPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.readProviders}>
+  <CheckPagePermissions permissions={PERMISSIONS.readProviders}>
     <ProvidersPage />
   </CheckPagePermissions>
 );

packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js

@@ -36,7 +36,7 @@ import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';
 
-import permissions from '../../../permissions';
+import { PERMISSIONS } from '../../../constants';
 import pluginId from '../../../pluginId';
 import { getTrad } from '../../../utils';
 
@@ -60,10 +60,10 @@ const RoleListPage = () => {
 
   const updatePermissions = useMemo(() => {
     return {
-      create: permissions.createRole,
+      create: PERMISSIONS.createRole,
-      read: permissions.readRoles,
+      read: PERMISSIONS.readRoles,
-      update: permissions.updateRole,
+      update: PERMISSIONS.updateRole,
-      delete: permissions.deleteRole,
+      delete: PERMISSIONS.deleteRole,
     };
   }, []);
 
@@ -157,7 +157,7 @@ const RoleListPage = () => {
             defaultMessage: 'List of roles',
           })}
           primaryAction={
-            <CheckPermissions permissions={permissions.createRole}>
+            <CheckPermissions permissions={PERMISSIONS.createRole}>
               <Button onClick={handleNewRoleClick} startIcon={<Plus />} size="S">
                 {formatMessage({
                   id: getTrad('List.button.roles'),
@@ -220,7 +220,7 @@ const RoleListPage = () => {
               <TableBody
                 sortedRoles={sortedRoles}
                 canDelete={canDelete}
-                permissions={permissions}
+                permissions={PERMISSIONS}
                 setRoleToDelete={setRoleToDelete}
                 onDelete={[showConfirmDelete, setShowConfirmDelete]}
               />

packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedCreatePage.js

@@ -2,12 +2,12 @@ import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
 
-import pluginPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 
 import RolesCreatePage from './CreatePage';
 
 const ProtectedRolesCreatePage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.createRole}>
+  <CheckPagePermissions permissions={PERMISSIONS.createRole}>
     <RolesCreatePage />
   </CheckPagePermissions>
 );

packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedEditPage.js

@@ -2,12 +2,12 @@ import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
 
-import pluginPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 
 import RolesEditPage from './EditPage';
 
 const ProtectedRolesEditPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.updateRole}>
+  <CheckPagePermissions permissions={PERMISSIONS.updateRole}>
     <RolesEditPage />
   </CheckPagePermissions>
 );

packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedListPage.js

@@ -2,13 +2,13 @@ import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
 
-import pluginPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 
 import RolesListPage from './ListPage';
 
 const ProtectedRolesListPage = () => {
   return (
-    <CheckPagePermissions permissions={pluginPermissions.accessRoles}>
+    <CheckPagePermissions permissions={PERMISSIONS.accessRoles}>
       <RolesListPage />
     </CheckPagePermissions>
   );

packages/plugins/users-permissions/admin/src/pages/Roles/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { AnErrorOccurred, CheckPagePermissions } from '@strapi/helper-plugin';
 import { Route, Switch } from 'react-router-dom';
 
-import pluginPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 import pluginId from '../../pluginId';
 
 import ProtectedRolesCreatePage from './ProtectedCreatePage';
@@ -12,7 +12,7 @@ import ProtectedRolesListPage from './ProtectedListPage';
 
 const Roles = () => {
   return (
-    <CheckPagePermissions permissions={pluginPermissions.accessRoles}>
+    <CheckPagePermissions permissions={PERMISSIONS.accessRoles}>
       <Switch>
         <Route
           path={`/settings/${pluginId}/roles/new`}