@strapi/plugin-users-permissions 0.0.0-next.f45143c5e2a8a9d85691d0abf79a3f42024a0c71 → 0.0.0-next.f5b09a8e61e059f02784478e27c310c6290be088

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

@@ -1,25 +1,29 @@
-import React, { useMemo, useRef, useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from 'react-query';
-import { useIntl } from 'react-intl';
+import * as React from 'react';
+
+import { ContentLayout, HeaderLayout, Main, useNotifyAT } from '@strapi/design-system';
 import {
+  CheckPagePermissions,
+  LoadingIndicatorPage,
   SettingsPageTitle,
-  useTracking,
+  useAPIErrorHandler,
+  useFetchClient,
+  useFocusWhenNavigate,
   useNotification,
   useOverlayBlocker,
-  CheckPagePermissions,
   useRBAC,
-  useFocusWhenNavigate,
-  LoadingIndicatorPage,
+  useTracking,
 } from '@strapi/helper-plugin';
-import { useNotifyAT, Main, ContentLayout, HeaderLayout } from '@strapi/design-system';
-import pluginPermissions from '../../permissions';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+
+import { PERMISSIONS } from '../../constants';
 import { getTrad } from '../../utils';
-import { fetchData, putEmailTemplate } from './utils/api';
-import EmailTable from './components/EmailTable';
+
 import EmailForm from './components/EmailForm';
+import EmailTable from './components/EmailTable';
 
 const ProtectedEmailTemplatesPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.readEmailTemplates}>
+  <CheckPagePermissions permissions={PERMISSIONS.readEmailTemplates}>
     <EmailTemplatesPage />
   </CheckPagePermissions>
 );
@@ -30,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);
@@ -74,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);
@@ -130,7 +144,7 @@ const EmailTemplatesPage = () => {
   }
 
   return (
-    <Main aria-busy={isSubmittingForm}>
+    <Main aria-busy={submitMutation.isLoading}>
       <SettingsPageTitle
         name={formatMessage({
           id: getTrad('HeaderNav.link.emailTemplates'),

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

@@ -1,5 +1,5 @@
-import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
+import * as yup from 'yup';
 
 const schema = yup.object().shape({
   options: yup

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

@@ -1,128 +1,132 @@
-import React, { useMemo, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import {
-  SettingsPageTitle,
-  LoadingIndicatorPage,
-  useTracking,
-  useNotification,
-  useOverlayBlocker,
-  CheckPagePermissions,
-  useRBAC,
-  useFocusWhenNavigate,
-  onRowClick,
-  stopPropagation,
-} from '@strapi/helper-plugin';
-import has from 'lodash/has';
-import upperFirst from 'lodash/upperFirst';
+import * as React from 'react';
+
 import {
+  ContentLayout,
   HeaderLayout,
+  IconButton,
   Layout,
-  ContentLayout,
   Main,
-  useNotifyAT,
   Table,
-  Thead,
-  Tr,
-  Th,
   Tbody,
   Td,
+  Th,
+  Thead,
+  Tr,
   Typography,
-  IconButton,
   VisuallyHidden,
 } from '@strapi/design-system';
+import {
+  CheckPagePermissions,
+  LoadingIndicatorPage,
+  onRowClick,
+  SettingsPageTitle,
+  stopPropagation,
+  useAPIErrorHandler,
+  useCollator,
+  useFetchClient,
+  useFocusWhenNavigate,
+  useNotification,
+  useOverlayBlocker,
+  useRBAC,
+  useTracking,
+} from '@strapi/helper-plugin';
 import { Pencil } from '@strapi/icons';
-import { useQuery, useMutation, useQueryClient } from 'react-query';
-import forms from './utils/forms';
-import { fetchData, putProvider } from './utils/api';
-import createProvidersArray from './utils/createProvidersArray';
-import { getTrad } from '../../utils';
-import pluginPermissions from '../../permissions';
+import upperFirst from 'lodash/upperFirst';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+
 import FormModal from '../../components/FormModal';
+import { PERMISSIONS } from '../../constants';
+import { getTrad } from '../../utils';
+
+import forms from './utils/forms';
 
 export const ProvidersPage = () => {
-  const { formatMessage } = useIntl();
-  useFocusWhenNavigate();
-  const { notifyStatus } = useNotifyAT();
+  const { formatMessage, locale } = useIntl();
   const queryClient = useQueryClient();
   const { trackUsage } = useTracking();
-  const trackUsageRef = useRef(trackUsage);
-  const [isOpen, setIsOpen] = useState(false);
-  const [isSubmiting, setIsSubmiting] = useState(false);
-  const [providerToEditName, setProviderToEditName] = useState(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [providerToEditName, setProviderToEditName] = React.useState(null);
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
+  const { get, put } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
+  });
 
-  const updatePermissions = useMemo(() => {
-    return { update: pluginPermissions.updateProviders };
-  }, []);
+  useFocusWhenNavigate();
 
   const {
-    isLoading: isLoadingForPermissions,
+    isLoading: isLoadingPermissions,
     allowedActions: { canUpdate },
-  } = useRBAC(updatePermissions);
+  } = useRBAC({ update: PERMISSIONS.updateProviders });
 
-  const {
-    isLoading: isLoadingForData,
-    data: modifiedData,
-    isFetching,
-  } = useQuery('get-providers', () => fetchData(toggleNotification), {
-    onSuccess() {
-      notifyStatus(
-        formatMessage({
-          id: getTrad('Providers.data.loaded'),
-          defaultMessage: 'Providers have been loaded',
-        })
-      );
-    },
-    initialData: {},
-  });
+  const { isLoading: isLoadingData, data } = useQuery(
+    ['users-permissions', 'get-providers'],
+    async () => {
+      const { data } = await get('/users-permissions/providers');
 
-  const isLoading = isLoadingForData || isFetching;
+      return data;
+    },
+    {
+      initialData: {},
+    }
+  );
 
-  const submitMutation = useMutation(putProvider, {
+  const submitMutation = useMutation((body) => put('/users-permissions/providers', body), {
     async onSuccess() {
-      await queryClient.invalidateQueries('get-providers');
+      await queryClient.invalidateQueries(['users-permissions', 'providers']);
+
       toggleNotification({
-        type: 'info',
+        type: 'success',
         message: { id: getTrad('notification.success.submit') },
       });
 
-      trackUsageRef.current('didEditAuthenticationProvider');
-      setIsSubmiting(false);
+      trackUsage('didEditAuthenticationProvider');
+
       handleToggleModal();
       unlockApp();
     },
-    onError() {
+    onError(error) {
       toggleNotification({
         type: 'warning',
-        message: { id: 'notification.error' },
+        message: formatAPIError(error),
       });
+
       unlockApp();
-      setIsSubmiting(false);
     },
     refetchActive: false,
   });
 
-  const providers = useMemo(() => createProvidersArray(modifiedData), [modifiedData]);
+  const providers = Object.entries(data)
+    .reduce((acc, [name, provider]) => {
+      const { icon, enabled, subdomain } = provider;
 
-  const rowCount = providers.length;
+      acc.push({
+        name,
+        icon: icon === 'envelope' ? ['fas', 'envelope'] : ['fab', icon],
+        enabled,
+        subdomain,
+      });
+
+      return acc;
+    }, [])
+    .sort((a, b) => formatter.compare(a.name, b.name));
 
-  const isProviderWithSubdomain = useMemo(() => {
+  const isLoading = isLoadingData || isLoadingPermissions;
+
+  const isProviderWithSubdomain = React.useMemo(() => {
     if (!providerToEditName) {
       return false;
     }
 
     const providerToEdit = providers.find((obj) => obj.name === providerToEditName);
 
-    return has(providerToEdit, 'subdomain');
+    return !!providerToEdit?.subdomain;
   }, [providers, providerToEditName]);
 
-  const pageTitle = formatMessage({
-    id: getTrad('HeaderNav.link.providers'),
-    defaultMessage: 'Providers',
-  });
-
-  const layoutToRender = useMemo(() => {
+  const layoutToRender = React.useMemo(() => {
     if (providerToEditName === 'email') {
       return forms.email;
     }
@@ -146,20 +150,21 @@ export const ProvidersPage = () => {
   };
 
   const handleSubmit = async (values) => {
-    setIsSubmiting(true);
-
     lockApp();
 
-    trackUsageRef.current('willEditAuthenticationProvider');
+    trackUsage('willEditAuthenticationProvider');
 
-    const body = { ...modifiedData, [providerToEditName]: values };
-
-    submitMutation.mutate({ providers: body });
+    submitMutation.mutate({ providers: { ...data, [providerToEditName]: values } });
   };
 
   return (
     <Layout>
-      <SettingsPageTitle name={pageTitle} />
+      <SettingsPageTitle
+        name={formatMessage({
+          id: getTrad('HeaderNav.link.providers'),
+          defaultMessage: 'Providers',
+        })}
+      />
       <Main>
         <HeaderLayout
           title={formatMessage({
@@ -167,11 +172,11 @@ export const ProvidersPage = () => {
             defaultMessage: 'Providers',
           })}
         />
-        {isLoading || isLoadingForPermissions ? (
+        {isLoading ? (
           <LoadingIndicatorPage />
         ) : (
           <ContentLayout>
-            <Table colCount={3} rowCount={rowCount + 1}>
+            <Table colCount={3} rowCount={providers.length + 1}>
               <Thead>
                 <Tr>
                   <Th>
@@ -244,9 +249,9 @@ export const ProvidersPage = () => {
         )}
       </Main>
       <FormModal
-        initialData={modifiedData[providerToEditName]}
+        initialData={data[providerToEditName]}
         isOpen={isOpen}
-        isSubmiting={isSubmiting}
+        isSubmiting={submitMutation.isLoading}
         layout={layoutToRender}
         headerBreadcrumbs={[
           formatMessage({
@@ -264,7 +269,7 @@ export const ProvidersPage = () => {
 };
 
 const ProtectedProvidersPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.readProviders}>
+  <CheckPagePermissions permissions={PERMISSIONS.readProviders}>
     <ProvidersPage />
   </CheckPagePermissions>
 );

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

@@ -1,5 +1,5 @@
-import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
+import * as yup from 'yup';
 
 import { getTrad } from '../../../utils';
 

package/admin/src/pages/Roles/{CreatePage/utils/schema.js → constants.js}

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

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

@@ -0,0 +1,78 @@
+import { useEffect } from 'react';
+
+import { useNotification, useFetchClient, useAPIErrorHandler } from '@strapi/helper-plugin';
+import { useQueries } from 'react-query';
+
+import { cleanPermissions, getTrad } from '../../../utils';
+
+export const usePlugins = () => {
+  const toggleNotification = useNotification();
+  const { get } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
+
+  const [
+    {
+      data: permissions,
+      isLoading: isLoadingPermissions,
+      error: permissionsError,
+      refetch: refetchPermissions,
+    },
+    { data: routes, isLoading: isLoadingRoutes, error: routesError, refetch: refetchRoutes },
+  ] = useQueries([
+    {
+      queryKey: ['users-permissions', 'permissions'],
+      async queryFn() {
+        const {
+          data: { permissions },
+        } = await get(`/users-permissions/permissions`);
+
+        return permissions;
+      },
+    },
+    {
+      queryKey: ['users-permissions', 'routes'],
+      async queryFn() {
+        const {
+          data: { routes },
+        } = await get(`/users-permissions/routes`);
+
+        return routes;
+      },
+    },
+  ]);
+
+  const refetchQueries = async () => {
+    await Promise.all([refetchPermissions(), refetchRoutes()]);
+  };
+
+  useEffect(() => {
+    if (permissionsError) {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(permissionsError),
+      });
+    }
+  }, [toggleNotification, permissionsError, formatAPIError]);
+
+  useEffect(() => {
+    if (routesError) {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(routesError),
+      });
+    }
+  }, [toggleNotification, routesError, formatAPIError]);
+
+  const isLoading = isLoadingPermissions || isLoadingRoutes;
+
+  return {
+    // TODO: these return values need to be memoized, otherwise
+    // they will create infinite rendering loops when used as
+    // effect dependencies
+    permissions: permissions ? cleanPermissions(permissions) : {},
+    routes: routes ?? {},
+
+    getData: refetchQueries,
+    isLoading,
+  };
+};

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

@@ -1,23 +1,29 @@
 import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import { CheckPagePermissions, AnErrorOccurred } from '@strapi/helper-plugin';
-import pluginId from '../../pluginId';
-import pluginPermissions from '../../permissions';
-import ProtectedRolesListPage from './ProtectedListPage';
-import ProtectedRolesEditPage from './ProtectedEditPage';
-import ProtectedRolesCreatePage from './ProtectedCreatePage';
+
+import { AnErrorOccurred, CheckPagePermissions } from '@strapi/helper-plugin';
+import { Route, Switch } from 'react-router-dom';
+
+import { PERMISSIONS } from '../../constants';
+
+import { ProtectedRolesCreatePage } from './pages/CreatePage';
+import { ProtectedRolesEditPage } from './pages/EditPage';
+import { ProtectedRolesListPage } from './pages/ListPage';
 
 const Roles = () => {
   return (
-    <CheckPagePermissions permissions={pluginPermissions.accessRoles}>
+    <CheckPagePermissions permissions={PERMISSIONS.accessRoles}>
       <Switch>
         <Route
-          path={`/settings/${pluginId}/roles/new`}
+          path="/settings/users-permissions/roles/new"
           component={ProtectedRolesCreatePage}
           exact
         />
-        <Route path={`/settings/${pluginId}/roles/:id`} component={ProtectedRolesEditPage} exact />
-        <Route path={`/settings/${pluginId}/roles`} component={ProtectedRolesListPage} 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>