@strapi/plugin-users-permissions 4.11.1-beta.2 → 4.11.2

package/admin/src/components/BoundRoute/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
-import styled from 'styled-components';
-import { Flex, Box, Typography } from '@strapi/design-system';
+
+import { Box, Flex, Typography } from '@strapi/design-system';
 import map from 'lodash/map';
 import tail from 'lodash/tail';
-import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+
 import getMethodColor from './getMethodColor';
 
 const MethodBox = styled(Box)`

package/admin/src/components/FormModal/Input/index.js

@@ -5,9 +5,10 @@
  */
 
 import React from 'react';
-import { useIntl } from 'react-intl';
-import { ToggleInput, TextInput } from '@strapi/design-system';
+
+import { TextInput, ToggleInput } from '@strapi/design-system';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 
 const Input = ({
   description,

package/admin/src/components/FormModal/index.js

@@ -5,22 +5,23 @@
  */
 
 import React from 'react';
-import { useIntl } from 'react-intl';
+
 import {
   Button,
   Flex,
-  Breadcrumbs,
-  Crumb,
   Grid,
   GridItem,
-  ModalLayout,
-  ModalHeader,
-  ModalFooter,
   ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalLayout,
 } from '@strapi/design-system';
-import PropTypes from 'prop-types';
-import { Formik } from 'formik';
+import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
 import { Form } from '@strapi/helper-plugin';
+import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
 import Input from './Input';
 
 const FormModal = ({
@@ -43,8 +44,10 @@ const FormModal = ({
     <ModalLayout onClose={onToggle} labelledBy="title">
       <ModalHeader>
         <Breadcrumbs label={headerBreadcrumbs.join(', ')}>
-          {headerBreadcrumbs.map((crumb) => (
-            <Crumb key={crumb}>{crumb}</Crumb>
+          {headerBreadcrumbs.map((crumb, index, arr) => (
+            <Crumb isCurrent={index === arr.length - 1} key={crumb}>
+              {crumb}
+            </Crumb>
           ))}
         </Breadcrumbs>
       </ModalHeader>

package/admin/src/components/Permissions/PermissionRow/CheckboxWrapper.js

@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components';
 import { Box } from '@strapi/design-system';
+import styled, { css } from 'styled-components';
 
 const activeCheckboxWrapperStyles = css`
   background: ${(props) => props.theme.colors.primary100};

package/admin/src/components/Permissions/PermissionRow/SubCategory.js

@@ -1,13 +1,24 @@
 import React, { useCallback, useMemo } from 'react';
+
+import {
+  Box,
+  Checkbox,
+  Flex,
+  Typography,
+  Grid,
+  GridItem,
+  VisuallyHidden,
+} from '@strapi/design-system';
+import { Cog as CogIcon } from '@strapi/icons';
 import get from 'lodash/get';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Box, Checkbox, Flex, Typography, Grid, GridItem } from '@strapi/design-system';
-import { Cog as CogIcon } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import CheckboxWrapper from './CheckboxWrapper';
+import styled from 'styled-components';
+
 import { useUsersPermissions } from '../../../contexts/UsersPermissionsContext';
 
+import CheckboxWrapper from './CheckboxWrapper';
+
 const Border = styled.div`
   flex: 1;
   align-self: center;
@@ -87,10 +98,20 @@ const SubCategory = ({ subCategory }) => {
                   </Checkbox>
                   <button
                     type="button"
-                    data-testid="action-cog"
                     onClick={() => onSelectedAction(action.name)}
                     style={{ display: 'inline-flex', alignItems: 'center' }}
                   >
+                    <VisuallyHidden as="span">
+                      {formatMessage(
+                        {
+                          id: 'app.utils.show-bound-route',
+                          defaultMessage: 'Show bound route for {route}',
+                        },
+                        {
+                          route: action.name,
+                        }
+                      )}
+                    </VisuallyHidden>
                     <CogIcon />
                   </button>
                 </CheckboxWrapper>

package/admin/src/components/Permissions/PermissionRow/index.js

@@ -1,7 +1,9 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import sortBy from 'lodash/sortBy';
+
 import { Box } from '@strapi/design-system';
+import sortBy from 'lodash/sortBy';
+import PropTypes from 'prop-types';
+
 import SubCategory from './SubCategory';
 
 const PermissionRow = ({ name, permissions }) => {

package/admin/src/components/Permissions/index.js

@@ -1,10 +1,13 @@
 import React, { useReducer } from 'react';
-import { Accordion, AccordionToggle, AccordionContent, Box, Flex } from '@strapi/design-system';
+
+import { Accordion, AccordionContent, AccordionToggle, Box, Flex } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
+
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
 import formatPluginName from '../../utils/formatPluginName';
-import PermissionRow from './PermissionRow';
+
 import init from './init';
+import PermissionRow from './PermissionRow';
 import { initialState, reducer } from './reducer';
 
 const Permissions = () => {

package/admin/src/components/Policies/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
-import { Typography, Flex, GridItem } from '@strapi/design-system';
+
+import { Flex, GridItem, Typography } from '@strapi/design-system';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import without from 'lodash/without';
+import { useIntl } from 'react-intl';
 
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
 import BoundRoute from '../BoundRoute';

package/admin/src/components/UsersPermissions/index.js

@@ -1,13 +1,16 @@
-import React, { memo, useReducer, forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, memo, useImperativeHandle, useReducer } from 'react';
+
+import { Flex, Grid, GridItem, Typography } from '@strapi/design-system';
 import PropTypes from 'prop-types';
-import { Typography, Flex, Grid, GridItem } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
+
+import { UsersPermissionsProvider } from '../../contexts/UsersPermissionsContext';
 import getTrad from '../../utils/getTrad';
-import Policies from '../Policies';
 import Permissions from '../Permissions';
-import reducer, { initialState } from './reducer';
-import { UsersPermissionsProvider } from '../../contexts/UsersPermissionsContext';
+import Policies from '../Policies';
+
 import init from './init';
+import reducer, { initialState } from './reducer';
 
 const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
   const { formatMessage } = useIntl();

package/admin/src/contexts/UsersPermissionsContext/index.js

@@ -1,4 +1,5 @@
 import React, { createContext, useContext } from 'react';
+
 import PropTypes from 'prop-types';
 
 const UsersPermissions = createContext({});

package/admin/src/hooks/index.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/prefer-default-export
 export { default as useForm } from './useForm';
 export { default as useRolesList } from './useRolesList';
-export { default as usePlugins } from './usePlugins';
+export * from './usePlugins';
 export { default as useFetchRole } from './useFetchRole';

package/admin/src/hooks/useFetchRole/index.js

@@ -1,8 +1,11 @@
-import { useCallback, useReducer, useEffect, useRef } from 'react';
-import { useNotification, useFetchClient } from '@strapi/helper-plugin';
-import reducer, { initialState } from './reducer';
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+
+import { useFetchClient, useNotification } from '@strapi/helper-plugin';
+
 import pluginId from '../../pluginId';
 
+import reducer, { initialState } from './reducer';
+
 const useFetchRole = (id) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const toggleNotification = useNotification();

package/admin/src/hooks/useForm/index.js

@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useReducer, useRef } from 'react';
-import { useRBAC, useFetchClient, useNotification } from '@strapi/helper-plugin';
+
+import { useFetchClient, useNotification, useRBAC } from '@strapi/helper-plugin';
+
 import { getRequestURL } from '../../utils';
+
 import reducer, { initialState } from './reducer';
 
 const useUserForm = (endPoint, permissions) => {

package/admin/src/hooks/usePlugins.js

@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+
+import { useNotification, useFetchClient, useAPIErrorHandler } from '@strapi/helper-plugin';
+import { useQueries } from 'react-query';
+
+import pluginId from '../pluginId';
+import { cleanPermissions, getTrad } from '../utils';
+
+export const usePlugins = () => {
+  const toggleNotification = useNotification();
+  const { get } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
+
+  const [
+    {
+      data: permissions,
+      isLoading: isLoadingPermissions,
+      error: permissionsError,
+      refetch: refetchPermissions,
+    },
+    { data: routes, isLoading: isLoadingRoutes, error: routesError, refetch: refetchRoutes },
+  ] = useQueries([
+    {
+      queryKey: [pluginId, 'permissions'],
+      async queryFn() {
+        const res = await get(`/${pluginId}/permissions`);
+
+        return res.data.permissions;
+      },
+    },
+    {
+      queryKey: [pluginId, 'routes'],
+      async queryFn() {
+        const res = await get(`/${pluginId}/routes`);
+
+        return res.data.routes;
+      },
+    },
+  ]);
+
+  const refetchQueries = async () => {
+    await Promise.all([refetchPermissions(), refetchRoutes()]);
+  };
+
+  useEffect(() => {
+    if (permissionsError) {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(permissionsError),
+      });
+    }
+  }, [toggleNotification, permissionsError, formatAPIError]);
+
+  useEffect(() => {
+    if (routesError) {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(routesError),
+      });
+    }
+  }, [toggleNotification, routesError, formatAPIError]);
+
+  const isLoading = isLoadingPermissions || isLoadingRoutes;
+
+  return {
+    permissions: permissions ? cleanPermissions(permissions) : {},
+    routes: routes ?? {},
+    getData: refetchQueries,
+    isLoading,
+  };
+};

package/admin/src/hooks/useRolesList/index.js

@@ -1,8 +1,11 @@
 import { useCallback, useEffect, useReducer, useRef } from 'react';
+
 import { useFetchClient, useNotification } from '@strapi/helper-plugin';
 import get from 'lodash/get';
-import init from './init';
+
 import pluginId from '../../pluginId';
+
+import init from './init';
 import reducer, { initialState } from './reducer';
 
 const useRolesList = (shouldFetchData = true) => {

package/admin/src/index.js

@@ -5,7 +5,9 @@
 // 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 { prefixPluginTranslations } from '@strapi/helper-plugin';
+
 import pluginPkg from '../../package.json';
+
 import pluginPermissions from './permissions';
 import pluginId from './pluginId';
 import getTrad from './utils/getTrad';

package/admin/src/pages/AdvancedSettings/index.js

@@ -1,7 +1,19 @@
 import React, { useMemo } from 'react';
-import { useQuery, useMutation, useQueryClient } from 'react-query';
-import { useIntl } from 'react-intl';
-import { Formik } from 'formik';
+
+import {
+  Box,
+  Button,
+  ContentLayout,
+  Flex,
+  Grid,
+  GridItem,
+  HeaderLayout,
+  Main,
+  Option,
+  Select,
+  Typography,
+  useNotifyAT,
+} from '@strapi/design-system';
 import {
   CheckPagePermissions,
   Form,
@@ -13,26 +25,17 @@ import {
   useOverlayBlocker,
   useRBAC,
 } from '@strapi/helper-plugin';
-import {
-  useNotifyAT,
-  Main,
-  HeaderLayout,
-  ContentLayout,
-  Button,
-  Box,
-  Flex,
-  Select,
-  Option,
-  Typography,
-  Grid,
-  GridItem,
-} from '@strapi/design-system';
 import { Check } from '@strapi/icons';
+import { Formik } from 'formik';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+
 import pluginPermissions from '../../permissions';
 import { getTrad } from '../../utils';
+
+import { fetchData, putAdvancedSettings } from './utils/api';
 import layout from './utils/layout';
 import schema from './utils/schema';
-import { fetchData, putAdvancedSettings } from './utils/api';
 
 const ProtectedAdvancedSettingsPage = () => (
   <CheckPagePermissions permissions={pluginPermissions.readAdvancedSettings}>

package/admin/src/pages/AdvancedSettings/utils/api.js

@@ -1,4 +1,5 @@
 import { getFetchClient } from '@strapi/helper-plugin';
+
 import { getRequestURL } from '../../../utils';
 
 const fetchData = async () => {

package/admin/src/pages/AdvancedSettings/utils/schema.js

@@ -1,5 +1,5 @@
-import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
+import * as yup from 'yup';
 
 // eslint-disable-next-line prefer-regex-literals
 const URL_REGEX = new RegExp('(^$)|((.+:\\/\\/.*)(d*)\\/?(.*))');

package/admin/src/pages/EmailTemplates/components/EmailForm.js

@@ -1,20 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Form, GenericInput } from '@strapi/helper-plugin';
-import { Formik } from 'formik';
+
 import {
-  ModalLayout,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
+  Button,
   Grid,
   GridItem,
-  Button,
-  Breadcrumbs,
-  Crumb,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalLayout,
   Textarea,
 } from '@strapi/design-system';
+import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
+import { Form, GenericInput } from '@strapi/helper-plugin';
+import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
 import { getTrad } from '../../../utils';
 import schema from '../utils/schema';
 
@@ -45,7 +46,7 @@ const EmailForm = ({ template, onToggle, onSubmit }) => {
               defaultMessage: 'Edit email template',
             })}
           </Crumb>
-          <Crumb>
+          <Crumb isCurrent>
             {formatMessage({ id: getTrad(template.display), defaultMessage: template.display })}
           </Crumb>
         </Breadcrumbs>

package/admin/src/pages/EmailTemplates/components/EmailTable.js

@@ -1,20 +1,22 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
+
 import {
+  Icon,
+  IconButton,
   Table,
-  Thead,
   Tbody,
-  Tr,
   Td,
   Th,
+  Thead,
+  Tr,
   Typography,
-  IconButton,
-  Icon,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { Pencil, Refresh, Check } from '@strapi/icons';
 import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
+import { Check, Pencil, Refresh } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
 import { getTrad } from '../../../utils';
 
 const EmailTable = ({ canUpdate, onEditClick }) => {

package/admin/src/pages/EmailTemplates/index.js

@@ -1,22 +1,25 @@
 import React, { useMemo, useRef, useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from 'react-query';
-import { useIntl } from 'react-intl';
+
+import { ContentLayout, HeaderLayout, Main, useNotifyAT } from '@strapi/design-system';
 import {
+  CheckPagePermissions,
+  LoadingIndicatorPage,
   SettingsPageTitle,
-  useTracking,
+  useFocusWhenNavigate,
   useNotification,
   useOverlayBlocker,
-  CheckPagePermissions,
   useRBAC,
-  useFocusWhenNavigate,
-  LoadingIndicatorPage,
+  useTracking,
 } from '@strapi/helper-plugin';
-import { useNotifyAT, Main, ContentLayout, HeaderLayout } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+
 import pluginPermissions from '../../permissions';
 import { getTrad } from '../../utils';
-import { fetchData, putEmailTemplate } from './utils/api';
-import EmailTable from './components/EmailTable';
+
 import EmailForm from './components/EmailForm';
+import EmailTable from './components/EmailTable';
+import { fetchData, putEmailTemplate } from './utils/api';
 
 const ProtectedEmailTemplatesPage = () => (
   <CheckPagePermissions permissions={pluginPermissions.readEmailTemplates}>

package/admin/src/pages/EmailTemplates/utils/api.js

@@ -1,4 +1,5 @@
 import { getFetchClient } from '@strapi/helper-plugin';
+
 import { getRequestURL } from '../../../utils';
 
 const fetchData = async () => {

package/admin/src/pages/EmailTemplates/utils/schema.js

@@ -1,5 +1,5 @@
-import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
+import * as yup from 'yup';
 
 const schema = yup.object().shape({
   options: yup

package/admin/src/pages/Providers/index.js

@@ -1,43 +1,46 @@
 import React, { useMemo, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import {
-  SettingsPageTitle,
-  LoadingIndicatorPage,
-  useTracking,
-  useNotification,
-  useOverlayBlocker,
-  CheckPagePermissions,
-  useRBAC,
-  useFocusWhenNavigate,
-  onRowClick,
-  stopPropagation,
-} from '@strapi/helper-plugin';
-import has from 'lodash/has';
-import upperFirst from 'lodash/upperFirst';
+
 import {
+  ContentLayout,
   HeaderLayout,
+  IconButton,
   Layout,
-  ContentLayout,
   Main,
-  useNotifyAT,
   Table,
-  Thead,
-  Tr,
-  Th,
   Tbody,
   Td,
+  Th,
+  Thead,
+  Tr,
   Typography,
-  IconButton,
+  useNotifyAT,
   VisuallyHidden,
 } from '@strapi/design-system';
+import {
+  CheckPagePermissions,
+  LoadingIndicatorPage,
+  onRowClick,
+  SettingsPageTitle,
+  stopPropagation,
+  useFocusWhenNavigate,
+  useNotification,
+  useOverlayBlocker,
+  useRBAC,
+  useTracking,
+} from '@strapi/helper-plugin';
 import { Pencil } from '@strapi/icons';
-import { useQuery, useMutation, useQueryClient } from 'react-query';
-import forms from './utils/forms';
+import has from 'lodash/has';
+import upperFirst from 'lodash/upperFirst';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+
+import FormModal from '../../components/FormModal';
+import pluginPermissions from '../../permissions';
+import { getTrad } from '../../utils';
+
 import { fetchData, putProvider } from './utils/api';
 import createProvidersArray from './utils/createProvidersArray';
-import { getTrad } from '../../utils';
-import pluginPermissions from '../../permissions';
-import FormModal from '../../components/FormModal';
+import forms from './utils/forms';
 
 export const ProvidersPage = () => {
   const { formatMessage } = useIntl();

package/admin/src/pages/Providers/utils/api.js

@@ -1,4 +1,5 @@
 import { getFetchClient } from '@strapi/helper-plugin';
+
 import { getRequestURL } from '../../../utils';
 
 // eslint-disable-next-line import/prefer-default-export

package/admin/src/pages/Providers/utils/forms.js

@@ -1,5 +1,5 @@
-import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
+import * as yup from 'yup';
 
 import { getTrad } from '../../../utils';
 

package/admin/src/pages/Roles/{CreatePage/index.js → CreatePage.js}

@@ -1,36 +1,39 @@
-import React, { useState, useRef } from 'react';
-import { useHistory } from 'react-router-dom';
+import React, { useRef, useState } from 'react';
+
 import {
+  Box,
+  Button,
   ContentLayout,
+  Flex,
+  Grid,
+  GridItem,
   HeaderLayout,
   Main,
-  Button,
-  Flex,
-  Box,
-  TextInput,
   Textarea,
+  TextInput,
   Typography,
-  GridItem,
-  Grid,
 } from '@strapi/design-system';
-import { Check } from '@strapi/icons';
-import { Formik } from 'formik';
-import { useIntl } from 'react-intl';
 import {
-  useOverlayBlocker,
+  Form,
   SettingsPageTitle,
   useFetchClient,
-  useTracking,
-  Form,
   useNotification,
+  useOverlayBlocker,
+  useTracking,
 } from '@strapi/helper-plugin';
-import UsersPermissions from '../../../components/UsersPermissions';
-import getTrad from '../../../utils/getTrad';
-import pluginId from '../../../pluginId';
-import { usePlugins } from '../../../hooks';
-import schema from './utils/schema';
+import { Check } from '@strapi/icons';
+import { Formik } from 'formik';
+import { useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+
+import UsersPermissions from '../../components/UsersPermissions';
+import { usePlugins } from '../../hooks';
+import pluginId from '../../pluginId';
+import getTrad from '../../utils/getTrad';
+
+import { createRoleSchema } from './constants';
 
-const EditPage = () => {
+const CreatePage = () => {
   const { formatMessage } = useIntl();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const toggleNotification = useNotification();
@@ -82,7 +85,7 @@ const EditPage = () => {
         enableReinitialize
         initialValues={{ name: '', description: '' }}
         onSubmit={handleCreateRoleSubmit}
-        validationSchema={schema}
+        validationSchema={createRoleSchema}
       >
         {({ handleSubmit, values, handleChange, errors }) => (
           <Form noValidate onSubmit={handleSubmit}>
@@ -179,4 +182,4 @@ const EditPage = () => {
   );
 };
 
-export default EditPage;
+export default CreatePage;

package/admin/src/pages/Roles/{EditPage/index.js → EditPage.js}

@@ -1,16 +1,5 @@
-import React, { useState, useRef } from 'react';
-import { Formik } from 'formik';
-import { useIntl } from 'react-intl';
-import { useRouteMatch } from 'react-router-dom';
-import {
-  useFetchClient,
-  useOverlayBlocker,
-  SettingsPageTitle,
-  LoadingIndicatorPage,
-  Form,
-  useNotification,
-  Link,
-} from '@strapi/helper-plugin';
+import React, { useRef, useState } from 'react';
+
 import {
   ContentLayout,
   HeaderLayout,
@@ -24,12 +13,26 @@ import {
   GridItem,
   Grid,
 } from '@strapi/design-system';
+import {
+  useFetchClient,
+  useOverlayBlocker,
+  SettingsPageTitle,
+  LoadingIndicatorPage,
+  Form,
+  useNotification,
+  Link,
+} from '@strapi/helper-plugin';
 import { ArrowLeft, Check } from '@strapi/icons';
-import UsersPermissions from '../../../components/UsersPermissions';
-import getTrad from '../../../utils/getTrad';
-import pluginId from '../../../pluginId';
-import { usePlugins, useFetchRole } from '../../../hooks';
-import schema from './utils/schema';
+import { Formik } from 'formik';
+import { useIntl } from 'react-intl';
+import { useRouteMatch } from 'react-router-dom';
+
+import UsersPermissions from '../../components/UsersPermissions';
+import { usePlugins, useFetchRole } from '../../hooks';
+import pluginId from '../../pluginId';
+import getTrad from '../../utils/getTrad';
+
+import { createRoleSchema } from './constants';
 
 const EditPage = () => {
   const { formatMessage } = useIntl();
@@ -87,7 +90,7 @@ const EditPage = () => {
         enableReinitialize
         initialValues={{ name: role.name, description: role.description }}
         onSubmit={handleEditRoleSubmit}
-        validationSchema={schema}
+        validationSchema={createRoleSchema}
       >
         {({ handleSubmit, values, handleChange, errors }) => (
           <Form noValidate onSubmit={handleSubmit}>

package/admin/src/pages/Roles/ListPage/components/TableBody.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { IconButton, Typography, Flex, Tbody, Tr, Td } from '@strapi/design-system';
-import { Pencil, Trash } from '@strapi/icons';
+
+import { Flex, IconButton, Tbody, Td, Tr, Typography } from '@strapi/design-system';
 import { CheckPermissions, onRowClick, stopPropagation } from '@strapi/helper-plugin';
+import { Pencil, Trash } from '@strapi/icons';
+import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 

package/admin/src/pages/Roles/ListPage/index.js

@@ -1,45 +1,47 @@
 import React, { useMemo, useState } from 'react';
+
 import {
+  ActionLayout,
   Button,
+  ContentLayout,
   HeaderLayout,
   Layout,
-  ContentLayout,
-  ActionLayout,
   Main,
   Table,
-  Tr,
-  Thead,
   Th,
+  Thead,
+  Tr,
   Typography,
   useNotifyAT,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { Plus } from '@strapi/icons';
 import {
-  useTracking,
-  SettingsPageTitle,
   CheckPermissions,
-  useNotification,
-  useRBAC,
-  NoPermissions,
+  ConfirmDialog,
+  EmptyStateLayout,
   LoadingIndicatorPage,
+  NoPermissions,
   SearchURLQuery,
+  SettingsPageTitle,
+  useCollator,
+  useFilter,
   useFocusWhenNavigate,
+  useNotification,
   useQueryParams,
-  EmptyStateLayout,
-  ConfirmDialog,
-  useFilter,
-  useCollator,
+  useRBAC,
+  useTracking,
 } from '@strapi/helper-plugin';
+import { Plus } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useHistory } from 'react-router-dom';
 
-import { fetchData, deleteData } from './utils/api';
-import { getTrad } from '../../../utils';
-import pluginId from '../../../pluginId';
 import permissions from '../../../permissions';
+import pluginId from '../../../pluginId';
+import { getTrad } from '../../../utils';
+
 import TableBody from './components/TableBody';
+import { deleteData, fetchData } from './utils/api';
 
 const RoleListPage = () => {
   const { trackUsage } = useTracking();

package/admin/src/pages/Roles/ListPage/utils/api.js

@@ -1,4 +1,5 @@
 import { getFetchClient } from '@strapi/helper-plugin';
+
 import { getRequestURL } from '../../../../utils';
 
 export const fetchData = async (toggleNotification, notifyStatus) => {
@@ -14,7 +15,7 @@ export const fetchData = async (toggleNotification, notifyStatus) => {
       message: { id: 'notification.error' },
     });
 
-    throw new Error('error');
+    throw new Error(err);
   }
 };
 

package/admin/src/pages/Roles/{ProtectedCreatePage/index.js → ProtectedCreatePage.js}

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

package/admin/src/pages/Roles/{ProtectedEditPage/index.js → ProtectedEditPage.js}

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

package/admin/src/pages/Roles/{ProtectedListPage/index.js → ProtectedListPage.js}

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { CheckPagePermissions } from '@strapi/helper-plugin';
-import pluginPermissions from '../../../permissions';
 
-import RolesListPage from '../ListPage';
+import pluginPermissions from '../../permissions';
+
+import RolesListPage from './ListPage';
 
 const ProtectedRolesListPage = () => {
   return (

package/admin/src/pages/Roles/{CreatePage/utils/schema.js → constants.js}

@@ -1,9 +1,7 @@
-import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
+import * as yup from 'yup';
 
-const schema = yup.object().shape({
+export const createRoleSchema = yup.object().shape({
   name: yup.string().required(translatedErrors.required),
   description: yup.string().required(translatedErrors.required),
 });
-
-export default schema;

package/admin/src/pages/Roles/index.js

@@ -1,11 +1,14 @@
 import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import { CheckPagePermissions, AnErrorOccurred } from '@strapi/helper-plugin';
-import pluginId from '../../pluginId';
+
+import { AnErrorOccurred, CheckPagePermissions } from '@strapi/helper-plugin';
+import { Route, Switch } from 'react-router-dom';
+
 import pluginPermissions from '../../permissions';
-import ProtectedRolesListPage from './ProtectedListPage';
-import ProtectedRolesEditPage from './ProtectedEditPage';
+import pluginId from '../../pluginId';
+
 import ProtectedRolesCreatePage from './ProtectedCreatePage';
+import ProtectedRolesEditPage from './ProtectedEditPage';
+import ProtectedRolesListPage from './ProtectedListPage';
 
 const Roles = () => {
   return (

package/admin/src/utils/index.js

@@ -1,4 +1,4 @@
 export { default as cleanPermissions } from './cleanPermissions';
+export { default as formatPolicies } from './formatPolicies';
 export { default as getRequestURL } from './getRequestURL';
 export { default as getTrad } from './getTrad';
-export { default as formatPolicies } from './formatPolicies';

package/jest.config.front.js

@@ -3,4 +3,5 @@
 module.exports = {
   preset: '../../../jest-preset.front.js',
   displayName: 'Users & Permissions plugin',
+  setupFilesAfterEnv: ['./tests/setup.js'],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/plugin-users-permissions",
-  "version": "4.11.1-beta.2",
+  "version": "4.11.2",
   "description": "Protect your API with a full-authentication process based on JWT",
   "repository": {
     "type": "git",
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@strapi/design-system": "1.8.0",
-    "@strapi/helper-plugin": "4.11.1-beta.2",
+    "@strapi/helper-plugin": "4.11.2",
     "@strapi/icons": "1.8.0",
-    "@strapi/utils": "4.11.1-beta.2",
+    "@strapi/utils": "4.11.2",
     "bcryptjs": "2.4.3",
     "formik": "2.4.0",
     "grant-koa": "5.4.8",
@@ -54,7 +54,6 @@
     "@testing-library/dom": "9.2.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "history": "^4.9.0",
     "msw": "1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -78,5 +77,5 @@
     "required": true,
     "kind": "plugin"
   },
-  "gitHead": "0b01fbf9cc6729527d823c9c36c0065d660965c1"
+  "gitHead": "6f7c815c2bbe41dda7d77136eb8df736c028ff67"
 }

package/server/strategies/users-permissions.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { castArray, map, every, pipe, isEmpty } = require('lodash/fp');
+const { castArray, map, every, pipe } = require('lodash/fp');
 const { ForbiddenError, UnauthorizedError } = require('@strapi/utils').errors;
 
 const { getService } = require('../utils');
@@ -80,13 +80,6 @@ const authenticate = async (ctx) => {
 const verify = async (auth, config) => {
   const { credentials: user, ability } = auth;
 
-  strapi.telemetry.send('didReceiveAPIRequest', {
-    eventProperties: {
-      authenticationMethod: auth?.strategy?.name,
-      isAuthenticated: !isEmpty(user),
-    },
-  });
-
   if (!config.scope) {
     if (!user) {
       // A non authenticated user cannot access routes that do not have a scope

package/admin/src/hooks/usePlugins/index.js

@@ -1,67 +0,0 @@
-import { useCallback, useEffect, useReducer } from 'react';
-import { useNotification, useFetchClient } from '@strapi/helper-plugin';
-import get from 'lodash/get';
-import init from './init';
-import pluginId from '../../pluginId';
-import { cleanPermissions } from '../../utils';
-import reducer, { initialState } from './reducer';
-
-const usePlugins = (shouldFetchData = true) => {
-  const toggleNotification = useNotification();
-  const [{ permissions, routes, isLoading }, dispatch] = useReducer(reducer, initialState, () =>
-    init(initialState, shouldFetchData)
-  );
-  const fetchClient = useFetchClient();
-
-  const fetchPlugins = useCallback(async () => {
-    try {
-      dispatch({
-        type: 'GET_DATA',
-      });
-
-      const [{ permissions }, { routes }] = await Promise.all(
-        [`/${pluginId}/permissions`, `/${pluginId}/routes`].map(async (endpoint) => {
-          const res = await fetchClient.get(endpoint);
-
-          return res.data;
-        })
-      );
-
-      dispatch({
-        type: 'GET_DATA_SUCCEEDED',
-        permissions: cleanPermissions(permissions),
-        routes,
-      });
-    } catch (err) {
-      const message = get(err, ['response', 'payload', 'message'], 'An error occured');
-
-      dispatch({
-        type: 'GET_DATA_ERROR',
-      });
-
-      if (message !== 'Forbidden') {
-        toggleNotification({
-          type: 'warning',
-          message,
-        });
-      }
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [toggleNotification]);
-
-  useEffect(() => {
-    if (shouldFetchData) {
-      fetchPlugins();
-    }
-  }, [fetchPlugins, shouldFetchData]);
-
-  return {
-    permissions,
-    routes,
-    getData: fetchPlugins,
-    isLoading,
-  };
-};
-
-export default usePlugins;

package/admin/src/hooks/usePlugins/init.js

@@ -1,5 +0,0 @@
-const init = (initialState, shouldFetchData) => {
-  return { ...initialState, isLoading: shouldFetchData };
-};
-
-export default init;

package/admin/src/hooks/usePlugins/reducer.js

@@ -1,34 +0,0 @@
-/* eslint-disable consistent-return */
-import produce from 'immer';
-
-export const initialState = {
-  permissions: {},
-  routes: {},
-  isLoading: true,
-};
-
-const reducer = (state, action) =>
-  produce(state, (draftState) => {
-    switch (action.type) {
-      case 'GET_DATA': {
-        draftState.isLoading = true;
-        draftState.permissions = {};
-        draftState.routes = {};
-        break;
-      }
-      case 'GET_DATA_SUCCEEDED': {
-        draftState.permissions = action.permissions;
-        draftState.routes = action.routes;
-        draftState.isLoading = false;
-        break;
-      }
-      case 'GET_DATA_ERROR': {
-        draftState.isLoading = false;
-        break;
-      }
-      default:
-        return draftState;
-    }
-  });
-
-export default reducer;

package/admin/src/pages/Roles/EditPage/utils/schema.js

@@ -1,9 +0,0 @@
-import * as yup from 'yup';
-import { translatedErrors } from '@strapi/helper-plugin';
-
-const schema = yup.object().shape({
-  name: yup.string().required(translatedErrors.required),
-  description: yup.string().required(translatedErrors.required),
-});
-
-export default schema;