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

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/FormModal/index.jsx

@@ -6,17 +6,7 @@
 
 import React from 'react';
 
-import {
-  Button,
-  Flex,
-  Grid,
-  GridItem,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalLayout,
-} from '@strapi/design-system';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
+import { Button, Flex, Grid, Modal, Breadcrumbs, Crumb } from '@strapi/design-system';
 import { Form, Formik } from 'formik';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -35,71 +25,65 @@ const FormModal = ({
 }) => {
   const { formatMessage } = useIntl();
 
-  if (!isOpen) {
-    return null;
-  }
-
   return (
-    <ModalLayout onClose={onToggle} labelledBy="title">
-      <ModalHeader>
-        <Breadcrumbs label={headerBreadcrumbs.join(', ')}>
-          {headerBreadcrumbs.map((crumb, index, arr) => (
-            <Crumb isCurrent={index === arr.length - 1} key={crumb}>
-              {crumb}
-            </Crumb>
-          ))}
-        </Breadcrumbs>
-      </ModalHeader>
-      <Formik
-        onSubmit={(values) => onSubmit(values)}
-        initialValues={initialData}
-        validationSchema={layout.schema}
-        validateOnChange={false}
-      >
-        {({ errors, handleChange, values }) => {
-          return (
-            <Form>
-              <ModalBody>
-                <Flex direction="column" alignItems="stretch" gap={1}>
-                  <Grid gap={5}>
-                    {layout.form.map((row) => {
-                      return row.map((input) => {
-                        return (
-                          <GridItem key={input.name} col={input.size} xs={12}>
-                            <Input
-                              {...input}
-                              error={errors[input.name]}
-                              onChange={handleChange}
-                              value={values[input.name]}
-                              providerToEditName={providerToEditName}
-                            />
-                          </GridItem>
-                        );
-                      });
-                    })}
-                  </Grid>
-                </Flex>
-              </ModalBody>
-              <ModalFooter
-                startActions={
+    <Modal.Root open={isOpen} onOpenChange={onToggle}>
+      <Modal.Content>
+        <Modal.Header>
+          <Breadcrumbs label={headerBreadcrumbs.join(', ')}>
+            {headerBreadcrumbs.map((crumb, index, arr) => (
+              <Crumb isCurrent={index === arr.length - 1} key={crumb}>
+                {crumb}
+              </Crumb>
+            ))}
+          </Breadcrumbs>
+        </Modal.Header>
+        <Formik
+          onSubmit={(values) => onSubmit(values)}
+          initialValues={initialData}
+          validationSchema={layout.schema}
+          validateOnChange={false}
+        >
+          {({ errors, handleChange, values }) => {
+            return (
+              <Form>
+                <Modal.Body>
+                  <Flex direction="column" alignItems="stretch" gap={1}>
+                    <Grid.Root gap={5}>
+                      {layout.form.map((row) => {
+                        return row.map((input) => {
+                          return (
+                            <Grid.Item key={input.name} col={input.size} xs={12}>
+                              <Input
+                                {...input}
+                                error={errors[input.name]}
+                                onChange={handleChange}
+                                value={values[input.name]}
+                                providerToEditName={providerToEditName}
+                              />
+                            </Grid.Item>
+                          );
+                        });
+                      })}
+                    </Grid.Root>
+                  </Flex>
+                </Modal.Body>
+                <Modal.Footer>
                   <Button variant="tertiary" onClick={onToggle} type="button">
                     {formatMessage({
                       id: 'app.components.Button.cancel',
                       defaultMessage: 'Cancel',
                     })}
                   </Button>
-                }
-                endActions={
                   <Button type="submit" loading={isSubmiting}>
                     {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
                   </Button>
-                }
-              />
-            </Form>
-          );
-        }}
-      </Formik>
-    </ModalLayout>
+                </Modal.Footer>
+              </Form>
+            );
+          }}
+        </Formik>
+      </Modal.Content>
+    </Modal.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

@@ -1,19 +1,11 @@
 import React, { useCallback, useMemo } from 'react';
 
-import {
-  Box,
-  Checkbox,
-  Flex,
-  Typography,
-  Grid,
-  GridItem,
-  VisuallyHidden,
-} from '@strapi/design-system';
+import { Box, Checkbox, Flex, Typography, Grid, VisuallyHidden } from '@strapi/design-system';
 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';
 
@@ -71,28 +63,27 @@ const SubCategory = ({ subCategory }) => {
         <Box paddingLeft={4}>
           <Checkbox
             name={subCategory.name}
-            value={hasAllActionsSelected}
-            onValueChange={(value) =>
+            checked={hasSomeActionsSelected ? 'indeterminate' : hasAllActionsSelected}
+            onCheckedChange={(value) =>
               handleChangeSelectAll({ target: { name: subCategory.name, value } })
             }
-            indeterminate={hasSomeActionsSelected}
           >
             {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}
           </Checkbox>
         </Box>
       </Flex>
       <Flex paddingTop={6} paddingBottom={6}>
-        <Grid gap={2} style={{ flex: 1 }}>
+        <Grid.Root gap={2} style={{ flex: 1 }}>
           {subCategory.actions.map((action) => {
             const name = `${action.name}.enabled`;
 
             return (
-              <GridItem col={6} key={action.name}>
+              <Grid.Item col={6} key={action.name}>
                 <CheckboxWrapper isActive={isActionSelected(action.name)} padding={2} hasRadius>
                   <Checkbox
-                    value={get(modifiedData, name, false)}
+                    checked={get(modifiedData, name, false)}
                     name={name}
-                    onValueChange={(value) => onChange({ target: { name, value } })}
+                    onCheckedChange={(value) => onChange({ target: { name, value } })}
                   >
                     {action.label}
                   </Checkbox>
@@ -101,7 +92,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',
@@ -115,10 +106,10 @@ const SubCategory = ({ subCategory }) => {
                     <CogIcon />
                   </button>
                 </CheckboxWrapper>
-              </GridItem>
+              </Grid.Item>
             );
           })}
-        </Grid>
+        </Grid.Root>
       </Flex>
     </Box>
   );

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,34 @@ 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
+                caretPosition="right"
+                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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Flex, GridItem, Typography } from '@strapi/design-system';
+import { Flex, Grid, Typography } from '@strapi/design-system';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import without from 'lodash/without';
@@ -22,7 +22,7 @@ const Policies = () => {
     : controllerRoutes.filter((o) => o.handler.endsWith(pathResolved));
 
   return (
-    <GridItem
+    <Grid.Item
       col={5}
       background="neutral150"
       paddingTop={6}
@@ -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:
@@ -55,7 +55,7 @@ const Policies = () => {
           </Typography>
         </Flex>
       )}
-    </GridItem>
+    </Grid.Item>
   );
 };
 

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

@@ -1,6 +1,6 @@
 import React, { forwardRef, memo, useImperativeHandle, useReducer } from 'react';
 
-import { Flex, Grid, GridItem, Typography } from '@strapi/design-system';
+import { Flex, Grid, Typography } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
@@ -61,17 +61,17 @@ const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
 
   return (
     <UsersPermissionsProvider value={providerValue}>
-      <Grid gap={0} shadow="filterShadow" hasRadius background="neutral0">
-        <GridItem col={7} paddingTop={6} paddingBottom={6} paddingLeft={7} paddingRight={7}>
+      <Grid.Root gap={0} shadow="filterShadow" hasRadius background="neutral0">
+        <Grid.Item 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.',
@@ -80,9 +80,9 @@ const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
             </Flex>
             <Permissions />
           </Flex>
-        </GridItem>
+        </Grid.Item>
         <Policies />
-      </Grid>
+      </Grid.Root>
     </UsersPermissionsProvider>
   );
 });

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, 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 { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
@@ -118,8 +108,8 @@ const AdvancedSettingsPage = () => {
 
   return (
     <Page.Main aria-busy={isSubmittingForm}>
-      <Helmet
-        title={formatMessage(
+      <Page.Title>
+        {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
           {
             name: formatMessage({
@@ -128,12 +118,12 @@ const AdvancedSettingsPage = () => {
             }),
           }
         )}
-      />
+      </Page.Title>
       <Form onSubmit={handleSubmit} initialValues={data.settings} validationSchema={schema}>
         {({ 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,13 +151,13 @@ 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',
                       })}
                     </Typography>
-                    <Grid gap={6}>
+                    <Grid.Root gap={6}>
                       {[
                         {
                           label: {
@@ -189,7 +179,7 @@ const AdvancedSettingsPage = () => {
                         },
                         ...layout,
                       ].map(({ size, ...field }) => (
-                        <GridItem key={field.name} col={size}>
+                        <Grid.Item key={field.name} col={size}>
                           <InputRenderer
                             {...field}
                             disabled={
@@ -202,12 +192,12 @@ const AdvancedSettingsPage = () => {
                               field.placeholder ? formatMessage(field.placeholder) : undefined
                             }
                           />
-                        </GridItem>
+                        </Grid.Item>
                       ))}
-                    </Grid>
+                    </Grid.Root>
                   </Flex>
                 </Box>
-              </ContentLayout>
+              </Layouts.Content>
             </>
           );
         }}