@strapi/plugin-users-permissions 0.0.0-next.e9b6852d1c05518ff6e37d599321f7aa7aa0683b → 0.0.0-next.ee56af7ae29770097422de95c0d5500908dce15c

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,19 +6,8 @@
 
 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 { Form } from '@strapi/helper-plugin';
-import { Formik } from 'formik';
+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';
 
@@ -36,71 +25,71 @@ 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}
+                              direction="column"
+                              alignItems="stretch"
+                            >
+                              <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,9 +1,10 @@
 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};
-  svg {
+
+  #cog {
     opacity: 1;
   }
 `;
@@ -13,7 +14,7 @@ const CheckboxWrapper = styled(Box)`
   justify-content: space-between;
   align-items: center;
 
-  svg {
+  #cog {
     opacity: 0;
     path {
       fill: ${(props) => props.theme.colors.primary600};

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 { Cog as CogIcon } from '@strapi/icons';
+import { Box, Checkbox, Flex, Typography, Grid, VisuallyHidden } from '@strapi/design-system';
+import { Cog } 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} direction="column" alignItems="stretch">
                 <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',
@@ -112,13 +103,13 @@ const SubCategory = ({ subCategory }) => {
                         }
                       )}
                     </VisuallyHidden>
-                    <CogIcon />
+                    <Cog id="cog" />
                   </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/Permissions/reducer.js

@@ -1,4 +1,4 @@
-import produce from 'immer';
+import { produce } from 'immer';
 
 const initialState = {
   collapses: [],

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}
@@ -30,6 +30,8 @@ const Policies = () => {
       paddingLeft={7}
       paddingRight={7}
       style={{ minHeight: '100%' }}
+      direction="column"
+      alignItems="stretch"
     >
       {selectedAction ? (
         <Flex direction="column" alignItems="stretch" gap={2}>
@@ -40,13 +42,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 +57,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,25 @@ 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}
+          direction="column"
+          alignItems="stretch"
+        >
           <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 +88,9 @@ const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
             </Flex>
             <Permissions />
           </Flex>
-        </GridItem>
+        </Grid.Item>
         <Policies />
-      </Grid>
+      </Grid.Root>
     </UsersPermissionsProvider>
   );
 });

package/admin/src/components/UsersPermissions/reducer.js

@@ -1,5 +1,5 @@
 /* eslint-disable consistent-return */
-import produce from 'immer';
+import { produce } from 'immer';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import take from 'lodash/take';

package/admin/src/index.js

@@ -1,15 +1,8 @@
-// NOTE TO PLUGINS DEVELOPERS:
-// If you modify this file by adding new options to the plugin entry point
-// Here's the file: strapi/docs/3.0.0-beta.x/plugin-development/frontend-field-api.md
-// Here's the file: strapi/docs/3.0.0-beta.x/guides/registering-a-field-in-admin.md
-// Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
-// IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
-import { prefixPluginTranslations } from '@strapi/helper-plugin';
-
 import pluginPkg from '../../package.json';
 
 import { PERMISSIONS } from './constants';
 import getTrad from './utils/getTrad';
+import { prefixPluginTranslations } from './utils/prefixPluginTranslations';
 
 const name = pluginPkg.strapi.name;
 
@@ -31,12 +24,8 @@ export default {
             defaultMessage: 'Roles',
           },
           id: 'roles',
-          to: `/settings/users-permissions/roles`,
-          async Component() {
-            const component = await import('./pages/Roles');
-
-            return component;
-          },
+          to: `users-permissions/roles`,
+          Component: () => import('./pages/Roles'),
           permissions: PERMISSIONS.accessRoles,
         },
         {
@@ -45,12 +34,8 @@ export default {
             defaultMessage: 'Providers',
           },
           id: 'providers',
-          to: `/settings/users-permissions/providers`,
-          async Component() {
-            const component = await import('./pages/Providers');
-
-            return component;
-          },
+          to: `users-permissions/providers`,
+          Component: () => import('./pages/Providers'),
           permissions: PERMISSIONS.readProviders,
         },
         {
@@ -59,12 +44,11 @@ export default {
             defaultMessage: 'Email templates',
           },
           id: 'email-templates',
-          to: `/settings/users-permissions/email-templates`,
-          async Component() {
-            const component = await import('./pages/EmailTemplates');
-
-            return component;
-          },
+          to: `users-permissions/email-templates`,
+          Component: () =>
+            import('./pages/EmailTemplates').then((mod) => ({
+              default: mod.ProtectedEmailTemplatesPage,
+            })),
           permissions: PERMISSIONS.readEmailTemplates,
         },
         {
@@ -73,12 +57,11 @@ export default {
             defaultMessage: 'Advanced Settings',
           },
           id: 'advanced-settings',
-          to: `/settings/users-permissions/advanced-settings`,
-          async Component() {
-            const component = await import('./pages/AdvancedSettings');
-
-            return component;
-          },
+          to: `users-permissions/advanced-settings`,
+          Component: () =>
+            import('./pages/AdvancedSettings').then((mod) => ({
+              default: mod.ProtectedAdvancedSettingsPage,
+            })),
           permissions: PERMISSIONS.readAdvancedSettings,
         },
       ]