@strapi/plugin-users-permissions 4.20.4 → 5.0.0-alpha.0

package/admin/src/pages/Roles/pages/CreatePage.jsx

@@ -12,20 +12,14 @@ import {
   TextInput,
   Typography,
 } from '@strapi/design-system';
-import {
-  CheckPagePermissions,
-  Form,
-  SettingsPageTitle,
-  useFetchClient,
-  useNotification,
-  useOverlayBlocker,
-  useTracking,
-} from '@strapi/helper-plugin';
+import { useFetchClient } from '@strapi/helper-plugin';
 import { Check } from '@strapi/icons';
-import { Formik } from 'formik';
+import { Page, useTracking, useNotification } from '@strapi/strapi/admin';
+import { Formik, Form } from 'formik';
+import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import UsersPermissions from '../../../components/UsersPermissions';
 import { PERMISSIONS } from '../../../constants';
@@ -35,9 +29,8 @@ import { usePlugins } from '../hooks/usePlugins';
 
 export const CreatePage = () => {
   const { formatMessage } = useIntl();
-  const toggleNotification = useNotification();
-  const { goBack } = useHistory();
-  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { toggleNotification } = useNotification();
+  const navigate = useNavigate();
   const { isLoading: isLoadingPlugins, permissions, routes } = usePlugins();
   const { trackUsage } = useTracking();
   const permissionsRef = React.useRef();
@@ -45,11 +38,11 @@ export const CreatePage = () => {
   const mutation = useMutation((body) => post(`/users-permissions/roles`, body), {
     onError() {
       toggleNotification({
-        type: 'warning',
-        message: {
+        type: 'danger',
+        message: formatMessage({
           id: 'notification.error',
           defaultMessage: 'An error occurred',
-        },
+        }),
       });
     },
 
@@ -58,34 +51,34 @@ export const CreatePage = () => {
 
       toggleNotification({
         type: 'success',
-        message: {
+        message: formatMessage({
           id: getTrad('Settings.roles.created'),
           defaultMessage: 'Role created',
-        },
+        }),
       });
 
       // Forcing redirecting since we don't have the id in the response
-      goBack();
+      navigate(-1);
     },
   });
 
   const handleCreateRoleSubmit = async (data) => {
-    lockApp();
-
     // TODO: refactor. Child -> parent component communication is evil;
     // We should either move the provider one level up or move the state
     // straight into redux.
     const permissions = permissionsRef.current.getPermissions();
 
     await mutation.mutate({ ...data, ...permissions, users: [] });
-
-    unlockApp();
   };
 
   return (
     <Main>
-      {/* TODO: This needs to be translated */}
-      <SettingsPageTitle name="Roles" />
+      <Helmet
+        title={formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          { name: 'Roles' }
+        )}
+      />
       <Formik
         enableReinitialize
         initialValues={{ name: '', description: '' }}
@@ -193,7 +186,7 @@ export const CreatePage = () => {
 };
 
 export const ProtectedRolesCreatePage = () => (
-  <CheckPagePermissions permissions={PERMISSIONS.createRole}>
+  <Page.Protect permissions={PERMISSIONS.createRole}>
     <CreatePage />
-  </CheckPagePermissions>
+  </Page.Protect>
 );

package/admin/src/pages/Roles/pages/EditPage.jsx

@@ -12,22 +12,14 @@ import {
   GridItem,
   Grid,
 } from '@strapi/design-system';
-import {
-  CheckPagePermissions,
-  useOverlayBlocker,
-  SettingsPageTitle,
-  LoadingIndicatorPage,
-  Form,
-  useAPIErrorHandler,
-  useFetchClient,
-  useNotification,
-  Link,
-} from '@strapi/helper-plugin';
-import { ArrowLeft, Check } from '@strapi/icons';
-import { Formik } from 'formik';
+import { useFetchClient } from '@strapi/helper-plugin';
+import { Check } from '@strapi/icons';
+import { Page, BackButton, useAPIErrorHandler, useNotification } from '@strapi/strapi/admin';
+import { Formik, Form } from 'formik';
+import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useQuery, useMutation } from 'react-query';
-import { useRouteMatch } from 'react-router-dom';
+import { useMatch } from 'react-router-dom';
 
 import UsersPermissions from '../../../components/UsersPermissions';
 import { PERMISSIONS } from '../../../constants';
@@ -37,11 +29,10 @@ import { usePlugins } from '../hooks/usePlugins';
 
 export const EditPage = () => {
   const { formatMessage } = useIntl();
-  const toggleNotification = useNotification();
-  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { toggleNotification } = useNotification();
   const {
     params: { id },
-  } = useRouteMatch(`/settings/users-permissions/roles/:id`);
+  } = useMatch(`/settings/users-permissions/roles/:id`);
   const { get } = useFetchClient();
   const { isLoading: isLoadingPlugins, routes } = usePlugins();
   const {
@@ -63,7 +54,7 @@ export const EditPage = () => {
   const mutation = useMutation((body) => put(`/users-permissions/roles/${id}`, body), {
     onError(error) {
       toggleNotification({
-        type: 'warning',
+        type: 'danger',
         message: formatAPIError(error),
       });
     },
@@ -71,10 +62,10 @@ export const EditPage = () => {
     async onSuccess() {
       toggleNotification({
         type: 'success',
-        message: {
+        message: formatMessage({
           id: getTrad('Settings.roles.created'),
           defaultMessage: 'Role edited',
-        },
+        }),
       });
 
       await refetchRole();
@@ -82,24 +73,23 @@ export const EditPage = () => {
   });
 
   const handleEditRoleSubmit = async (data) => {
-    // Set loading state
-    lockApp();
-
     const permissions = permissionsRef.current.getPermissions();
 
     await mutation.mutate({ ...data, ...permissions, users: [] });
-
-    unlockApp();
   };
 
   if (isLoadingRole) {
-    return <LoadingIndicatorPage />;
+    return <Page.Loading />;
   }
 
   return (
     <Main>
-      {/* TODO: this needs to be translated */}
-      <SettingsPageTitle name="Roles" />
+      <Helmet
+        title={formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          { name: 'Roles' }
+        )}
+      />
       <Formik
         enableReinitialize
         initialValues={{ name: role.name, description: role.description }}
@@ -110,7 +100,7 @@ export const EditPage = () => {
           <Form noValidate onSubmit={handleSubmit}>
             <HeaderLayout
               primaryAction={
-                !isLoadingPlugins && (
+                !isLoadingPlugins ? (
                   <Button
                     disabled={role.code === 'strapi-super-admin'}
                     type="submit"
@@ -122,18 +112,11 @@ export const EditPage = () => {
                       defaultMessage: 'Save',
                     })}
                   </Button>
-                )
+                ) : null
               }
               title={role.name}
               subtitle={role.description}
-              navigationAction={
-                <Link startIcon={<ArrowLeft />} to="/settings/users-permissions/roles">
-                  {formatMessage({
-                    id: 'global.back',
-                    defaultMessage: 'Back',
-                  })}
-                </Link>
-              }
+              navigationAction={<BackButton />}
             />
             <ContentLayout>
               <Flex
@@ -214,7 +197,7 @@ export const EditPage = () => {
 };
 
 export const ProtectedRolesEditPage = () => (
-  <CheckPagePermissions permissions={PERMISSIONS.updateRole}>
+  <Page.Protect permissions={PERMISSIONS.updateRole}>
     <EditPage />
-  </CheckPagePermissions>
+  </Page.Protect>
 );

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

@@ -1,24 +1,24 @@
 import React from 'react';
 
 import { Flex, IconButton, Link, Tbody, Td, Tr, Typography } from '@strapi/design-system';
-import { CheckPermissions, onRowClick, pxToRem, stopPropagation } from '@strapi/helper-plugin';
+import { 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';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 const EditLink = styled(Link)`
   align-items: center;
-  height: ${pxToRem(32)};
+  height: ${32 / 16}rem;
   display: flex;
   justify-content: center;
   padding: ${({ theme }) => `${theme.spaces[2]}}`};
-  width: ${pxToRem(32)};
+  width: ${32 / 16}rem;
 
   svg {
-    height: ${pxToRem(12)};
-    width: ${pxToRem(12)};
+    height: ${12 / 16}rem;
+    width: ${12 / 16}rem;
 
     path {
       fill: ${({ theme }) => theme.colors.neutral500};
@@ -35,9 +35,9 @@ const EditLink = styled(Link)`
   }
 `;
 
-const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDelete }) => {
+const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelete }) => {
   const { formatMessage } = useIntl();
-  const { push } = useHistory();
+  const navigate = useNavigate();
   const [showConfirmDelete, setShowConfirmDelete] = onDelete;
 
   const checkCanDeleteRole = (role) =>
@@ -48,14 +48,10 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
     setShowConfirmDelete(!showConfirmDelete);
   };
 
-  const handleClickEdit = (id) => {
-    push(`/settings/users-permissions/roles/${id}`);
-  };
-
   return (
     <Tbody>
       {sortedRoles?.map((role) => (
-        <Tr key={role.name} {...onRowClick({ fn: () => handleClickEdit(role.id) })}>
+        <Tr key={role.name} {...onRowClick({ fn: () => navigate(role.id.toString()) })}>
           <Td width="20%">
             <Typography>{role.name}</Typography>
           </Td>
@@ -75,9 +71,9 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
           </Td>
           <Td>
             <Flex justifyContent="end" {...stopPropagation}>
-              <CheckPermissions permissions={permissions.updateRole}>
+              {canUpdate ? (
                 <EditLink
-                  to={`/settings/users-permissions/roles/${role.id}`}
+                  to={role.id.toString()}
                   aria-label={formatMessage(
                     { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
                     { target: `${role.name}` }
@@ -85,20 +81,18 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
                 >
                   <Pencil />
                 </EditLink>
-              </CheckPermissions>
+              ) : null}
 
               {checkCanDeleteRole(role) && (
-                <CheckPermissions permissions={permissions.deleteRole}>
-                  <IconButton
-                    onClick={() => handleClickDelete(role.id)}
-                    noBorder
-                    icon={<Trash />}
-                    label={formatMessage(
-                      { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
-                      { target: `${role.name}` }
-                    )}
-                  />
-                </CheckPermissions>
+                <IconButton
+                  onClick={() => handleClickDelete(role.id.toString())}
+                  noBorder
+                  icon={<Trash />}
+                  label={formatMessage(
+                    { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
+                    { target: `${role.name}` }
+                  )}
+                />
               )}
             </Flex>
           </Td>
@@ -112,6 +106,7 @@ export default TableBody;
 
 TableBody.defaultProps = {
   canDelete: false,
+  canUpdate: false,
 };
 
 TableBody.propTypes = {
@@ -120,4 +115,5 @@ TableBody.propTypes = {
   setRoleToDelete: PropTypes.func.isRequired,
   sortedRoles: PropTypes.array.isRequired,
   canDelete: PropTypes.bool,
+  canUpdate: PropTypes.bool,
 };

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

@@ -13,28 +13,25 @@ import {
   Typography,
   useNotifyAT,
   VisuallyHidden,
-} from '@strapi/design-system';
-import {
-  CheckPagePermissions,
-  CheckPermissions,
-  ConfirmDialog,
   EmptyStateLayout,
-  LinkButton,
-  LoadingIndicatorPage,
-  NoPermissions,
-  SearchURLQuery,
-  SettingsPageTitle,
   useCollator,
   useFilter,
-  useFocusWhenNavigate,
-  useNotification,
-  useQueryParams,
-  useRBAC,
-  useTracking,
-} from '@strapi/helper-plugin';
+} from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { useFocusWhenNavigate, useQueryParams, useRBAC } from '@strapi/helper-plugin';
 import { Plus } from '@strapi/icons';
+import {
+  ConfirmDialog,
+  useTracking,
+  Page,
+  SearchInput,
+  BackButton,
+  useNotification,
+} from '@strapi/strapi/admin';
+import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery } from 'react-query';
+import { NavLink } from 'react-router-dom';
 
 import { PERMISSIONS } from '../../../../constants';
 import { getTrad } from '../../../../utils';
@@ -45,18 +42,17 @@ import { deleteData, fetchData } from './utils/api';
 export const RolesListPage = () => {
   const { trackUsage } = useTracking();
   const { formatMessage, locale } = useIntl();
-  const toggleNotification = useNotification();
+  const { toggleNotification } = useNotification();
   const { notifyStatus } = useNotifyAT();
   const [{ query }] = useQueryParams();
   const _q = query?._q || '';
   const [showConfirmDelete, setShowConfirmDelete] = useState(false);
-  const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
   const [roleToDelete, setRoleToDelete] = useState();
   useFocusWhenNavigate();
 
   const {
     isLoading: isLoadingForPermissions,
-    allowedActions: { canRead, canDelete },
+    allowedActions: { canRead, canDelete, canCreate, canUpdate },
   } = useRBAC({
     create: PERMISSIONS.createRole,
     read: PERMISSIONS.readRoles,
@@ -69,12 +65,12 @@ export const RolesListPage = () => {
     data: { roles },
     isFetching,
     refetch,
-  } = useQuery('get-roles', () => fetchData(toggleNotification, notifyStatus), {
+  } = useQuery('get-roles', () => fetchData(toggleNotification, formatMessage, notifyStatus), {
     initialData: {},
     enabled: canRead,
   });
 
-  const { includes } = useFilter(locale, {
+  const { contains } = useFilter(locale, {
     sensitivity: 'base',
   });
 
@@ -85,7 +81,7 @@ export const RolesListPage = () => {
     sensitivity: 'base',
   });
 
-  const isLoading = isLoadingForData || isFetching;
+  const isLoading = isLoadingForData || isFetching || isLoadingForPermissions;
 
   const handleShowConfirmDelete = () => {
     setShowConfirmDelete(!showConfirmDelete);
@@ -107,21 +103,19 @@ export const RolesListPage = () => {
     defaultMessage: 'Roles',
   });
 
-  const deleteMutation = useMutation((id) => deleteData(id, toggleNotification), {
+  const deleteMutation = useMutation((id) => deleteData(id, formatMessage, toggleNotification), {
     async onSuccess() {
       await refetch();
     },
   });
 
   const handleConfirmDelete = async () => {
-    setIsConfirmButtonLoading(true);
     await deleteMutation.mutateAsync(roleToDelete);
     setShowConfirmDelete(!showConfirmDelete);
-    setIsConfirmButtonLoading(false);
   };
 
   const sortedRoles = (roles || [])
-    .filter((role) => includes(role.name, _q) || includes(role.description, _q))
+    .filter((role) => contains(role.name, _q) || contains(role.description, _q))
     .sort(
       (a, b) => formatter.compare(a.name, b.name) || formatter.compare(a.description, b.description)
     );
@@ -131,9 +125,18 @@ export const RolesListPage = () => {
   const colCount = 4;
   const rowCount = (roles?.length || 0) + 1;
 
+  if (isLoading) {
+    return <Page.Loading />;
+  }
+
   return (
     <Layout>
-      <SettingsPageTitle name={pageTitle} />
+      <Helmet
+        title={formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          { name: pageTitle }
+        )}
+      />
       <Main aria-busy={isLoading}>
         <HeaderLayout
           title={formatMessage({
@@ -145,9 +148,10 @@ export const RolesListPage = () => {
             defaultMessage: 'List of roles',
           })}
           primaryAction={
-            <CheckPermissions permissions={PERMISSIONS.createRole}>
+            canCreate ? (
               <LinkButton
-                to="/settings/users-permissions/roles/new"
+                to="new"
+                as={NavLink}
                 onClick={() => trackUsage('willCreateRole')}
                 startIcon={<Plus />}
                 size="S"
@@ -157,13 +161,14 @@ export const RolesListPage = () => {
                   defaultMessage: 'Add new role',
                 })}
               </LinkButton>
-            </CheckPermissions>
+            ) : null
           }
+          navigationAction={<BackButton />}
         />
 
         <ActionLayout
           startActions={
-            <SearchURLQuery
+            <SearchInput
               label={formatMessage({
                 id: 'app.component.search.label',
                 defaultMessage: 'Search',
@@ -173,8 +178,7 @@ export const RolesListPage = () => {
         />
 
         <ContentLayout>
-          {!canRead && <NoPermissions />}
-          {(isLoading || isLoadingForPermissions) && <LoadingIndicatorPage />}
+          {!canRead && <Page.NoPermissions />}
           {canRead && sortedRoles && sortedRoles?.length ? (
             <Table colCount={colCount} rowCount={rowCount}>
               <Thead>
@@ -213,19 +217,19 @@ export const RolesListPage = () => {
               <TableBody
                 sortedRoles={sortedRoles}
                 canDelete={canDelete}
+                canUpdate={canUpdate}
                 permissions={PERMISSIONS}
                 setRoleToDelete={setRoleToDelete}
                 onDelete={[showConfirmDelete, setShowConfirmDelete]}
               />
             </Table>
           ) : (
-            <EmptyStateLayout content={emptyLayout[emptyContent]} />
+            <EmptyStateLayout content={formatMessage(emptyLayout[emptyContent])} />
           )}
         </ContentLayout>
         <ConfirmDialog
-          isConfirmButtonLoading={isConfirmButtonLoading}
           onConfirm={handleConfirmDelete}
-          onToggleDialog={handleShowConfirmDelete}
+          onClose={handleShowConfirmDelete}
           isOpen={showConfirmDelete}
         />
       </Main>
@@ -235,8 +239,8 @@ export const RolesListPage = () => {
 
 export const ProtectedRolesListPage = () => {
   return (
-    <CheckPagePermissions permissions={PERMISSIONS.accessRoles}>
+    <Page.Protect permissions={PERMISSIONS.accessRoles}>
       <RolesListPage />
-    </CheckPagePermissions>
+    </Page.Protect>
   );
 };

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

@@ -1,6 +1,6 @@
 import { getFetchClient } from '@strapi/helper-plugin';
 
-export const fetchData = async (toggleNotification, notifyStatus) => {
+export const fetchData = async (toggleNotification, formatMessage, notifyStatus) => {
   try {
     const { get } = getFetchClient();
     const { data } = await get('/users-permissions/roles');
@@ -9,22 +9,22 @@ export const fetchData = async (toggleNotification, notifyStatus) => {
     return data;
   } catch (err) {
     toggleNotification({
-      type: 'warning',
-      message: { id: 'notification.error' },
+      type: 'danger',
+      message: formatMessage({ id: 'notification.error' }),
     });
 
     throw new Error(err);
   }
 };
 
-export const deleteData = async (id, toggleNotification) => {
+export const deleteData = async (id, formatMessage, toggleNotification) => {
   try {
     const { del } = getFetchClient();
     await del(`/users-permissions/roles/${id}`);
   } catch (error) {
     toggleNotification({
-      type: 'warning',
-      message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      type: 'danger',
+      message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occured' }),
     });
   }
 };

package/admin/src/translations/en.json

@@ -60,7 +60,7 @@
   "Settings.roles.deleted": "Role deleted",
   "Settings.roles.edited": "Role edited",
   "Settings.section-label": "Users & Permissions plugin",
-  "components.Input.error.validation.email": "This is an invalid email",
+  "components.Input.error.validation.email": "This is not a valid email",
   "components.Input.error.validation.json": "This doesn't match the JSON format",
   "components.Input.error.validation.max": "The value is too high.",
   "components.Input.error.validation.maxLength": "The value is too long.",