@strapi/plugin-users-permissions 0.0.0-next.dff425769af4d4d006725a10c395f59637403653 → 0.0.0-next.e16a4b69b276a52e1b299f339479948d67ec66f3

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

@@ -1,25 +1,28 @@
-import React, { useMemo, useRef, useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from 'react-query';
-import { useIntl } from 'react-intl';
+import React, { useRef, useState } from 'react';
+
+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 pluginPermissions from '../../permissions';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+
+import { PERMISSIONS } from '../../constants';
 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}>
+  <CheckPagePermissions permissions={PERMISSIONS.readEmailTemplates}>
     <EmailTemplatesPage />
   </CheckPagePermissions>
 );
@@ -37,14 +40,10 @@ const EmailTemplatesPage = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [templateToEdit, setTemplateToEdit] = useState(null);
 
-  const updatePermissions = useMemo(() => {
-    return { update: pluginPermissions.updateEmailTemplates };
-  }, []);
-
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canUpdate },
-  } = useRBAC(updatePermissions);
+  } = useRBAC({ update: PERMISSIONS.updateEmailTemplates });
 
   const { status: isLoadingData, data } = useQuery('email-templates', () => fetchData(), {
     onSuccess() {

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 { PERMISSIONS } from '../../constants';
+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();
@@ -52,14 +55,10 @@ export const ProvidersPage = () => {
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
 
-  const updatePermissions = useMemo(() => {
-    return { update: pluginPermissions.updateProviders };
-  }, []);
-
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canUpdate },
-  } = useRBAC(updatePermissions);
+  } = useRBAC({ update: PERMISSIONS.updateProviders });
 
   const {
     isLoading: isLoadingForData,
@@ -264,7 +263,7 @@ export const ProvidersPage = () => {
 };
 
 const ProtectedProvidersPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.readProviders}>
+  <CheckPagePermissions permissions={PERMISSIONS.readProviders}>
     <ProvidersPage />
   </CheckPagePermissions>
 );

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}>
@@ -143,7 +146,7 @@ const EditPage = () => {
                       </GridItem>
                       <GridItem col={6}>
                         <Textarea
-                          name="description"
+                          id="description"
                           value={values.description || ''}
                           onChange={handleChange}
                           label={formatMessage({
@@ -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}>
@@ -155,7 +158,7 @@ const EditPage = () => {
                       </GridItem>
                       <GridItem col={6}>
                         <Textarea
-                          name="description"
+                          id="description"
                           value={values.description || ''}
                           onChange={handleChange}
                           label={formatMessage({

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,48 +1,51 @@
-import React, { useMemo, useState } from 'react';
+import React, { 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,
+  useRBAC,
+  useTracking,
 } from '@strapi/helper-plugin';
+import { Plus } from '@strapi/icons';
 import { useIntl } from 'react-intl';
+import { useMutation, useQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
-import matchSorter from 'match-sorter';
 
-import { fetchData, deleteData } from './utils/api';
-import { getTrad } from '../../../utils';
+import { PERMISSIONS } from '../../../constants';
 import pluginId from '../../../pluginId';
-import permissions from '../../../permissions';
+import { getTrad } from '../../../utils';
+
 import TableBody from './components/TableBody';
+import { deleteData, fetchData } from './utils/api';
 
 const RoleListPage = () => {
   const { trackUsage } = useTracking();
-  const { formatMessage } = useIntl();
+  const { formatMessage, locale } = useIntl();
   const { push } = useHistory();
   const toggleNotification = useNotification();
   const { notifyStatus } = useNotifyAT();
@@ -53,31 +56,37 @@ const RoleListPage = () => {
   const [roleToDelete, setRoleToDelete] = useState();
   useFocusWhenNavigate();
 
-  const queryClient = useQueryClient();
-
-  const updatePermissions = useMemo(() => {
-    return {
-      create: permissions.createRole,
-      read: permissions.readRoles,
-      update: permissions.updateRole,
-      delete: permissions.deleteRole,
-    };
-  }, []);
-
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canRead, canDelete },
-  } = useRBAC(updatePermissions);
+  } = useRBAC({
+    create: PERMISSIONS.createRole,
+    read: PERMISSIONS.readRoles,
+    update: PERMISSIONS.updateRole,
+    delete: PERMISSIONS.deleteRole,
+  });
 
   const {
     isLoading: isLoadingForData,
     data: { roles },
     isFetching,
+    refetch,
   } = useQuery('get-roles', () => fetchData(toggleNotification, notifyStatus), {
     initialData: {},
     enabled: canRead,
   });
 
+  const { includes } = useFilter(locale, {
+    sensitivity: 'base',
+  });
+
+  /**
+   * @type {Intl.Collator}
+   */
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
+  });
+
   const isLoading = isLoadingForData || isFetching;
 
   const handleNewRoleClick = () => {
@@ -107,7 +116,7 @@ const RoleListPage = () => {
 
   const deleteMutation = useMutation((id) => deleteData(id, toggleNotification), {
     async onSuccess() {
-      await queryClient.invalidateQueries('get-roles');
+      await refetch();
     },
   });
 
@@ -118,7 +127,12 @@ const RoleListPage = () => {
     setIsConfirmButtonLoading(false);
   };
 
-  const sortedRoles = matchSorter(roles || [], _q, { keys: ['name', 'description'] });
+  const sortedRoles = (roles || [])
+    .filter((role) => includes(role.name, _q) || includes(role.description, _q))
+    .sort(
+      (a, b) => formatter.compare(a.name, b.name) || formatter.compare(a.description, b.description)
+    );
+
   const emptyContent = _q && !sortedRoles.length ? 'search' : 'roles';
 
   const colCount = 4;
@@ -138,7 +152,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'),
@@ -201,7 +215,7 @@ const RoleListPage = () => {
               <TableBody
                 sortedRoles={sortedRoles}
                 canDelete={canDelete}
-                permissions={permissions}
+                permissions={PERMISSIONS}
                 setRoleToDelete={setRoleToDelete}
                 onDelete={[showConfirmDelete, setShowConfirmDelete]}
               />

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

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

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

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

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

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