@strapi/plugin-users-permissions 0.0.0-next.fb3a0b82484ce466b1efb1b28f16fc8ef73aba4a → 0.0.0-next.fc1775f7731f8999840e56e298a216b9a6c5c4ad

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

@@ -2,30 +2,20 @@ import * as React from 'react';
 
 import {
   Button,
-  ContentLayout,
   Flex,
   Grid,
-  GridItem,
-  HeaderLayout,
   Main,
   Textarea,
   TextInput,
   Typography,
+  Field,
 } from '@strapi/design-system';
-import {
-  CheckPagePermissions,
-  Form,
-  SettingsPageTitle,
-  useFetchClient,
-  useNotification,
-  useOverlayBlocker,
-  useTracking,
-} from '@strapi/helper-plugin';
 import { Check } from '@strapi/icons';
-import { Formik } from 'formik';
+import { Page, useTracking, useNotification, useFetchClient, Layouts } from '@strapi/strapi/admin';
+import { Formik, Form } from 'formik';
 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 +25,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 +34,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 +47,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" />
+      <Page.Title>
+        {formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          { name: 'Roles' }
+        )}
+      </Page.Title>
       <Formik
         enableReinitialize
         initialValues={{ name: '', description: '' }}
@@ -94,7 +83,7 @@ export const CreatePage = () => {
       >
         {({ handleSubmit, values, handleChange, errors }) => (
           <Form noValidate onSubmit={handleSubmit}>
-            <HeaderLayout
+            <Layouts.Header
               primaryAction={
                 !isLoadingPlugins && (
                   <Button type="submit" loading={mutation.isLoading} startIcon={<Check />}>
@@ -114,7 +103,7 @@ export const CreatePage = () => {
                 defaultMessage: 'Define the rights given to the role',
               })}
             />
-            <ContentLayout>
+            <Layouts.Content>
               <Flex
                 background="neutral0"
                 direction="column"
@@ -128,40 +117,37 @@ export const CreatePage = () => {
                 shadow="filterShadow"
               >
                 <Flex direction="column" alignItems="stretch">
-                  <Typography variant="delta" as="h2">
+                  <Typography variant="delta" tag="h2">
                     {formatMessage({
                       id: getTrad('EditPage.form.roles'),
                       defaultMessage: 'Role details',
                     })}
                   </Typography>
 
-                  <Grid gap={4}>
-                    <GridItem col={6}>
-                      <TextInput
+                  <Grid.Root gap={4}>
+                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                      <Field.Root
                         name="name"
-                        value={values.name || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.name',
-                          defaultMessage: 'Name',
-                        })}
                         error={
                           errors?.name
                             ? formatMessage({ id: errors.name, defaultMessage: 'Name is required' })
                             : false
                         }
                         required
-                      />
-                    </GridItem>
-                    <GridItem col={6}>
-                      <Textarea
-                        id="description"
-                        value={values.description || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.description',
-                          defaultMessage: 'Description',
-                        })}
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.name',
+                            defaultMessage: 'Name',
+                          })}
+                        </Field.Label>
+                        <TextInput value={values.name || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
+                    </Grid.Item>
+                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                      <Field.Root
+                        name="description"
                         error={
                           errors?.description
                             ? formatMessage({
@@ -171,9 +157,18 @@ export const CreatePage = () => {
                             : false
                         }
                         required
-                      />
-                    </GridItem>
-                  </Grid>
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.description',
+                            defaultMessage: 'Description',
+                          })}
+                        </Field.Label>
+                        <Textarea value={values.description || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
+                    </Grid.Item>
+                  </Grid.Root>
                 </Flex>
 
                 {!isLoadingPlugins && (
@@ -184,7 +179,7 @@ export const CreatePage = () => {
                   />
                 )}
               </Flex>
-            </ContentLayout>
+            </Layouts.Content>
           </Form>
         )}
       </Formik>
@@ -193,7 +188,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.js → EditPage.jsx}

@@ -1,33 +1,28 @@
 import * as React from 'react';
 
 import {
-  ContentLayout,
-  HeaderLayout,
   Main,
   Button,
   Flex,
   TextInput,
   Textarea,
   Typography,
-  GridItem,
   Grid,
+  Field,
 } from '@strapi/design-system';
+import { Check } from '@strapi/icons';
 import {
-  CheckPagePermissions,
-  useOverlayBlocker,
-  SettingsPageTitle,
-  LoadingIndicatorPage,
-  Form,
+  Page,
+  BackButton,
   useAPIErrorHandler,
-  useFetchClient,
   useNotification,
-  Link,
-} from '@strapi/helper-plugin';
-import { ArrowLeft, Check } from '@strapi/icons';
-import { Formik } from 'formik';
+  useFetchClient,
+  Layouts,
+} from '@strapi/strapi/admin';
+import { Formik, Form } from 'formik';
 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 +32,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 +57,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 +65,10 @@ export const EditPage = () => {
     async onSuccess() {
       toggleNotification({
         type: 'success',
-        message: {
+        message: formatMessage({
           id: getTrad('Settings.roles.created'),
           defaultMessage: 'Role edited',
-        },
+        }),
       });
 
       await refetchRole();
@@ -82,24 +76,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" />
+      <Page.Title>
+        {formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          { name: 'Roles' }
+        )}
+      </Page.Title>
       <Formik
         enableReinitialize
         initialValues={{ name: role.name, description: role.description }}
@@ -108,9 +101,9 @@ export const EditPage = () => {
       >
         {({ handleSubmit, values, handleChange, errors }) => (
           <Form noValidate onSubmit={handleSubmit}>
-            <HeaderLayout
+            <Layouts.Header
               primaryAction={
-                !isLoadingPlugins && (
+                !isLoadingPlugins ? (
                   <Button
                     disabled={role.code === 'strapi-super-admin'}
                     type="submit"
@@ -122,20 +115,13 @@ 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 fallback=".." />}
             />
-            <ContentLayout>
+            <Layouts.Content>
               <Flex
                 background="neutral0"
                 direction="column"
@@ -149,40 +135,40 @@ export const EditPage = () => {
                 shadow="filterShadow"
               >
                 <Flex direction="column" alignItems="stretch" gap={4}>
-                  <Typography variant="delta" as="h2">
+                  <Typography variant="delta" tag="h2">
                     {formatMessage({
                       id: getTrad('EditPage.form.roles'),
                       defaultMessage: 'Role details',
                     })}
                   </Typography>
 
-                  <Grid gap={4}>
-                    <GridItem col={6}>
-                      <TextInput
+                  <Grid.Root gap={4}>
+                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                      <Field.Root
                         name="name"
-                        value={values.name || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.name',
-                          defaultMessage: 'Name',
-                        })}
                         error={
                           errors?.name
-                            ? formatMessage({ id: errors.name, defaultMessage: 'Name is required' })
+                            ? formatMessage({
+                                id: errors.name,
+                                defaultMessage: 'Name is required',
+                              })
                             : false
                         }
                         required
-                      />
-                    </GridItem>
-                    <GridItem col={6}>
-                      <Textarea
-                        id="description"
-                        value={values.description || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.description',
-                          defaultMessage: 'Description',
-                        })}
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.name',
+                            defaultMessage: 'Name',
+                          })}
+                        </Field.Label>
+                        <TextInput value={values.name || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
+                    </Grid.Item>
+                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                      <Field.Root
+                        name="description"
                         error={
                           errors?.description
                             ? formatMessage({
@@ -192,9 +178,18 @@ export const EditPage = () => {
                             : false
                         }
                         required
-                      />
-                    </GridItem>
-                  </Grid>
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.description',
+                            defaultMessage: 'Description',
+                          })}
+                        </Field.Label>
+                        <Textarea value={values.description || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
+                    </Grid.Item>
+                  </Grid.Root>
                 </Flex>
 
                 {!isLoadingPlugins && (
@@ -205,7 +200,7 @@ export const EditPage = () => {
                   />
                 )}
               </Flex>
-            </ContentLayout>
+            </Layouts.Content>
           </Form>
         )}
       </Formik>
@@ -214,7 +209,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.js → TableBody.jsx}

@@ -1,24 +1,23 @@
 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 { Pencil, Trash } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
+import { useNavigate, NavLink } from 'react-router-dom';
+import { styled } from 'styled-components';
 
 const EditLink = styled(Link)`
   align-items: center;
-  height: ${pxToRem(32)};
+  height: 3.2rem;
+  width: 3.2rem;
   display: flex;
   justify-content: center;
-  padding: ${({ theme }) => `${theme.spaces[2]}}`};
-  width: ${pxToRem(32)};
+  padding: ${({ theme }) => `${theme.spaces[2]}`};
 
   svg {
-    height: ${pxToRem(12)};
-    width: ${pxToRem(12)};
+    height: 1.6rem;
+    width: 1.6rem;
 
     path {
       fill: ${({ theme }) => theme.colors.neutral500};
@@ -35,9 +34,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 +47,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 cursor="pointer" key={role.name} onClick={() => navigate(role.id.toString())}>
           <Td width="20%">
             <Typography>{role.name}</Typography>
           </Td>
@@ -74,10 +69,11 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
             </Typography>
           </Td>
           <Td>
-            <Flex justifyContent="end" {...stopPropagation}>
-              <CheckPermissions permissions={permissions.updateRole}>
+            <Flex justifyContent="end" onClick={(e) => e.stopPropagation()}>
+              {canUpdate ? (
                 <EditLink
-                  to={`/settings/users-permissions/roles/${role.id}`}
+                  tag={NavLink}
+                  to={role.id.toString()}
                   aria-label={formatMessage(
                     { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
                     { target: `${role.name}` }
@@ -85,20 +81,19 @@ 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())}
+                  variant="ghost"
+                  label={formatMessage(
+                    { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
+                    { target: `${role.name}` }
+                  )}
+                >
+                  <Trash />
+                </IconButton>
               )}
             </Flex>
           </Td>
@@ -112,12 +107,13 @@ export default TableBody;
 
 TableBody.defaultProps = {
   canDelete: false,
+  canUpdate: false,
 };
 
 TableBody.propTypes = {
   onDelete: PropTypes.array.isRequired,
-  permissions: PropTypes.object.isRequired,
   setRoleToDelete: PropTypes.func.isRequired,
   sortedRoles: PropTypes.array.isRequired,
   canDelete: PropTypes.bool,
+  canUpdate: PropTypes.bool,
 };