@strapi/plugin-users-permissions 5.0.0-beta.1 → 5.0.0-beta.11

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

@@ -1,16 +1,14 @@
 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 {
@@ -19,9 +17,9 @@ import {
   useAPIErrorHandler,
   useNotification,
   useFetchClient,
+  Layouts,
 } 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 { useMatch } from 'react-router-dom';
@@ -89,12 +87,12 @@ export const EditPage = () => {
 
   return (
     <Main>
-      <Helmet
-        title={formatMessage(
+      <Page.Title>
+        {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
           { name: 'Roles' }
         )}
-      />
+      </Page.Title>
       <Formik
         enableReinitialize
         initialValues={{ name: role.name, description: role.description }}
@@ -103,7 +101,7 @@ export const EditPage = () => {
       >
         {({ handleSubmit, values, handleChange, errors }) => (
           <Form noValidate onSubmit={handleSubmit}>
-            <HeaderLayout
+            <Layouts.Header
               primaryAction={
                 !isLoadingPlugins ? (
                   <Button
@@ -123,7 +121,7 @@ export const EditPage = () => {
               subtitle={role.description}
               navigationAction={<BackButton />}
             />
-            <ContentLayout>
+            <Layouts.Content>
               <Flex
                 background="neutral0"
                 direction="column"
@@ -137,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}>
+                      <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}>
+                      <Field.Root
+                        name="description"
                         error={
                           errors?.description
                             ? formatMessage({
@@ -180,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 && (
@@ -193,7 +200,7 @@ export const EditPage = () => {
                   />
                 )}
               </Flex>
-            </ContentLayout>
+            </Layouts.Content>
           </Form>
         )}
       </Formik>

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

@@ -5,19 +5,19 @@ import { Pencil, Trash } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 const EditLink = styled(Link)`
   align-items: center;
-  height: ${32 / 16}rem;
+  height: 3.2rem;
   display: flex;
   justify-content: center;
   padding: ${({ theme }) => `${theme.spaces[2]}}`};
-  width: ${32 / 16}rem;
+  width: 3.2rem;
 
   svg {
-    height: ${12 / 16}rem;
-    width: ${12 / 16}rem;
+    height: 1.2rem;
+    width: 1.2rem;
 
     path {
       fill: ${({ theme }) => theme.colors.neutral500};
@@ -85,13 +85,14 @@ const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelet
               {checkCanDeleteRole(role) && (
                 <IconButton
                   onClick={() => handleClickDelete(role.id.toString())}
-                  noBorder
-                  icon={<Trash />}
+                  borderWidth={0}
                   label={formatMessage(
                     { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
                     { target: `${role.name}` }
                   )}
-                />
+                >
+                  <Trash />
+                </IconButton>
               )}
             </Flex>
           </Td>
@@ -110,7 +111,6 @@ TableBody.defaultProps = {
 
 TableBody.propTypes = {
   onDelete: PropTypes.array.isRequired,
-  permissions: PropTypes.object.isRequired,
   setRoleToDelete: PropTypes.func.isRequired,
   sortedRoles: PropTypes.array.isRequired,
   canDelete: PropTypes.bool,

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

@@ -1,10 +1,6 @@
 import React, { useState } from 'react';
 
 import {
-  ActionLayout,
-  ContentLayout,
-  HeaderLayout,
-  Layout,
   Table,
   Th,
   Thead,
@@ -15,8 +11,9 @@ import {
   EmptyStateLayout,
   useCollator,
   useFilter,
+  LinkButton,
+  Dialog,
 } from '@strapi/design-system';
-import { LinkButton } from '@strapi/design-system/v2';
 import { Plus } from '@strapi/icons';
 import {
   ConfirmDialog,
@@ -28,8 +25,8 @@ import {
   useQueryParams,
   useFetchClient,
   useRBAC,
+  Layouts,
 } 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';
@@ -157,15 +154,15 @@ export const RolesListPage = () => {
   }
 
   return (
-    <Layout>
-      <Helmet
-        title={formatMessage(
+    <Layouts.Root>
+      <Page.Title>
+        {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
           { name: pageTitle }
         )}
-      />
+      </Page.Title>
       <Page.Main>
-        <HeaderLayout
+        <Layouts.Header
           title={formatMessage({
             id: 'global.roles',
             defaultMessage: 'Roles',
@@ -178,7 +175,7 @@ export const RolesListPage = () => {
             canCreate ? (
               <LinkButton
                 to="new"
-                as={NavLink}
+                tag={NavLink}
                 onClick={() => trackUsage('willCreateRole')}
                 startIcon={<Plus />}
                 size="S"
@@ -193,7 +190,7 @@ export const RolesListPage = () => {
           navigationAction={<BackButton />}
         />
 
-        <ActionLayout
+        <Layouts.Action
           startActions={
             <SearchInput
               label={formatMessage({
@@ -204,7 +201,7 @@ export const RolesListPage = () => {
           }
         />
 
-        <ContentLayout>
+        <Layouts.Content>
           {!canRead && <Page.NoPermissions />}
           {canRead && sortedRoles && sortedRoles?.length ? (
             <Table colCount={colCount} rowCount={rowCount}>
@@ -253,14 +250,12 @@ export const RolesListPage = () => {
           ) : (
             <EmptyStateLayout content={formatMessage(emptyLayout[emptyContent])} />
           )}
-        </ContentLayout>
-        <ConfirmDialog
-          onConfirm={handleConfirmDelete}
-          onClose={handleShowConfirmDelete}
-          isOpen={showConfirmDelete}
-        />
+        </Layouts.Content>
+        <Dialog.Root open={showConfirmDelete} onOpenChange={handleShowConfirmDelete}>
+          <ConfirmDialog onConfirm={handleConfirmDelete} />
+        </Dialog.Root>
       </Page.Main>
-    </Layout>
+    </Layouts.Root>
   );
 };
 

package/dist/_chunks/{ar-t5qTFaAD.js → ar-BguGUqwK.js}

@@ -41,4 +41,4 @@ const ar = {
   "plugin.name": "الأدوار والصلاحية"
 };
 exports.default = ar;
-//# sourceMappingURL=ar-t5qTFaAD.js.map
+//# sourceMappingURL=ar-BguGUqwK.js.map

package/dist/_chunks/ar-BguGUqwK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ar-BguGUqwK.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{ar-MvD8Ghac.mjs → ar-CK8BRRXB.mjs}

@@ -41,4 +41,4 @@ const ar = {
 export {
   ar as default
 };
-//# sourceMappingURL=ar-MvD8Ghac.mjs.map
+//# sourceMappingURL=ar-CK8BRRXB.mjs.map

package/dist/_chunks/ar-CK8BRRXB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ar-CK8BRRXB.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{cs-BMuXwxA1.mjs → cs-BVigMk0l.mjs}

@@ -47,4 +47,4 @@ const cs = {
 export {
   cs as default
 };
-//# sourceMappingURL=cs-BMuXwxA1.mjs.map
+//# sourceMappingURL=cs-BVigMk0l.mjs.map

package/dist/_chunks/cs-BVigMk0l.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-BVigMk0l.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{cs-I8N4u-Sd.js → cs-BW8-K_GY.js}

@@ -47,4 +47,4 @@ const cs = {
   "plugin.name": "Role a oprávnění"
 };
 exports.default = cs;
-//# sourceMappingURL=cs-I8N4u-Sd.js.map
+//# sourceMappingURL=cs-BW8-K_GY.js.map

package/dist/_chunks/cs-BW8-K_GY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-BW8-K_GY.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{de-zs2qqc0W.mjs → de-BKUdRFI4.mjs}

@@ -59,4 +59,4 @@ const de = {
 export {
   de as default
 };
-//# sourceMappingURL=de-zs2qqc0W.mjs.map
+//# sourceMappingURL=de-BKUdRFI4.mjs.map

package/dist/_chunks/de-BKUdRFI4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"de-BKUdRFI4.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{de-YTjtq89K.js → de-owXpVluI.js}

@@ -59,4 +59,4 @@ const de = {
   "popUpWarning.warning.cancel": "Willst du wirklich alle deine Änderungen verwerfen?"
 };
 exports.default = de;
-//# sourceMappingURL=de-YTjtq89K.js.map
+//# sourceMappingURL=de-owXpVluI.js.map

package/dist/_chunks/de-owXpVluI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"de-owXpVluI.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{dk-HctVBMsG.mjs → dk-BQiTK50l.mjs}

@@ -83,4 +83,4 @@ const dk = {
 export {
   dk as default
 };
-//# sourceMappingURL=dk-HctVBMsG.mjs.map
+//# sourceMappingURL=dk-BQiTK50l.mjs.map

package/dist/_chunks/dk-BQiTK50l.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dk-BQiTK50l.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{dk-TF-dWjzl.js → dk-LXAnbuBk.js}

@@ -83,4 +83,4 @@ const dk = {
   "popUpWarning.warning.cancel": "Er du sikker på at du vil annullere dine ændringer?"
 };
 exports.default = dk;
-//# sourceMappingURL=dk-TF-dWjzl.js.map
+//# sourceMappingURL=dk-LXAnbuBk.js.map

package/dist/_chunks/dk-LXAnbuBk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dk-LXAnbuBk.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{en-jvJ-d-Qq.mjs → en-DOHtPf-2.mjs}

@@ -83,4 +83,4 @@ const en = {
 export {
   en as default
 };
-//# sourceMappingURL=en-jvJ-d-Qq.mjs.map
+//# sourceMappingURL=en-DOHtPf-2.mjs.map

package/dist/_chunks/en-DOHtPf-2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-DOHtPf-2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{en-TaNIVnDO.js → en-MHo5mcsU.js}

@@ -83,4 +83,4 @@ const en = {
   "popUpWarning.warning.cancel": "Are you sure you want to cancel your modifications?"
 };
 exports.default = en;
-//# sourceMappingURL=en-TaNIVnDO.js.map
+//# sourceMappingURL=en-MHo5mcsU.js.map

package/dist/_chunks/en-MHo5mcsU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-MHo5mcsU.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{es-XBQsB8_9.js → es-BwLCLXAQ.js}

@@ -83,4 +83,4 @@ const es = {
   "popUpWarning.warning.cancel": "¿Está seguro de que desea cancelar sus modificaciones?"
 };
 exports.default = es;
-//# sourceMappingURL=es-XBQsB8_9.js.map
+//# sourceMappingURL=es-BwLCLXAQ.js.map

package/dist/_chunks/es-BwLCLXAQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"es-BwLCLXAQ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{es-9381tih_.mjs → es-DNgOVMjD.mjs}

@@ -83,4 +83,4 @@ const es = {
 export {
   es as default
 };
-//# sourceMappingURL=es-9381tih_.mjs.map
+//# sourceMappingURL=es-DNgOVMjD.mjs.map

package/dist/_chunks/es-DNgOVMjD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"es-DNgOVMjD.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{fr-CMSc77If.mjs → fr-DkgRugiU.mjs}

@@ -47,4 +47,4 @@ const fr = {
 export {
   fr as default
 };
-//# sourceMappingURL=fr-CMSc77If.mjs.map
+//# sourceMappingURL=fr-DkgRugiU.mjs.map

package/dist/_chunks/fr-DkgRugiU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fr-DkgRugiU.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{fr-6cz3U-IF.js → fr-DkhpSjjm.js}

@@ -47,4 +47,4 @@ const fr = {
   "plugin.name": "Rôles et autorisations"
 };
 exports.default = fr;
-//# sourceMappingURL=fr-6cz3U-IF.js.map
+//# sourceMappingURL=fr-DkhpSjjm.js.map

package/dist/_chunks/fr-DkhpSjjm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fr-DkhpSjjm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{id-RJ934rq-.js → id-BTemOeTZ.js}

@@ -59,4 +59,4 @@ const id = {
   "popUpWarning.warning.cancel": "Anda yakin ingin membatalkan modifikasi Anda?"
 };
 exports.default = id;
-//# sourceMappingURL=id-RJ934rq-.js.map
+//# sourceMappingURL=id-BTemOeTZ.js.map

package/dist/_chunks/id-BTemOeTZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-BTemOeTZ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_chunks/{id-SDuyIkZa.mjs → id-BdEsvnaF.mjs}

@@ -59,4 +59,4 @@ const id = {
 export {
   id as default
 };
-//# sourceMappingURL=id-SDuyIkZa.mjs.map
+//# sourceMappingURL=id-BdEsvnaF.mjs.map

package/dist/_chunks/id-BdEsvnaF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-BdEsvnaF.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}