@strapi/plugin-users-permissions 5.0.0-beta.8 → 5.0.0-rc.0

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

@@ -10,6 +10,7 @@ import {
   Tr,
   Typography,
   VisuallyHidden,
+  Box,
 } from '@strapi/design-system';
 import { Check, Pencil, ArrowClockwise as Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
@@ -53,12 +54,14 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
       <Tbody>
         <Tr onClick={() => onEditClick('reset_password')}>
           <Td>
-            <Refresh
-              aria-label={formatMessage({
-                id: 'global.reset-password',
-                defaultMessage: 'Reset password',
-              })}
-            />
+            <Box width="3.2rem" height="3.2rem" padding="0.8rem">
+              <Refresh
+                aria-label={formatMessage({
+                  id: 'global.reset-password',
+                  defaultMessage: 'Reset password',
+                })}
+              />
+            </Box>
           </Td>
           <Td>
             <Typography>
@@ -84,12 +87,14 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
         </Tr>
         <Tr onClick={() => onEditClick('email_confirmation')}>
           <Td>
-            <Check
-              aria-label={formatMessage({
-                id: getTrad('Email.template.email_confirmation'),
-                defaultMessage: 'Email address confirmation',
-              })}
-            />
+            <Box width="3.2rem" height="3.2rem" padding="0.8rem">
+              <Check
+                aria-label={formatMessage({
+                  id: getTrad('Email.template.email_confirmation'),
+                  defaultMessage: 'Email address confirmation',
+                })}
+              />
+            </Box>
           </Td>
           <Td>
             <Typography>

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

@@ -134,13 +134,12 @@ const EmailTemplatesPage = () => {
       />
       <Layouts.Content>
         <EmailTable onEditClick={handleEditClick} canUpdate={canUpdate} />
-        {isModalOpen && (
-          <EmailForm
-            template={data[templateToEdit]}
-            onToggle={handleToggle}
-            onSubmit={handleSubmit}
-          />
-        )}
+        <EmailForm
+          template={data[templateToEdit]}
+          onToggle={handleToggle}
+          open={isModalOpen}
+          onSubmit={handleSubmit}
+        />
       </Layouts.Content>
     </Page.Main>
   );

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

@@ -63,7 +63,7 @@ export const ProvidersPage = () => {
 
   const submitMutation = useMutation((body) => put('/users-permissions/providers', body), {
     async onSuccess() {
-      await queryClient.invalidateQueries(['users-permissions', 'providers']);
+      await queryClient.invalidateQueries(['users-permissions', 'get-providers']);
 
       toggleNotification({
         type: 'success',

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

@@ -4,7 +4,6 @@ import {
   Button,
   Flex,
   Grid,
-  GridItem,
   Main,
   Textarea,
   TextInput,
@@ -125,8 +124,8 @@ export const CreatePage = () => {
                     })}
                   </Typography>
 
-                  <Grid gap={4}>
-                    <GridItem col={6}>
+                  <Grid.Root gap={4}>
+                    <Grid.Item col={6}>
                       <Field.Root
                         name="name"
                         error={
@@ -145,8 +144,8 @@ export const CreatePage = () => {
                         <TextInput value={values.name || ''} onChange={handleChange} />
                         <Field.Error />
                       </Field.Root>
-                    </GridItem>
-                    <GridItem col={6}>
+                    </Grid.Item>
+                    <Grid.Item col={6}>
                       <Field.Root
                         name="description"
                         error={
@@ -168,8 +167,8 @@ export const CreatePage = () => {
                         <Textarea value={values.description || ''} onChange={handleChange} />
                         <Field.Error />
                       </Field.Root>
-                    </GridItem>
-                  </Grid>
+                    </Grid.Item>
+                  </Grid.Root>
                 </Flex>
 
                 {!isLoadingPlugins && (

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

@@ -7,7 +7,6 @@ import {
   TextInput,
   Textarea,
   Typography,
-  GridItem,
   Grid,
   Field,
 } from '@strapi/design-system';
@@ -143,8 +142,8 @@ export const EditPage = () => {
                     })}
                   </Typography>
 
-                  <Grid gap={4}>
-                    <GridItem col={6}>
+                  <Grid.Root gap={4}>
+                    <Grid.Item col={6}>
                       <Field.Root
                         name="name"
                         error={
@@ -166,8 +165,8 @@ export const EditPage = () => {
                         <TextInput value={values.name || ''} onChange={handleChange} />
                         <Field.Error />
                       </Field.Root>
-                    </GridItem>
-                    <GridItem col={6}>
+                    </Grid.Item>
+                    <Grid.Item col={6}>
                       <Field.Root
                         name="description"
                         error={
@@ -189,8 +188,8 @@ export const EditPage = () => {
                         <Textarea value={values.description || ''} onChange={handleChange} />
                         <Field.Error />
                       </Field.Root>
-                    </GridItem>
-                  </Grid>
+                    </Grid.Item>
+                  </Grid.Root>
                 </Flex>
 
                 {!isLoadingPlugins && (

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

@@ -4,20 +4,20 @@ import { Flex, IconButton, Link, Tbody, Td, Tr, Typography } from '@strapi/desig
 import { Pencil, Trash } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, NavLink } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 const EditLink = styled(Link)`
   align-items: center;
   height: 3.2rem;
+  width: 3.2rem;
   display: flex;
   justify-content: center;
-  padding: ${({ theme }) => `${theme.spaces[2]}}`};
-  width: 3.2rem;
+  padding: ${({ theme }) => `${theme.spaces[2]}`};
 
   svg {
-    height: 1.2rem;
-    width: 1.2rem;
+    height: 1.6rem;
+    width: 1.6rem;
 
     path {
       fill: ${({ theme }) => theme.colors.neutral500};
@@ -72,6 +72,7 @@ const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelet
             <Flex justifyContent="end" onClick={(e) => e.stopPropagation()}>
               {canUpdate ? (
                 <EditLink
+                  tag={NavLink}
                   to={role.id.toString()}
                   aria-label={formatMessage(
                     { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },

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

@@ -11,8 +11,9 @@ import {
   EmptyStateLayout,
   useCollator,
   useFilter,
+  LinkButton,
+  Dialog,
 } from '@strapi/design-system';
-import { LinkButton } from '@strapi/design-system';
 import { Plus } from '@strapi/icons';
 import {
   ConfirmDialog,
@@ -250,11 +251,9 @@ export const RolesListPage = () => {
             <EmptyStateLayout content={formatMessage(emptyLayout[emptyContent])} />
           )}
         </Layouts.Content>
-        <ConfirmDialog
-          onConfirm={handleConfirmDelete}
-          onClose={handleShowConfirmDelete}
-          isOpen={showConfirmDelete}
-        />
+        <Dialog.Root open={showConfirmDelete} onOpenChange={handleShowConfirmDelete}>
+          <ConfirmDialog onConfirm={handleConfirmDelete} />
+        </Dialog.Root>
       </Page.Main>
     </Layouts.Root>
   );