@strapi/plugin-users-permissions 4.20.5 → 5.0.0-alpha.1

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

@@ -17,8 +17,7 @@ import {
   ModalLayout,
 } from '@strapi/design-system';
 import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
-import { Form } from '@strapi/helper-plugin';
-import { Formik } from 'formik';
+import { Form, Formik } from 'formik';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 

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/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,
         },
       ]

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

@@ -8,27 +8,20 @@ import {
   Grid,
   GridItem,
   HeaderLayout,
-  Main,
-  Option,
-  Select,
   Typography,
   useNotifyAT,
 } from '@strapi/design-system';
+import { useRBAC } from '@strapi/helper-plugin';
+import { Check } from '@strapi/icons';
 import {
-  CheckPagePermissions,
-  Form,
-  GenericInput,
-  LoadingIndicatorPage,
-  SettingsPageTitle,
   useAPIErrorHandler,
-  useFetchClient,
-  useFocusWhenNavigate,
+  Page,
+  Form,
+  InputRenderer,
   useNotification,
-  useOverlayBlocker,
-  useRBAC,
-} from '@strapi/helper-plugin';
-import { Check } from '@strapi/icons';
-import { Formik } from 'formik';
+  useFetchClient,
+} from '@strapi/strapi/admin';
+import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
@@ -39,22 +32,19 @@ import layout from './utils/layout';
 import schema from './utils/schema';
 
 const ProtectedAdvancedSettingsPage = () => (
-  <CheckPagePermissions permissions={PERMISSIONS.readAdvancedSettings}>
+  <Page.Protect permissions={PERMISSIONS.readAdvancedSettings}>
     <AdvancedSettingsPage />
-  </CheckPagePermissions>
+  </Page.Protect>
 );
 
 const AdvancedSettingsPage = () => {
   const { formatMessage } = useIntl();
-  const toggleNotification = useNotification();
-  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { toggleNotification } = useNotification();
   const { notifyStatus } = useNotifyAT();
   const queryClient = useQueryClient();
   const { get, put } = useFetchClient();
   const { formatAPIError } = useAPIErrorHandler();
 
-  useFocusWhenNavigate();
-
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canUpdate },
@@ -78,8 +68,11 @@ const AdvancedSettingsPage = () => {
       },
       onError() {
         toggleNotification({
-          type: 'warning',
-          message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' },
+          type: 'danger',
+          message: formatMessage({
+            id: getTrad('notification.error'),
+            defaultMessage: 'An error occured',
+          }),
         });
       },
     }
@@ -93,18 +86,17 @@ const AdvancedSettingsPage = () => {
 
       toggleNotification({
         type: 'success',
-        message: { id: getTrad('notification.success.saved'), defaultMessage: 'Saved' },
+        message: formatMessage({
+          id: getTrad('notification.success.saved'),
+          defaultMessage: 'Saved',
+        }),
       });
-
-      unlockApp();
     },
     onError(error) {
       toggleNotification({
-        type: 'warning',
+        type: 'danger',
         message: formatAPIError(error),
       });
-
-      unlockApp();
     },
     refetchActive: true,
   });
@@ -112,8 +104,6 @@ const AdvancedSettingsPage = () => {
   const { isLoading: isSubmittingForm } = submitMutation;
 
   const handleSubmit = async (body) => {
-    lockApp();
-
     submitMutation.mutate({
       ...body,
       email_confirmation_redirection: body.email_confirmation
@@ -123,45 +113,26 @@ const AdvancedSettingsPage = () => {
   };
 
   if (isLoading) {
-    return (
-      <Main aria-busy="true">
-        <SettingsPageTitle
-          name={formatMessage({
-            id: getTrad('HeaderNav.link.advancedSettings'),
-            defaultMessage: 'Advanced Settings',
-          })}
-        />
-        <HeaderLayout
-          title={formatMessage({
-            id: getTrad('HeaderNav.link.advancedSettings'),
-            defaultMessage: 'Advanced Settings',
-          })}
-        />
-        <ContentLayout>
-          <LoadingIndicatorPage />
-        </ContentLayout>
-      </Main>
-    );
+    return <Page.Loading />;
   }
 
   return (
-    <Main aria-busy={isSubmittingForm}>
-      <SettingsPageTitle
-        name={formatMessage({
-          id: getTrad('HeaderNav.link.advancedSettings'),
-          defaultMessage: 'Advanced Settings',
-        })}
+    <Page.Main aria-busy={isSubmittingForm}>
+      <Helmet
+        title={formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          {
+            name: formatMessage({
+              id: getTrad('HeaderNav.link.advancedSettings'),
+              defaultMessage: 'Advanced Settings',
+            }),
+          }
+        )}
       />
-      <Formik
-        onSubmit={handleSubmit}
-        initialValues={data.settings}
-        validateOnChange={false}
-        validationSchema={schema}
-        enableReinitialize
-      >
-        {({ errors, values, handleChange, isSubmitting, dirty }) => {
+      <Form onSubmit={handleSubmit} initialValues={data.settings} validationSchema={schema}>
+        {({ values, isSubmitting, modified }) => {
           return (
-            <Form>
+            <>
               <HeaderLayout
                 title={formatMessage({
                   id: getTrad('HeaderNav.link.advancedSettings'),
@@ -171,7 +142,7 @@ const AdvancedSettingsPage = () => {
                   <Button
                     loading={isSubmitting}
                     type="submit"
-                    disabled={canUpdate ? !dirty : !canUpdate}
+                    disabled={!modified || !canUpdate}
                     startIcon={<Check />}
                     size="S"
                   >
@@ -197,63 +168,52 @@ const AdvancedSettingsPage = () => {
                       })}
                     </Typography>
                     <Grid gap={6}>
-                      <GridItem col={6} s={12}>
-                        <Select
-                          label={formatMessage({
+                      {[
+                        {
+                          label: {
                             id: getTrad('EditForm.inputSelect.label.role'),
                             defaultMessage: 'Default role for authenticated users',
-                          })}
-                          value={values.default_role}
-                          hint={formatMessage({
+                          },
+                          hint: {
                             id: getTrad('EditForm.inputSelect.description.role'),
                             defaultMessage:
                               'It will attach the new authenticated user to the selected role.',
-                          })}
-                          onChange={(e) =>
-                            handleChange({ target: { name: 'default_role', value: e } })
-                          }
-                        >
-                          {data.roles.map((role) => {
-                            return (
-                              <Option key={role.type} value={role.type}>
-                                {role.name}
-                              </Option>
-                            );
-                          })}
-                        </Select>
-                      </GridItem>
-                      {layout.map((input) => {
-                        let value = values[input.name];
-
-                        if (!value) {
-                          value = input.type === 'bool' ? false : '';
-                        }
-
-                        return (
-                          <GridItem key={input.name} {...input.size}>
-                            <GenericInput
-                              {...input}
-                              value={value}
-                              error={errors[input.name]}
-                              disabled={
-                                input.name === 'email_confirmation_redirection' &&
-                                values.email_confirmation === false
-                              }
-                              onChange={handleChange}
-                            />
-                          </GridItem>
-                        );
-                      })}
+                          },
+                          options: data.roles.map((role) => ({
+                            label: role.name,
+                            value: role.type,
+                          })),
+                          name: 'default_role',
+                          size: 6,
+                          type: 'enumeration',
+                        },
+                        ...layout,
+                      ].map(({ size, ...field }) => (
+                        <GridItem key={field.name} col={size}>
+                          <InputRenderer
+                            {...field}
+                            disabled={
+                              field.name === 'email_confirmation_redirection' &&
+                              values.email_confirmation === false
+                            }
+                            label={formatMessage(field.label)}
+                            hint={field.hint ? formatMessage(field.hint) : undefined}
+                            placeholder={
+                              field.placeholder ? formatMessage(field.placeholder) : undefined
+                            }
+                          />
+                        </GridItem>
+                      ))}
                     </Grid>
                   </Flex>
                 </Box>
               </ContentLayout>
-            </Form>
+            </>
           );
         }}
-      </Formik>
-    </Main>
+      </Form>
+    </Page.Main>
   );
 };
 
-export default ProtectedAdvancedSettingsPage;
+export { ProtectedAdvancedSettingsPage, AdvancedSettingsPage };

package/admin/src/pages/AdvancedSettings/utils/layout.js

@@ -2,45 +2,39 @@ import { getTrad } from '../../../utils';
 
 const layout = [
   {
-    intlLabel: {
+    label: {
       id: getTrad('EditForm.inputToggle.label.email'),
       defaultMessage: 'One account per email address',
     },
-    description: {
+    hint: {
       id: getTrad('EditForm.inputToggle.description.email'),
       defaultMessage:
         'Disallow the user to create multiple accounts using the same email address with different authentication providers.',
     },
     name: 'unique_email',
-    type: 'bool',
-    size: {
-      col: 12,
-      xs: 12,
-    },
+    type: 'boolean',
+    size: 12,
   },
   {
-    intlLabel: {
+    label: {
       id: getTrad('EditForm.inputToggle.label.sign-up'),
       defaultMessage: 'Enable sign-ups',
     },
-    description: {
+    hint: {
       id: getTrad('EditForm.inputToggle.description.sign-up'),
       defaultMessage:
         'When disabled (OFF), the registration process is forbidden. No one can subscribe anymore no matter the used provider.',
     },
     name: 'allow_register',
-    type: 'bool',
-    size: {
-      col: 12,
-      xs: 12,
-    },
+    type: 'boolean',
+    size: 12,
   },
   {
-    intlLabel: {
+    label: {
       id: getTrad('EditForm.inputToggle.label.email-reset-password'),
       defaultMessage: 'Reset password page',
     },
-    description: {
+    hint: {
       id: getTrad('EditForm.inputToggle.description.email-reset-password'),
       defaultMessage: "URL of your application's reset password page.",
     },
@@ -49,34 +43,28 @@ const layout = [
       defaultMessage: 'ex: https://youtfrontend.com/reset-password',
     },
     name: 'email_reset_password',
-    type: 'text',
-    size: {
-      col: 6,
-      xs: 12,
-    },
+    type: 'string',
+    size: 12,
   },
   {
-    intlLabel: {
+    label: {
       id: getTrad('EditForm.inputToggle.label.email-confirmation'),
       defaultMessage: 'Enable email confirmation',
     },
-    description: {
+    hint: {
       id: getTrad('EditForm.inputToggle.description.email-confirmation'),
       defaultMessage: 'When enabled (ON), new registered users receive a confirmation email.',
     },
     name: 'email_confirmation',
-    type: 'bool',
-    size: {
-      col: 12,
-      xs: 12,
-    },
+    type: 'boolean',
+    size: 12,
   },
   {
-    intlLabel: {
+    label: {
       id: getTrad('EditForm.inputToggle.label.email-confirmation-redirection'),
       defaultMessage: 'Redirection url',
     },
-    description: {
+    hint: {
       id: getTrad('EditForm.inputToggle.description.email-confirmation-redirection'),
       defaultMessage: 'After you confirmed your email, choose where you will be redirected.',
     },
@@ -85,11 +73,8 @@ const layout = [
       defaultMessage: 'ex: https://youtfrontend.com/email-confirmation',
     },
     name: 'email_confirmation_redirection',
-    type: 'text',
-    size: {
-      col: 6,
-      xs: 12,
-    },
+    type: 'string',
+    size: 12,
   },
 ];
 

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

@@ -1,4 +1,4 @@
-import { translatedErrors } from '@strapi/helper-plugin';
+import { translatedErrors } from '@strapi/strapi/admin';
 import * as yup from 'yup';
 
 // eslint-disable-next-line prefer-regex-literals
@@ -12,7 +12,10 @@ const schema = yup.object().shape({
   }),
   email_reset_password: yup
     .string(translatedErrors.string)
-    .matches(URL_REGEX, translatedErrors.regex)
+    .matches(URL_REGEX, {
+      id: translatedErrors.regex.id,
+      defaultMessage: 'This is not a valid URL',
+    })
     .nullable(),
 });
 

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

@@ -8,11 +8,9 @@ import {
   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 { Form, InputRenderer } from '@strapi/strapi/admin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
@@ -51,88 +49,63 @@ const EmailForm = ({ template, onToggle, onSubmit }) => {
           </Crumb>
         </Breadcrumbs>
       </ModalHeader>
-      <Formik
-        onSubmit={onSubmit}
-        initialValues={template}
-        validateOnChange={false}
-        validationSchema={schema}
-        enableReinitialize
-      >
-        {({ errors, values, handleChange, isSubmitting }) => {
+      <Form onSubmit={onSubmit} initialValues={template} validationSchema={schema}>
+        {({ isSubmitting }) => {
           return (
-            <Form>
+            <>
               <ModalBody>
                 <Grid gap={5}>
-                  <GridItem col={6} s={12}>
-                    <GenericInput
-                      intlLabel={{
+                  {[
+                    {
+                      label: formatMessage({
                         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={{
+                      }),
+                      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"
-                      onChange={handleChange}
-                      value={values.options.from.email}
-                      error={errors?.options?.from?.email}
-                      type="text"
-                    />
-                  </GridItem>
-                  <GridItem col={6} s={12}>
-                    <GenericInput
-                      intlLabel={{
+                      }),
+                      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"
-                      onChange={handleChange}
-                      value={values.options.response_email}
-                      error={errors?.options?.response_email}
-                      type="text"
-                    />
-                  </GridItem>
-                  <GridItem col={6} s={12}>
-                    <GenericInput
-                      intlLabel={{
+                      }),
+                      name: 'options.response_email',
+                      size: 6,
+                      type: 'string',
+                    },
+                    {
+                      label: formatMessage({
                         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({
+                      }),
+                      name: 'options.object',
+                      size: 6,
+                      type: 'string',
+                    },
+                    {
+                      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>
+                      }),
+                      name: 'options.message',
+                      size: 12,
+                      type: 'text',
+                    },
+                  ].map(({ size, ...field }) => (
+                    <GridItem key={field.name} col={size}>
+                      <InputRenderer {...field} />
+                    </GridItem>
+                  ))}
                 </Grid>
               </ModalBody>
               <ModalFooter
@@ -147,10 +120,10 @@ const EmailForm = ({ template, onToggle, onSubmit }) => {
                   </Button>
                 }
               />
-            </Form>
+            </>
           );
         }}
-      </Formik>
+      </Form>
     </ModalLayout>
   );
 };