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

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

@@ -12,7 +12,6 @@ import {
   Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
 import { Check, Pencil, Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -53,7 +52,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
         </Tr>
       </Thead>
       <Tbody>
-        <Tr {...onRowClick({ fn: () => onEditClick('reset_password') })}>
+        <Tr onClick={() => onEditClick('reset_password')}>
           <Td>
             <Icon>
               <Refresh
@@ -72,7 +71,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
               })}
             </Typography>
           </Td>
-          <Td {...stopPropagation}>
+          <Td onClick={(e) => e.stopPropagation()}>
             <IconButton
               onClick={() => onEditClick('reset_password')}
               label={formatMessage({
@@ -84,7 +83,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
             />
           </Td>
         </Tr>
-        <Tr {...onRowClick({ fn: () => onEditClick('email_confirmation') })}>
+        <Tr onClick={() => onEditClick('email_confirmation')}>
           <Td>
             <Icon>
               <Check
@@ -103,7 +102,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
               })}
             </Typography>
           </Td>
-          <Td {...stopPropagation}>
+          <Td onClick={(e) => e.stopPropagation()}>
             <IconButton
               onClick={() => onEditClick('email_confirmation')}
               label={formatMessage({

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

@@ -1,18 +1,10 @@
 import * as React from 'react';
 
-import { ContentLayout, HeaderLayout, Main, useNotifyAT } from '@strapi/design-system';
-import {
-  CheckPagePermissions,
-  LoadingIndicatorPage,
-  SettingsPageTitle,
-  useAPIErrorHandler,
-  useFetchClient,
-  useFocusWhenNavigate,
-  useNotification,
-  useOverlayBlocker,
-  useRBAC,
-  useTracking,
-} from '@strapi/helper-plugin';
+import { useTracking } from '@strapi/admin/strapi-admin';
+import { ContentLayout, HeaderLayout, useNotifyAT } from '@strapi/design-system';
+import { useRBAC } from '@strapi/helper-plugin';
+import { Page, useAPIErrorHandler, useNotification, useFetchClient } from '@strapi/strapi/admin';
+import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
@@ -23,23 +15,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 +54,7 @@ const EmailTemplatesPage = () => {
       },
       onError(error) {
         toggleNotification({
-          type: 'warning',
+          type: 'danger',
           message: formatAPIError(error),
         });
       },
@@ -92,29 +80,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,34 +105,21 @@ 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',
-        })}
+    <Page.Main aria-busy={submitMutation.isLoading}>
+      <Helmet
+        title={formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          {
+            name: formatMessage({
+              id: getTrad('HeaderNav.link.emailTemplates'),
+              defaultMessage: 'Email templates',
+            }),
+          }
+        )}
       />
       <HeaderLayout
         title={formatMessage({
@@ -167,8 +137,8 @@ const EmailTemplatesPage = () => {
           />
         )}
       </ContentLayout>
-    </Main>
+    </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;

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
+import { useTracking } from '@strapi/admin/strapi-admin';
 import {
   ContentLayout,
   HeaderLayout,
   IconButton,
   Layout,
-  Main,
   Table,
   Tbody,
   Td,
@@ -14,24 +14,13 @@ import {
   Tr,
   Typography,
   VisuallyHidden,
-} from '@strapi/design-system';
-import {
-  CheckPagePermissions,
-  LoadingIndicatorPage,
-  onRowClick,
-  SettingsPageTitle,
-  stopPropagation,
-  useAPIErrorHandler,
   useCollator,
-  useFetchClient,
-  useFocusWhenNavigate,
-  useNotification,
-  useOverlayBlocker,
-  useRBAC,
-  useTracking,
-} from '@strapi/helper-plugin';
+} from '@strapi/design-system';
+import { useRBAC } from '@strapi/helper-plugin';
 import { Pencil } from '@strapi/icons';
+import { Page, useAPIErrorHandler, useNotification, useFetchClient } 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';
 
@@ -47,16 +36,13 @@ export const ProvidersPage = () => {
   const { trackUsage } = useTracking();
   const [isOpen, setIsOpen] = React.useState(false);
   const [providerToEditName, setProviderToEditName] = React.useState(null);
-  const toggleNotification = useNotification();
-  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { toggleNotification } = useNotification();
   const { get, put } = useFetchClient();
   const { formatAPIError } = useAPIErrorHandler();
   const formatter = useCollator(locale, {
     sensitivity: 'base',
   });
 
-  useFocusWhenNavigate();
-
   const {
     isLoading: isLoadingPermissions,
     allowedActions: { canUpdate },
@@ -80,21 +66,18 @@ export const ProvidersPage = () => {
 
       toggleNotification({
         type: 'success',
-        message: { id: getTrad('notification.success.submit') },
+        message: formatMessage({ id: getTrad('notification.success.submit') }),
       });
 
       trackUsage('didEditAuthenticationProvider');
 
       handleToggleModal();
-      unlockApp();
     },
     onError(error) {
       toggleNotification({
-        type: 'warning',
+        type: 'danger',
         message: formatAPIError(error),
       });
-
-      unlockApp();
     },
     refetchActive: false,
   });
@@ -150,104 +133,104 @@ export const ProvidersPage = () => {
   };
 
   const handleSubmit = async (values) => {
-    lockApp();
-
     trackUsage('willEditAuthenticationProvider');
 
     submitMutation.mutate({ providers: { ...data, [providerToEditName]: values } });
   };
 
+  if (isLoading) {
+    return <Page.Loading />;
+  }
+
   return (
     <Layout>
-      <SettingsPageTitle
-        name={formatMessage({
-          id: getTrad('HeaderNav.link.providers'),
-          defaultMessage: 'Providers',
-        })}
+      <Helmet
+        title={formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          {
+            name: formatMessage({
+              id: getTrad('HeaderNav.link.providers'),
+              defaultMessage: 'Providers',
+            }),
+          }
+        )}
       />
-      <Main>
+      <Page.Main>
         <HeaderLayout
           title={formatMessage({
             id: getTrad('HeaderNav.link.providers'),
             defaultMessage: 'Providers',
           })}
         />
-        {isLoading ? (
-          <LoadingIndicatorPage />
-        ) : (
-          <ContentLayout>
-            <Table colCount={3} rowCount={providers.length + 1}>
-              <Thead>
-                <Tr>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
+        <ContentLayout>
+          <Table colCount={3} rowCount={providers.length + 1}>
+            <Thead>
+              <Tr>
+                <Th>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">
+                    <VisuallyHidden>
+                      {formatMessage({
+                        id: 'global.settings',
+                        defaultMessage: 'Settings',
+                      })}
+                    </VisuallyHidden>
+                  </Typography>
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {providers.map((provider) => (
+                <Tr
+                  key={provider.name}
+                  onClick={() => (canUpdate ? handleClickEdit(provider) : undefined)}
+                >
+                  <Td width="45%">
+                    <Typography fontWeight="semiBold" textColor="neutral800">
+                      {provider.name}
                     </Typography>
-                  </Th>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}
+                  </Td>
+                  <Td width="65%">
+                    <Typography
+                      textColor={provider.enabled ? 'success600' : 'danger600'}
+                      data-testid={`enable-${provider.name}`}
+                    >
+                      {provider.enabled
+                        ? formatMessage({
+                            id: 'global.enabled',
+                            defaultMessage: 'Enabled',
+                          })
+                        : formatMessage({
+                            id: 'global.disabled',
+                            defaultMessage: 'Disabled',
+                          })}
                     </Typography>
-                  </Th>
-                  <Th>
-                    <Typography variant="sigma">
-                      <VisuallyHidden>
-                        {formatMessage({
-                          id: 'global.settings',
-                          defaultMessage: 'Settings',
-                        })}
-                      </VisuallyHidden>
-                    </Typography>
-                  </Th>
+                  </Td>
+                  <Td onClick={(e) => e.stopPropagation()}>
+                    {canUpdate && (
+                      <IconButton
+                        onClick={() => handleClickEdit(provider)}
+                        noBorder
+                        icon={<Pencil />}
+                        label="Edit"
+                      />
+                    )}
+                  </Td>
                 </Tr>
-              </Thead>
-              <Tbody>
-                {providers.map((provider) => (
-                  <Tr
-                    key={provider.name}
-                    {...onRowClick({
-                      fn: () => handleClickEdit(provider),
-                      condition: canUpdate,
-                    })}
-                  >
-                    <Td width="45%">
-                      <Typography fontWeight="semiBold" textColor="neutral800">
-                        {provider.name}
-                      </Typography>
-                    </Td>
-                    <Td width="65%">
-                      <Typography
-                        textColor={provider.enabled ? 'success600' : 'danger600'}
-                        data-testid={`enable-${provider.name}`}
-                      >
-                        {provider.enabled
-                          ? formatMessage({
-                              id: 'global.enabled',
-                              defaultMessage: 'Enabled',
-                            })
-                          : formatMessage({
-                              id: 'global.disabled',
-                              defaultMessage: 'Disabled',
-                            })}
-                      </Typography>
-                    </Td>
-                    <Td {...stopPropagation}>
-                      {canUpdate && (
-                        <IconButton
-                          onClick={() => handleClickEdit(provider)}
-                          noBorder
-                          icon={<Pencil />}
-                          label="Edit"
-                        />
-                      )}
-                    </Td>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </ContentLayout>
-        )}
-      </Main>
+              ))}
+            </Tbody>
+          </Table>
+        </ContentLayout>
+      </Page.Main>
       <FormModal
         initialData={data[providerToEditName]}
         isOpen={isOpen}
@@ -269,9 +252,9 @@ export const ProvidersPage = () => {
 };
 
 const ProtectedProvidersPage = () => (
-  <CheckPagePermissions permissions={PERMISSIONS.readProviders}>
+  <Page.Protect permissions={PERMISSIONS.readProviders}>
     <ProvidersPage />
-  </CheckPagePermissions>
+  </Page.Protect>
 );
 
 export default ProtectedProvidersPage;

package/admin/src/pages/Providers/utils/forms.js

@@ -1,4 +1,4 @@
-import { translatedErrors } from '@strapi/helper-plugin';
+import { translatedErrors } from '@strapi/strapi/admin';
 import * as yup from 'yup';
 
 import { getTrad } from '../../../utils';
@@ -52,7 +52,7 @@ const forms = {
       ],
     ],
     schema: yup.object().shape({
-      enabled: yup.bool().required(translatedErrors.required),
+      enabled: yup.bool().required(translatedErrors.required.id),
     }),
   },
   providers: {
@@ -117,20 +117,20 @@ const forms = {
       ],
     ],
     schema: yup.object().shape({
-      enabled: yup.bool().required(translatedErrors.required),
+      enabled: yup.bool().required(translatedErrors.required.id),
       key: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup.string().required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
       secret: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup.string().required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
       callback: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup.string().required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
     }),
@@ -231,25 +231,25 @@ const forms = {
       ],
     ],
     schema: yup.object().shape({
-      enabled: yup.bool().required(translatedErrors.required),
+      enabled: yup.bool().required(translatedErrors.required.id),
       key: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup.string().required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
       secret: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup.string().required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
       subdomain: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup.string().required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
       callback: yup.string().when('enabled', {
         is: true,
-        then: yup.string().required(translatedErrors.required),
+        then: yup.string().required(translatedErrors.required.id),
         otherwise: yup.string(),
       }),
     }),

package/admin/src/pages/Roles/constants.js

@@ -1,7 +1,7 @@
-import { translatedErrors } from '@strapi/helper-plugin';
+import { translatedErrors } from '@strapi/strapi/admin';
 import * as yup from 'yup';
 
 export const createRoleSchema = yup.object().shape({
-  name: yup.string().required(translatedErrors.required),
-  description: yup.string().required(translatedErrors.required),
+  name: yup.string().required(translatedErrors.required.id),
+  description: yup.string().required(translatedErrors.required.id),
 });

package/admin/src/pages/Roles/hooks/usePlugins.js

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 
-import { useNotification, useFetchClient, useAPIErrorHandler } from '@strapi/helper-plugin';
+import { useAPIErrorHandler, useNotification, useFetchClient } from '@strapi/strapi/admin';
 import { useQueries } from 'react-query';
 
 import { cleanPermissions, getTrad } from '../../../utils';
 
 export const usePlugins = () => {
-  const toggleNotification = useNotification();
+  const { toggleNotification } = useNotification();
   const { get } = useFetchClient();
   const { formatAPIError } = useAPIErrorHandler(getTrad);
 
@@ -48,7 +48,7 @@ export const usePlugins = () => {
   useEffect(() => {
     if (permissionsError) {
       toggleNotification({
-        type: 'warning',
+        type: 'danger',
         message: formatAPIError(permissionsError),
       });
     }
@@ -57,7 +57,7 @@ export const usePlugins = () => {
   useEffect(() => {
     if (routesError) {
       toggleNotification({
-        type: 'warning',
+        type: 'danger',
         message: formatAPIError(routesError),
       });
     }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { AnErrorOccurred, CheckPagePermissions } from '@strapi/helper-plugin';
-import { Route, Switch } from 'react-router-dom';
+import { Page } from '@strapi/strapi/admin';
+import { Route, Routes } from 'react-router-dom';
 
 import { PERMISSIONS } from '../../constants';
 
@@ -11,22 +11,13 @@ import { ProtectedRolesListPage } from './pages/ListPage';
 
 const Roles = () => {
   return (
-    <CheckPagePermissions permissions={PERMISSIONS.accessRoles}>
-      <Switch>
-        <Route
-          path="/settings/users-permissions/roles/new"
-          component={ProtectedRolesCreatePage}
-          exact
-        />
-        <Route
-          path="/settings/users-permissions/roles/:id"
-          component={ProtectedRolesEditPage}
-          exact
-        />
-        <Route path="/settings/users-permissions/roles" component={ProtectedRolesListPage} exact />
-        <Route path="" component={AnErrorOccurred} />
-      </Switch>
-    </CheckPagePermissions>
+    <Page.Protect permissions={PERMISSIONS.accessRoles}>
+      <Routes>
+        <Route index element={<ProtectedRolesListPage />} />
+        <Route path="new" element={<ProtectedRolesCreatePage />} />
+        <Route path=":id" element={<ProtectedRolesEditPage />} />
+      </Routes>
+    </Page.Protect>
   );
 };