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

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

@@ -5,7 +5,7 @@ import map from 'lodash/map';
 import tail from 'lodash/tail';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import getMethodColor from './getMethodColor';
 
@@ -24,7 +24,7 @@ function BoundRoute({ route }) {
 
   return (
     <Flex direction="column" alignItems="stretch" gap={2}>
-      <Typography variant="delta" as="h3">
+      <Typography variant="delta" tag="h3">
         {formatMessage({
           id: 'users-permissions.BoundRoute.title',
           defaultMessage: 'Bound route to',

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

@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { TextInput, ToggleInput } from '@strapi/design-system';
+import { TextInput, Toggle, Field } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
@@ -41,25 +41,26 @@ const Input = ({
 
   if (type === 'bool') {
     return (
-      <ToggleInput
-        aria-label={name}
-        checked={value}
-        disabled={disabled}
-        hint={hint}
-        label={label}
-        name={name}
-        offLabel={formatMessage({
-          id: 'app.components.ToggleCheckbox.off-label',
-          defaultMessage: 'Off',
-        })}
-        onLabel={formatMessage({
-          id: 'app.components.ToggleCheckbox.on-label',
-          defaultMessage: 'On',
-        })}
-        onChange={(e) => {
-          onChange({ target: { name, value: e.target.checked } });
-        }}
-      />
+      <Field.Root hint={hint} name={name}>
+        <Field.Label>{label}</Field.Label>
+        <Toggle
+          aria-label={name}
+          checked={value}
+          disabled={disabled}
+          offLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.off-label',
+            defaultMessage: 'Off',
+          })}
+          onLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.on-label',
+            defaultMessage: 'On',
+          })}
+          onChange={(e) => {
+            onChange({ target: { name, value: e.target.checked } });
+          }}
+        />
+        <Field.Hint />
+      </Field.Root>
     );
   }
 
@@ -73,17 +74,17 @@ const Input = ({
   const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
 
   return (
-    <TextInput
-      aria-label={name}
-      disabled={disabled}
-      error={errorMessage}
-      label={label}
-      name={name}
-      onChange={onChange}
-      placeholder={formattedPlaceholder}
-      type={type}
-      value={inputValue}
-    />
+    <Field.Root error={errorMessage} name={name}>
+      <Field.Label>{label}</Field.Label>
+      <TextInput
+        disabled={disabled}
+        onChange={onChange}
+        placeholder={formattedPlaceholder}
+        type={type}
+        value={inputValue}
+      />
+      <Field.Error />
+    </Field.Root>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import { Box } from '@strapi/design-system';
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 const activeCheckboxWrapperStyles = css`
   background: ${(props) => props.theme.colors.primary100};

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

@@ -13,7 +13,7 @@ import { Cog as CogIcon } from '@strapi/icons';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { useUsersPermissions } from '../../../contexts/UsersPermissionsContext';
 
@@ -101,7 +101,7 @@ const SubCategory = ({ subCategory }) => {
                     onClick={() => onSelectedAction(action.name)}
                     style={{ display: 'inline-flex', alignItems: 'center' }}
                   >
-                    <VisuallyHidden as="span">
+                    <VisuallyHidden tag="span">
                       {formatMessage(
                         {
                           id: 'app.utils.show-bound-route',

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

@@ -1,6 +1,6 @@
 import React, { useReducer } from 'react';
 
-import { Accordion, AccordionContent, AccordionToggle, Flex } from '@strapi/design-system';
+import { Accordion, Flex } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
@@ -13,42 +13,33 @@ import { initialState, reducer } from './reducer';
 const Permissions = () => {
   const { modifiedData } = useUsersPermissions();
   const { formatMessage } = useIntl();
-  const [{ collapses }, dispatch] = useReducer(reducer, initialState, (state) =>
-    init(state, modifiedData)
-  );
-
-  const handleToggle = (index) =>
-    dispatch({
-      type: 'TOGGLE_COLLAPSE',
-      index,
-    });
+  const [{ collapses }] = useReducer(reducer, initialState, (state) => init(state, modifiedData));
 
   return (
-    <Flex direction="column" alignItems="stretch" gap={1}>
-      {collapses.map((collapse, index) => (
-        <Accordion
-          expanded={collapse.isOpen}
-          onToggle={() => handleToggle(index)}
-          key={collapse.name}
-          variant={index % 2 === 0 ? 'secondary' : undefined}
-        >
-          <AccordionToggle
-            title={formatPluginName(collapse.name)}
-            description={formatMessage(
-              {
-                id: 'users-permissions.Plugin.permissions.plugins.description',
-                defaultMessage: 'Define all allowed actions for the {name} plugin.',
-              },
-              { name: collapse.name }
-            )}
-            variant={index % 2 ? 'primary' : 'secondary'}
-          />
-          <AccordionContent>
-            <PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
-          </AccordionContent>
-        </Accordion>
-      ))}
-    </Flex>
+    <Accordion.Root size="M">
+      <Flex direction="column" alignItems="stretch" gap={1}>
+        {collapses.map((collapse, index) => (
+          <Accordion.Item key={collapse.name} value={collapse.name}>
+            <Accordion.Header variant={index % 2 === 0 ? 'secondary' : undefined}>
+              <Accordion.Trigger
+                description={formatMessage(
+                  {
+                    id: 'users-permissions.Plugin.permissions.plugins.description',
+                    defaultMessage: 'Define all allowed actions for the {name} plugin.',
+                  },
+                  { name: collapse.name }
+                )}
+              >
+                {formatPluginName(collapse.name)}
+              </Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>
+              <PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
+            </Accordion.Content>
+          </Accordion.Item>
+        ))}
+      </Flex>
+    </Accordion.Root>
   );
 };
 

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

@@ -40,13 +40,13 @@ const Policies = () => {
         </Flex>
       ) : (
         <Flex direction="column" alignItems="stretch" gap={2}>
-          <Typography variant="delta" as="h3">
+          <Typography variant="delta" tag="h3">
             {formatMessage({
               id: 'users-permissions.Policies.header.title',
               defaultMessage: 'Advanced settings',
             })}
           </Typography>
-          <Typography as="p" textColor="neutral600">
+          <Typography tag="p" textColor="neutral600">
             {formatMessage({
               id: 'users-permissions.Policies.header.hint',
               defaultMessage:

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

@@ -65,13 +65,13 @@ const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
         <GridItem col={7} paddingTop={6} paddingBottom={6} paddingLeft={7} paddingRight={7}>
           <Flex direction="column" alignItems="stretch" gap={6}>
             <Flex direction="column" alignItems="stretch" gap={2}>
-              <Typography variant="delta" as="h2">
+              <Typography variant="delta" tag="h2">
                 {formatMessage({
                   id: getTrad('Plugins.header.title'),
                   defaultMessage: 'Permissions',
                 })}
               </Typography>
-              <Typography as="p" textColor="neutral600">
+              <Typography tag="p" textColor="neutral600">
                 {formatMessage({
                   id: getTrad('Plugins.header.description'),
                   defaultMessage: 'Only actions bound by a route are listed below.',

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

@@ -1,16 +1,6 @@
 import React from 'react';
 
-import {
-  Box,
-  Button,
-  ContentLayout,
-  Flex,
-  Grid,
-  GridItem,
-  HeaderLayout,
-  Typography,
-  useNotifyAT,
-} from '@strapi/design-system';
+import { Box, Button, Flex, Grid, GridItem, Typography, useNotifyAT } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
 import {
   useAPIErrorHandler,
@@ -20,8 +10,8 @@ import {
   useNotification,
   useFetchClient,
   useRBAC,
+  Layouts,
 } from '@strapi/strapi/admin';
-
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
@@ -133,7 +123,7 @@ const AdvancedSettingsPage = () => {
         {({ values, isSubmitting, modified }) => {
           return (
             <>
-              <HeaderLayout
+              <Layouts.Header
                 title={formatMessage({
                   id: getTrad('HeaderNav.link.advancedSettings'),
                   defaultMessage: 'Advanced Settings',
@@ -150,7 +140,7 @@ const AdvancedSettingsPage = () => {
                   </Button>
                 }
               />
-              <ContentLayout>
+              <Layouts.Content>
                 <Box
                   background="neutral0"
                   hasRadius
@@ -161,7 +151,7 @@ const AdvancedSettingsPage = () => {
                   paddingRight={7}
                 >
                   <Flex direction="column" alignItems="stretch" gap={4}>
-                    <Typography variant="delta" as="h2">
+                    <Typography variant="delta" tag="h2">
                       {formatMessage({
                         id: 'global.settings',
                         defaultMessage: 'Settings',
@@ -207,7 +197,7 @@ const AdvancedSettingsPage = () => {
                     </Grid>
                   </Flex>
                 </Box>
-              </ContentLayout>
+              </Layouts.Content>
             </>
           );
         }}

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

@@ -8,8 +8,9 @@ import {
   ModalFooter,
   ModalHeader,
   ModalLayout,
+  Breadcrumbs,
+  Crumb,
 } from '@strapi/design-system';
-import { Breadcrumbs, Crumb } from '@strapi/design-system';
 import { Form, InputRenderer } from '@strapi/strapi/admin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';

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

@@ -75,9 +75,11 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
                 id: getTrad('Email.template.form.edit.label'),
                 defaultMessage: 'Edit a template',
               })}
-              noBorder
-              icon={canUpdate && <Pencil />}
-            />
+              borderWidth={0}
+              disabled={!canUpdate}
+            >
+              <Pencil />
+            </IconButton>
           </Td>
         </Tr>
         <Tr onClick={() => onEditClick('email_confirmation')}>
@@ -104,9 +106,11 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
                 id: getTrad('Email.template.form.edit.label'),
                 defaultMessage: 'Edit a template',
               })}
-              noBorder
-              icon={canUpdate && <Pencil />}
-            />
+              borderWidth={0}
+              disabled={!canUpdate}
+            >
+              <Pencil />
+            </IconButton>
           </Td>
         </Tr>
       </Tbody>

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

@@ -1,13 +1,14 @@
 import * as React from 'react';
 
 import { useTracking } from '@strapi/admin/strapi-admin';
-import { ContentLayout, HeaderLayout, useNotifyAT } from '@strapi/design-system';
+import { useNotifyAT } from '@strapi/design-system';
 import {
   Page,
   useAPIErrorHandler,
   useNotification,
   useFetchClient,
   useRBAC,
+  Layouts,
 } from '@strapi/strapi/admin';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
@@ -125,13 +126,13 @@ const EmailTemplatesPage = () => {
           }
         )}
       </Page.Title>
-      <HeaderLayout
+      <Layouts.Header
         title={formatMessage({
           id: getTrad('HeaderNav.link.emailTemplates'),
           defaultMessage: 'Email templates',
         })}
       />
-      <ContentLayout>
+      <Layouts.Content>
         <EmailTable onEditClick={handleEditClick} canUpdate={canUpdate} />
         {isModalOpen && (
           <EmailForm
@@ -140,7 +141,7 @@ const EmailTemplatesPage = () => {
             onSubmit={handleSubmit}
           />
         )}
-      </ContentLayout>
+      </Layouts.Content>
     </Page.Main>
   );
 };

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

@@ -1,11 +1,8 @@
 import * as React from 'react';
 
-import { useTracking } from '@strapi/admin/strapi-admin';
+import { useTracking, Layouts } from '@strapi/admin/strapi-admin';
 import {
-  ContentLayout,
-  HeaderLayout,
   IconButton,
-  Layout,
   Table,
   Tbody,
   Td,
@@ -147,7 +144,7 @@ export const ProvidersPage = () => {
   }
 
   return (
-    <Layout>
+    <Layouts.Root>
       <Page.Title>
         {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -160,13 +157,13 @@ export const ProvidersPage = () => {
         )}
       </Page.Title>
       <Page.Main>
-        <HeaderLayout
+        <Layouts.Header
           title={formatMessage({
             id: getTrad('HeaderNav.link.providers'),
             defaultMessage: 'Providers',
           })}
         />
-        <ContentLayout>
+        <Layouts.Content>
           <Table colCount={3} rowCount={providers.length + 1}>
             <Thead>
               <Tr>
@@ -223,17 +220,18 @@ export const ProvidersPage = () => {
                     {canUpdate && (
                       <IconButton
                         onClick={() => handleClickEdit(provider)}
-                        noBorder
-                        icon={<Pencil />}
+                        borderWidth={0}
                         label="Edit"
-                      />
+                      >
+                        <Pencil />
+                      </IconButton>
                     )}
                   </Td>
                 </Tr>
               ))}
             </Tbody>
           </Table>
-        </ContentLayout>
+        </Layouts.Content>
       </Page.Main>
       <FormModal
         initialData={data[providerToEditName]}
@@ -251,7 +249,7 @@ export const ProvidersPage = () => {
         onSubmit={handleSubmit}
         providerToEditName={providerToEditName}
       />
-    </Layout>
+    </Layouts.Root>
   );
 };
 

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

@@ -2,18 +2,17 @@ import * as React from 'react';
 
 import {
   Button,
-  ContentLayout,
   Flex,
   Grid,
   GridItem,
-  HeaderLayout,
   Main,
   Textarea,
   TextInput,
   Typography,
+  Field,
 } from '@strapi/design-system';
 import { Check } from '@strapi/icons';
-import { Page, useTracking, useNotification, useFetchClient } from '@strapi/strapi/admin';
+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';
@@ -85,7 +84,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 />}>
@@ -105,7 +104,7 @@ export const CreatePage = () => {
                 defaultMessage: 'Define the rights given to the role',
               })}
             />
-            <ContentLayout>
+            <Layouts.Content>
               <Flex
                 background="neutral0"
                 direction="column"
@@ -119,7 +118,7 @@ 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',
@@ -128,31 +127,28 @@ export const CreatePage = () => {
 
                   <Grid gap={4}>
                     <GridItem col={6}>
-                      <TextInput
+                      <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
-                      />
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.name',
+                            defaultMessage: 'Name',
+                          })}
+                        </Field.Label>
+                        <TextInput value={values.name || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
                     </GridItem>
                     <GridItem col={6}>
-                      <Textarea
-                        id="description"
-                        value={values.description || ''}
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'global.description',
-                          defaultMessage: 'Description',
-                        })}
+                      <Field.Root
+                        name="description"
                         error={
                           errors?.description
                             ? formatMessage({
@@ -162,7 +158,16 @@ export const CreatePage = () => {
                             : false
                         }
                         required
-                      />
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.description',
+                            defaultMessage: 'Description',
+                          })}
+                        </Field.Label>
+                        <Textarea value={values.description || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
                     </GridItem>
                   </Grid>
                 </Flex>
@@ -175,7 +180,7 @@ export const CreatePage = () => {
                   />
                 )}
               </Flex>
-            </ContentLayout>
+            </Layouts.Content>
           </Form>
         )}
       </Formik>