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

package/.eslintignore

@@ -1,2 +1 @@
-node_modules/
-.eslintrc.js
+dist

package/.eslintrc

@@ -0,0 +1,14 @@
+{
+  "root": true,
+  "overrides": [
+    {
+      "files": ["admin/**/*"],
+      "extends": ["custom/front"]
+    },
+    {
+      "files": ["**/*"],
+      "excludedFiles": ["admin/**/*"],
+      "extends": ["custom/back"]
+    }
+  ]
+}

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, 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 = () => {
@@ -41,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/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/index.js

@@ -5,9 +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 pluginId from './pluginId';
+
+import { PERMISSIONS } from './constants';
 import getTrad from './utils/getTrad';
 
 const name = pluginPkg.strapi.name;
@@ -17,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',
@@ -30,15 +31,13 @@ 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'
-            );
+            const component = await import('./pages/Roles');
 
             return component;
           },
-          permissions: pluginPermissions.accessRoles,
+          permissions: PERMISSIONS.accessRoles,
         },
         {
           intlLabel: {
@@ -46,15 +45,13 @@ 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'
-            );
+            const component = await import('./pages/Providers');
 
             return component;
           },
-          permissions: pluginPermissions.readProviders,
+          permissions: PERMISSIONS.readProviders,
         },
         {
           intlLabel: {
@@ -62,15 +59,13 @@ 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'
-            );
+            const component = await import('./pages/EmailTemplates');
 
             return component;
           },
-          permissions: pluginPermissions.readEmailTemplates,
+          permissions: PERMISSIONS.readEmailTemplates,
         },
         {
           intlLabel: {
@@ -78,21 +73,19 @@ 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'
-            );
+            const component = await import('./pages/AdvancedSettings');
 
             return component;
           },
-          permissions: pluginPermissions.readAdvancedSettings,
+          permissions: PERMISSIONS.readAdvancedSettings,
         },
       ]
     );
 
     app.registerPlugin({
-      id: pluginId,
+      id: 'users-permissions',
       name,
     });
   },
@@ -100,12 +93,10 @@ export default {
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(
       locales.map((locale) => {
-        return import(
-          /* webpackChunkName: "users-permissions-translation-[request]" */ `./translations/${locale}.json`
-        )
+        return import(`./translations/${locale}.json`)
           .then(({ default: data }) => {
             return {
-              data: prefixPluginTranslations(data, pluginId),
+              data: prefixPluginTranslations(data, 'users-permissions'),
               locale,
             };
           })

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

@@ -1,41 +1,45 @@
-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,
   GenericInput,
   LoadingIndicatorPage,
   SettingsPageTitle,
+  useAPIErrorHandler,
+  useFetchClient,
   useFocusWhenNavigate,
   useNotification,
   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 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>
 );
@@ -46,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' },
@@ -86,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,
@@ -101,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) {
@@ -143,7 +159,7 @@ const AdvancedSettingsPage = () => {
         validationSchema={schema}
         enableReinitialize
       >
-        {({ errors, values, handleChange, isSubmitting }) => {
+        {({ errors, values, handleChange, isSubmitting, dirty }) => {
           return (
             <Form>
               <HeaderLayout
@@ -155,7 +171,7 @@ const AdvancedSettingsPage = () => {
                   <Button
                     loading={isSubmitting}
                     type="submit"
-                    disabled={!canUpdate}
+                    disabled={canUpdate ? !dirty : !canUpdate}
                     startIcon={<Check />}
                     size="S"
                   >

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={

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

@@ -1,20 +1,22 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
+
 import {
+  Icon,
+  IconButton,
   Table,
-  Thead,
   Tbody,
-  Tr,
   Td,
   Th,
+  Thead,
+  Tr,
   Typography,
-  IconButton,
-  Icon,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { Pencil, Refresh, Check } from '@strapi/icons';
 import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
+import { Check, Pencil, Refresh } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
 import { getTrad } from '../../../utils';
 
 const EmailTable = ({ canUpdate, onEditClick }) => {