Merge pull request #10661 from strapi/improve-bundle

Proposal load plugins when needed

examples/getstarted/plugins/myplugin/admin/src/index.js

@@ -1,9 +1,6 @@
 import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
-
-import App from './pages/App';
-
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const icon = pluginPkg.strapi.icon;
 const name = pluginPkg.strapi.name;
@@ -17,7 +14,11 @@ export default {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'My plugin',
       },
-      Component: App,
+      Component: async () => {
+        const component = await import(/* webpackChunkName: "my-plugin" */ './pages/App');
+
+        return component;
+      },
       permissions: [],
     });
     app.registerPlugin({

packages/core/admin/admin/src/components/GlobalStyle/index.js

@@ -1,11 +1,17 @@
-import 'sanitize.css/sanitize.css';
-import 'bootstrap/dist/css/bootstrap.css';
-import 'font-awesome/css/font-awesome.min.css';
-import '@fortawesome/fontawesome-free/css/all.css';
-// eslint-disable-next-line import/extensions
-import '@fortawesome/fontawesome-free/js/all.min.js';
 import { createGlobalStyle } from 'styled-components';
 
+const loadCss = async () => {
+  await import(/* webpackChunkName: "sanitize-css" */ 'sanitize.css/sanitize.css');
+  await import(/* webpackChunkName: "fontawesome-css" */ 'font-awesome/css/font-awesome.min.css');
+  await import(
+    /* webpackChunkName: "fontawesome-css-all" */ '@fortawesome/fontawesome-free/css/all.css'
+  );
+  await import(/* webpackChunkName: "fontawesome-js" */ '@fortawesome/fontawesome-free/js/all.min');
+  await import(/* webpackChunkName: "bootstrap" */ 'bootstrap/dist/css/bootstrap.css');
+};
+
+loadCss();
+
 const GlobalStyle = createGlobalStyle`
   html {
     font-size: 62.5%;

packages/core/admin/admin/src/content-manager/components/InputJSON/index.js

@@ -7,13 +7,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cm from 'codemirror';
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/addon/lint/lint';
-import 'codemirror/addon/lint/javascript-lint';
-import 'codemirror/addon/edit/closebrackets';
-import 'codemirror/addon/selection/mark-selection';
-import 'codemirror/lib/codemirror.css';
-import 'codemirror/theme/solarized.css';
 
 import { trimStart } from 'lodash';
 import jsonlint from './jsonlint';
@@ -23,6 +16,26 @@ const WAIT = 600;
 const stringify = JSON.stringify;
 const DEFAULT_THEME = 'solarized dark';
 
+const loadCss = async () => {
+  await import(
+    /* webpackChunkName: "codemirror-javacript" */ 'codemirror/mode/javascript/javascript'
+  );
+  await import(/* webpackChunkName: "codemirror-addon-lint" */ 'codemirror/addon/lint/lint');
+  await import(
+    /* webpackChunkName: "codemirror-addon-lint-js" */ 'codemirror/addon/lint/javascript-lint'
+  );
+  await import(
+    /* webpackChunkName: "codemirror-addon-closebrackets" */ 'codemirror/addon/edit/closebrackets'
+  );
+  await import(
+    /* webpackChunkName: "codemirror-addon-mark-selection" */ 'codemirror/addon/selection/mark-selection'
+  );
+  await import(/* webpackChunkName: "codemirror-css" */ 'codemirror/lib/codemirror.css');
+  await import(/* webpackChunkName: "codemirror-theme" */ 'codemirror/theme/solarized.css');
+};
+
+loadCss();
+
 class InputJSON extends React.Component {
   timer = null;
 

packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js

@@ -1,6 +1,5 @@
 /* eslint-disable prefer-template */
 import Markdown from 'markdown-it';
-import 'highlight.js/styles/solarized-dark.css';
 import { getLanguage, highlightAuto, highlight } from 'highlight.js';
 import abbr from 'markdown-it-abbr';
 import container from 'markdown-it-container';
@@ -12,6 +11,12 @@ import mark from 'markdown-it-mark';
 import sub from 'markdown-it-sub';
 import sup from 'markdown-it-sup';
 
+const loadCss = async () => {
+  await import(/* webpackChunkName: "highlight.js" */ 'highlight.js/styles/solarized-dark.css');
+};
+
+loadCss();
+
 const md = new Markdown({
   html: true, // Enable HTML tags in source
   xhtmlOut: false,

packages/core/admin/admin/src/pages/Admin/tests/index.test.js

@@ -59,7 +59,7 @@ describe('<Admin />', () => {
         },
         {
           to: '/plugins/documentation',
-          Component: () => <div>DOCUMENTATION PLUGIN</div>,
+          Component: () => ({ default: () => <div>DOCUMENTATION PLUGIN</div> }),
         },
       ],
     }));

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

@@ -45,7 +45,7 @@ function SettingsPage() {
     );
   }, []);
 
-  const pluginsRoutes = useMemo(() => createSectionsRoutes(settings), [settings]);
+  const pluginsRoutes = createSectionsRoutes(settings);
 
   // Only display accessible sections
   const filteredMenu = useMemo(() => getSectionsToDisplay(menu), [menu]);

packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Router, Route } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { StrapiAppProvider, AppInfosContext } from '@strapi/helper-plugin';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createMemoryHistory } from 'history';
 import { SettingsPage } from '..';
@@ -248,7 +248,7 @@ describe('ADMIN | pages | SettingsPage', () => {
     expect(screen.getByText(/App infos/)).toBeInTheDocument();
   });
 
-  it('should create the plugins routes correctly', () => {
+  it('should create the plugins routes correctly', async () => {
     useSettingsMenu.mockImplementation(() => ({
       isLoading: false,
       menu: [
@@ -265,7 +265,7 @@ describe('ADMIN | pages | SettingsPage', () => {
               isDisplayed: true,
               permissions: [],
               to: '/settings/internationalization',
-              Component: () => <div>i18n settings</div>,
+              Component: () => ({ default: () => <div>i18n settings</div> }),
             },
           ],
         },
@@ -279,7 +279,7 @@ describe('ADMIN | pages | SettingsPage', () => {
               isDisplayed: true,
               permissions: [],
               to: '/settings/email-settings',
-              Component: () => <div>email settings</div>,
+              Component: () => ({ default: () => <div>email settings</div> }),
             },
           ],
         },
@@ -301,7 +301,7 @@ describe('ADMIN | pages | SettingsPage', () => {
             isDisplayed: true,
             permissions: [],
             to: '/settings/internationalization',
-            Component: () => <div>i18n settings</div>,
+            Component: () => ({ default: () => <div>i18n settings</div> }),
           },
         ],
       },
@@ -315,7 +315,7 @@ describe('ADMIN | pages | SettingsPage', () => {
             isDisplayed: true,
             permissions: [],
             to: '/settings/email-settings',
-            Component: () => <div>email settings</div>,
+            Component: () => ({ default: () => <div>email settings</div> }),
           },
         ],
       },
@@ -329,10 +329,14 @@ describe('ADMIN | pages | SettingsPage', () => {
 
     userEvent.click(screen.getByText('i18n.plugin.name'));
 
-    expect(screen.getByText(/i18n settings/)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/i18n settings/)).toBeInTheDocument();
+    });
 
     userEvent.click(screen.getByText('email'));
 
-    expect(screen.getByText(/email settings/)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/email settings/)).toBeInTheDocument();
+    });
   });
 });

packages/core/admin/admin/src/pages/SettingsPage/utils/defaultRoutes.js

@@ -1,55 +1,92 @@
 import RolesCreatePage from 'ee_else_ce/pages/Roles/CreatePage';
 import ProtectedRolesListPage from 'ee_else_ce/pages/Roles/ProtectedListPage';
-import UsersEditPage from '../../Users/ProtectedEditPage';
-import UsersListPage from '../../Users/ProtectedListPage';
-import RolesEditPage from '../../Roles/ProtectedEditPage';
-import WebhooksCreateView from '../../Webhooks/ProtectedCreateView';
-import WebhooksEditView from '../../Webhooks/ProtectedEditView';
-import WebhooksListView from '../../Webhooks/ProtectedListView';
 
 const defaultRoutes = [
   {
-    Component: ProtectedRolesListPage,
+    Component: () => {
+      return { default: ProtectedRolesListPage };
+    },
+
     to: '/settings/roles',
     exact: true,
   },
   {
-    Component: RolesCreatePage,
+    Component: () => {
+      return { default: RolesCreatePage };
+    },
     to: '/settings/roles/duplicate/:id',
     exact: true,
   },
   {
-    Component: RolesCreatePage,
+    Component: () => {
+      return { default: RolesCreatePage };
+    },
     to: '/settings/roles/new',
     exact: true,
   },
   {
-    Component: RolesEditPage,
+    Component: async () => {
+      const component = await import(
+        /* webpackChunkName: "admin-edit-roles-page" */ '../../Roles/ProtectedEditPage'
+      );
+
+      return component;
+    },
     to: '/settings/roles/:id',
     exact: true,
   },
   {
-    Component: UsersListPage,
+    Component: async () => {
+      const component = await import(
+        /* webpackChunkName: "admin-users" */ '../../Users/ProtectedListPage'
+      );
+
+      return component;
+    },
     to: '/settings/users',
     exact: true,
   },
   {
-    Component: UsersEditPage,
+    Component: async () => {
+      const component = await import(
+        /* webpackChunkName: "admin-edit-users" */ '../../Users/ProtectedEditPage'
+      );
+
+      return component;
+    },
     to: '/settings/users/:id',
     exact: true,
   },
   {
-    Component: WebhooksCreateView,
+    Component: async () => {
+      const component = await import(
+        /* webpackChunkName: "webhook-edit-page" */ '../../Webhooks/ProtectedCreateView'
+      );
+
+      return component;
+    },
     to: '/settings/webhooks/create',
     exact: true,
   },
   {
-    Component: WebhooksEditView,
+    Component: async () => {
+      const component = await import(
+        /* webpackChunkName: "webhook-edit-page" */ '../../Webhooks/ProtectedEditView'
+      );
+
+      return component;
+    },
     to: '/settings/webhooks/:id',
     exact: true,
   },
   {
-    Component: WebhooksListView,
+    Component: async () => {
+      const component = await import(
+        /* webpackChunkName: "webhook-list-page" */ '../../Webhooks/ProtectedListView'
+      );
+
+      return component;
+    },
     to: '/settings/webhooks',
     exact: true,
   },

packages/core/admin/admin/src/utils/createRoute.js

@@ -1,8 +1,45 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import { Route } from 'react-router-dom';
+import { LoadingIndicatorPage } from '@strapi/helper-plugin';
+
+const LazyCompo = ({ loadComponent }) => {
+  const [Compo, setCompo] = useState(null);
+
+  useEffect(() => {
+    const loadCompo = async () => {
+      try {
+        const loadedCompo = await loadComponent();
+
+        setCompo(() => loadedCompo.default);
+      } catch (err) {
+        console.log(err);
+      }
+    };
+
+    loadCompo();
+  }, [loadComponent]);
+
+  if (Compo) {
+    return <Compo />;
+  }
+
+  return <LoadingIndicatorPage />;
+};
 
 const createRoute = (Component, to, exact) => {
-  return <Route component={Component} key={to} path={to} exact={exact || false} />;
+  return (
+    <Route
+      render={() => <LazyCompo loadComponent={Component} />}
+      key={to}
+      path={to}
+      exact={exact || false}
+    />
+  );
+};
+
+LazyCompo.propTypes = {
+  loadComponent: PropTypes.func.isRequired,
 };
 
 export default createRoute;

packages/core/admin/admin/src/utils/tests/createRoute.test.js

@@ -5,12 +5,11 @@ describe('ADMIN | CONTAINER | SettingsPage | utils | createRoute', () => {
     const compo = () => 'test';
 
     const {
-      props: { component, path, exact },
+      props: { path, exact },
       key,
     } = createRoute(compo, '/test', true);
 
     expect(key).toEqual('/test');
-    expect(component()).toEqual('test');
     expect(exact).toBeTruthy();
     expect(path).toEqual('/test');
   });

packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js

@@ -1,9 +1,13 @@
-import SingleSignOn from '../SingleSignOn';
-
 const ssoRoutes = strapi.features.isEnabled(strapi.features.SSO)
   ? [
       {
-        Component: SingleSignOn,
+        Component: async () => {
+          const component = await import(
+            /* webpackChunkName: "sso-settings-page" */ '../SingleSignOn'
+          );
+
+          return component;
+        },
         to: '/settings/single-sign-on',
         exact: true,
       },

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

@@ -5,14 +5,12 @@
 // Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
 
-import React from 'react';
-import { CheckPagePermissions, prefixPluginTranslations } from '@strapi/helper-plugin';
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 import pluginLogo from './assets/images/logo.svg';
 import pluginPermissions from './permissions';
 import getTrad from './utils/getTrad';
-import SettingsPage from './pages/Settings';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const icon = pluginPkg.strapi.icon;
@@ -34,12 +32,13 @@ export default {
           },
           id: 'settings',
           to: `/settings/${pluginId}`,
-          Component: () => (
-            <CheckPagePermissions permissions={pluginPermissions.settings}>
-              <SettingsPage />
-            </CheckPagePermissions>
-          ),
+          Component: async () => {
+            const component = await import(
+              /* webpackChunkName: "email-settings-page" */ './pages/Settings'
+            );
 
+            return component;
+          },
           permissions: pluginPermissions.settings,
         },
       ]

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

@@ -20,6 +20,12 @@ import { AlignedButton, Text } from './components';
 import schema from '../../utils/schema';
 import pluginPermissions from '../../permissions';
 
+const ProtectedSettingsPage = () => (
+  <CheckPagePermissions permissions={pluginPermissions.settings}>
+    <SettingsPage />
+  </CheckPagePermissions>
+);
+
 const SettingsPage = () => {
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
@@ -205,4 +211,4 @@ const SettingsPage = () => {
   );
 };
 
-export default SettingsPage;
+export default ProtectedSettingsPage;

packages/core/strapi/lib/services/core-store.js

@@ -86,8 +86,6 @@ const createCoreStore = ({ environment: defaultEnv, db }) => {
           type: (typeof value).toString(),
         });
 
-
-
         await db.query('strapi::core-store').update({ where: { id: data.id }, data });
       } else {
         const data = Object.assign({}, where, {

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

@@ -4,15 +4,13 @@
 // Here's the file: strapi/docs/3.0.0-beta.x/guides/registering-a-field-in-admin.md
 // Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
-import React from 'react';
-import { CheckPagePermissions, prefixPluginTranslations } from '@strapi/helper-plugin';
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginLogo from './assets/images/logo.svg';
 import pluginPermissions from './permissions';
 import Initializer from './components/Initializer';
 import InputMedia from './components/InputMedia';
 import InputModalStepper from './components/InputModalStepper';
-import SettingsPage from './pages/SettingsPage';
 import reducers from './reducers';
 import pluginId from './pluginId';
 import { getTrad } from './utils';
@@ -61,11 +59,13 @@ export default {
         defaultMessage: 'Media Library',
       },
       to: '/settings/media-library',
-      Component: () => (
-        <CheckPagePermissions permissions={pluginPermissions.settings}>
-          <SettingsPage />
-        </CheckPagePermissions>
-      ),
+      Component: async () => {
+        const component = await import(
+          /* webpackChunkName: "upload-settings" */ './pages/SettingsPage'
+        );
+
+        return component;
+      },
       permissions: pluginPermissions.settings,
     });
   },

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

@@ -4,13 +4,24 @@ import { Helmet } from 'react-helmet';
 import { Text } from '@buffetjs/core';
 import { isEqual } from 'lodash';
 import { useIntl } from 'react-intl';
-import { LoadingIndicatorPage, useNotification, request } from '@strapi/helper-plugin';
-
+import {
+  CheckPagePermissions,
+  LoadingIndicatorPage,
+  useNotification,
+  request,
+} from '@strapi/helper-plugin';
 import { getRequestUrl, getTrad } from '../../utils';
 import SectionTitleWrapper from './SectionTitleWrapper';
 import Wrapper from './Wrapper';
 import init from './init';
 import reducer, { initialState } from './reducer';
+import pluginPermissions from '../../permissions';
+
+const ProtectedSettingsPage = () => (
+  <CheckPagePermissions permissions={pluginPermissions.settings}>
+    <SettingsPage />
+  </CheckPagePermissions>
+);
 
 const SettingsPage = () => {
   const { formatMessage } = useIntl();
@@ -202,4 +213,4 @@ const SettingsPage = () => {
   );
 };
 
-export default SettingsPage;
+export default ProtectedSettingsPage;

packages/generators/plugin/files/admin/src/index.js

@@ -1,9 +1,7 @@
 import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
-import App from './containers/App';
-import Initializer from './containers/Initializer';
-
+import Initializer from './components/Initializer';
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const icon = pluginPkg.strapi.icon;
 const name = pluginPkg.strapi.name;
@@ -17,7 +15,11 @@ export default {
         id: `${pluginId}.plugin.name`,
         defaultMessage: name,
       },
-      Component: App,
+      Component: async () => {
+        const component = await import(/* webpackChunkName: "[request]" */ './pages/App');
+
+        return component;
+      },
       permissions: [
         // Uncomment to set the permissions of the plugin here
         // {

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

@@ -9,7 +9,6 @@ import pluginPkg from '../../package.json';
 import pluginPermissions from './permissions';
 import pluginId from './pluginId';
 import pluginLogo from './assets/images/logo.svg';
-import App from './pages/App';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const icon = pluginPkg.strapi.icon;
@@ -25,7 +24,11 @@ export default {
         defaultMessage: 'Documentation',
       },
       permissions: pluginPermissions.main,
-      Component: App,
+      Component: async () => {
+        const component = await import(/* webpackChunkName: "documentation-page" */ './pages/App');
+
+        return component;
+      },
     });
 
     app.registerPlugin({

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

@@ -90,10 +90,17 @@ const HomePage = () => {
     setVersionToDelete(null);
   };
 
+  console.log(data);
+
   if (isLoading) {
     return <LoadingIndicatorPage />;
   }
 
+  // FIXME
+  if (!data) {
+    return null;
+  }
+
   return (
     <ContainerFluid className="container-fluid">
       <PopUpWarning

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

@@ -6,7 +6,6 @@ import pluginLogo from './assets/images/logo.svg';
 import CheckboxConfirmation from './components/CheckboxConfirmation';
 import CMEditViewInjectedComponents from './components/CMEditViewInjectedComponents';
 import Initializer from './components/Initializer';
-import SettingsPage from './pages/SettingsPage';
 import LocalePicker from './components/LocalePicker';
 import middlewares from './middlewares';
 import pluginPermissions from './permissions';
@@ -64,7 +63,14 @@ export default {
       },
       id: 'internationalization',
       to: '/settings/internationalization',
-      Component: SettingsPage,
+
+      Component: async () => {
+        const component = await import(
+          /* webpackChunkName: "i18n-settings-page" */ './pages/SettingsPage'
+        );
+
+        return component;
+      },
       permissions: pluginPermissions.accessMain,
     });
 

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

@@ -4,16 +4,11 @@
 // Here's the file: strapi/docs/3.0.0-beta.x/guides/registering-a-field-in-admin.md
 // Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
-import React from 'react';
-import { CheckPagePermissions, prefixPluginTranslations } from '@strapi/helper-plugin';
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginLogo from './assets/images/logo.svg';
 import pluginPermissions from './permissions';
 import pluginId from './pluginId';
-import RolesPage from './pages/Roles';
-import ProvidersPage from './pages/Providers';
-import EmailTemplatesPage from './pages/EmailTemplates';
-import AdvancedSettingsPage from './pages/AdvancedSettings';
 import getTrad from './utils/getTrad';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
@@ -39,11 +34,13 @@ export default {
           },
           id: 'roles',
           to: `/settings/${pluginId}/roles`,
-          Component: () => (
-            <CheckPagePermissions permissions={pluginPermissions.accessRoles}>
-              <RolesPage />
-            </CheckPagePermissions>
-          ),
+          Component: async () => {
+            const component = await import(
+              /* webpackChunkName: "users-roles-settings-page" */ './pages/Roles'
+            );
+
+            return component;
+          },
           permissions: pluginPermissions.accessRoles,
         },
         {
@@ -53,11 +50,13 @@ export default {
           },
           id: 'providers',
           to: `/settings/${pluginId}/providers`,
-          Component: () => (
-            <CheckPagePermissions permissions={pluginPermissions.readProviders}>
-              <ProvidersPage />
-            </CheckPagePermissions>
-          ),
+          Component: async () => {
+            const component = await import(
+              /* webpackChunkName: "users-providers-settings-page" */ './pages/Providers'
+            );
+
+            return component;
+          },
           permissions: pluginPermissions.readProviders,
         },
         {
@@ -67,11 +66,13 @@ export default {
           },
           id: 'email-templates',
           to: `/settings/${pluginId}/email-templates`,
-          Component: () => (
-            <CheckPagePermissions permissions={pluginPermissions.readEmailTemplates}>
-              <EmailTemplatesPage />
-            </CheckPagePermissions>
-          ),
+          Component: async () => {
+            const component = await import(
+              /* webpackChunkName: "users-email-settings-page" */ './pages/EmailTemplates'
+            );
+
+            return component;
+          },
           permissions: pluginPermissions.readEmailTemplates,
         },
         {
@@ -81,11 +82,13 @@ export default {
           },
           id: 'advanced-settings',
           to: `/settings/${pluginId}/advanced-settings`,
-          Component: () => (
-            <CheckPagePermissions permissions={pluginPermissions.readAdvancedSettings}>
-              <AdvancedSettingsPage />
-            </CheckPagePermissions>
-          ),
+          Component: async () => {
+            const component = await import(
+              /* webpackChunkName: "users-advanced-settings-page" */ './pages/AdvancedSettings'
+            );
+
+            return component;
+          },
           permissions: pluginPermissions.readAdvancedSettings,
         },
       ]

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

@@ -11,6 +11,7 @@ import {
   request,
   useNotification,
   useOverlayBlocker,
+  CheckPagePermissions,
 } from '@strapi/helper-plugin';
 import pluginPermissions from '../../permissions';
 import { getTrad, getRequestURL } from '../../utils';
@@ -18,6 +19,12 @@ import ListBaselineAlignment from '../../components/ListBaselineAlignment';
 import form from './utils/form';
 import reducer, { initialState } from './reducer';
 
+const ProtectedAdvancedSettingsPage = () => (
+  <CheckPagePermissions permissions={pluginPermissions.readAdvancedSettings}>
+    <AdvancedSettingsPage />
+  </CheckPagePermissions>
+);
+
 const AdvancedSettingsPage = () => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
@@ -217,4 +224,4 @@ const AdvancedSettingsPage = () => {
   );
 };
 
-export default AdvancedSettingsPage;
+export default ProtectedAdvancedSettingsPage;

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

@@ -11,6 +11,7 @@ import {
   getYupInnerErrors,
   useNotification,
   useOverlayBlocker,
+  CheckPagePermissions,
 } from '@strapi/helper-plugin';
 import { Row } from 'reactstrap';
 import pluginPermissions from '../../permissions';
@@ -22,6 +23,12 @@ import { getRequestURL, getTrad } from '../../utils';
 import forms from './utils/forms';
 import schema from './utils/schema';
 
+const ProtectedEmailTemplatesPage = () => (
+  <CheckPagePermissions permissions={pluginPermissions.readEmailTemplates}>
+    <EmailTemplatesPage />
+  </CheckPagePermissions>
+);
+
 const EmailTemplatesPage = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
@@ -232,4 +239,4 @@ const EmailTemplatesPage = () => {
   );
 };
 
-export default EmailTemplatesPage;
+export default ProtectedEmailTemplatesPage;

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

@@ -11,6 +11,7 @@ import {
   request,
   useNotification,
   useOverlayBlocker,
+  CheckPagePermissions,
 } from '@strapi/helper-plugin';
 import { get, upperFirst, has } from 'lodash';
 import { Row } from 'reactstrap';
@@ -23,6 +24,12 @@ import ModalForm from '../../components/ModalForm';
 import createProvidersArray from './utils/createProvidersArray';
 import forms from './utils/forms';
 
+const ProtectedProvidersPage = () => (
+  <CheckPagePermissions permissions={pluginPermissions.readProviders}>
+    <ProvidersPage />
+  </CheckPagePermissions>
+);
+
 const ProvidersPage = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
@@ -279,4 +286,4 @@ const ProvidersPage = () => {
   );
 };
 
-export default ProvidersPage;
+export default ProtectedProvidersPage;

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

@@ -1,20 +1,26 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
-import { NotFound } from '@strapi/helper-plugin';
+import { CheckPagePermissions, NotFound } from '@strapi/helper-plugin';
 import pluginId from '../../pluginId';
-
+import pluginPermissions from '../../permissions';
 import ProtectedRolesListPage from './ProtectedListPage';
 import ProtectedRolesEditPage from './ProtectedEditPage';
 import ProtectedRolesCreatePage from './ProtectedCreatePage';
 
 const Roles = () => {
   return (
-    <Switch>
-      <Route path={`/settings/${pluginId}/roles/new`} component={ProtectedRolesCreatePage} exact />
-      <Route path={`/settings/${pluginId}/roles/:id`} component={ProtectedRolesEditPage} exact />
-      <Route path={`/settings/${pluginId}/roles`} component={ProtectedRolesListPage} exact />
-      <Route path="" component={NotFound} />
-    </Switch>
+    <CheckPagePermissions permissions={pluginPermissions.accessRoles}>
+      <Switch>
+        <Route
+          path={`/settings/${pluginId}/roles/new`}
+          component={ProtectedRolesCreatePage}
+          exact
+        />
+        <Route path={`/settings/${pluginId}/roles/:id`} component={ProtectedRolesEditPage} exact />
+        <Route path={`/settings/${pluginId}/roles`} component={ProtectedRolesListPage} exact />
+        <Route path="" component={NotFound} />
+      </Switch>
+    </CheckPagePermissions>
   );
 };