@strapi/plugin-users-permissions 0.0.0-next.f6dca5adf05ef6bed9605a1535999ab0bbbf063e → 0.0.0-next.f86041c89a8c1545c6437a881dc613e98bc52bd7

package/.eslintignore

@@ -1 +1,2 @@
-dist
+dist
+rollup.config.mjs

package/admin/src/components/BoundRoute/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Box, Flex, Typography } from '@strapi/design-system';
 import map from 'lodash/map';

package/admin/src/components/FormModal/Input/index.jsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import { TextInput, Toggle, Field } from '@strapi/design-system';
 import PropTypes from 'prop-types';

package/admin/src/components/FormModal/index.jsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react';
+import * as React from 'react';
 
 import { Button, Flex, Grid, Modal, Breadcrumbs, Crumb } from '@strapi/design-system';
 import { Form, Formik } from 'formik';

package/admin/src/components/Permissions/PermissionRow/SubCategory.jsx

@@ -78,7 +78,14 @@ const SubCategory = ({ subCategory }) => {
             const name = `${action.name}.enabled`;
 
             return (
-              <Grid.Item col={6} key={action.name} direction="column" alignItems="stretch">
+              <Grid.Item
+                col={4}
+                xs={12}
+                s={6}
+                key={action.name}
+                direction="column"
+                alignItems="stretch"
+              >
                 <CheckboxWrapper isActive={isActionSelected(action.name)} padding={2} hasRadius>
                   <Checkbox
                     checked={get(modifiedData, name, false)}
@@ -103,7 +110,7 @@ const SubCategory = ({ subCategory }) => {
                         }
                       )}
                     </VisuallyHidden>
-                    <Cog id="cog" />
+                    <Cog id="cog" cursor="pointer" />
                   </button>
                 </CheckboxWrapper>
               </Grid.Item>

package/admin/src/components/Policies/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Flex, Grid, Typography } from '@strapi/design-system';
 import get from 'lodash/get';
@@ -24,6 +24,7 @@ const Policies = () => {
   return (
     <Grid.Item
       col={5}
+      xs={12}
       background="neutral150"
       paddingTop={6}
       paddingBottom={6}

package/admin/src/components/UsersPermissions/index.jsx

@@ -64,6 +64,7 @@ const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
       <Grid.Root gap={0} shadow="filterShadow" hasRadius background="neutral0">
         <Grid.Item
           col={7}
+          xs={12}
           paddingTop={6}
           paddingBottom={6}
           paddingLeft={7}

package/admin/src/index.js

@@ -1,10 +1,10 @@
-import pluginPkg from '../../package.json';
+import { strapi as pkgStrapi } from '../../package.json';
 
 import { PERMISSIONS } from './constants';
 import getTrad from './utils/getTrad';
 import { prefixPluginTranslations } from './utils/prefixPluginTranslations';
 
-const name = pluginPkg.strapi.name;
+const name = pkgStrapi.name;
 
 export default {
   register(app) {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Box, Button, Flex, Grid, Typography, useNotifyAT } from '@strapi/design-system';
 import { Check } from '@strapi/icons';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Button, Grid, Modal, Breadcrumbs, Crumb, VisuallyHidden } from '@strapi/design-system';
 import { Form, InputRenderer } from '@strapi/strapi/admin';
@@ -104,7 +104,8 @@ const EmailForm = ({ template = {}, onToggle, open, onSubmit }) => {
                     ].map(({ size, ...field }) => (
                       <Grid.Item
                         key={field.name}
-                        col={size}
+                        m={size}
+                        xs={12}
                         direction="column"
                         alignItems="stretch"
                       >

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {
   IconButton,
@@ -52,7 +52,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
         </Tr>
       </Thead>
       <Tbody>
-        <Tr onClick={() => onEditClick('reset_password')}>
+        <Tr cursor="pointer" onClick={() => onEditClick('reset_password')}>
           <Td>
             <Box width="3.2rem" height="3.2rem" padding="0.8rem">
               <Refresh
@@ -85,7 +85,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
             </IconButton>
           </Td>
         </Tr>
-        <Tr onClick={() => onEditClick('email_confirmation')}>
+        <Tr cursor="pointer" onClick={() => onEditClick('email_confirmation')}>
           <Td>
             <Box width="3.2rem" height="3.2rem" padding="0.8rem">
               <Check

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

@@ -144,7 +144,7 @@ export const ProvidersPage = () => {
   }
 
   return (
-    <Layouts.Root>
+    <Page.Main>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -156,83 +156,81 @@ export const ProvidersPage = () => {
           }
         )}
       </Page.Title>
-      <Page.Main>
-        <Layouts.Header
-          title={formatMessage({
-            id: getTrad('HeaderNav.link.providers'),
-            defaultMessage: 'Providers',
-          })}
-        />
-        <Layouts.Content>
-          <Table colCount={3} rowCount={providers.length + 1}>
-            <Thead>
-              <Tr>
-                <Th>
-                  <Typography variant="sigma" textColor="neutral600">
-                    {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
-                  </Typography>
-                </Th>
-                <Th>
-                  <Typography variant="sigma" textColor="neutral600">
-                    {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}
+      <Layouts.Header
+        title={formatMessage({
+          id: getTrad('HeaderNav.link.providers'),
+          defaultMessage: 'Providers',
+        })}
+      />
+      <Layouts.Content>
+        <Table colCount={3} rowCount={providers.length + 1}>
+          <Thead>
+            <Tr>
+              <Th>
+                <Typography variant="sigma" textColor="neutral600">
+                  {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
+                </Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma" textColor="neutral600">
+                  {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}
+                </Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">
+                  <VisuallyHidden>
+                    {formatMessage({
+                      id: 'global.settings',
+                      defaultMessage: 'Settings',
+                    })}
+                  </VisuallyHidden>
+                </Typography>
+              </Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {providers.map((provider) => (
+              <Tr
+                key={provider.name}
+                onClick={() => (canUpdate ? handleClickEdit(provider) : undefined)}
+              >
+                <Td width="45%">
+                  <Typography fontWeight="semiBold" textColor="neutral800">
+                    {provider.name}
                   </Typography>
-                </Th>
-                <Th>
-                  <Typography variant="sigma">
-                    <VisuallyHidden>
-                      {formatMessage({
-                        id: 'global.settings',
-                        defaultMessage: 'Settings',
-                      })}
-                    </VisuallyHidden>
+                </Td>
+                <Td width="65%">
+                  <Typography
+                    textColor={provider.enabled ? 'success600' : 'danger600'}
+                    data-testid={`enable-${provider.name}`}
+                  >
+                    {provider.enabled
+                      ? formatMessage({
+                          id: 'global.enabled',
+                          defaultMessage: 'Enabled',
+                        })
+                      : formatMessage({
+                          id: 'global.disabled',
+                          defaultMessage: 'Disabled',
+                        })}
                   </Typography>
-                </Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {providers.map((provider) => (
-                <Tr
-                  key={provider.name}
-                  onClick={() => (canUpdate ? handleClickEdit(provider) : undefined)}
-                >
-                  <Td width="45%">
-                    <Typography fontWeight="semiBold" textColor="neutral800">
-                      {provider.name}
-                    </Typography>
-                  </Td>
-                  <Td width="65%">
-                    <Typography
-                      textColor={provider.enabled ? 'success600' : 'danger600'}
-                      data-testid={`enable-${provider.name}`}
+                </Td>
+                <Td onClick={(e) => e.stopPropagation()}>
+                  {canUpdate && (
+                    <IconButton
+                      onClick={() => handleClickEdit(provider)}
+                      variant="ghost"
+                      label="Edit"
                     >
-                      {provider.enabled
-                        ? formatMessage({
-                            id: 'global.enabled',
-                            defaultMessage: 'Enabled',
-                          })
-                        : formatMessage({
-                            id: 'global.disabled',
-                            defaultMessage: 'Disabled',
-                          })}
-                    </Typography>
-                  </Td>
-                  <Td onClick={(e) => e.stopPropagation()}>
-                    {canUpdate && (
-                      <IconButton
-                        onClick={() => handleClickEdit(provider)}
-                        variant="ghost"
-                        label="Edit"
-                      >
-                        <Pencil />
-                      </IconButton>
-                    )}
-                  </Td>
-                </Tr>
-              ))}
-            </Tbody>
-          </Table>
-        </Layouts.Content>
-      </Page.Main>
+                      <Pencil />
+                    </IconButton>
+                  )}
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </Layouts.Content>
       <FormModal
         initialData={data[providerToEditName]}
         isOpen={isOpen}
@@ -249,7 +247,7 @@ export const ProvidersPage = () => {
         onSubmit={handleSubmit}
         providerToEditName={providerToEditName}
       />
-    </Layouts.Root>
+    </Page.Main>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Page } from '@strapi/strapi/admin';
 import { Route, Routes } from 'react-router-dom';

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

@@ -4,14 +4,21 @@ import {
   Button,
   Flex,
   Grid,
-  Main,
   Textarea,
   TextInput,
   Typography,
   Field,
+  Box,
 } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
-import { Page, useTracking, useNotification, useFetchClient, Layouts } from '@strapi/strapi/admin';
+import {
+  Page,
+  useTracking,
+  useNotification,
+  useFetchClient,
+  Layouts,
+  BackButton,
+} from '@strapi/strapi/admin';
 import { Formik, Form } from 'formik';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
@@ -68,7 +75,7 @@ export const CreatePage = () => {
   };
 
   return (
-    <Main>
+    <Page.Main>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -102,6 +109,12 @@ export const CreatePage = () => {
                 id: 'Settings.roles.create.description',
                 defaultMessage: 'Define the rights given to the role',
               })}
+              navigationAction={
+                // The back link for mobile works differently; it is placed higher up in the DOM.
+                <Box display={{ initial: 'none', medium: 'block' }}>
+                  <BackButton fallback=".." />
+                </Box>
+              }
             />
             <Layouts.Content>
               <Flex
@@ -125,7 +138,7 @@ export const CreatePage = () => {
                   </Typography>
 
                   <Grid.Root gap={4}>
-                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                    <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
                       <Field.Root
                         name="name"
                         error={
@@ -141,11 +154,11 @@ export const CreatePage = () => {
                             defaultMessage: 'Name',
                           })}
                         </Field.Label>
-                        <TextInput value={values.name || ''} onChange={handleChange} />
+                        <TextInput type="text" value={values.name || ''} onChange={handleChange} />
                         <Field.Error />
                       </Field.Root>
                     </Grid.Item>
-                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                    <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
                       <Field.Root
                         name="description"
                         error={
@@ -183,7 +196,7 @@ export const CreatePage = () => {
           </Form>
         )}
       </Formik>
-    </Main>
+    </Page.Main>
   );
 };
 

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import {
-  Main,
   Button,
   Flex,
   TextInput,
@@ -9,6 +8,7 @@ import {
   Typography,
   Grid,
   Field,
+  Box,
 } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
 import {
@@ -86,7 +86,7 @@ export const EditPage = () => {
   }
 
   return (
-    <Main>
+    <Page.Main>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -119,7 +119,12 @@ export const EditPage = () => {
               }
               title={role.name}
               subtitle={role.description}
-              navigationAction={<BackButton />}
+              navigationAction={
+                // The back link for mobile works differently; it is placed higher up in the DOM.
+                <Box display={{ initial: 'none', medium: 'block' }}>
+                  <BackButton fallback=".." />
+                </Box>
+              }
             />
             <Layouts.Content>
               <Flex
@@ -143,7 +148,7 @@ export const EditPage = () => {
                   </Typography>
 
                   <Grid.Root gap={4}>
-                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                    <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
                       <Field.Root
                         name="name"
                         error={
@@ -162,11 +167,11 @@ export const EditPage = () => {
                             defaultMessage: 'Name',
                           })}
                         </Field.Label>
-                        <TextInput value={values.name || ''} onChange={handleChange} />
+                        <TextInput type="text" value={values.name || ''} onChange={handleChange} />
                         <Field.Error />
                       </Field.Root>
                     </Grid.Item>
-                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                    <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
                       <Field.Root
                         name="description"
                         error={
@@ -204,7 +209,7 @@ export const EditPage = () => {
           </Form>
         )}
       </Formik>
-    </Main>
+    </Page.Main>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Flex, IconButton, Link, Tbody, Td, Tr, Typography } from '@strapi/design-system';
 import { Pencil, Trash } from '@strapi/icons';
@@ -50,7 +50,7 @@ const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelet
   return (
     <Tbody>
       {sortedRoles?.map((role) => (
-        <Tr key={role.name} onClick={() => navigate(role.id.toString())}>
+        <Tr cursor="pointer" key={role.name} onClick={() => navigate(role.id.toString())}>
           <Td width="20%">
             <Typography>{role.name}</Typography>
           </Td>