@strapi/plugin-users-permissions 0.0.0-next.f8af92b375dc730ba47ed2117f25df893aae696c → 0.0.0-next.f93d6eabe52aa7681655cfa08eedbc3708dbb90d

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

@@ -1,160 +1,139 @@
-import React from 'react';
+import * as React from 'react';
 
-import {
-  Button,
-  Grid,
-  GridItem,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalLayout,
-  Textarea,
-} from '@strapi/design-system';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
-import { Form, GenericInput } from '@strapi/helper-plugin';
-import { Formik } from 'formik';
+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';
 
 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>
-      <Formik
-        onSubmit={onSubmit}
-        initialValues={template}
-        validateOnChange={false}
-        validationSchema={schema}
-        enableReinitialize
-      >
-        {({ errors, values, handleChange, isSubmitting }) => {
-          return (
-            <Form>
-              <ModalBody>
-                <Grid gap={5}>
-                  <GridItem col={6} s={12}>
-                    <GenericInput
-                      intlLabel={{
-                        id: getTrad('PopUpForm.Email.options.from.name.label'),
-                        defaultMessage: 'Shipper name',
-                      }}
-                      name="options.from.name"
-                      onChange={handleChange}
-                      value={values.options.from.name}
-                      error={errors?.options?.from?.name}
-                      type="text"
-                    />
-                  </GridItem>
-                  <GridItem col={6} s={12}>
-                    <GenericInput
-                      intlLabel={{
-                        id: getTrad('PopUpForm.Email.options.from.email.label'),
-                        defaultMessage: 'Shipper email',
-                      }}
-                      name="options.from.email"
-                      onChange={handleChange}
-                      value={values.options.from.email}
-                      error={errors?.options?.from?.email}
-                      type="text"
-                    />
-                  </GridItem>
-                  <GridItem col={6} s={12}>
-                    <GenericInput
-                      intlLabel={{
-                        id: getTrad('PopUpForm.Email.options.response_email.label'),
-                        defaultMessage: 'Response email',
-                      }}
-                      name="options.response_email"
-                      onChange={handleChange}
-                      value={values.options.response_email}
-                      error={errors?.options?.response_email}
-                      type="text"
-                    />
-                  </GridItem>
-                  <GridItem col={6} s={12}>
-                    <GenericInput
-                      intlLabel={{
-                        id: getTrad('PopUpForm.Email.options.object.label'),
-                        defaultMessage: 'Subject',
-                      }}
-                      name="options.object"
-                      onChange={handleChange}
-                      value={values.options.object}
-                      error={errors?.options?.object}
-                      type="text"
-                    />
-                  </GridItem>
-                  <GridItem col={12} s={12}>
-                    <Textarea
-                      label={formatMessage({
-                        id: getTrad('PopUpForm.Email.options.message.label'),
-                        defaultMessage: 'Message',
-                      })}
-                      id="options.message"
-                      onChange={handleChange}
-                      value={values.options.message}
-                      error={
-                        errors?.options?.message &&
-                        formatMessage({
-                          id: errors.options.message,
-                          defaultMessage: errors.options.message,
-                        })
-                      }
-                    />
-                  </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}
+                        direction="column"
+                        alignItems="stretch"
+                      >
+                        <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>
-          );
-        }}
-      </Formik>
-    </ModalLayout>
+                </Modal.Footer>
+              </>
+            );
+          }}
+        </Form>
+      </Modal.Content>
+    </Modal.Root>
   );
 };
 
+EmailForm.defaultProps = {
+  template: {},
+};
+
 EmailForm.propTypes = {
   template: PropTypes.shape({
     display: PropTypes.string,
@@ -168,7 +147,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 * as React from 'react';
 
 import {
-  Icon,
   IconButton,
   Table,
   Tbody,
@@ -11,9 +10,9 @@ import {
   Tr,
   Typography,
   VisuallyHidden,
+  Box,
 } from '@strapi/design-system';
-import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
-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';
 
@@ -53,16 +52,16 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
         </Tr>
       </Thead>
       <Tbody>
-        <Tr {...onRowClick({ fn: () => onEditClick('reset_password') })}>
+        <Tr cursor="pointer" onClick={() => onEditClick('reset_password')}>
           <Td>
-            <Icon>
+            <Box width="3.2rem" height="3.2rem" padding="0.8rem">
               <Refresh
                 aria-label={formatMessage({
                   id: 'global.reset-password',
                   defaultMessage: 'Reset password',
                 })}
               />
-            </Icon>
+            </Box>
           </Td>
           <Td>
             <Typography>
@@ -72,28 +71,30 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
               })}
             </Typography>
           </Td>
-          <Td {...stopPropagation}>
+          <Td onClick={(e) => e.stopPropagation()}>
             <IconButton
               onClick={() => onEditClick('reset_password')}
               label={formatMessage({
                 id: getTrad('Email.template.form.edit.label'),
                 defaultMessage: 'Edit a template',
               })}
-              noBorder
-              icon={canUpdate && <Pencil />}
-            />
+              variant="ghost"
+              disabled={!canUpdate}
+            >
+              <Pencil />
+            </IconButton>
           </Td>
         </Tr>
-        <Tr {...onRowClick({ fn: () => onEditClick('email_confirmation') })}>
+        <Tr cursor="pointer" onClick={() => onEditClick('email_confirmation')}>
           <Td>
-            <Icon>
+            <Box width="3.2rem" height="3.2rem" padding="0.8rem">
               <Check
                 aria-label={formatMessage({
                   id: getTrad('Email.template.email_confirmation'),
                   defaultMessage: 'Email address confirmation',
                 })}
               />
-            </Icon>
+            </Box>
           </Td>
           <Td>
             <Typography>
@@ -103,16 +104,18 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
               })}
             </Typography>
           </Td>
-          <Td {...stopPropagation}>
+          <Td onClick={(e) => e.stopPropagation()}>
             <IconButton
               onClick={() => onEditClick('email_confirmation')}
               label={formatMessage({
                 id: getTrad('Email.template.form.edit.label'),
                 defaultMessage: 'Edit a template',
               })}
-              noBorder
-              icon={canUpdate && <Pencil />}
-            />
+              variant="ghost"
+              disabled={!canUpdate}
+            >
+              <Pencil />
+            </IconButton>
           </Td>
         </Tr>
       </Tbody>

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

@@ -1,18 +1,15 @@
 import * as React from 'react';
 
-import { ContentLayout, HeaderLayout, Main, useNotifyAT } from '@strapi/design-system';
+import { useTracking } from '@strapi/admin/strapi-admin';
+import { useNotifyAT } from '@strapi/design-system';
 import {
-  CheckPagePermissions,
-  LoadingIndicatorPage,
-  SettingsPageTitle,
+  Page,
   useAPIErrorHandler,
-  useFetchClient,
-  useFocusWhenNavigate,
   useNotification,
-  useOverlayBlocker,
+  useFetchClient,
   useRBAC,
-  useTracking,
-} from '@strapi/helper-plugin';
+  Layouts,
+} from '@strapi/strapi/admin';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
@@ -23,23 +20,19 @@ import EmailForm from './components/EmailForm';
 import EmailTable from './components/EmailTable';
 
 const ProtectedEmailTemplatesPage = () => (
-  <CheckPagePermissions permissions={PERMISSIONS.readEmailTemplates}>
+  <Page.Protect permissions={PERMISSIONS.readEmailTemplates}>
     <EmailTemplatesPage />
-  </CheckPagePermissions>
+  </Page.Protect>
 );
-
 const EmailTemplatesPage = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const { notifyStatus } = useNotifyAT();
-  const toggleNotification = useNotification();
-  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { toggleNotification } = useNotification();
   const queryClient = useQueryClient();
   const { get, put } = useFetchClient();
   const { formatAPIError } = useAPIErrorHandler();
 
-  useFocusWhenNavigate();
-
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const [templateToEdit, setTemplateToEdit] = React.useState(null);
 
@@ -66,7 +59,7 @@ const EmailTemplatesPage = () => {
       },
       onError(error) {
         toggleNotification({
-          type: 'warning',
+          type: 'danger',
           message: formatAPIError(error),
         });
       },
@@ -92,29 +85,24 @@ const EmailTemplatesPage = () => {
 
         toggleNotification({
           type: 'success',
-          message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
+          message: formatMessage({ id: 'notification.success.saved', defaultMessage: 'Saved' }),
         });
 
         trackUsage('didEditEmailTemplates');
 
-        unlockApp();
         handleToggle();
       },
       onError(error) {
         toggleNotification({
-          type: 'warning',
+          type: 'danger',
           message: formatAPIError(error),
         });
-
-        unlockApp();
       },
       refetchActive: true,
     }
   );
 
   const handleSubmit = (body) => {
-    lockApp();
-
     trackUsage('willEditEmailTemplates');
 
     const editedTemplates = { ...data, [templateToEdit]: body };
@@ -122,53 +110,39 @@ const EmailTemplatesPage = () => {
   };
 
   if (isLoading) {
-    return (
-      <Main aria-busy="true">
-        <SettingsPageTitle
-          name={formatMessage({
-            id: getTrad('HeaderNav.link.emailTemplates'),
-            defaultMessage: 'Email templates',
-          })}
-        />
-        <HeaderLayout
-          title={formatMessage({
-            id: getTrad('HeaderNav.link.emailTemplates'),
-            defaultMessage: 'Email templates',
-          })}
-        />
-        <ContentLayout>
-          <LoadingIndicatorPage />
-        </ContentLayout>
-      </Main>
-    );
+    return <Page.Loading />;
   }
 
   return (
-    <Main aria-busy={submitMutation.isLoading}>
-      <SettingsPageTitle
-        name={formatMessage({
-          id: getTrad('HeaderNav.link.emailTemplates'),
-          defaultMessage: 'Email templates',
-        })}
-      />
-      <HeaderLayout
+    <Page.Main aria-busy={submitMutation.isLoading}>
+      <Page.Title>
+        {formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          {
+            name: formatMessage({
+              id: getTrad('HeaderNav.link.emailTemplates'),
+              defaultMessage: 'Email templates',
+            }),
+          }
+        )}
+      </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>
-    </Main>
+        <EmailForm
+          template={data[templateToEdit]}
+          onToggle={handleToggle}
+          open={isModalOpen}
+          onSubmit={handleSubmit}
+        />
+      </Layouts.Content>
+    </Page.Main>
   );
 };
 
-export default ProtectedEmailTemplatesPage;
+export { ProtectedEmailTemplatesPage, EmailTemplatesPage };

package/admin/src/pages/EmailTemplates/utils/schema.js

@@ -1,4 +1,4 @@
-import { translatedErrors } from '@strapi/helper-plugin';
+import { translatedErrors } from '@strapi/strapi/admin';
 import * as yup from 'yup';
 
 const schema = yup.object().shape({
@@ -8,15 +8,27 @@ const schema = yup.object().shape({
       from: yup
         .object()
         .shape({
-          name: yup.string().required(translatedErrors.required),
-          email: yup.string().email(translatedErrors.email).required(translatedErrors.required),
+          name: yup.string().required({
+            id: translatedErrors.required.id,
+            defaultMessage: 'This field is required',
+          }),
+          email: yup.string().email(translatedErrors.email).required({
+            id: translatedErrors.required.id,
+            defaultMessage: 'This field is required',
+          }),
         })
         .required(),
       response_email: yup.string().email(translatedErrors.email),
-      object: yup.string().required(translatedErrors.required),
-      message: yup.string().required(translatedErrors.required),
+      object: yup.string().required({
+        id: translatedErrors.required.id,
+        defaultMessage: 'This field is required',
+      }),
+      message: yup.string().required({
+        id: translatedErrors.required.id,
+        defaultMessage: 'This field is required',
+      }),
     })
-    .required(translatedErrors.required),
+    .required(translatedErrors.required.id),
 });
 
 export default schema;