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

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

@@ -1,10 +1,12 @@
 import React from 'react';
-import styled from 'styled-components';
-import { Flex, Box, Typography } from '@strapi/design-system';
+
+import { Box, Flex, Typography } from '@strapi/design-system';
 import map from 'lodash/map';
 import tail from 'lodash/tail';
-import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+
 import getMethodColor from './getMethodColor';
 
 const MethodBox = styled(Box)`

package/admin/src/components/FormModal/Input/index.js

@@ -5,9 +5,10 @@
  */
 
 import React from 'react';
-import { useIntl } from 'react-intl';
-import { ToggleInput, TextInput } from '@strapi/design-system';
+
+import { TextInput, ToggleInput } from '@strapi/design-system';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 
 const Input = ({
   description,
@@ -23,7 +24,9 @@ const Input = ({
 }) => {
   const { formatMessage } = useIntl();
   const inputValue =
-    name === 'noName' ? `${strapi.backendURL}/api/connect/${providerToEditName}/callback` : value;
+    name === 'noName'
+      ? `${window.strapi.backendURL}/api/connect/${providerToEditName}/callback`
+      : value;
 
   const label = formatMessage(
     { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },

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

@@ -5,22 +5,23 @@
  */
 
 import React from 'react';
-import { useIntl } from 'react-intl';
+
 import {
   Button,
   Flex,
-  Breadcrumbs,
-  Crumb,
   Grid,
   GridItem,
-  ModalLayout,
-  ModalHeader,
-  ModalFooter,
   ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalLayout,
 } from '@strapi/design-system';
-import PropTypes from 'prop-types';
-import { Formik } from 'formik';
+import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
 import { Form } from '@strapi/helper-plugin';
+import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
 import Input from './Input';
 
 const FormModal = ({
@@ -43,8 +44,10 @@ const FormModal = ({
     <ModalLayout onClose={onToggle} labelledBy="title">
       <ModalHeader>
         <Breadcrumbs label={headerBreadcrumbs.join(', ')}>
-          {headerBreadcrumbs.map((crumb) => (
-            <Crumb key={crumb}>{crumb}</Crumb>
+          {headerBreadcrumbs.map((crumb, index, arr) => (
+            <Crumb isCurrent={index === arr.length - 1} key={crumb}>
+              {crumb}
+            </Crumb>
           ))}
         </Breadcrumbs>
       </ModalHeader>

package/admin/src/components/Permissions/PermissionRow/CheckboxWrapper.js

@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components';
 import { Box } from '@strapi/design-system';
+import styled, { css } from 'styled-components';
 
 const activeCheckboxWrapperStyles = css`
   background: ${(props) => props.theme.colors.primary100};

package/admin/src/components/Permissions/PermissionRow/SubCategory.js

@@ -1,13 +1,24 @@
 import React, { useCallback, useMemo } from 'react';
+
+import {
+  Box,
+  Checkbox,
+  Flex,
+  Typography,
+  Grid,
+  GridItem,
+  VisuallyHidden,
+} from '@strapi/design-system';
+import { Cog as CogIcon } from '@strapi/icons';
 import get from 'lodash/get';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Box, Checkbox, Flex, Typography, Grid, GridItem } from '@strapi/design-system';
-import { Cog as CogIcon } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import CheckboxWrapper from './CheckboxWrapper';
+import styled from 'styled-components';
+
 import { useUsersPermissions } from '../../../contexts/UsersPermissionsContext';
 
+import CheckboxWrapper from './CheckboxWrapper';
+
 const Border = styled.div`
   flex: 1;
   align-self: center;
@@ -87,10 +98,20 @@ const SubCategory = ({ subCategory }) => {
                   </Checkbox>
                   <button
                     type="button"
-                    data-testid="action-cog"
                     onClick={() => onSelectedAction(action.name)}
                     style={{ display: 'inline-flex', alignItems: 'center' }}
                   >
+                    <VisuallyHidden as="span">
+                      {formatMessage(
+                        {
+                          id: 'app.utils.show-bound-route',
+                          defaultMessage: 'Show bound route for {route}',
+                        },
+                        {
+                          route: action.name,
+                        }
+                      )}
+                    </VisuallyHidden>
                     <CogIcon />
                   </button>
                 </CheckboxWrapper>

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

@@ -1,7 +1,9 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import sortBy from 'lodash/sortBy';
+
 import { Box } from '@strapi/design-system';
+import sortBy from 'lodash/sortBy';
+import PropTypes from 'prop-types';
+
 import SubCategory from './SubCategory';
 
 const PermissionRow = ({ name, permissions }) => {

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

@@ -1,10 +1,13 @@
 import React, { useReducer } from 'react';
-import { Accordion, AccordionToggle, AccordionContent, Box, Flex } from '@strapi/design-system';
+
+import { Accordion, AccordionContent, AccordionToggle, Box, Flex } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
+
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
 import formatPluginName from '../../utils/formatPluginName';
-import PermissionRow from './PermissionRow';
+
 import init from './init';
+import PermissionRow from './PermissionRow';
 import { initialState, reducer } from './reducer';
 
 const Permissions = () => {

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
-import { Typography, Flex, GridItem } from '@strapi/design-system';
+
+import { Flex, GridItem, Typography } from '@strapi/design-system';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import without from 'lodash/without';
+import { useIntl } from 'react-intl';
 
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
 import BoundRoute from '../BoundRoute';

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

@@ -1,13 +1,16 @@
-import React, { memo, useReducer, forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, memo, useImperativeHandle, useReducer } from 'react';
+
+import { Flex, Grid, GridItem, Typography } from '@strapi/design-system';
 import PropTypes from 'prop-types';
-import { Typography, Flex, Grid, GridItem } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
+
+import { UsersPermissionsProvider } from '../../contexts/UsersPermissionsContext';
 import getTrad from '../../utils/getTrad';
-import Policies from '../Policies';
 import Permissions from '../Permissions';
-import reducer, { initialState } from './reducer';
-import { UsersPermissionsProvider } from '../../contexts/UsersPermissionsContext';
+import Policies from '../Policies';
+
 import init from './init';
+import reducer, { initialState } from './reducer';
 
 const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
   const { formatMessage } = useIntl();

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/contexts/UsersPermissionsContext/index.js

@@ -1,4 +1,5 @@
 import React, { createContext, useContext } from 'react';
+
 import PropTypes from 'prop-types';
 
 const UsersPermissions = createContext({});

package/admin/src/hooks/index.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/prefer-default-export
 export { default as useForm } from './useForm';
 export { default as useRolesList } from './useRolesList';
-export { default as usePlugins } from './usePlugins';
+export * from './usePlugins';
 export { default as useFetchRole } from './useFetchRole';

package/admin/src/hooks/useFetchRole/index.js

@@ -1,8 +1,11 @@
-import { useCallback, useReducer, useEffect, useRef } from 'react';
-import { useNotification, useFetchClient } from '@strapi/helper-plugin';
-import reducer, { initialState } from './reducer';
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+
+import { useFetchClient, useNotification } from '@strapi/helper-plugin';
+
 import pluginId from '../../pluginId';
 
+import reducer, { initialState } from './reducer';
+
 const useFetchRole = (id) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const toggleNotification = useNotification();

package/admin/src/hooks/useForm/index.js

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useReducer, useRef } from 'react';
-import { useRBAC, request, useNotification } from '@strapi/helper-plugin';
-import { getRequestURL } from '../../utils';
+
+import { useFetchClient, useNotification, useRBAC } from '@strapi/helper-plugin';
+
 import reducer, { initialState } from './reducer';
 
 const useUserForm = (endPoint, permissions) => {
@@ -9,8 +10,7 @@ const useUserForm = (endPoint, permissions) => {
   const toggleNotification = useNotification();
   const isMounted = useRef(true);
 
-  const abortController = new AbortController();
-  const { signal } = abortController;
+  const { get } = useFetchClient();
 
   useEffect(() => {
     const getData = async () => {
@@ -19,7 +19,7 @@ const useUserForm = (endPoint, permissions) => {
           type: 'GET_DATA',
         });
 
-        const data = await request(getRequestURL(endPoint), { method: 'GET', signal });
+        const { data } = await get(`/users-permissions/${endPoint}`);
 
         dispatch({
           type: 'GET_DATA_SUCCEEDED',
@@ -45,11 +45,9 @@ const useUserForm = (endPoint, permissions) => {
     }
 
     return () => {
-      abortController.abort();
       isMounted.current = false;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoadingForPermissions, endPoint]);
+  }, [isLoadingForPermissions, endPoint, get, toggleNotification]);
 
   const dispatchSubmitSucceeded = useCallback((data) => {
     dispatch({

package/admin/src/hooks/usePlugins.js

@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+
+import { useNotification, useFetchClient, useAPIErrorHandler } from '@strapi/helper-plugin';
+import { useQueries } from 'react-query';
+
+import pluginId from '../pluginId';
+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: [pluginId, 'permissions'],
+      async queryFn() {
+        const res = await get(`/${pluginId}/permissions`);
+
+        return res.data.permissions;
+      },
+    },
+    {
+      queryKey: [pluginId, 'routes'],
+      async queryFn() {
+        const res = await get(`/${pluginId}/routes`);
+
+        return res.data.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 {
+    permissions: permissions ? cleanPermissions(permissions) : {},
+    routes: routes ?? {},
+    getData: refetchQueries,
+    isLoading,
+  };
+};

package/admin/src/hooks/useRolesList/index.js

@@ -1,8 +1,11 @@
-import { useEffect, useReducer, useRef } from 'react';
-import { request, useNotification } from '@strapi/helper-plugin';
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+
+import { useFetchClient, useNotification } from '@strapi/helper-plugin';
 import get from 'lodash/get';
-import init from './init';
+
 import pluginId from '../../pluginId';
+
+import init from './init';
 import reducer, { initialState } from './reducer';
 
 const useRolesList = (shouldFetchData = true) => {
@@ -12,28 +15,17 @@ const useRolesList = (shouldFetchData = true) => {
   const toggleNotification = useNotification();
 
   const isMounted = useRef(true);
-  const abortController = new AbortController();
-  const { signal } = abortController;
-
-  useEffect(() => {
-    if (shouldFetchData) {
-      fetchRolesList();
-    }
+  const fetchClient = useFetchClient();
 
-    return () => {
-      abortController.abort();
-      isMounted.current = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [shouldFetchData]);
-
-  const fetchRolesList = async () => {
+  const fetchRolesList = useCallback(async () => {
     try {
       dispatch({
         type: 'GET_DATA',
       });
 
-      const { roles } = await request(`/${pluginId}/roles`, { method: 'GET', signal });
+      const {
+        data: { roles },
+      } = await fetchClient.get(`/${pluginId}/roles`);
 
       dispatch({
         type: 'GET_DATA_SUCCEEDED',
@@ -55,7 +47,17 @@ const useRolesList = (shouldFetchData = true) => {
         }
       }
     }
-  };
+  }, [fetchClient, toggleNotification]);
+
+  useEffect(() => {
+    if (shouldFetchData) {
+      fetchRolesList();
+    }
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, [shouldFetchData, fetchRolesList]);
 
   return { roles, isLoading, getData: fetchRolesList };
 };

package/admin/src/index.js

@@ -5,8 +5,10 @@
 // Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
 import { prefixPluginTranslations } from '@strapi/helper-plugin';
+
 import pluginPkg from '../../package.json';
-import pluginPermissions from './permissions';
+
+import { PERMISSIONS } from './constants';
 import pluginId from './pluginId';
 import getTrad from './utils/getTrad';
 
@@ -38,7 +40,7 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.accessRoles,
+          permissions: PERMISSIONS.accessRoles,
         },
         {
           intlLabel: {
@@ -54,7 +56,7 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.readProviders,
+          permissions: PERMISSIONS.readProviders,
         },
         {
           intlLabel: {
@@ -70,7 +72,7 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.readEmailTemplates,
+          permissions: PERMISSIONS.readEmailTemplates,
         },
         {
           intlLabel: {
@@ -86,7 +88,7 @@ export default {
 
             return component;
           },
-          permissions: pluginPermissions.readAdvancedSettings,
+          permissions: PERMISSIONS.readAdvancedSettings,
         },
       ]
     );

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

@@ -1,7 +1,19 @@
-import React, { useMemo } from 'react';
-import { useQuery, useMutation, useQueryClient } from 'react-query';
-import { useIntl } from 'react-intl';
-import { Formik } from 'formik';
+import React from 'react';
+
+import {
+  Box,
+  Button,
+  ContentLayout,
+  Flex,
+  Grid,
+  GridItem,
+  HeaderLayout,
+  Main,
+  Option,
+  Select,
+  Typography,
+  useNotifyAT,
+} from '@strapi/design-system';
 import {
   CheckPagePermissions,
   Form,
@@ -13,29 +25,20 @@ import {
   useOverlayBlocker,
   useRBAC,
 } from '@strapi/helper-plugin';
-import {
-  useNotifyAT,
-  Main,
-  HeaderLayout,
-  ContentLayout,
-  Button,
-  Box,
-  Flex,
-  Select,
-  Option,
-  Typography,
-  Grid,
-  GridItem,
-} from '@strapi/design-system';
 import { Check } from '@strapi/icons';
-import pluginPermissions from '../../permissions';
+import { Formik } from 'formik';
+import { useIntl } from 'react-intl';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+
+import { PERMISSIONS } from '../../constants';
 import { getTrad } from '../../utils';
+
+import { fetchData, putAdvancedSettings } from './utils/api';
 import layout from './utils/layout';
 import schema from './utils/schema';
-import { fetchData, putAdvancedSettings } from './utils/api';
 
 const ProtectedAdvancedSettingsPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.readAdvancedSettings}>
+  <CheckPagePermissions permissions={PERMISSIONS.readAdvancedSettings}>
     <AdvancedSettingsPage />
   </CheckPagePermissions>
 );
@@ -48,14 +51,10 @@ const AdvancedSettingsPage = () => {
   const queryClient = useQueryClient();
   useFocusWhenNavigate();
 
-  const updatePermissions = useMemo(
-    () => ({ update: pluginPermissions.updateAdvancedSettings }),
-    []
-  );
   const {
     isLoading: isLoadingForPermissions,
     allowedActions: { canUpdate },
-  } = useRBAC(updatePermissions);
+  } = useRBAC({ update: PERMISSIONS.updateAdvancedSettings });
 
   const { status: isLoadingData, data } = useQuery('advanced', () => fetchData(), {
     onSuccess() {
@@ -143,7 +142,7 @@ const AdvancedSettingsPage = () => {
         validationSchema={schema}
         enableReinitialize
       >
-        {({ errors, values, handleChange, isSubmitting }) => {
+        {({ errors, values, handleChange, isSubmitting, dirty }) => {
           return (
             <Form>
               <HeaderLayout
@@ -155,7 +154,7 @@ const AdvancedSettingsPage = () => {
                   <Button
                     loading={isSubmitting}
                     type="submit"
-                    disabled={!canUpdate}
+                    disabled={canUpdate ? !dirty : !canUpdate}
                     startIcon={<Check />}
                     size="S"
                   >

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

@@ -1,9 +1,8 @@
 import { getFetchClient } from '@strapi/helper-plugin';
-import { getRequestURL } from '../../../utils';
 
 const fetchData = async () => {
   const { get } = getFetchClient();
-  const { data } = await get(getRequestURL('advanced'));
+  const { data } = await get('/users-permissions/advanced');
 
   return data;
 };
@@ -11,7 +10,7 @@ const fetchData = async () => {
 const putAdvancedSettings = (body) => {
   const { put } = getFetchClient();
 
-  return put(getRequestURL('advanced'), body);
+  return put('/users-permissions/advanced', body);
 };
 
 export { fetchData, putAdvancedSettings };

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

@@ -1,5 +1,5 @@
-import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
+import * as yup from 'yup';
 
 // eslint-disable-next-line prefer-regex-literals
 const URL_REGEX = new RegExp('(^$)|((.+:\\/\\/.*)(d*)\\/?(.*))');

package/admin/src/pages/EmailTemplates/components/EmailForm.js

@@ -1,20 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Form, GenericInput } from '@strapi/helper-plugin';
-import { Formik } from 'formik';
+
 import {
-  ModalLayout,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
+  Button,
   Grid,
   GridItem,
-  Button,
-  Breadcrumbs,
-  Crumb,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalLayout,
   Textarea,
 } from '@strapi/design-system';
+import { Breadcrumbs, Crumb } from '@strapi/design-system/v2';
+import { Form, GenericInput } from '@strapi/helper-plugin';
+import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
 import { getTrad } from '../../../utils';
 import schema from '../utils/schema';
 
@@ -45,7 +46,7 @@ const EmailForm = ({ template, onToggle, onSubmit }) => {
               defaultMessage: 'Edit email template',
             })}
           </Crumb>
-          <Crumb>
+          <Crumb isCurrent>
             {formatMessage({ id: getTrad(template.display), defaultMessage: template.display })}
           </Crumb>
         </Breadcrumbs>
@@ -120,7 +121,7 @@ const EmailForm = ({ template, onToggle, onSubmit }) => {
                         id: getTrad('PopUpForm.Email.options.message.label'),
                         defaultMessage: 'Message',
                       })}
-                      name="options.message"
+                      id="options.message"
                       onChange={handleChange}
                       value={values.options.message}
                       error={