@strapi/plugin-users-permissions 0.0.0-next.e41415e8ff5f565ff959667d5c5ba4f20bee013c → 0.0.0-next.e9b6852d1c05518ff6e37d599321f7aa7aa0683b

package/.eslintignore

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

package/.eslintrc

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

package/LICENSE

@@ -2,7 +2,21 @@ Copyright (c) 2015-present Strapi Solutions SAS
 
 Portions of the Strapi software are licensed as follows:
 
-* All software that resides under an "ee/" directory (the “EE Software”), if that directory exists, is licensed under the license defined in "ee/LICENSE".
+* All software that resides under an "ee/" directory (the “EE Software”), if that directory exists, is licensed under the license defined below.
+
+Enterprise License
+
+If you or the company you represent has entered into a written agreement referencing the Enterprise Edition of the Strapi source code available at
+https://github.com/strapi/strapi, then such agreement applies to your use of the Enterprise Edition of the Strapi Software. If you or the company you
+represent is using the Enterprise Edition of the Strapi Software in connection with a subscription to our cloud offering, then the agreement you have
+agreed to with respect to our cloud offering and the licenses included in such agreement apply to your use of the Enterprise Edition of the Strapi Software.
+Otherwise, the Strapi Enterprise Software License Agreement (found here https://strapi.io/enterprise-terms) applies to your use of the Enterprise Edition of the Strapi Software.
+
+BY ACCESSING OR USING THE ENTERPRISE EDITION OF THE STRAPI SOFTWARE, YOU ARE AGREEING TO BE BOUND BY THE RELEVANT REFERENCED AGREEMENT.
+IF YOU ARE NOT AUTHORIZED TO ACCEPT THESE TERMS ON BEHALF OF THE COMPANY YOU REPRESENT OR IF YOU DO NOT AGREE TO ALL OF THE RELEVANT TERMS AND CONDITIONS REFERENCED AND YOU
+HAVE NOT OTHERWISE EXECUTED A WRITTEN AGREEMENT WITH STRAPI, YOU ARE NOT AUTHORIZED TO ACCESS OR USE OR ALLOW ANY USER TO ACCESS OR USE ANY PART OF
+THE ENTERPRISE EDITION OF THE STRAPI SOFTWARE.  YOUR ACCESS RIGHTS ARE CONDITIONAL ON YOUR CONSENT TO THE RELEVANT REFERENCED TERMS TO THE EXCLUSION OF ALL OTHER TERMS;
+IF THE RELEVANT REFERENCED TERMS ARE CONSIDERED AN OFFER BY YOU, ACCEPTANCE IS EXPRESSLY LIMITED TO THE RELEVANT REFERENCED TERMS.
 
 * All software outside of the above-mentioned directories or restrictions above is available under the "MIT Expat" license as set forth below.
 
@@ -18,5 +32,6 @@ furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/admin/src/components/BoundRoute/{index.js → index.jsx}

@@ -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 → index.jsx}

@@ -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,

package/admin/src/components/FormModal/{index.js → index.jsx}

@@ -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/{SubCategory.js → SubCategory.jsx}

@@ -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 → index.jsx}

@@ -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 → index.jsx}

@@ -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 → index.jsx}

@@ -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 → index.jsx}

@@ -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 → index.jsx}

@@ -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 → index.jsx}

@@ -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 → EmailForm.jsx}

@@ -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>

package/admin/src/pages/EmailTemplates/components/{EmailTable.js → EmailTable.jsx}

@@ -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 }) => {