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

package/admin/src/index.js

@@ -1,9 +1,8 @@
-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;
 

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

@@ -8,11 +8,10 @@ import {
   Grid,
   GridItem,
   HeaderLayout,
-  Main,
   Typography,
   useNotifyAT,
 } from '@strapi/design-system';
-import { useFetchClient, useFocusWhenNavigate, useRBAC } from '@strapi/helper-plugin';
+import { useRBAC } from '@strapi/helper-plugin';
 import { Check } from '@strapi/icons';
 import {
   useAPIErrorHandler,
@@ -20,6 +19,7 @@ import {
   Form,
   InputRenderer,
   useNotification,
+  useFetchClient,
 } from '@strapi/strapi/admin';
 import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
@@ -45,8 +45,6 @@ const AdvancedSettingsPage = () => {
   const { get, put } = useFetchClient();
   const { formatAPIError } = useAPIErrorHandler();
 
-  useFocusWhenNavigate();
-
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canUpdate },
@@ -119,7 +117,7 @@ const AdvancedSettingsPage = () => {
   }
 
   return (
-    <Main aria-busy={isSubmittingForm}>
+    <Page.Main aria-busy={isSubmittingForm}>
       <Helmet
         title={formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -214,7 +212,7 @@ const AdvancedSettingsPage = () => {
           );
         }}
       </Form>
-    </Main>
+    </Page.Main>
   );
 };
 

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,9 +1,9 @@
 import * as React from 'react';
 
 import { useTracking } from '@strapi/admin/strapi-admin';
-import { ContentLayout, HeaderLayout, Main, useNotifyAT } from '@strapi/design-system';
-import { useFetchClient, useFocusWhenNavigate, useRBAC } from '@strapi/helper-plugin';
-import { Page, useAPIErrorHandler, useNotification } from '@strapi/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';
@@ -28,8 +28,6 @@ const EmailTemplatesPage = () => {
   const { get, put } = useFetchClient();
   const { formatAPIError } = useAPIErrorHandler();
 
-  useFocusWhenNavigate();
-
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const [templateToEdit, setTemplateToEdit] = React.useState(null);
 
@@ -111,7 +109,7 @@ const EmailTemplatesPage = () => {
   }
 
   return (
-    <Main aria-busy={submitMutation.isLoading}>
+    <Page.Main aria-busy={submitMutation.isLoading}>
       <Helmet
         title={formatMessage(
           { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
@@ -139,7 +137,7 @@ const EmailTemplatesPage = () => {
           />
         )}
       </ContentLayout>
-    </Main>
+    </Page.Main>
   );
 };
 

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

@@ -6,7 +6,6 @@ import {
   HeaderLayout,
   IconButton,
   Layout,
-  Main,
   Table,
   Tbody,
   Td,
@@ -17,15 +16,9 @@ import {
   VisuallyHidden,
   useCollator,
 } from '@strapi/design-system';
-import {
-  onRowClick,
-  stopPropagation,
-  useFetchClient,
-  useFocusWhenNavigate,
-  useRBAC,
-} from '@strapi/helper-plugin';
+import { useRBAC } from '@strapi/helper-plugin';
 import { Pencil } from '@strapi/icons';
-import { Page, useAPIErrorHandler, useNotification } from '@strapi/strapi/admin';
+import { Page, useAPIErrorHandler, useNotification, useFetchClient } from '@strapi/strapi/admin';
 import upperFirst from 'lodash/upperFirst';
 import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
@@ -50,8 +43,6 @@ export const ProvidersPage = () => {
     sensitivity: 'base',
   });
 
-  useFocusWhenNavigate();
-
   const {
     isLoading: isLoadingPermissions,
     allowedActions: { canUpdate },
@@ -164,7 +155,7 @@ export const ProvidersPage = () => {
           }
         )}
       />
-      <Main>
+      <Page.Main>
         <HeaderLayout
           title={formatMessage({
             id: getTrad('HeaderNav.link.providers'),
@@ -201,10 +192,7 @@ export const ProvidersPage = () => {
               {providers.map((provider) => (
                 <Tr
                   key={provider.name}
-                  {...onRowClick({
-                    fn: () => handleClickEdit(provider),
-                    condition: canUpdate,
-                  })}
+                  onClick={() => (canUpdate ? handleClickEdit(provider) : undefined)}
                 >
                   <Td width="45%">
                     <Typography fontWeight="semiBold" textColor="neutral800">
@@ -227,7 +215,7 @@ export const ProvidersPage = () => {
                           })}
                     </Typography>
                   </Td>
-                  <Td {...stopPropagation}>
+                  <Td onClick={(e) => e.stopPropagation()}>
                     {canUpdate && (
                       <IconButton
                         onClick={() => handleClickEdit(provider)}
@@ -242,7 +230,7 @@ export const ProvidersPage = () => {
             </Tbody>
           </Table>
         </ContentLayout>
-      </Main>
+      </Page.Main>
       <FormModal
         initialData={data[providerToEditName]}
         isOpen={isOpen}

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

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
-import { useFetchClient } from '@strapi/helper-plugin';
-import { useAPIErrorHandler, useNotification } from '@strapi/strapi/admin';
+import { useAPIErrorHandler, useNotification, useFetchClient } from '@strapi/strapi/admin';
 import { useQueries } from 'react-query';
 
 import { cleanPermissions, getTrad } from '../../../utils';

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

@@ -12,9 +12,8 @@ import {
   TextInput,
   Typography,
 } from '@strapi/design-system';
-import { useFetchClient } from '@strapi/helper-plugin';
 import { Check } from '@strapi/icons';
-import { Page, useTracking, useNotification } from '@strapi/strapi/admin';
+import { Page, useTracking, useNotification, useFetchClient } from '@strapi/strapi/admin';
 import { Formik, Form } from 'formik';
 import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';

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

@@ -12,9 +12,14 @@ import {
   GridItem,
   Grid,
 } from '@strapi/design-system';
-import { useFetchClient } from '@strapi/helper-plugin';
 import { Check } from '@strapi/icons';
-import { Page, BackButton, useAPIErrorHandler, useNotification } from '@strapi/strapi/admin';
+import {
+  Page,
+  BackButton,
+  useAPIErrorHandler,
+  useNotification,
+  useFetchClient,
+} from '@strapi/strapi/admin';
 import { Formik, Form } from 'formik';
 import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';

package/admin/src/pages/Roles/pages/ListPage/components/TableBody.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { Flex, IconButton, Link, Tbody, Td, Tr, Typography } from '@strapi/design-system';
-import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
 import { Pencil, Trash } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -51,7 +50,7 @@ const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelet
   return (
     <Tbody>
       {sortedRoles?.map((role) => (
-        <Tr key={role.name} {...onRowClick({ fn: () => navigate(role.id.toString()) })}>
+        <Tr key={role.name} onClick={() => navigate(role.id.toString())}>
           <Td width="20%">
             <Typography>{role.name}</Typography>
           </Td>
@@ -70,7 +69,7 @@ const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelet
             </Typography>
           </Td>
           <Td>
-            <Flex justifyContent="end" {...stopPropagation}>
+            <Flex justifyContent="end" onClick={(e) => e.stopPropagation()}>
               {canUpdate ? (
                 <EditLink
                   to={role.id.toString()}

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

@@ -5,7 +5,6 @@ import {
   ContentLayout,
   HeaderLayout,
   Layout,
-  Main,
   Table,
   Th,
   Thead,
@@ -18,7 +17,7 @@ import {
   useFilter,
 } from '@strapi/design-system';
 import { LinkButton } from '@strapi/design-system/v2';
-import { useFocusWhenNavigate, useQueryParams, useRBAC } from '@strapi/helper-plugin';
+import { useRBAC } from '@strapi/helper-plugin';
 import { Plus } from '@strapi/icons';
 import {
   ConfirmDialog,
@@ -27,6 +26,8 @@ import {
   SearchInput,
   BackButton,
   useNotification,
+  useQueryParams,
+  useFetchClient,
 } from '@strapi/strapi/admin';
 import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
@@ -37,7 +38,6 @@ import { PERMISSIONS } from '../../../../constants';
 import { getTrad } from '../../../../utils';
 
 import TableBody from './components/TableBody';
-import { deleteData, fetchData } from './utils/api';
 
 export const RolesListPage = () => {
   const { trackUsage } = useTracking();
@@ -48,7 +48,7 @@ export const RolesListPage = () => {
   const _q = query?._q || '';
   const [showConfirmDelete, setShowConfirmDelete] = useState(false);
   const [roleToDelete, setRoleToDelete] = useState();
-  useFocusWhenNavigate();
+  const { del, get } = useFetchClient();
 
   const {
     isLoading: isLoadingForPermissions,
@@ -87,6 +87,33 @@ export const RolesListPage = () => {
     setShowConfirmDelete(!showConfirmDelete);
   };
 
+  const deleteData = async (id, formatMessage, toggleNotification) => {
+    try {
+      await del(`/users-permissions/roles/${id}`);
+    } catch (error) {
+      toggleNotification({
+        type: 'danger',
+        message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occured' }),
+      });
+    }
+  };
+
+  const fetchData = async (toggleNotification, formatMessage, notifyStatus) => {
+    try {
+      const { data } = await get('/users-permissions/roles');
+      notifyStatus('The roles have loaded successfully');
+
+      return data;
+    } catch (err) {
+      toggleNotification({
+        type: 'danger',
+        message: formatMessage({ id: 'notification.error' }),
+      });
+
+      throw new Error(err);
+    }
+  };
+
   const emptyLayout = {
     roles: {
       id: getTrad('Roles.empty'),
@@ -137,7 +164,7 @@ export const RolesListPage = () => {
           { name: pageTitle }
         )}
       />
-      <Main aria-busy={isLoading}>
+      <Page.Main>
         <HeaderLayout
           title={formatMessage({
             id: 'global.roles',
@@ -232,7 +259,7 @@ export const RolesListPage = () => {
           onClose={handleShowConfirmDelete}
           isOpen={showConfirmDelete}
         />
-      </Main>
+      </Page.Main>
     </Layout>
   );
 };

package/admin/src/utils/prefixPluginTranslations.js

@@ -0,0 +1,13 @@
+const prefixPluginTranslations = (trad, pluginId) => {
+  if (!pluginId) {
+    throw new TypeError("pluginId can't be empty");
+  }
+
+  return Object.keys(trad).reduce((acc, current) => {
+    acc[`${pluginId}.${current}`] = trad[current];
+
+    return acc;
+  }, {});
+};
+
+export { prefixPluginTranslations };