@strapi/plugin-users-permissions 4.12.6 → 4.12.7

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

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

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

@@ -0,0 +1,16 @@
+import { getFetchClient } from '@strapi/helper-plugin';
+
+const fetchData = async () => {
+  const { get } = getFetchClient();
+  const { data } = await get('/users-permissions/email-templates');
+
+  return data;
+};
+
+const putEmailTemplate = (body) => {
+  const { put } = getFetchClient();
+
+  return put('/users-permissions/email-templates', body);
+};
+
+export { fetchData, putEmailTemplate };

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

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

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

@@ -0,0 +1,54 @@
+import produce from 'immer';
+import set from 'lodash/set';
+
+const initialState = {
+  formErrors: {},
+  isLoading: true,
+  initialData: {},
+  modifiedData: {},
+};
+
+const reducer = (state, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'GET_DATA': {
+        draftState.isLoading = true;
+        draftState.initialData = {};
+        draftState.modifiedData = {};
+
+        break;
+      }
+
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.isLoading = false;
+        draftState.initialData = action.data;
+        draftState.modifiedData = action.data;
+
+        break;
+      }
+      case 'GET_DATA_ERROR': {
+        draftState.isLoading = true;
+        break;
+      }
+      case 'ON_CHANGE': {
+        set(draftState, ['modifiedData', ...action.keys.split('.')], action.value);
+        break;
+      }
+      case 'RESET_FORM': {
+        draftState.modifiedData = state.initialData;
+        draftState.formErrors = {};
+        break;
+      }
+      case 'SET_ERRORS': {
+        draftState.formErrors = action.errors;
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default reducer;
+export { initialState };

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

@@ -0,0 +1,24 @@
+import { getFetchClient } from '@strapi/helper-plugin';
+
+// eslint-disable-next-line import/prefer-default-export
+export const fetchData = async (toggleNotification) => {
+  try {
+    const { get } = getFetchClient();
+    const { data } = await get('/users-permissions/providers');
+
+    return data;
+  } catch (err) {
+    toggleNotification({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    throw new Error('error');
+  }
+};
+
+export const putProvider = (body) => {
+  const { put } = getFetchClient();
+
+  return put('/users-permissions/providers', body);
+};

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

@@ -0,0 +1,21 @@
+import sortBy from 'lodash/sortBy';
+
+const createProvidersArray = (data) => {
+  return sortBy(
+    Object.keys(data).reduce((acc, current) => {
+      const { icon: iconName, enabled, subdomain } = data[current];
+      const icon = iconName === 'envelope' ? ['fas', 'envelope'] : ['fab', iconName];
+
+      if (subdomain !== undefined) {
+        acc.push({ name: current, icon, enabled, subdomain });
+      } else {
+        acc.push({ name: current, icon, enabled });
+      }
+
+      return acc;
+    }, []),
+    'name'
+  );
+};
+
+export default createProvidersArray;

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

@@ -0,0 +1,185 @@
+import React, { useRef, useState } from 'react';
+
+import {
+  Box,
+  Button,
+  ContentLayout,
+  Flex,
+  Grid,
+  GridItem,
+  HeaderLayout,
+  Main,
+  Textarea,
+  TextInput,
+  Typography,
+} from '@strapi/design-system';
+import {
+  Form,
+  SettingsPageTitle,
+  useFetchClient,
+  useNotification,
+  useOverlayBlocker,
+  useTracking,
+} from '@strapi/helper-plugin';
+import { Check } from '@strapi/icons';
+import { Formik } from 'formik';
+import { useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+
+import UsersPermissions from '../../components/UsersPermissions';
+import { usePlugins } from '../../hooks';
+import pluginId from '../../pluginId';
+import getTrad from '../../utils/getTrad';
+
+import { createRoleSchema } from './constants';
+
+const CreatePage = () => {
+  const { formatMessage } = useIntl();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const toggleNotification = useNotification();
+  const { goBack } = useHistory();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { isLoading: isLoadingPlugins, permissions, routes } = usePlugins();
+  const { trackUsage } = useTracking();
+  const permissionsRef = useRef();
+  const { post } = useFetchClient();
+
+  const handleCreateRoleSubmit = async (data) => {
+    // Set loading state
+    lockApp();
+    setIsSubmitting(true);
+    try {
+      const permissions = permissionsRef.current.getPermissions();
+      // Update role in Strapi
+      await post(`/${pluginId}/roles`, { ...data, ...permissions, users: [] });
+      // Notify success
+      trackUsage('didCreateRole');
+      toggleNotification({
+        type: 'success',
+        message: {
+          id: getTrad('Settings.roles.created'),
+          defaultMessage: 'Role created',
+        },
+      });
+      // Forcing redirecting since we don't have the id in the response
+      goBack();
+    } catch (err) {
+      console.error(err);
+      toggleNotification({
+        type: 'warning',
+        message: {
+          id: 'notification.error',
+          defaultMessage: 'An error occurred',
+        },
+      });
+    }
+    // Unset loading state
+    setIsSubmitting(false);
+    unlockApp();
+  };
+
+  return (
+    <Main>
+      <SettingsPageTitle name="Roles" />
+      <Formik
+        enableReinitialize
+        initialValues={{ name: '', description: '' }}
+        onSubmit={handleCreateRoleSubmit}
+        validationSchema={createRoleSchema}
+      >
+        {({ handleSubmit, values, handleChange, errors }) => (
+          <Form noValidate onSubmit={handleSubmit}>
+            <HeaderLayout
+              primaryAction={
+                !isLoadingPlugins && (
+                  <Button type="submit" loading={isSubmitting} startIcon={<Check />}>
+                    {formatMessage({
+                      id: 'global.save',
+                      defaultMessage: 'Save',
+                    })}
+                  </Button>
+                )
+              }
+              title={formatMessage({
+                id: 'Settings.roles.create.title',
+                defaultMessage: 'Create a role',
+              })}
+              subtitle={formatMessage({
+                id: 'Settings.roles.create.description',
+                defaultMessage: 'Define the rights given to the role',
+              })}
+            />
+            <ContentLayout>
+              <Flex direction="column" alignItems="stretch" gap={7}>
+                <Box
+                  background="neutral0"
+                  hasRadius
+                  shadow="filterShadow"
+                  paddingTop={6}
+                  paddingBottom={6}
+                  paddingLeft={7}
+                  paddingRight={7}
+                >
+                  <Flex direction="column" alignItems="stretch" gap={4}>
+                    <Typography variant="delta" as="h2">
+                      {formatMessage({
+                        id: getTrad('EditPage.form.roles'),
+                        defaultMessage: 'Role details',
+                      })}
+                    </Typography>
+                    <Grid gap={4}>
+                      <GridItem col={6}>
+                        <TextInput
+                          name="name"
+                          value={values.name || ''}
+                          onChange={handleChange}
+                          label={formatMessage({
+                            id: 'global.name',
+                            defaultMessage: 'Name',
+                          })}
+                          error={
+                            errors.name
+                              ? formatMessage({ id: errors.name, defaultMessage: 'Invalid value' })
+                              : null
+                          }
+                        />
+                      </GridItem>
+                      <GridItem col={6}>
+                        <Textarea
+                          id="description"
+                          value={values.description || ''}
+                          onChange={handleChange}
+                          label={formatMessage({
+                            id: 'global.description',
+                            defaultMessage: 'Description',
+                          })}
+                          error={
+                            errors.description
+                              ? formatMessage({
+                                  id: errors.description,
+                                  defaultMessage: 'Invalid value',
+                                })
+                              : null
+                          }
+                        />
+                      </GridItem>
+                    </Grid>
+                  </Flex>
+                </Box>
+                {!isLoadingPlugins && (
+                  <UsersPermissions
+                    ref={permissionsRef}
+                    permissions={permissions}
+                    routes={routes}
+                  />
+                )}
+              </Flex>
+            </ContentLayout>
+          </Form>
+        )}
+      </Formik>
+    </Main>
+  );
+};
+
+export default CreatePage;