@strapi/plugin-users-permissions 5.0.0-beta.0 → 5.0.0-beta.10

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

@@ -1,15 +1,6 @@
 import React from 'react';
 
-import {
-  Button,
-  Grid,
-  GridItem,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalLayout,
-} from '@strapi/design-system';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
+import { Button, Grid, Modal, Breadcrumbs, Crumb, VisuallyHidden } from '@strapi/design-system';
 import { Form, InputRenderer } from '@strapi/strapi/admin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -17,117 +8,127 @@ import { useIntl } from 'react-intl';
 import { getTrad } from '../../../utils';
 import schema from '../utils/schema';
 
-const EmailForm = ({ template, onToggle, onSubmit }) => {
+const EmailForm = ({ template = {}, onToggle, open, onSubmit }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <ModalLayout
-      onClose={onToggle}
-      labelledBy={`${formatMessage({
-        id: getTrad('PopUpForm.header.edit.email-templates'),
-        defaultMessage: 'Edit email template',
-      })}, ${formatMessage({ id: getTrad(template.display), defaultMessage: template.display })}`}
-    >
-      <ModalHeader>
-        <Breadcrumbs
-          label={`${formatMessage({
-            id: getTrad('PopUpForm.header.edit.email-templates'),
-            defaultMessage: 'Edit email template',
-          })}, ${formatMessage({
-            id: getTrad(template.display),
-            defaultMessage: template.display,
-          })}`}
-        >
-          <Crumb>
-            {formatMessage({
+    <Modal.Root open={open} onOpenChange={onToggle}>
+      <Modal.Content>
+        <Modal.Header>
+          <Breadcrumbs
+            label={`${formatMessage({
               id: getTrad('PopUpForm.header.edit.email-templates'),
               defaultMessage: 'Edit email template',
-            })}
-          </Crumb>
-          <Crumb isCurrent>
-            {formatMessage({ id: getTrad(template.display), defaultMessage: template.display })}
-          </Crumb>
-        </Breadcrumbs>
-      </ModalHeader>
-      <Form onSubmit={onSubmit} initialValues={template} validationSchema={schema}>
-        {({ isSubmitting }) => {
-          return (
-            <>
-              <ModalBody>
-                <Grid gap={5}>
-                  {[
-                    {
-                      label: formatMessage({
-                        id: getTrad('PopUpForm.Email.options.from.name.label'),
-                        defaultMessage: 'Shipper name',
-                      }),
-                      name: 'options.from.name',
-                      size: 6,
-                      type: 'string',
-                    },
-                    {
-                      label: formatMessage({
-                        id: getTrad('PopUpForm.Email.options.from.email.label'),
-                        defaultMessage: 'Shipper email',
-                      }),
-                      name: 'options.from.email',
-                      size: 6,
-                      type: 'string',
-                    },
-                    {
-                      label: formatMessage({
-                        id: getTrad('PopUpForm.Email.options.response_email.label'),
-                        defaultMessage: 'Response email',
-                      }),
-                      name: 'options.response_email',
-                      size: 6,
-                      type: 'string',
-                    },
-                    {
-                      label: formatMessage({
-                        id: getTrad('PopUpForm.Email.options.object.label'),
-                        defaultMessage: 'Subject',
-                      }),
-                      name: 'options.object',
-                      size: 6,
-                      type: 'string',
-                    },
-                    {
-                      label: formatMessage({
-                        id: getTrad('PopUpForm.Email.options.message.label'),
-                        defaultMessage: 'Message',
-                      }),
-                      name: 'options.message',
-                      size: 12,
-                      type: 'text',
-                    },
-                  ].map(({ size, ...field }) => (
-                    <GridItem key={field.name} col={size}>
-                      <InputRenderer {...field} />
-                    </GridItem>
-                  ))}
-                </Grid>
-              </ModalBody>
-              <ModalFooter
-                startActions={
-                  <Button onClick={onToggle} variant="tertiary">
-                    Cancel
-                  </Button>
-                }
-                endActions={
+            })}, ${
+              template.display
+                ? formatMessage({
+                    id: getTrad(template.display),
+                    defaultMessage: template.display,
+                  })
+                : ''
+            }`}
+          >
+            <Crumb>
+              {formatMessage({
+                id: getTrad('PopUpForm.header.edit.email-templates'),
+                defaultMessage: 'Edit email template',
+              })}
+            </Crumb>
+            <Crumb isCurrent>
+              {template.display
+                ? formatMessage({ id: getTrad(template.display), defaultMessage: template.display })
+                : ''}
+            </Crumb>
+          </Breadcrumbs>
+          <VisuallyHidden>
+            <Modal.Title>
+              {`${formatMessage({
+                id: getTrad('PopUpForm.header.edit.email-templates'),
+                defaultMessage: 'Edit email template',
+              })}, ${template.display ? formatMessage({ id: getTrad(template.display), defaultMessage: template.display }) : ''}`}
+            </Modal.Title>
+          </VisuallyHidden>
+        </Modal.Header>
+        <Form onSubmit={onSubmit} initialValues={template} validationSchema={schema}>
+          {({ isSubmitting }) => {
+            return (
+              <>
+                <Modal.Body>
+                  <Grid.Root gap={5}>
+                    {[
+                      {
+                        label: formatMessage({
+                          id: getTrad('PopUpForm.Email.options.from.name.label'),
+                          defaultMessage: 'Shipper name',
+                        }),
+                        name: 'options.from.name',
+                        size: 6,
+                        type: 'string',
+                      },
+                      {
+                        label: formatMessage({
+                          id: getTrad('PopUpForm.Email.options.from.email.label'),
+                          defaultMessage: 'Shipper email',
+                        }),
+                        name: 'options.from.email',
+                        size: 6,
+                        type: 'string',
+                      },
+                      {
+                        label: formatMessage({
+                          id: getTrad('PopUpForm.Email.options.response_email.label'),
+                          defaultMessage: 'Response email',
+                        }),
+                        name: 'options.response_email',
+                        size: 6,
+                        type: 'string',
+                      },
+                      {
+                        label: formatMessage({
+                          id: getTrad('PopUpForm.Email.options.object.label'),
+                          defaultMessage: 'Subject',
+                        }),
+                        name: 'options.object',
+                        size: 6,
+                        type: 'string',
+                      },
+                      {
+                        label: formatMessage({
+                          id: getTrad('PopUpForm.Email.options.message.label'),
+                          defaultMessage: 'Message',
+                        }),
+                        name: 'options.message',
+                        size: 12,
+                        type: 'text',
+                      },
+                    ].map(({ size, ...field }) => (
+                      <Grid.Item key={field.name} col={size}>
+                        <InputRenderer {...field} />
+                      </Grid.Item>
+                    ))}
+                  </Grid.Root>
+                </Modal.Body>
+                <Modal.Footer>
+                  <Modal.Close>
+                    <Button variant="tertiary">Cancel</Button>
+                  </Modal.Close>
                   <Button loading={isSubmitting} type="submit">
                     Finish
                   </Button>
-                }
-              />
-            </>
-          );
-        }}
-      </Form>
-    </ModalLayout>
+                </Modal.Footer>
+              </>
+            );
+          }}
+        </Form>
+      </Modal.Content>
+    </Modal.Root>
   );
 };
 
+EmailForm.defaultProps = {
+  template: {},
+};
+
 EmailForm.propTypes = {
   template: PropTypes.shape({
     display: PropTypes.string,
@@ -141,7 +142,8 @@ EmailForm.propTypes = {
       object: PropTypes.string,
       response_email: PropTypes.string,
     }),
-  }).isRequired,
+  }),
+  open: PropTypes.bool.isRequired,
   onSubmit: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,
 };

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

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {
-  Icon,
   IconButton,
   Table,
   Tbody,
@@ -12,7 +11,7 @@ import {
   Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { Check, Pencil, Refresh } from '@strapi/icons';
+import { Check, Pencil, ArrowClockwise as Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
@@ -54,14 +53,12 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
       <Tbody>
         <Tr onClick={() => onEditClick('reset_password')}>
           <Td>
-            <Icon>
-              <Refresh
-                aria-label={formatMessage({
-                  id: 'global.reset-password',
-                  defaultMessage: 'Reset password',
-                })}
-              />
-            </Icon>
+            <Refresh
+              aria-label={formatMessage({
+                id: 'global.reset-password',
+                defaultMessage: 'Reset password',
+              })}
+            />
           </Td>
           <Td>
             <Typography>
@@ -78,21 +75,21 @@ 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')}>
           <Td>
-            <Icon>
-              <Check
-                aria-label={formatMessage({
-                  id: getTrad('Email.template.email_confirmation'),
-                  defaultMessage: 'Email address confirmation',
-                })}
-              />
-            </Icon>
+            <Check
+              aria-label={formatMessage({
+                id: getTrad('Email.template.email_confirmation'),
+                defaultMessage: 'Email address confirmation',
+              })}
+            />
           </Td>
           <Td>
             <Typography>
@@ -109,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,15 +1,15 @@
 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 { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
@@ -115,8 +115,8 @@ const EmailTemplatesPage = () => {
 
   return (
     <Page.Main aria-busy={submitMutation.isLoading}>
-      <Helmet
-        title={formatMessage(
+      <Page.Title>
+        {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
           {
             name: formatMessage({
@@ -125,23 +125,22 @@ const EmailTemplatesPage = () => {
             }),
           }
         )}
-      />
-      <HeaderLayout
+      </Page.Title>
+      <Layouts.Header
         title={formatMessage({
           id: getTrad('HeaderNav.link.emailTemplates'),
           defaultMessage: 'Email templates',
         })}
       />
-      <ContentLayout>
+      <Layouts.Content>
         <EmailTable onEditClick={handleEditClick} canUpdate={canUpdate} />
-        {isModalOpen && (
-          <EmailForm
-            template={data[templateToEdit]}
-            onToggle={handleToggle}
-            onSubmit={handleSubmit}
-          />
-        )}
-      </ContentLayout>
+        <EmailForm
+          template={data[templateToEdit]}
+          onToggle={handleToggle}
+          open={isModalOpen}
+          onSubmit={handleSubmit}
+        />
+      </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,
@@ -25,7 +22,6 @@ import {
   useRBAC,
 } from '@strapi/strapi/admin';
 import upperFirst from 'lodash/upperFirst';
-import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
@@ -148,9 +144,9 @@ export const ProvidersPage = () => {
   }
 
   return (
-    <Layout>
-      <Helmet
-        title={formatMessage(
+    <Layouts.Root>
+      <Page.Title>
+        {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
           {
             name: formatMessage({
@@ -159,15 +155,15 @@ 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>
@@ -224,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]}
@@ -252,7 +249,7 @@ export const ProvidersPage = () => {
         onSubmit={handleSubmit}
         providerToEditName={providerToEditName}
       />
-    </Layout>
+    </Layouts.Root>
   );
 };
 

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

@@ -2,20 +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 { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
 import { useNavigate } from 'react-router-dom';
@@ -72,12 +69,12 @@ export const CreatePage = () => {
 
   return (
     <Main>
-      <Helmet
-        title={formatMessage(
+      <Page.Title>
+        {formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
           { name: 'Roles' }
         )}
-      />
+      </Page.Title>
       <Formik
         enableReinitialize
         initialValues={{ name: '', description: '' }}
@@ -86,7 +83,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 />}>
@@ -106,7 +103,7 @@ export const CreatePage = () => {
                 defaultMessage: 'Define the rights given to the role',
               })}
             />
-            <ContentLayout>
+            <Layouts.Content>
               <Flex
                 background="neutral0"
                 direction="column"
@@ -120,40 +117,37 @@ 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',
                     })}
                   </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' })
                             : 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({
@@ -163,9 +157,18 @@ export const CreatePage = () => {
                             : 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 && (
@@ -176,7 +179,7 @@ export const CreatePage = () => {
                   />
                 )}
               </Flex>
-            </ContentLayout>
+            </Layouts.Content>
           </Form>
         )}
       </Formik>