@strapi/plugin-users-permissions 0.0.0-next.de5394e73076ccf7aca1e28dc68894e3c43f8b91 → 0.0.0-next.e037a7b2d1f48b7bd8bcd0d9400ca0f9ded8a982

package/admin/src/components/Permissions/index.js

@@ -1,6 +1,6 @@
 import React, { useReducer } from 'react';
 
-import { Accordion, AccordionContent, AccordionToggle, Box, Flex } from '@strapi/design-system';
+import { Accordion, AccordionContent, AccordionToggle, Flex } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
@@ -44,9 +44,7 @@ const Permissions = () => {
             variant={index % 2 ? 'primary' : 'secondary'}
           />
           <AccordionContent>
-            <Box>
-              <PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
-            </Box>
+            <PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
           </AccordionContent>
         </Accordion>
       ))}

package/admin/src/{permissions.js → constants.js}

@@ -1,4 +1,4 @@
-const pluginPermissions = {
+export const PERMISSIONS = {
   // Roles
   accessRoles: [
     { action: 'plugin::users-permissions.roles.create', subject: null },
@@ -27,5 +27,3 @@ const pluginPermissions = {
   readProviders: [{ action: 'plugin::users-permissions.providers.read', subject: null }],
   updateProviders: [{ action: 'plugin::users-permissions.providers.update', subject: null }],
 };
-
-export default pluginPermissions;

package/admin/src/index.js

@@ -8,8 +8,7 @@ import { prefixPluginTranslations } from '@strapi/helper-plugin';
 
 import pluginPkg from '../../package.json';
 
-import pluginPermissions from './permissions';
-import pluginId from './pluginId';
+import { PERMISSIONS } from './constants';
 import getTrad from './utils/getTrad';
 
 const name = pluginPkg.strapi.name;
@@ -19,7 +18,7 @@ export default {
     // Create the plugin's settings section
     app.createSettingSection(
       {
-        id: pluginId,
+        id: 'users-permissions',
         intlLabel: {
           id: getTrad('Settings.section-label'),
           defaultMessage: 'Users & Permissions plugin',
@@ -32,7 +31,7 @@ export default {
             defaultMessage: 'Roles',
           },
           id: 'roles',
-          to: `/settings/${pluginId}/roles`,
+          to: `/settings/users-permissions/roles`,
           async Component() {
             const component = await import(
               /* webpackChunkName: "users-roles-settings-page" */ './pages/Roles'
@@ -40,7 +39,7 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.accessRoles,
+          permissions: PERMISSIONS.accessRoles,
         },
         {
           intlLabel: {
@@ -48,7 +47,7 @@ export default {
             defaultMessage: 'Providers',
           },
           id: 'providers',
-          to: `/settings/${pluginId}/providers`,
+          to: `/settings/users-permissions/providers`,
           async Component() {
             const component = await import(
               /* webpackChunkName: "users-providers-settings-page" */ './pages/Providers'
@@ -56,7 +55,7 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.readProviders,
+          permissions: PERMISSIONS.readProviders,
         },
         {
           intlLabel: {
@@ -64,7 +63,7 @@ export default {
             defaultMessage: 'Email templates',
           },
           id: 'email-templates',
-          to: `/settings/${pluginId}/email-templates`,
+          to: `/settings/users-permissions/email-templates`,
           async Component() {
             const component = await import(
               /* webpackChunkName: "users-email-settings-page" */ './pages/EmailTemplates'
@@ -72,7 +71,7 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.readEmailTemplates,
+          permissions: PERMISSIONS.readEmailTemplates,
         },
         {
           intlLabel: {
@@ -80,7 +79,7 @@ export default {
             defaultMessage: 'Advanced Settings',
           },
           id: 'advanced-settings',
-          to: `/settings/${pluginId}/advanced-settings`,
+          to: `/settings/users-permissions/advanced-settings`,
           async Component() {
             const component = await import(
               /* webpackChunkName: "users-advanced-settings-page" */ './pages/AdvancedSettings'
@@ -88,13 +87,13 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.readAdvancedSettings,
+          permissions: PERMISSIONS.readAdvancedSettings,
         },
       ]
     );
 
     app.registerPlugin({
-      id: pluginId,
+      id: 'users-permissions',
       name,
     });
   },
@@ -107,7 +106,7 @@ export default {
         )
           .then(({ default: data }) => {
             return {
-              data: prefixPluginTranslations(data, pluginId),
+              data: prefixPluginTranslations(data, 'users-permissions'),
               locale,
             };
           })

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import {
   Box,
@@ -20,6 +20,8 @@ import {
   GenericInput,
   LoadingIndicatorPage,
   SettingsPageTitle,
+  useAPIErrorHandler,
+  useFetchClient,
   useFocusWhenNavigate,
   useNotification,
   useOverlayBlocker,
@@ -30,15 +32,14 @@ import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
-import pluginPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 import { getTrad } from '../../utils';
 
-import { fetchData, putAdvancedSettings } from './utils/api';
 import layout from './utils/layout';
 import schema from './utils/schema';
 
 const ProtectedAdvancedSettingsPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.readAdvancedSettings}>
+  <CheckPagePermissions permissions={PERMISSIONS.readAdvancedSettings}>
     <AdvancedSettingsPage />
   </CheckPagePermissions>
 );
@@ -49,39 +50,47 @@ const AdvancedSettingsPage = () => {
   const { lockApp, unlockApp } = useOverlayBlocker();
   const { notifyStatus } = useNotifyAT();
   const queryClient = useQueryClient();
+  const { get, put } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
+
   useFocusWhenNavigate();
 
-  const updatePermissions = useMemo(
-    () => ({ update: pluginPermissions.updateAdvancedSettings }),
-    []
-  );
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canUpdate },
-  } = useRBAC(updatePermissions);
-
-  const { status: isLoadingData, data } = useQuery('advanced', () => fetchData(), {
-    onSuccess() {
-      notifyStatus(
-        formatMessage({
-          id: getTrad('Form.advancedSettings.data.loaded'),
-          defaultMessage: 'Advanced settings data has been loaded',
-        })
-      );
-    },
-    onError() {
-      toggleNotification({
-        type: 'warning',
-        message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' },
-      });
+  } = useRBAC({ update: PERMISSIONS.updateAdvancedSettings });
+
+  const { isLoading: isLoadingData, data } = useQuery(
+    ['users-permissions', 'advanced'],
+    async () => {
+      const { data } = await get('/users-permissions/advanced');
+
+      return data;
     },
-  });
+    {
+      onSuccess() {
+        notifyStatus(
+          formatMessage({
+            id: getTrad('Form.advancedSettings.data.loaded'),
+            defaultMessage: 'Advanced settings data has been loaded',
+          })
+        );
+      },
+      onError() {
+        toggleNotification({
+          type: 'warning',
+          message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' },
+        });
+      },
+    }
+  );
 
-  const isLoading = isLoadingForPermissions || isLoadingData !== 'success';
+  const isLoading = isLoadingForPermissions || isLoadingData;
 
-  const submitMutation = useMutation((body) => putAdvancedSettings(body), {
+  const submitMutation = useMutation((body) => put('/users-permissions/advanced', body), {
     async onSuccess() {
-      await queryClient.invalidateQueries('advanced');
+      await queryClient.invalidateQueries(['users-permissions', 'advanced']);
+
       toggleNotification({
         type: 'success',
         message: { id: getTrad('notification.success.saved'), defaultMessage: 'Saved' },
@@ -89,11 +98,12 @@ const AdvancedSettingsPage = () => {
 
       unlockApp();
     },
-    onError() {
+    onError(error) {
       toggleNotification({
         type: 'warning',
-        message: { id: getTrad('notification.error'), defaultMessage: 'An error occured' },
+        message: formatAPIError(error),
       });
+
       unlockApp();
     },
     refetchActive: true,
@@ -104,9 +114,12 @@ const AdvancedSettingsPage = () => {
   const handleSubmit = async (body) => {
     lockApp();
 
-    const urlConfirmation = body.email_confirmation ? body.email_confirmation_redirection : '';
-
-    await submitMutation.mutateAsync({ ...body, email_confirmation_redirection: urlConfirmation });
+    submitMutation.mutate({
+      ...body,
+      email_confirmation_redirection: body.email_confirmation
+        ? body.email_confirmation_redirection
+        : '',
+    });
   };
 
   if (isLoading) {
@@ -146,7 +159,7 @@ const AdvancedSettingsPage = () => {
         validationSchema={schema}
         enableReinitialize
       >
-        {({ errors, values, handleChange, isSubmitting }) => {
+        {({ errors, values, handleChange, isSubmitting, dirty }) => {
           return (
             <Form>
               <HeaderLayout
@@ -158,7 +171,7 @@ const AdvancedSettingsPage = () => {
                   <Button
                     loading={isSubmitting}
                     type="submit"
-                    disabled={!canUpdate}
+                    disabled={canUpdate ? !dirty : !canUpdate}
                     startIcon={<Check />}
                     size="S"
                   >

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

@@ -1,10 +1,12 @@
-import React, { useMemo, useRef, useState } from 'react';
+import * as React from 'react';
 
 import { ContentLayout, HeaderLayout, Main, useNotifyAT } from '@strapi/design-system';
 import {
   CheckPagePermissions,
   LoadingIndicatorPage,
   SettingsPageTitle,
+  useAPIErrorHandler,
+  useFetchClient,
   useFocusWhenNavigate,
   useNotification,
   useOverlayBlocker,
@@ -14,15 +16,14 @@ import {
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
-import pluginPermissions from '../../permissions';
+import { PERMISSIONS } from '../../constants';
 import { getTrad } from '../../utils';
 
 import EmailForm from './components/EmailForm';
 import EmailTable from './components/EmailTable';
-import { fetchData, putEmailTemplate } from './utils/api';
 
 const ProtectedEmailTemplatesPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.readEmailTemplates}>
+  <CheckPagePermissions permissions={PERMISSIONS.readEmailTemplates}>
     <EmailTemplatesPage />
   </CheckPagePermissions>
 );
@@ -33,40 +34,46 @@ const EmailTemplatesPage = () => {
   const { notifyStatus } = useNotifyAT();
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
-  const trackUsageRef = useRef(trackUsage);
   const queryClient = useQueryClient();
-  useFocusWhenNavigate();
+  const { get, put } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
 
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [templateToEdit, setTemplateToEdit] = useState(null);
+  useFocusWhenNavigate();
 
-  const updatePermissions = useMemo(() => {
-    return { update: pluginPermissions.updateEmailTemplates };
-  }, []);
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [templateToEdit, setTemplateToEdit] = React.useState(null);
 
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canUpdate },
-  } = useRBAC(updatePermissions);
-
-  const { status: isLoadingData, data } = useQuery('email-templates', () => fetchData(), {
-    onSuccess() {
-      notifyStatus(
-        formatMessage({
-          id: getTrad('Email.template.data.loaded'),
-          defaultMessage: 'Email templates has been loaded',
-        })
-      );
-    },
-    onError() {
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
-      });
+  } = useRBAC({ update: PERMISSIONS.updateEmailTemplates });
+
+  const { isLoading: isLoadingData, data } = useQuery(
+    ['users-permissions', 'email-templates'],
+    async () => {
+      const { data } = await get('/users-permissions/email-templates');
+
+      return data;
     },
-  });
+    {
+      onSuccess() {
+        notifyStatus(
+          formatMessage({
+            id: getTrad('Email.template.data.loaded'),
+            defaultMessage: 'Email templates has been loaded',
+          })
+        );
+      },
+      onError(error) {
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+      },
+    }
+  );
 
-  const isLoading = isLoadingForPermissions || isLoadingData !== 'success';
+  const isLoading = isLoadingForPermissions || isLoadingData;
 
   const handleToggle = () => {
     setIsModalOpen((prev) => !prev);
@@ -77,34 +84,38 @@ const EmailTemplatesPage = () => {
     handleToggle();
   };
 
-  const submitMutation = useMutation((body) => putEmailTemplate({ 'email-templates': body }), {
-    async onSuccess() {
-      await queryClient.invalidateQueries('email-templates');
-
-      toggleNotification({
-        type: 'success',
-        message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
-      });
-
-      trackUsageRef.current('didEditEmailTemplates');
-
-      unlockApp();
-      handleToggle();
-    },
-    onError() {
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
-      });
-      unlockApp();
-    },
-    refetchActive: true,
-  });
-  const { isLoading: isSubmittingForm } = submitMutation;
+  const submitMutation = useMutation(
+    (body) => put('/users-permissions/email-templates', { 'email-templates': body }),
+    {
+      async onSuccess() {
+        await queryClient.invalidateQueries(['users-permissions', 'email-templates']);
+
+        toggleNotification({
+          type: 'success',
+          message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
+        });
+
+        trackUsage('didEditEmailTemplates');
+
+        unlockApp();
+        handleToggle();
+      },
+      onError(error) {
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+
+        unlockApp();
+      },
+      refetchActive: true,
+    }
+  );
 
   const handleSubmit = (body) => {
     lockApp();
-    trackUsageRef.current('willEditEmailTemplates');
+
+    trackUsage('willEditEmailTemplates');
 
     const editedTemplates = { ...data, [templateToEdit]: body };
     submitMutation.mutate(editedTemplates);
@@ -133,7 +144,7 @@ const EmailTemplatesPage = () => {
   }
 
   return (
-    <Main aria-busy={isSubmittingForm}>
+    <Main aria-busy={submitMutation.isLoading}>
       <SettingsPageTitle
         name={formatMessage({
           id: getTrad('HeaderNav.link.emailTemplates'),