@strapi/plugin-users-permissions 0.0.0-next.fe88c7878fe2948cfdc68f4867329c1032a618b2 → 0.0.0-next.ffc36acb308febe288f1a31b62cbbb75b286585c

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

@@ -1,34 +1,17 @@
-import React from 'react';
+import * as React from 'react';
 
+import { Box, Button, Flex, Grid, Typography, useNotifyAT } from '@strapi/design-system';
+import { Check } from '@strapi/icons';
 import {
-  Box,
-  Button,
-  ContentLayout,
-  Flex,
-  Grid,
-  GridItem,
-  HeaderLayout,
-  Main,
-  Option,
-  Select,
-  Typography,
-  useNotifyAT,
-} from '@strapi/design-system';
-import {
-  CheckPagePermissions,
-  Form,
-  GenericInput,
-  LoadingIndicatorPage,
-  SettingsPageTitle,
   useAPIErrorHandler,
-  useFetchClient,
-  useFocusWhenNavigate,
+  Page,
+  Form,
+  InputRenderer,
   useNotification,
-  useOverlayBlocker,
+  useFetchClient,
   useRBAC,
-} from '@strapi/helper-plugin';
-import { Check } from '@strapi/icons';
-import { Formik } from 'formik';
+  Layouts,
+} from '@strapi/strapi/admin';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
@@ -39,22 +22,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 +58,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 +76,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 +94,6 @@ const AdvancedSettingsPage = () => {
   const { isLoading: isSubmittingForm } = submitMutation;
 
   const handleSubmit = async (body) => {
-    lockApp();
-
     submitMutation.mutate({
       ...body,
       email_confirmation_redirection: body.email_confirmation
@@ -123,46 +103,27 @@ 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',
-        })}
-      />
-      <Formik
-        onSubmit={handleSubmit}
-        initialValues={data.settings}
-        validateOnChange={false}
-        validationSchema={schema}
-        enableReinitialize
-      >
-        {({ errors, values, handleChange, isSubmitting, dirty }) => {
+    <Page.Main aria-busy={isSubmittingForm}>
+      <Page.Title>
+        {formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          {
+            name: formatMessage({
+              id: getTrad('HeaderNav.link.advancedSettings'),
+              defaultMessage: 'Advanced Settings',
+            }),
+          }
+        )}
+      </Page.Title>
+      <Form onSubmit={handleSubmit} initialValues={data.settings} validationSchema={schema}>
+        {({ values, isSubmitting, modified }) => {
           return (
-            <Form>
-              <HeaderLayout
+            <>
+              <Layouts.Header
                 title={formatMessage({
                   id: getTrad('HeaderNav.link.advancedSettings'),
                   defaultMessage: 'Advanced Settings',
@@ -171,7 +132,7 @@ const AdvancedSettingsPage = () => {
                   <Button
                     loading={isSubmitting}
                     type="submit"
-                    disabled={canUpdate ? !dirty : !canUpdate}
+                    disabled={!modified || !canUpdate}
                     startIcon={<Check />}
                     size="S"
                   >
@@ -179,7 +140,7 @@ const AdvancedSettingsPage = () => {
                   </Button>
                 }
               />
-              <ContentLayout>
+              <Layouts.Content>
                 <Box
                   background="neutral0"
                   hasRadius
@@ -190,70 +151,64 @@ 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}>
-                      <GridItem col={6} s={12}>
-                        <Select
-                          label={formatMessage({
+                    <Grid.Root gap={6}>
+                      {[
+                        {
+                          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 } })
-                          }
+                          },
+                          options: data.roles.map((role) => ({
+                            label: role.name,
+                            value: role.type,
+                          })),
+                          name: 'default_role',
+                          size: 6,
+                          type: 'enumeration',
+                        },
+                        ...layout,
+                      ].map(({ size, ...field }) => (
+                        <Grid.Item
+                          key={field.name}
+                          col={size}
+                          direction="column"
+                          alignItems="stretch"
                         >
-                          {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>
-                        );
-                      })}
-                    </Grid>
+                          <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
+                            }
+                          />
+                        </Grid.Item>
+                      ))}
+                    </Grid.Root>
                   </Flex>
                 </Box>
-              </ContentLayout>
-            </Form>
+              </Layouts.Content>
+            </>
           );
         }}
-      </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(),
 });