From bc6034cf841f8cfb048751ea26efcff64903bd48 Mon Sep 17 00:00:00 2001
From: Josh <37798644+joshuaellis@users.noreply.github.com>
Date: Mon, 19 Jun 2023 10:22:38 +0100
Subject: [PATCH] chore: remove history & clean up some U&P tests (#16992)

---
 .../Permissions/PermissionRow/SubCategory.js  |   22 +-
 .../admin/src/hooks/index.js                  |    4 +-
 .../admin/src/hooks/usePlugins.js             |   71 +
 .../admin/src/hooks/usePlugins/index.js       |   70 -
 .../admin/src/hooks/usePlugins/init.js        |    5 -
 .../admin/src/hooks/usePlugins/reducer.js     |   34 -
 .../src/hooks/usePlugins/tests/init.test.js   |   32 -
 .../hooks/usePlugins/tests/reducer.test.js    |   96 --
 .../AdvancedSettings/tests/index.test.js      |    9 -
 .../AdvancedSettings/tests/utils/server.js    |   26 -
 .../pages/EmailTemplates/tests/index.test.js  |    9 -
 .../EmailTemplates/tests/utils/server.js      |   41 -
 .../src/pages/Providers/tests/index.test.js   |    8 -
 .../admin/src/pages/Providers/tests/server.js |   26 -
 .../{CreatePage/index.js => CreatePage.js}    |   16 +-
 .../Roles/CreatePage/tests/index.test.js      | 1059 --------------
 .../pages/Roles/CreatePage/tests/server.js    |   65 -
 .../Roles/{EditPage/index.js => EditPage.js}  |   34 +-
 .../pages/Roles/EditPage/tests/index.test.js  | 1221 -----------------
 .../src/pages/Roles/EditPage/tests/server.js  |   95 --
 .../src/pages/Roles/EditPage/utils/schema.js  |    9 -
 .../pages/Roles/ListPage/tests/index.test.js  |  763 +---------
 .../src/pages/Roles/ListPage/tests/server.js  |   33 -
 .../src/pages/Roles/ListPage/utils/api.js     |    2 +-
 .../index.js => ProtectedCreatePage.js}       |    5 +-
 .../index.js => ProtectedEditPage.js}         |    5 +-
 .../index.js => ProtectedListPage.js}         |    5 +-
 .../utils/schema.js => constants.js}          |    4 +-
 .../src/pages/Roles/tests/CreatePage.test.js  |  108 ++
 .../src/pages/Roles/tests/EditPage.test.js    |  155 +++
 .../users-permissions/jest.config.front.js    |    1 +
 .../plugins/users-permissions/package.json    |    1 -
 .../plugins/users-permissions/tests/server.js |  191 +++
 .../plugins/users-permissions/tests/setup.js  |   15 +
 yarn.lock                                     |    1 -
 35 files changed, 671 insertions(+), 3570 deletions(-)
 create mode 100644 packages/plugins/users-permissions/admin/src/hooks/usePlugins.js
 delete mode 100644 packages/plugins/users-permissions/admin/src/hooks/usePlugins/index.js
 delete mode 100644 packages/plugins/users-permissions/admin/src/hooks/usePlugins/init.js
 delete mode 100644 packages/plugins/users-permissions/admin/src/hooks/usePlugins/reducer.js
 delete mode 100644 packages/plugins/users-permissions/admin/src/hooks/usePlugins/tests/init.test.js
 delete mode 100644 packages/plugins/users-permissions/admin/src/hooks/usePlugins/tests/reducer.test.js
 delete mode 100644 packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/utils/server.js
 delete mode 100644 packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/utils/server.js
 delete mode 100644 packages/plugins/users-permissions/admin/src/pages/Providers/tests/server.js
 rename packages/plugins/users-permissions/admin/src/pages/Roles/{CreatePage/index.js => CreatePage.js} (94%)
 delete mode 100644 packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
 delete mode 100644 packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/server.js
 rename packages/plugins/users-permissions/admin/src/pages/Roles/{EditPage/index.js => EditPage.js} (95%)
 delete mode 100644 packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
 delete mode 100644 packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/server.js
 delete mode 100644 packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/utils/schema.js
 delete mode 100644 packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/server.js
 rename packages/plugins/users-permissions/admin/src/pages/Roles/{ProtectedCreatePage/index.js => ProtectedCreatePage.js} (74%)
 rename packages/plugins/users-permissions/admin/src/pages/Roles/{ProtectedEditPage/index.js => ProtectedEditPage.js} (75%)
 rename packages/plugins/users-permissions/admin/src/pages/Roles/{ProtectedListPage/index.js => ProtectedListPage.js} (76%)
 rename packages/plugins/users-permissions/admin/src/pages/Roles/{CreatePage/utils/schema.js => constants.js} (78%)
 create mode 100644 packages/plugins/users-permissions/admin/src/pages/Roles/tests/CreatePage.test.js
 create mode 100644 packages/plugins/users-permissions/admin/src/pages/Roles/tests/EditPage.test.js
 create mode 100644 packages/plugins/users-permissions/tests/server.js
 create mode 100644 packages/plugins/users-permissions/tests/setup.js

diff --git a/packages/plugins/users-permissions/admin/src/components/Permissions/PermissionRow/SubCategory.js b/packages/plugins/users-permissions/admin/src/components/Permissions/PermissionRow/SubCategory.js
index 924883932d..a9a91bdffc 100644
--- a/packages/plugins/users-permissions/admin/src/components/Permissions/PermissionRow/SubCategory.js
+++ b/packages/plugins/users-permissions/admin/src/components/Permissions/PermissionRow/SubCategory.js
@@ -1,6 +1,14 @@
 import React, { useCallback, useMemo } from 'react';
 
-import { Box, Checkbox, Flex, Grid, GridItem, Typography } from '@strapi/design-system';
+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 PropTypes from 'prop-types';
@@ -90,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>
diff --git a/packages/plugins/users-permissions/admin/src/hooks/index.js b/packages/plugins/users-permissions/admin/src/hooks/index.js
index 3b6a597d15..9988733f3f 100644
--- a/packages/plugins/users-permissions/admin/src/hooks/index.js
+++ b/packages/plugins/users-permissions/admin/src/hooks/index.js
@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/prefer-default-export
-export { default as useFetchRole } from './useFetchRole';
 export { default as useForm } from './useForm';
-export { default as usePlugins } from './usePlugins';
 export { default as useRolesList } from './useRolesList';
+export * from './usePlugins';
+export { default as useFetchRole } from './useFetchRole';
diff --git a/packages/plugins/users-permissions/admin/src/hooks/usePlugins.js b/packages/plugins/users-permissions/admin/src/hooks/usePlugins.js
new file mode 100644
index 0000000000..ce1f0e8d23
--- /dev/null
+++ b/packages/plugins/users-permissions/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,
+  };
+};
diff --git a/packages/plugins/users-permissions/admin/src/hooks/usePlugins/index.js b/packages/plugins/users-permissions/admin/src/hooks/usePlugins/index.js
deleted file mode 100644
index d1abd28af5..0000000000
--- a/packages/plugins/users-permissions/admin/src/hooks/usePlugins/index.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useCallback, useEffect, useReducer } from 'react';
-
-import { useFetchClient, useNotification } from '@strapi/helper-plugin';
-import get from 'lodash/get';
-
-import pluginId from '../../pluginId';
-import { cleanPermissions } from '../../utils';
-
-import init from './init';
-import reducer, { initialState } from './reducer';
-
-const usePlugins = (shouldFetchData = true) => {
-  const toggleNotification = useNotification();
-  const [{ permissions, routes, isLoading }, dispatch] = useReducer(reducer, initialState, () =>
-    init(initialState, shouldFetchData)
-  );
-  const fetchClient = useFetchClient();
-
-  const fetchPlugins = useCallback(async () => {
-    try {
-      dispatch({
-        type: 'GET_DATA',
-      });
-
-      const [{ permissions }, { routes }] = await Promise.all(
-        [`/${pluginId}/permissions`, `/${pluginId}/routes`].map(async (endpoint) => {
-          const res = await fetchClient.get(endpoint);
-
-          return res.data;
-        })
-      );
-
-      dispatch({
-        type: 'GET_DATA_SUCCEEDED',
-        permissions: cleanPermissions(permissions),
-        routes,
-      });
-    } catch (err) {
-      const message = get(err, ['response', 'payload', 'message'], 'An error occured');
-
-      dispatch({
-        type: 'GET_DATA_ERROR',
-      });
-
-      if (message !== 'Forbidden') {
-        toggleNotification({
-          type: 'warning',
-          message,
-        });
-      }
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [toggleNotification]);
-
-  useEffect(() => {
-    if (shouldFetchData) {
-      fetchPlugins();
-    }
-  }, [fetchPlugins, shouldFetchData]);
-
-  return {
-    permissions,
-    routes,
-    getData: fetchPlugins,
-    isLoading,
-  };
-};
-
-export default usePlugins;
diff --git a/packages/plugins/users-permissions/admin/src/hooks/usePlugins/init.js b/packages/plugins/users-permissions/admin/src/hooks/usePlugins/init.js
deleted file mode 100644
index dfe71d9376..0000000000
--- a/packages/plugins/users-permissions/admin/src/hooks/usePlugins/init.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const init = (initialState, shouldFetchData) => {
-  return { ...initialState, isLoading: shouldFetchData };
-};
-
-export default init;
diff --git a/packages/plugins/users-permissions/admin/src/hooks/usePlugins/reducer.js b/packages/plugins/users-permissions/admin/src/hooks/usePlugins/reducer.js
deleted file mode 100644
index 8a19db2dd2..0000000000
--- a/packages/plugins/users-permissions/admin/src/hooks/usePlugins/reducer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* eslint-disable consistent-return */
-import produce from 'immer';
-
-export const initialState = {
-  permissions: {},
-  routes: {},
-  isLoading: true,
-};
-
-const reducer = (state, action) =>
-  produce(state, (draftState) => {
-    switch (action.type) {
-      case 'GET_DATA': {
-        draftState.isLoading = true;
-        draftState.permissions = {};
-        draftState.routes = {};
-        break;
-      }
-      case 'GET_DATA_SUCCEEDED': {
-        draftState.permissions = action.permissions;
-        draftState.routes = action.routes;
-        draftState.isLoading = false;
-        break;
-      }
-      case 'GET_DATA_ERROR': {
-        draftState.isLoading = false;
-        break;
-      }
-      default:
-        return draftState;
-    }
-  });
-
-export default reducer;
diff --git a/packages/plugins/users-permissions/admin/src/hooks/usePlugins/tests/init.test.js b/packages/plugins/users-permissions/admin/src/hooks/usePlugins/tests/init.test.js
deleted file mode 100644
index 9900a6bcb3..0000000000
--- a/packages/plugins/users-permissions/admin/src/hooks/usePlugins/tests/init.test.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import init from '../init';
-
-describe('USERS PERMISSIONS | HOOKS | usePlugins | init', () => {
-  it('should return the initial state and set the isLoading key to true', () => {
-    const initialState = {
-      ok: true,
-    };
-
-    const expected = {
-      ok: true,
-      isLoading: true,
-    };
-
-    expect(init(initialState, true)).toEqual(expected);
-  });
-
-  it('should return the initial state and set the isLoading key to false', () => {
-    const initialState = {
-      permissions: {},
-      routes: {},
-      isLoading: null,
-    };
-
-    const expected = {
-      permissions: {},
-      routes: {},
-      isLoading: false,
-    };
-
-    expect(init(initialState, false)).toEqual(expected);
-  });
-});
diff --git a/packages/plugins/users-permissions/admin/src/hooks/usePlugins/tests/reducer.test.js b/packages/plugins/users-permissions/admin/src/hooks/usePlugins/tests/reducer.test.js
deleted file mode 100644
index c9e62e2942..0000000000
--- a/packages/plugins/users-permissions/admin/src/hooks/usePlugins/tests/reducer.test.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import reducer from '../reducer';
-
-describe('USERS PERMISSIONS | HOOKS | usePlugins | reducer', () => {
-  describe('DEFAULT_ACTION', () => {
-    it('should return the initialState', () => {
-      const state = {
-        test: true,
-      };
-
-      expect(reducer(state, {})).toEqual(state);
-    });
-  });
-
-  describe('GET_DATA', () => {
-    it('should set the isLoading key to true', () => {
-      const state = {
-        permissions: { ok: true },
-        routes: { ok: true },
-        isLoading: false,
-      };
-
-      const action = {
-        type: 'GET_DATA',
-      };
-
-      const expected = {
-        permissions: {},
-        routes: {},
-        isLoading: true,
-      };
-
-      expect(reducer(state, action)).toEqual(expected);
-    });
-  });
-
-  describe('GET_DATA_ERROR', () => {
-    it('should set isLoading to false is an error occured', () => {
-      const action = {
-        type: 'GET_DATA_ERROR',
-      };
-      const initialState = {
-        permissions: {},
-        routes: {},
-        isLoading: true,
-      };
-      const expected = {
-        permissions: {},
-        routes: {},
-        isLoading: false,
-      };
-
-      expect(reducer(initialState, action)).toEqual(expected);
-    });
-  });
-
-  describe('GET_DATA_SUCCEEDED', () => {
-    it('should return the state with the permissions list', () => {
-      const action = {
-        type: 'GET_DATA_SUCCEEDED',
-        permissions: {
-          application: {
-            controllers: {
-              address: {
-                count: { enabled: false },
-              },
-            },
-          },
-        },
-        routes: {
-          application: [{ method: 'GET', path: '/addresses' }],
-        },
-      };
-      const initialState = {
-        permissions: {},
-        isLoading: true,
-      };
-      const expected = {
-        permissions: {
-          application: {
-            controllers: {
-              address: {
-                count: { enabled: false },
-              },
-            },
-          },
-        },
-        routes: {
-          application: [{ method: 'GET', path: '/addresses' }],
-        },
-        isLoading: false,
-      };
-
-      expect(reducer(initialState, action)).toEqual(expected);
-    });
-  });
-});
diff --git a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
index db3cf66616..5b487fb47b 100644
--- a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
@@ -8,8 +8,6 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 
 import ProtectedAdvancedSettingsPage from '../index';
 
-import server from './utils/server';
-
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   useNotification: jest.fn(),
@@ -38,19 +36,12 @@ const App = (
 );
 
 describe('ADMIN | Pages | Settings | Advanced Settings', () => {
-  beforeAll(() => server.listen());
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  afterEach(() => {
-    server.resetHandlers();
-  });
-
   afterAll(() => {
     jest.resetAllMocks();
-    server.close();
   });
 
   it('renders and matches the snapshot', async () => {
diff --git a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/utils/server.js b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/utils/server.js
deleted file mode 100644
index 644d99cfce..0000000000
--- a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/utils/server.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-
-const handlers = [
-  rest.get('*/advanced', (req, res, ctx) => {
-    return res(
-      ctx.delay(100),
-      ctx.status(200),
-      ctx.json({
-        roles: [{ name: 'Authenticated', type: 'authenticated' }],
-        settings: {
-          allow_register: false,
-          default_role: 'authenticated',
-          email_confirmation: false,
-          email_confirmation_redirection: '',
-          email_reset_password: 'https://cat-bounce.com/',
-          unique_email: false,
-        },
-      })
-    );
-  }),
-];
-
-const server = setupServer(...handlers);
-
-export default server;
diff --git a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
index 4568143899..49af90dcc3 100644
--- a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
@@ -8,8 +8,6 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 
 import ProtectedEmailTemplatesPage from '../index';
 
-import server from './utils/server';
-
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   useNotification: jest.fn(),
@@ -38,19 +36,12 @@ const App = (
 );
 
 describe('ADMIN | Pages | Settings | Email Templates', () => {
-  beforeAll(() => server.listen());
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  afterEach(() => {
-    server.resetHandlers();
-  });
-
   afterAll(() => {
     jest.resetAllMocks();
-    server.close();
   });
 
   it('renders and matches the snapshot', async () => {
diff --git a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/utils/server.js b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/utils/server.js
deleted file mode 100644
index e01d131332..0000000000
--- a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/utils/server.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-
-const handlers = [
-  rest.get('*/email-templates', (req, res, ctx) => {
-    return res(
-      ctx.delay(100),
-      ctx.status(200),
-      ctx.json({
-        email_confirmation: {
-          display: 'Email.template.email_confirmation',
-          options: {
-            from: {
-              email: 'mochoko@strapi.io',
-              name: 'Administration Panel',
-            },
-            message: 'Thank you for registering. Please click on the link below.',
-            object: 'Account confirmation',
-            response_email: '',
-          },
-        },
-        reset_password: {
-          display: 'Email.template.reset_password',
-          options: {
-            from: {
-              email: 'mochoko@strapi.io',
-              name: 'Administration Panel',
-            },
-            message: 'We heard that you lost your password. Sorry about that!',
-            object: 'Reset password',
-            response_email: '',
-          },
-        },
-      })
-    );
-  }),
-];
-
-const server = setupServer(...handlers);
-
-export default server;
diff --git a/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js
index 549b297511..a63aee292d 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js
@@ -8,8 +8,6 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 
 import { ProvidersPage } from '../index';
 
-import server from './server';
-
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   useNotification: jest.fn(),
@@ -36,16 +34,10 @@ const App = (
 );
 
 describe('Admin | containers | ProvidersPage', () => {
-  beforeAll(() => server.listen());
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  afterEach(() => server.resetHandlers());
-
-  afterAll(() => server.close());
-
   it('renders and matches the snapshot', () => {
     useRBAC.mockImplementation(() => ({
       isLoading: true,
diff --git a/packages/plugins/users-permissions/admin/src/pages/Providers/tests/server.js b/packages/plugins/users-permissions/admin/src/pages/Providers/tests/server.js
deleted file mode 100644
index 16125084e6..0000000000
--- a/packages/plugins/users-permissions/admin/src/pages/Providers/tests/server.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-
-const handlers = [
-  rest.get('*/providers', (req, res, ctx) => {
-    return res(
-      ctx.delay(1000),
-      ctx.status(200),
-      ctx.json({
-        email: { enabled: true, icon: 'envelope' },
-        discord: {
-          callback: '/auth/discord/callback',
-          enabled: false,
-          icon: 'discord',
-          key: '',
-          scope: ['identify', 'email'],
-          secret: '',
-        },
-      })
-    );
-  }),
-];
-
-const server = setupServer(...handlers);
-
-export default server;
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/index.js b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage.js
similarity index 94%
rename from packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/index.js
rename to packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage.js
index 9744ec4630..15888f7ffc 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/index.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage.js
@@ -26,14 +26,14 @@ 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 UsersPermissions from '../../components/UsersPermissions';
+import { usePlugins } from '../../hooks';
+import pluginId from '../../pluginId';
+import getTrad from '../../utils/getTrad';
 
-import schema from './utils/schema';
+import { createRoleSchema } from './constants';
 
-const EditPage = () => {
+const CreatePage = () => {
   const { formatMessage } = useIntl();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const toggleNotification = useNotification();
@@ -85,7 +85,7 @@ const EditPage = () => {
         enableReinitialize
         initialValues={{ name: '', description: '' }}
         onSubmit={handleCreateRoleSubmit}
-        validationSchema={schema}
+        validationSchema={createRoleSchema}
       >
         {({ handleSubmit, values, handleChange, errors }) => (
           <Form noValidate onSubmit={handleSubmit}>
@@ -182,4 +182,4 @@ const EditPage = () => {
   );
 };
 
-export default EditPage;
+export default CreatePage;
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
deleted file mode 100644
index b50e69d1ef..0000000000
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
+++ /dev/null
@@ -1,1059 +0,0 @@
-import React from 'react';
-
-import { lightTheme, ThemeProvider } from '@strapi/design-system';
-import { act, render, waitFor } from '@testing-library/react';
-import { createMemoryHistory } from 'history';
-import { IntlProvider } from 'react-intl';
-import { Route, Router, Switch } from 'react-router-dom';
-
-import RolesCreatePage from '..';
-import pluginId from '../../../../pluginId';
-
-import server from './server';
-
-jest.mock('@strapi/helper-plugin', () => {
-  // Make sure the references of the mock functions stay the same, otherwise we get an endless loop
-  const mockToggleNotification = jest.fn();
-  const mockUseNotification = jest.fn(() => {
-    return mockToggleNotification;
-  });
-
-  return {
-    ...jest.requireActual('@strapi/helper-plugin'),
-    useNotification: mockUseNotification,
-    useOverlayBlocker: jest.fn(() => ({ lockApp: jest.fn(), unlockApp: jest.fn() })),
-  };
-});
-
-function makeAndRenderApp() {
-  const history = createMemoryHistory();
-  const app = (
-    <IntlProvider locale="en" messages={{}} textComponent="span">
-      <ThemeProvider theme={lightTheme}>
-        <Router history={history}>
-          <Switch>
-            <Route path={`/settings/${pluginId}/roles/new`} component={RolesCreatePage} />
-          </Switch>
-        </Router>
-      </ThemeProvider>
-    </IntlProvider>
-  );
-  const renderResult = render(app);
-  act(() => history.push(`/settings/${pluginId}/roles/new`));
-
-  return renderResult;
-}
-
-describe('Admin | containers | RoleCreatePage', () => {
-  beforeAll(() => server.listen());
-
-  beforeEach(() => jest.clearAllMocks());
-
-  afterEach(() => server.resetHandlers());
-
-  afterAll(() => server.close());
-
-  it('renders users-permissions create role and matches snapshot', async () => {
-    const { container, getByText, getByRole } = makeAndRenderApp();
-    await waitFor(() =>
-      expect(getByRole('heading', { name: /create a role/i })).toBeInTheDocument()
-    );
-    await waitFor(() => {
-      expect(
-        getByText(/define all allowed actions for the api::address plugin/i)
-      ).toBeInTheDocument();
-    });
-
-    expect(container.firstChild).toMatchInlineSnapshot(`
-      .c7 {
-        font-weight: 600;
-        font-size: 2rem;
-        line-height: 1.25;
-        color: #32324d;
-      }
-
-      .c13 {
-        font-size: 1rem;
-        line-height: 1.5;
-        color: #666687;
-      }
-
-      .c18 {
-        font-weight: 500;
-        font-size: 1rem;
-        line-height: 1.25;
-        color: #32324d;
-      }
-
-      .c22 {
-        font-size: 0.75rem;
-        line-height: 1.33;
-        font-weight: 600;
-        color: #32324d;
-      }
-
-      .c12 {
-        font-size: 0.75rem;
-        line-height: 1.33;
-        font-weight: 600;
-        line-height: 0;
-        color: #ffffff;
-      }
-
-      .c36 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #666687;
-      }
-
-      .c46 {
-        font-size: 0.75rem;
-        line-height: 1.33;
-        color: #4945ff;
-      }
-
-      .c47 {
-        font-weight: 500;
-        font-size: 1rem;
-        line-height: 1.25;
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: #4a4a6a;
-      }
-
-      .c1 {
-        background: #f6f6f9;
-        padding-top: 40px;
-        padding-right: 56px;
-        padding-bottom: 40px;
-        padding-left: 56px;
-      }
-
-      .c4 {
-        min-width: 0;
-      }
-
-      .c14 {
-        padding-right: 56px;
-        padding-left: 56px;
-      }
-
-      .c16 {
-        background: #ffffff;
-        padding-top: 24px;
-        padding-right: 32px;
-        padding-bottom: 24px;
-        padding-left: 32px;
-        border-radius: 4px;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-      }
-
-      .c26 {
-        border-radius: 4px;
-        border-color: #dcdce4;
-        border: 1px solid #dcdce4;
-      }
-
-      .c28 {
-        font-size: 0.875rem;
-        background: #ffffff;
-        color: #32324d;
-        padding: 16px;
-        border-radius: 4px;
-        width: 100%;
-        height: 6.5625rem;
-        line-height: 1.43;
-      }
-
-      .c8 {
-        background: #4945ff;
-        padding: 8px;
-        padding-right: 16px;
-        padding-left: 16px;
-        border-radius: 4px;
-        border-color: #4945ff;
-        border: 1px solid #4945ff;
-        cursor: pointer;
-      }
-
-      .c30 {
-        background: #ffffff;
-        border-radius: 4px;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-      }
-
-      .c32 {
-        padding-top: 24px;
-        padding-right: 32px;
-        padding-bottom: 24px;
-        padding-left: 32px;
-      }
-
-      .c37 {
-        border-radius: 4px;
-      }
-
-      .c39 {
-        background: #f6f6f9;
-        padding-top: 24px;
-        padding-right: 24px;
-        padding-bottom: 24px;
-        padding-left: 24px;
-      }
-
-      .c41 {
-        max-width: 100%;
-        -webkit-flex: 1;
-        -ms-flex: 1;
-        flex: 1;
-      }
-
-      .c43 {
-        background: transparent;
-        min-width: 0;
-        -webkit-flex: 1;
-        -ms-flex: 1;
-        flex: 1;
-      }
-
-      .c48 {
-        background: #dcdce4;
-        border-radius: 50%;
-        width: 2rem;
-        height: 2rem;
-        -webkit-flex-shrink: 0;
-        -ms-flex-negative: 0;
-        flex-shrink: 0;
-        cursor: pointer;
-      }
-
-      .c50 {
-        color: #666687;
-        width: 0.6875rem;
-      }
-
-      .c52 {
-        background: #eaeaef;
-        padding-top: 24px;
-        padding-right: 32px;
-        padding-bottom: 24px;
-        padding-left: 32px;
-      }
-
-      .c3 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: justify;
-        -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
-      }
-
-      .c5 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-      }
-
-      .c15 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        gap: 32px;
-      }
-
-      .c17 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        gap: 16px;
-      }
-
-      .c21 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        gap: 4px;
-      }
-
-      .c9 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        gap: 8px;
-      }
-
-      .c34 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        gap: 24px;
-      }
-
-      .c35 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        gap: 8px;
-      }
-
-      .c42 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        gap: 12px;
-      }
-
-      .c49 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-flex-shrink: 0;
-        -ms-flex-negative: 0;
-        flex-shrink: 0;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-      }
-
-      .c38 {
-        border: 1px solid #f6f6f9;
-      }
-
-      .c38:hover:not([aria-disabled='true']) {
-        border: 1px solid #4945ff;
-      }
-
-      .c38:hover:not([aria-disabled='true']) .c6 {
-        color: #4945ff;
-      }
-
-      .c38:hover:not([aria-disabled='true']) > .c2 {
-        background: #f0f0ff;
-      }
-
-      .c38:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
-        background: #d9d8ff;
-      }
-
-      .c44 {
-        border: none;
-        position: relative;
-        outline: none;
-      }
-
-      .c44[aria-disabled='true'] {
-        pointer-events: none;
-      }
-
-      .c44[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
-      .c44 svg path {
-        fill: #4945ff;
-      }
-
-      .c44:after {
-        -webkit-transition-property: all;
-        transition-property: all;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -4px;
-        bottom: -4px;
-        left: -4px;
-        right: -4px;
-        border: 2px solid transparent;
-      }
-
-      .c44:focus-visible {
-        outline: none;
-      }
-
-      .c44:focus-visible:after {
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -5px;
-        bottom: -5px;
-        left: -5px;
-        right: -5px;
-        border: 2px solid #4945ff;
-      }
-
-      .c51 path {
-        fill: #666687;
-      }
-
-      .c45 {
-        text-align: left;
-      }
-
-      .c45 > span {
-        max-width: 100%;
-      }
-
-      .c45 svg {
-        width: 0.875rem;
-        height: 0.875rem;
-      }
-
-      .c45 svg path {
-        fill: #8e8ea9;
-      }
-
-      .c40 {
-        min-height: 5.5rem;
-        border-radius: 4px;
-      }
-
-      .c40:hover svg path {
-        fill: #4945ff;
-      }
-
-      .c10 {
-        position: relative;
-        outline: none;
-      }
-
-      .c10 > svg {
-        height: 12px;
-        width: 12px;
-      }
-
-      .c10 > svg > g,
-      .c10 > svg path {
-        fill: #ffffff;
-      }
-
-      .c10[aria-disabled='true'] {
-        pointer-events: none;
-      }
-
-      .c10:after {
-        -webkit-transition-property: all;
-        transition-property: all;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -4px;
-        bottom: -4px;
-        left: -4px;
-        right: -4px;
-        border: 2px solid transparent;
-      }
-
-      .c10:focus-visible {
-        outline: none;
-      }
-
-      .c10:focus-visible:after {
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -5px;
-        bottom: -5px;
-        left: -5px;
-        right: -5px;
-        border: 2px solid #4945ff;
-      }
-
-      .c11 {
-        height: 2rem;
-      }
-
-      .c11 svg {
-        height: 0.75rem;
-        width: auto;
-      }
-
-      .c11[aria-disabled='true'] {
-        border: 1px solid #dcdce4;
-        background: #eaeaef;
-      }
-
-      .c11[aria-disabled='true'] .c6 {
-        color: #666687;
-      }
-
-      .c11[aria-disabled='true'] svg > g,.c11[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
-      .c11[aria-disabled='true']:active {
-        border: 1px solid #dcdce4;
-        background: #eaeaef;
-      }
-
-      .c11[aria-disabled='true']:active .c6 {
-        color: #666687;
-      }
-
-      .c11[aria-disabled='true']:active svg > g,.c11[aria-disabled='true']:active svg path {
-        fill: #666687;
-      }
-
-      .c11:hover {
-        border: 1px solid #7b79ff;
-        background: #7b79ff;
-      }
-
-      .c11:active {
-        border: 1px solid #4945ff;
-        background: #4945ff;
-      }
-
-      .c11 svg > g,
-      .c11 svg path {
-        fill: #ffffff;
-      }
-
-      .c23 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c25 {
-        border: none;
-        border-radius: 4px;
-        padding-bottom: 0.65625rem;
-        padding-left: 16px;
-        padding-right: 16px;
-        padding-top: 0.65625rem;
-        color: #32324d;
-        font-weight: 400;
-        font-size: 0.875rem;
-        display: block;
-        width: 100%;
-        background: inherit;
-      }
-
-      .c25::-webkit-input-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c25::-moz-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c25:-ms-input-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c25::placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c25[aria-disabled='true'] {
-        color: inherit;
-      }
-
-      .c25:focus {
-        outline: none;
-        box-shadow: none;
-      }
-
-      .c24 {
-        border: 1px solid #dcdce4;
-        border-radius: 4px;
-        background: #ffffff;
-        outline: none;
-        box-shadow: 0;
-        -webkit-transition-property: border-color,box-shadow,fill;
-        transition-property: border-color,box-shadow,fill;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-      }
-
-      .c24:focus-within {
-        border: 1px solid #4945ff;
-        box-shadow: #4945ff 0px 0px 0px 2px;
-      }
-
-      .c19 {
-        display: grid;
-        grid-template-columns: repeat(12,1fr);
-        gap: 16px;
-      }
-
-      .c31 {
-        display: grid;
-        grid-template-columns: repeat(12,1fr);
-      }
-
-      .c20 {
-        grid-column: span 6;
-        max-width: 100%;
-      }
-
-      .c33 {
-        grid-column: span 7;
-        max-width: 100%;
-      }
-
-      .c53 {
-        grid-column: span 5;
-        max-width: 100%;
-      }
-
-      .c0:focus-visible {
-        outline: none;
-      }
-
-      .c27 {
-        outline: none;
-        box-shadow: 0;
-        -webkit-transition-property: border-color,box-shadow,fill;
-        transition-property: border-color,box-shadow,fill;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-      }
-
-      .c27:focus-within {
-        border: 1px solid #4945ff;
-        box-shadow: #4945ff 0px 0px 0px 2px;
-      }
-
-      .c29 {
-        border: none;
-        resize: none;
-      }
-
-      .c29::-webkit-input-placeholder {
-        color: #8e8ea9;
-        font-size: 0.875rem;
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c29::-moz-placeholder {
-        color: #8e8ea9;
-        font-size: 0.875rem;
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c29:-ms-input-placeholder {
-        color: #8e8ea9;
-        font-size: 0.875rem;
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c29::placeholder {
-        color: #8e8ea9;
-        font-size: 0.875rem;
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c29:focus-within {
-        outline: none;
-      }
-
-      @media (max-width:68.75rem) {
-        .c20 {
-          grid-column: span;
-        }
-      }
-
-      @media (max-width:34.375rem) {
-        .c20 {
-          grid-column: span;
-        }
-      }
-
-      @media (max-width:68.75rem) {
-        .c33 {
-          grid-column: span;
-        }
-      }
-
-      @media (max-width:34.375rem) {
-        .c33 {
-          grid-column: span;
-        }
-      }
-
-      @media (max-width:68.75rem) {
-        .c53 {
-          grid-column: span;
-        }
-      }
-
-      @media (max-width:34.375rem) {
-        .c53 {
-          grid-column: span;
-        }
-      }
-
-      <main
-        aria-labelledby="main-content-title"
-        class="c0"
-        id="main-content"
-        tabindex="-1"
-      >
-        <form
-          action="#"
-          novalidate=""
-        >
-          <div
-            style="height: 0px;"
-          >
-            <div
-              class="c1"
-              data-strapi-header="true"
-            >
-              <div
-                class="c2 c3"
-              >
-                <div
-                  class="c2 c4 c5"
-                >
-                  <h1
-                    class="c6 c7"
-                  >
-                    Create a role
-                  </h1>
-                </div>
-                <button
-                  aria-disabled="false"
-                  class="c2 c8 c9 c10 c11"
-                  type="submit"
-                >
-                  <div
-                    aria-hidden="true"
-                    class=""
-                  >
-                    <svg
-                      fill="none"
-                      height="1rem"
-                      viewBox="0 0 24 24"
-                      width="1rem"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M20.727 2.97a.2.2 0 0 1 .286 0l2.85 2.89a.2.2 0 0 1 0 .28L9.554 20.854a.2.2 0 0 1-.285 0l-9.13-9.243a.2.2 0 0 1 0-.281l2.85-2.892a.2.2 0 0 1 .284 0l6.14 6.209L20.726 2.97Z"
-                        fill="#212134"
-                      />
-                    </svg>
-                  </div>
-                  <span
-                    class="c6 c12"
-                  >
-                    Save
-                  </span>
-                </button>
-              </div>
-              <p
-                class="c6 c13"
-              >
-                Define the rights given to the role
-              </p>
-            </div>
-          </div>
-          <div
-            class="c14"
-          >
-            <div
-              class="c2 c15"
-            >
-              <div
-                class="c16"
-              >
-                <div
-                  class="c2 c17"
-                >
-                  <h2
-                    class="c6 c18"
-                  >
-                    Role details
-                  </h2>
-                  <div
-                    class="c19"
-                  >
-                    <div
-                      class="c20"
-                    >
-                      <div>
-                        <div
-                          class=""
-                        >
-                          <div
-                            class="c2 c21"
-                          >
-                            <label
-                              class="c6 c22 c23"
-                              for=":r0:"
-                            >
-                              Name
-                            </label>
-                            <div
-                              class="c2 c3 c24"
-                            >
-                              <input
-                                aria-disabled="false"
-                                aria-invalid="false"
-                                aria-required="false"
-                                class="c25"
-                                id=":r0:"
-                                name="name"
-                                value=""
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="c20"
-                    >
-                      <div
-                        class=""
-                      >
-                        <div
-                          class="c2 c21"
-                        >
-                          <label
-                            class="c6 c22 c23"
-                            for="description"
-                          >
-                            Description
-                          </label>
-                          <div
-                            class="c26 c27"
-                          >
-                            <textarea
-                              aria-invalid="false"
-                              aria-required="false"
-                              class="c28 c29"
-                              font-size="2"
-                              id="description"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="c30 c31"
-              >
-                <div
-                  class="c32 c33"
-                >
-                  <div
-                    class="c2 c34"
-                  >
-                    <div
-                      class="c2 c35"
-                    >
-                      <h2
-                        class="c6 c18"
-                      >
-                        Permissions
-                      </h2>
-                      <p
-                        class="c6 c36"
-                      >
-                        Only actions bound by a route are listed below.
-                      </p>
-                    </div>
-                    <div
-                      class="c2 c21"
-                    >
-                      <div
-                        aria-disabled="false"
-                        class="c37 c38"
-                        data-strapi-expanded="false"
-                      >
-                        <div
-                          class="c2 c39 c3 c40"
-                        >
-                          <div
-                            class="c2 c41 c42"
-                          >
-                            <button
-                              aria-controls="accordion-content-:r4:"
-                              aria-disabled="false"
-                              aria-expanded="false"
-                              aria-labelledby="accordion-label-:r4:"
-                              class="c2 c43 c9 c44 c45"
-                              data-strapi-accordion-toggle="true"
-                              type="button"
-                            >
-                              <span
-                                class="c6 c46"
-                              >
-                                <span
-                                  class="c6 c47"
-                                  id="accordion-label-:r4:"
-                                >
-                                  Address
-                                </span>
-                                <p
-                                  class="c6 c36"
-                                  id="accordion-desc-:r4:"
-                                >
-                                  Define all allowed actions for the api::address plugin.
-                                </p>
-                              </span>
-                            </button>
-                            <div
-                              class="c2 c42"
-                            >
-                              <span
-                                aria-hidden="true"
-                                class="c2 c48 c49"
-                                data-strapi-dropdown="true"
-                              >
-                                <svg
-                                  class="c50 c51"
-                                  fill="none"
-                                  height="1rem"
-                                  viewBox="0 0 14 8"
-                                  width="1rem"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    clip-rule="evenodd"
-                                    d="M14 .889a.86.86 0 0 1-.26.625L7.615 7.736A.834.834 0 0 1 7 8a.834.834 0 0 1-.615-.264L.26 1.514A.861.861 0 0 1 0 .889c0-.24.087-.45.26-.625A.834.834 0 0 1 .875 0h12.25c.237 0 .442.088.615.264a.86.86 0 0 1 .26.625Z"
-                                    fill="#32324D"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="c52 c53"
-                  style="min-height: 100%;"
-                >
-                  <div
-                    class="c2 c35"
-                  >
-                    <h3
-                      class="c6 c18"
-                    >
-                      Advanced settings
-                    </h3>
-                    <p
-                      class="c6 c36"
-                    >
-                      Select the application's actions or the plugin's actions and click on the cog icon to display the bound route
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      </main>
-    `);
-  });
-});
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/server.js b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/server.js
deleted file mode 100644
index 578564c45d..0000000000
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/server.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-
-import pluginId from '../../../../pluginId';
-
-const handlers = [
-  // Mock create role route
-  rest.post(`*/${pluginId}/roles`, (req, res, ctx) => {
-    return res(ctx.delay(100), ctx.status(200), ctx.json({ ok: true }));
-  }),
-
-  // Mock get permissions
-  rest.get(`*/${pluginId}/permissions`, (req, res, ctx) => {
-    return res(
-      ctx.delay(100),
-      ctx.status(200),
-      ctx.json({
-        permissions: {
-          'api::address': {
-            controllers: {
-              address: {
-                create: {
-                  enabled: false,
-                  policy: '',
-                },
-              },
-            },
-          },
-        },
-      })
-    );
-  }),
-
-  // Mock get all routes route
-  rest.get(`*/${pluginId}/routes`, (req, res, ctx) => {
-    return res(
-      ctx.status(200),
-      ctx.json({
-        routes: {
-          'api::address': [
-            {
-              method: 'POST',
-              path: '/addresses',
-              handler: 'address.create',
-              config: {
-                policies: [],
-                auth: {
-                  scope: 'api::address.address.create',
-                },
-              },
-              info: {
-                apiName: 'address',
-                type: 'content-api',
-              },
-            },
-          ],
-        },
-      })
-    );
-  }),
-];
-
-const server = setupServer(...handlers);
-
-export default server;
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage.js
similarity index 95%
rename from packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js
rename to packages/plugins/users-permissions/admin/src/pages/Roles/EditPage.js
index 07824f934c..9a88716a94 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage.js
@@ -1,38 +1,38 @@
 import React, { useRef, useState } from 'react';
 
 import {
-  Box,
-  Button,
   ContentLayout,
-  Flex,
-  Grid,
-  GridItem,
   HeaderLayout,
   Main,
-  Textarea,
+  Button,
+  Flex,
+  Box,
   TextInput,
+  Textarea,
   Typography,
+  GridItem,
+  Grid,
 } from '@strapi/design-system';
 import {
-  Form,
-  Link,
-  LoadingIndicatorPage,
-  SettingsPageTitle,
   useFetchClient,
-  useNotification,
   useOverlayBlocker,
+  SettingsPageTitle,
+  LoadingIndicatorPage,
+  Form,
+  useNotification,
+  Link,
 } from '@strapi/helper-plugin';
 import { ArrowLeft, Check } from '@strapi/icons';
 import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
-import UsersPermissions from '../../../components/UsersPermissions';
-import { useFetchRole, usePlugins } from '../../../hooks';
-import pluginId from '../../../pluginId';
-import getTrad from '../../../utils/getTrad';
+import UsersPermissions from '../../components/UsersPermissions';
+import { usePlugins, useFetchRole } from '../../hooks';
+import pluginId from '../../pluginId';
+import getTrad from '../../utils/getTrad';
 
-import schema from './utils/schema';
+import { createRoleSchema } from './constants';
 
 const EditPage = () => {
   const { formatMessage } = useIntl();
@@ -90,7 +90,7 @@ const EditPage = () => {
         enableReinitialize
         initialValues={{ name: role.name, description: role.description }}
         onSubmit={handleEditRoleSubmit}
-        validationSchema={schema}
+        validationSchema={createRoleSchema}
       >
         {({ handleSubmit, values, handleChange, errors }) => (
           <Form noValidate onSubmit={handleSubmit}>
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
deleted file mode 100644
index a6e774640f..0000000000
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
+++ /dev/null
@@ -1,1221 +0,0 @@
-import React from 'react';
-
-import { lightTheme, ThemeProvider } from '@strapi/design-system';
-import { act, render, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { createMemoryHistory } from 'history';
-import { IntlProvider } from 'react-intl';
-import { Route, Router, Switch } from 'react-router-dom';
-
-import RolesEditPage from '..';
-import pluginId from '../../../../pluginId';
-
-import server from './server';
-
-jest.mock('@strapi/helper-plugin', () => {
-  // Make sure the references of the mock functions stay the same, otherwise we get an endless loop
-  const mockToggleNotification = jest.fn();
-  const mockUseNotification = jest.fn(() => {
-    return mockToggleNotification;
-  });
-
-  return {
-    ...jest.requireActual('@strapi/helper-plugin'),
-    useNotification: mockUseNotification,
-    useOverlayBlocker: jest.fn(() => ({ lockApp: jest.fn(), unlockApp: jest.fn() })),
-  };
-});
-
-function makeAndRenderApp() {
-  const history = createMemoryHistory();
-  const app = (
-    <IntlProvider locale="en" messages={{}} textComponent="span">
-      <ThemeProvider theme={lightTheme}>
-        <Router history={history}>
-          <Switch>
-            <Route path={`/settings/${pluginId}/roles/:id`} component={RolesEditPage} />
-          </Switch>
-        </Router>
-      </ThemeProvider>
-    </IntlProvider>
-  );
-  const renderResult = render(app);
-  act(() => history.push(`/settings/${pluginId}/roles/1`));
-
-  return renderResult;
-}
-
-describe('Admin | containers | RoleEditPage', () => {
-  beforeAll(() => server.listen());
-
-  beforeEach(() => jest.clearAllMocks());
-
-  afterEach(() => server.resetHandlers());
-
-  afterAll(() => server.close());
-
-  it('renders users-permissions edit role and matches snapshot', async () => {
-    const { container, getByTestId, getByRole } = makeAndRenderApp();
-    await waitForElementToBeRemoved(() => getByTestId('loader'));
-    await waitFor(() => expect(getByRole('heading', { name: /permissions/i })).toBeInTheDocument());
-
-    expect(container.firstChild).toMatchInlineSnapshot(`
-      .c10 {
-        font-weight: 600;
-        font-size: 2rem;
-        line-height: 1.25;
-        color: #32324d;
-      }
-
-      .c15 {
-        font-size: 0.75rem;
-        line-height: 1.33;
-        font-weight: 600;
-        line-height: 0;
-        color: #ffffff;
-      }
-
-      .c16 {
-        font-size: 1rem;
-        line-height: 1.5;
-        color: #666687;
-      }
-
-      .c21 {
-        font-weight: 500;
-        font-size: 1rem;
-        line-height: 1.25;
-        color: #32324d;
-      }
-
-      .c25 {
-        font-size: 0.75rem;
-        line-height: 1.33;
-        font-weight: 600;
-        color: #32324d;
-      }
-
-      .c39 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #666687;
-      }
-
-      .c49 {
-        font-size: 0.75rem;
-        line-height: 1.33;
-        color: #4945ff;
-      }
-
-      .c50 {
-        font-weight: 500;
-        font-size: 1rem;
-        line-height: 1.25;
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: #4a4a6a;
-      }
-
-      .c1 {
-        background: #f6f6f9;
-        padding-top: 24px;
-        padding-right: 56px;
-        padding-bottom: 40px;
-        padding-left: 56px;
-      }
-
-      .c2 {
-        padding-bottom: 8px;
-      }
-
-      .c7 {
-        min-width: 0;
-      }
-
-      .c11 {
-        background: #4945ff;
-        padding: 8px;
-        padding-right: 16px;
-        padding-left: 16px;
-        border-radius: 4px;
-        border-color: #4945ff;
-        border: 1px solid #4945ff;
-        cursor: pointer;
-      }
-
-      .c17 {
-        padding-right: 56px;
-        padding-left: 56px;
-      }
-
-      .c19 {
-        background: #ffffff;
-        padding-top: 24px;
-        padding-right: 32px;
-        padding-bottom: 24px;
-        padding-left: 32px;
-        border-radius: 4px;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-      }
-
-      .c29 {
-        border-radius: 4px;
-        border-color: #dcdce4;
-        border: 1px solid #dcdce4;
-      }
-
-      .c31 {
-        font-size: 0.875rem;
-        background: #ffffff;
-        color: #32324d;
-        padding: 16px;
-        border-radius: 4px;
-        width: 100%;
-        height: 6.5625rem;
-        line-height: 1.43;
-      }
-
-      .c33 {
-        background: #ffffff;
-        border-radius: 4px;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-      }
-
-      .c35 {
-        padding-top: 24px;
-        padding-right: 32px;
-        padding-bottom: 24px;
-        padding-left: 32px;
-      }
-
-      .c40 {
-        border-radius: 4px;
-      }
-
-      .c42 {
-        background: #f6f6f9;
-        padding-top: 24px;
-        padding-right: 24px;
-        padding-bottom: 24px;
-        padding-left: 24px;
-      }
-
-      .c44 {
-        max-width: 100%;
-        -webkit-flex: 1;
-        -ms-flex: 1;
-        flex: 1;
-      }
-
-      .c46 {
-        background: transparent;
-        min-width: 0;
-        -webkit-flex: 1;
-        -ms-flex: 1;
-        flex: 1;
-      }
-
-      .c51 {
-        background: #dcdce4;
-        border-radius: 50%;
-        width: 2rem;
-        height: 2rem;
-        -webkit-flex-shrink: 0;
-        -ms-flex-negative: 0;
-        flex-shrink: 0;
-        cursor: pointer;
-      }
-
-      .c53 {
-        color: #666687;
-        width: 0.6875rem;
-      }
-
-      .c55 {
-        background: #eaeaef;
-        padding-top: 24px;
-        padding-right: 32px;
-        padding-bottom: 24px;
-        padding-left: 32px;
-      }
-
-      .c6 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: justify;
-        -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
-      }
-
-      .c8 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-      }
-
-      .c12 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        gap: 8px;
-      }
-
-      .c18 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        gap: 32px;
-      }
-
-      .c20 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        gap: 16px;
-      }
-
-      .c24 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        gap: 4px;
-      }
-
-      .c37 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        gap: 24px;
-      }
-
-      .c38 {
-        -webkit-align-items: stretch;
-        -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-        align-items: stretch;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        gap: 8px;
-      }
-
-      .c45 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        gap: 12px;
-      }
-
-      .c52 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-flex-shrink: 0;
-        -ms-flex-negative: 0;
-        flex-shrink: 0;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-      }
-
-      .c41 {
-        border: 1px solid #f6f6f9;
-      }
-
-      .c41:hover:not([aria-disabled='true']) {
-        border: 1px solid #4945ff;
-      }
-
-      .c41:hover:not([aria-disabled='true']) .c9 {
-        color: #4945ff;
-      }
-
-      .c41:hover:not([aria-disabled='true']) > .c5 {
-        background: #f0f0ff;
-      }
-
-      .c41:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
-        background: #d9d8ff;
-      }
-
-      .c47 {
-        border: none;
-        position: relative;
-        outline: none;
-      }
-
-      .c47[aria-disabled='true'] {
-        pointer-events: none;
-      }
-
-      .c47[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
-      .c47 svg path {
-        fill: #4945ff;
-      }
-
-      .c47:after {
-        -webkit-transition-property: all;
-        transition-property: all;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -4px;
-        bottom: -4px;
-        left: -4px;
-        right: -4px;
-        border: 2px solid transparent;
-      }
-
-      .c47:focus-visible {
-        outline: none;
-      }
-
-      .c47:focus-visible:after {
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -5px;
-        bottom: -5px;
-        left: -5px;
-        right: -5px;
-        border: 2px solid #4945ff;
-      }
-
-      .c54 path {
-        fill: #666687;
-      }
-
-      .c48 {
-        text-align: left;
-      }
-
-      .c48 > span {
-        max-width: 100%;
-      }
-
-      .c48 svg {
-        width: 0.875rem;
-        height: 0.875rem;
-      }
-
-      .c48 svg path {
-        fill: #8e8ea9;
-      }
-
-      .c43 {
-        min-height: 5.5rem;
-        border-radius: 4px;
-      }
-
-      .c43:hover svg path {
-        fill: #4945ff;
-      }
-
-      .c13 {
-        position: relative;
-        outline: none;
-      }
-
-      .c13 > svg {
-        height: 12px;
-        width: 12px;
-      }
-
-      .c13 > svg > g,
-      .c13 > svg path {
-        fill: #ffffff;
-      }
-
-      .c13[aria-disabled='true'] {
-        pointer-events: none;
-      }
-
-      .c13:after {
-        -webkit-transition-property: all;
-        transition-property: all;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -4px;
-        bottom: -4px;
-        left: -4px;
-        right: -4px;
-        border: 2px solid transparent;
-      }
-
-      .c13:focus-visible {
-        outline: none;
-      }
-
-      .c13:focus-visible:after {
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -5px;
-        bottom: -5px;
-        left: -5px;
-        right: -5px;
-        border: 2px solid #4945ff;
-      }
-
-      .c14 {
-        height: 2rem;
-      }
-
-      .c14 svg {
-        height: 0.75rem;
-        width: auto;
-      }
-
-      .c14[aria-disabled='true'] {
-        border: 1px solid #dcdce4;
-        background: #eaeaef;
-      }
-
-      .c14[aria-disabled='true'] .c9 {
-        color: #666687;
-      }
-
-      .c14[aria-disabled='true'] svg > g,.c14[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
-      .c14[aria-disabled='true']:active {
-        border: 1px solid #dcdce4;
-        background: #eaeaef;
-      }
-
-      .c14[aria-disabled='true']:active .c9 {
-        color: #666687;
-      }
-
-      .c14[aria-disabled='true']:active svg > g,.c14[aria-disabled='true']:active svg path {
-        fill: #666687;
-      }
-
-      .c14:hover {
-        border: 1px solid #7b79ff;
-        background: #7b79ff;
-      }
-
-      .c14:active {
-        border: 1px solid #4945ff;
-        background: #4945ff;
-      }
-
-      .c14 svg > g,
-      .c14 svg path {
-        fill: #ffffff;
-      }
-
-      .c26 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c28 {
-        border: none;
-        border-radius: 4px;
-        padding-bottom: 0.65625rem;
-        padding-left: 16px;
-        padding-right: 16px;
-        padding-top: 0.65625rem;
-        color: #32324d;
-        font-weight: 400;
-        font-size: 0.875rem;
-        display: block;
-        width: 100%;
-        background: inherit;
-      }
-
-      .c28::-webkit-input-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c28::-moz-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c28:-ms-input-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c28::placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c28[aria-disabled='true'] {
-        color: inherit;
-      }
-
-      .c28:focus {
-        outline: none;
-        box-shadow: none;
-      }
-
-      .c27 {
-        border: 1px solid #dcdce4;
-        border-radius: 4px;
-        background: #ffffff;
-        outline: none;
-        box-shadow: 0;
-        -webkit-transition-property: border-color,box-shadow,fill;
-        transition-property: border-color,box-shadow,fill;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-      }
-
-      .c27:focus-within {
-        border: 1px solid #4945ff;
-        box-shadow: #4945ff 0px 0px 0px 2px;
-      }
-
-      .c22 {
-        display: grid;
-        grid-template-columns: repeat(12,1fr);
-        gap: 16px;
-      }
-
-      .c34 {
-        display: grid;
-        grid-template-columns: repeat(12,1fr);
-      }
-
-      .c23 {
-        grid-column: span 6;
-        max-width: 100%;
-      }
-
-      .c36 {
-        grid-column: span 7;
-        max-width: 100%;
-      }
-
-      .c56 {
-        grid-column: span 5;
-        max-width: 100%;
-      }
-
-      .c0:focus-visible {
-        outline: none;
-      }
-
-      .c30 {
-        outline: none;
-        box-shadow: 0;
-        -webkit-transition-property: border-color,box-shadow,fill;
-        transition-property: border-color,box-shadow,fill;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-      }
-
-      .c30:focus-within {
-        border: 1px solid #4945ff;
-        box-shadow: #4945ff 0px 0px 0px 2px;
-      }
-
-      .c32 {
-        border: none;
-        resize: none;
-      }
-
-      .c32::-webkit-input-placeholder {
-        color: #8e8ea9;
-        font-size: 0.875rem;
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c32::-moz-placeholder {
-        color: #8e8ea9;
-        font-size: 0.875rem;
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c32:-ms-input-placeholder {
-        color: #8e8ea9;
-        font-size: 0.875rem;
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c32::placeholder {
-        color: #8e8ea9;
-        font-size: 0.875rem;
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c32:focus-within {
-        outline: none;
-      }
-
-      .c4 {
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #4945ff;
-      }
-
-      .c3 {
-        display: -webkit-inline-box;
-        display: -webkit-inline-flex;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        -webkit-text-decoration: none;
-        text-decoration: none;
-        gap: 8px;
-        position: relative;
-        outline: none;
-      }
-
-      .c3 svg {
-        font-size: 0.625rem;
-      }
-
-      .c3 svg path {
-        fill: #4945ff;
-      }
-
-      .c3:hover {
-        color: #7b79ff;
-      }
-
-      .c3:active {
-        color: #271fe0;
-      }
-
-      .c3:after {
-        -webkit-transition-property: all;
-        transition-property: all;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -4px;
-        bottom: -4px;
-        left: -4px;
-        right: -4px;
-        border: 2px solid transparent;
-      }
-
-      .c3:focus-visible {
-        outline: none;
-      }
-
-      .c3:focus-visible:after {
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -5px;
-        bottom: -5px;
-        left: -5px;
-        right: -5px;
-        border: 2px solid #4945ff;
-      }
-
-      @media (max-width:68.75rem) {
-        .c23 {
-          grid-column: span;
-        }
-      }
-
-      @media (max-width:34.375rem) {
-        .c23 {
-          grid-column: span;
-        }
-      }
-
-      @media (max-width:68.75rem) {
-        .c36 {
-          grid-column: span;
-        }
-      }
-
-      @media (max-width:34.375rem) {
-        .c36 {
-          grid-column: span;
-        }
-      }
-
-      @media (max-width:68.75rem) {
-        .c56 {
-          grid-column: span;
-        }
-      }
-
-      @media (max-width:34.375rem) {
-        .c56 {
-          grid-column: span;
-        }
-      }
-
-      <main
-        aria-labelledby="main-content-title"
-        class="c0"
-        id="main-content"
-        tabindex="-1"
-      >
-        <form
-          action="#"
-          novalidate=""
-        >
-          <div
-            style="height: 0px;"
-          >
-            <div
-              class="c1"
-              data-strapi-header="true"
-            >
-              <div
-                class="c2"
-              >
-                <a
-                  aria-current="page"
-                  class="c3 active"
-                  href="/settings/users-permissions/roles"
-                >
-                  <svg
-                    fill="none"
-                    height="1rem"
-                    viewBox="0 0 24 24"
-                    width="1rem"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M24 13.3a.2.2 0 0 1-.2.2H5.74l8.239 8.239a.2.2 0 0 1 0 .282L12.14 23.86a.2.2 0 0 1-.282 0L.14 12.14a.2.2 0 0 1 0-.282L11.86.14a.2.2 0 0 1 .282 0L13.98 1.98a.2.2 0 0 1 0 .282L5.74 10.5H23.8c.11 0 .2.09.2.2v2.6Z"
-                      fill="#212134"
-                    />
-                  </svg>
-                  <span
-                    class="c4"
-                  >
-                    Back
-                  </span>
-                </a>
-              </div>
-              <div
-                class="c5 c6"
-              >
-                <div
-                  class="c5 c7 c8"
-                >
-                  <h1
-                    class="c9 c10"
-                  >
-                    Authenticated
-                  </h1>
-                </div>
-                <button
-                  aria-disabled="false"
-                  class="c5 c11 c12 c13 c14"
-                  type="submit"
-                >
-                  <div
-                    aria-hidden="true"
-                    class=""
-                  >
-                    <svg
-                      fill="none"
-                      height="1rem"
-                      viewBox="0 0 24 24"
-                      width="1rem"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M20.727 2.97a.2.2 0 0 1 .286 0l2.85 2.89a.2.2 0 0 1 0 .28L9.554 20.854a.2.2 0 0 1-.285 0l-9.13-9.243a.2.2 0 0 1 0-.281l2.85-2.892a.2.2 0 0 1 .284 0l6.14 6.209L20.726 2.97Z"
-                        fill="#212134"
-                      />
-                    </svg>
-                  </div>
-                  <span
-                    class="c9 c15"
-                  >
-                    Save
-                  </span>
-                </button>
-              </div>
-              <p
-                class="c9 c16"
-              >
-                Default role given to authenticated user.
-              </p>
-            </div>
-          </div>
-          <div
-            class="c17"
-          >
-            <div
-              class="c5 c18"
-            >
-              <div
-                class="c19"
-              >
-                <div
-                  class="c5 c20"
-                >
-                  <h2
-                    class="c9 c21"
-                  >
-                    Role details
-                  </h2>
-                  <div
-                    class="c22"
-                  >
-                    <div
-                      class="c23"
-                    >
-                      <div>
-                        <div
-                          class=""
-                        >
-                          <div
-                            class="c5 c24"
-                          >
-                            <label
-                              class="c9 c25 c26"
-                              for=":r0:"
-                            >
-                              Name
-                            </label>
-                            <div
-                              class="c5 c6 c27"
-                            >
-                              <input
-                                aria-disabled="false"
-                                aria-invalid="false"
-                                aria-required="false"
-                                class="c28"
-                                id=":r0:"
-                                name="name"
-                                value="Authenticated"
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="c23"
-                    >
-                      <div
-                        class=""
-                      >
-                        <div
-                          class="c5 c24"
-                        >
-                          <label
-                            class="c9 c25 c26"
-                            for="description"
-                          >
-                            Description
-                          </label>
-                          <div
-                            class="c29 c30"
-                          >
-                            <textarea
-                              aria-invalid="false"
-                              aria-required="false"
-                              class="c31 c32"
-                              font-size="2"
-                              id="description"
-                            >
-                              Default role given to authenticated user.
-                            </textarea>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="c33 c34"
-              >
-                <div
-                  class="c35 c36"
-                >
-                  <div
-                    class="c5 c37"
-                  >
-                    <div
-                      class="c5 c38"
-                    >
-                      <h2
-                        class="c9 c21"
-                      >
-                        Permissions
-                      </h2>
-                      <p
-                        class="c9 c39"
-                      >
-                        Only actions bound by a route are listed below.
-                      </p>
-                    </div>
-                    <div
-                      class="c5 c24"
-                    >
-                      <div
-                        aria-disabled="false"
-                        class="c40 c41"
-                        data-strapi-expanded="false"
-                      >
-                        <div
-                          class="c5 c42 c6 c43"
-                        >
-                          <div
-                            class="c5 c44 c45"
-                          >
-                            <button
-                              aria-controls="accordion-content-:r4:"
-                              aria-disabled="false"
-                              aria-expanded="false"
-                              aria-labelledby="accordion-label-:r4:"
-                              class="c5 c46 c12 c47 c48"
-                              data-strapi-accordion-toggle="true"
-                              type="button"
-                            >
-                              <span
-                                class="c9 c49"
-                              >
-                                <span
-                                  class="c9 c50"
-                                  id="accordion-label-:r4:"
-                                >
-                                  Address
-                                </span>
-                                <p
-                                  class="c9 c39"
-                                  id="accordion-desc-:r4:"
-                                >
-                                  Define all allowed actions for the api::address plugin.
-                                </p>
-                              </span>
-                            </button>
-                            <div
-                              class="c5 c45"
-                            >
-                              <span
-                                aria-hidden="true"
-                                class="c5 c51 c52"
-                                data-strapi-dropdown="true"
-                              >
-                                <svg
-                                  class="c53 c54"
-                                  fill="none"
-                                  height="1rem"
-                                  viewBox="0 0 14 8"
-                                  width="1rem"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    clip-rule="evenodd"
-                                    d="M14 .889a.86.86 0 0 1-.26.625L7.615 7.736A.834.834 0 0 1 7 8a.834.834 0 0 1-.615-.264L.26 1.514A.861.861 0 0 1 0 .889c0-.24.087-.45.26-.625A.834.834 0 0 1 .875 0h12.25c.237 0 .442.088.615.264a.86.86 0 0 1 .26.625Z"
-                                    fill="#32324D"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="c55 c56"
-                  style="min-height: 100%;"
-                >
-                  <div
-                    class="c5 c38"
-                  >
-                    <h3
-                      class="c9 c21"
-                    >
-                      Advanced settings
-                    </h3>
-                    <p
-                      class="c9 c39"
-                    >
-                      Select the application's actions or the plugin's actions and click on the cog icon to display the bound route
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      </main>
-    `);
-  });
-
-  it("can edit a users-permissions role's name and description", async () => {
-    const { getByLabelText, getByRole, getByTestId, getAllByText } = makeAndRenderApp();
-    const user = userEvent.setup();
-
-    // Check loading screen
-    const loader = getByTestId('loader');
-    expect(loader).toBeInTheDocument();
-
-    // After loading, check other elements
-    await waitForElementToBeRemoved(loader);
-    const saveButton = getByRole('button', { name: /save/i });
-    expect(saveButton).toBeInTheDocument();
-    const nameField = getByLabelText(/name/i);
-    expect(nameField).toBeInTheDocument();
-    const descriptionField = getByLabelText(/description/i);
-    expect(descriptionField).toBeInTheDocument();
-
-    // Shows error when name is missing
-    await user.clear(nameField);
-    expect(nameField).toHaveValue('');
-    await user.clear(descriptionField);
-    expect(descriptionField).toHaveValue('');
-
-    // Show errors after form submit
-    await user.click(saveButton);
-    await waitFor(() => expect(saveButton).not.toBeDisabled());
-    const errorMessages = await getAllByText(/invalid value/i);
-    errorMessages.forEach((errorMessage) => expect(errorMessage).toBeInTheDocument());
-  });
-
-  it('can toggle the permissions accordions and actions', async () => {
-    const user = userEvent.setup();
-    // Create app and wait for loading
-    const { getByLabelText, getByRole, queryByText, getByTestId, getByText, getAllByRole } =
-      makeAndRenderApp();
-    const loader = getByTestId('loader');
-    await waitForElementToBeRemoved(loader);
-
-    // Open the collapse
-    const collapse = getByText(/define all allowed actions for the api::address plugin/i);
-    await user.click(collapse);
-    expect(getByLabelText(/select all/i)).toBeInTheDocument();
-
-    // Display the selected action's bound route
-    const actionCogButton = getByTestId('action-cog');
-    await user.click(actionCogButton);
-    expect(getByText(/bound route to/i)).toBeInTheDocument();
-    expect(getByText('POST')).toBeInTheDocument();
-    expect(getByText('/addresses')).toBeInTheDocument();
-
-    expect(getByRole('checkbox', { name: 'Select all' }).checked).toBe(false);
-
-    await user.click(getByRole('checkbox', { name: 'Select all' }));
-
-    getAllByRole('checkbox')
-      .slice(1, -1)
-      .forEach((actionCheckbox) => {
-        console.log(actionCheckbox.checked);
-        expect(actionCheckbox.checked).toBe(true);
-      });
-
-    // Close the collapse
-    await user.click(collapse);
-    expect(queryByText(/select all/i)).not.toBeInTheDocument();
-  });
-});
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/server.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/server.js
deleted file mode 100644
index 917c012e35..0000000000
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/server.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-
-import pluginId from '../../../../pluginId';
-
-const handlers = [
-  // Mock get role route
-  rest.get(`*/${pluginId}/roles/:roleId`, (req, res, ctx) => {
-    return res(
-      ctx.delay(100),
-      ctx.status(200),
-      ctx.json({
-        role: {
-          id: req.params.roleId,
-          name: 'Authenticated',
-          description: 'Default role given to authenticated user.',
-          type: 'authenticated',
-          createdAt: '2021-09-08T16:26:18.061Z',
-          updatedAt: '2021-09-08T16:26:18.061Z',
-          permissions: {
-            'api::address': {
-              controllers: {
-                address: {
-                  create: {
-                    enabled: false,
-                    policy: '',
-                  },
-                },
-              },
-            },
-          },
-        },
-      })
-    );
-  }),
-
-  // Mock edit role route
-  rest.put(`*/${pluginId}/roles/:roleId`, (req, res, ctx) => {
-    return res(ctx.delay(500), ctx.status(200), ctx.json({ ok: true }));
-  }),
-
-  // Mock get all routes route
-  rest.get(`*/${pluginId}/routes`, (req, res, ctx) => {
-    return res(
-      ctx.status(200),
-      ctx.json({
-        routes: {
-          'api::address': [
-            {
-              method: 'POST',
-              path: '/addresses',
-              handler: 'address.create',
-              config: {
-                policies: [],
-                auth: {
-                  scope: 'api::address.address.create',
-                },
-              },
-              info: {
-                apiName: 'address',
-                type: 'content-api',
-              },
-            },
-          ],
-        },
-      })
-    );
-  }),
-
-  // Mock permissions route
-  rest.get(`*/${pluginId}/permissions`, (req, res, ctx) => {
-    return res(
-      ctx.delay(100),
-      ctx.status(200),
-      ctx.json({
-        permissions: {
-          'api::address': {
-            controllers: {
-              address: {
-                create: {
-                  enabled: false,
-                  policy: '',
-                },
-              },
-            },
-          },
-        },
-      })
-    );
-  }),
-];
-
-const server = setupServer(...handlers);
-
-export default server;
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/utils/schema.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/utils/schema.js
deleted file mode 100644
index c3bcd9cf28..0000000000
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/utils/schema.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { translatedErrors } from '@strapi/helper-plugin';
-import * as yup from 'yup';
-
-const schema = yup.object().shape({
-  name: yup.string().required(translatedErrors.required),
-  description: yup.string().required(translatedErrors.required),
-});
-
-export default schema;
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js
index b7904d9ad5..c603e9228d 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js
@@ -2,724 +2,105 @@
 
 import React from 'react';
 
-import { lightTheme, ThemeProvider } from '@strapi/design-system';
-import { TrackingProvider, useRBAC } from '@strapi/helper-plugin';
-import { render, screen, waitFor } from '@testing-library/react';
-import { createMemoryHistory } from 'history';
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { render as renderRTL, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { Router } from 'react-router-dom';
+import { MemoryRouter, Route } from 'react-router-dom';
 
 import RoleListPage from '../index';
 
-import server from './server';
+jest.mock('@strapi/design-system', () => ({
+  ...jest.requireActual('@strapi/design-system'),
+  useNotifyAT: () => ({
+    notifyStatus: jest.fn(),
+  }),
+}));
 
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
-  useNotification: jest.fn(),
-  useRBAC: jest.fn(),
+  useNotification: jest.fn().mockImplementation(() => jest.fn()),
+  useRBAC: jest
+    .fn()
+    .mockImplementation(() => ({ isLoading: false, allowedActions: { canRead: true } })),
   CheckPermissions: jest.fn(({ children }) => children),
 }));
 
-const client = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
+let testLocation;
+
+const render = () => ({
+  ...renderRTL(<RoleListPage />, {
+    wrapper({ children }) {
+      const client = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+          },
+        },
+      });
+
+      return (
+        <MemoryRouter>
+          <ThemeProvider theme={lightTheme}>
+            <QueryClientProvider client={client}>
+              <IntlProvider locale="en" messages={{}} textComponent="span">
+                {children}
+              </IntlProvider>
+            </QueryClientProvider>
+          </ThemeProvider>
+          <Route
+            path="*"
+            render={({ location }) => {
+              testLocation = location;
+
+              return null;
+            }}
+          />
+        </MemoryRouter>
+      );
     },
-  },
+  }),
+  user: userEvent.setup(),
 });
 
-const makeApp = (history) => (
-  <Router history={history}>
-    <TrackingProvider>
-      <ThemeProvider theme={lightTheme}>
-        <QueryClientProvider client={client}>
-          <IntlProvider locale="en" messages={{}} textComponent="span">
-            <RoleListPage />
-          </IntlProvider>
-        </QueryClientProvider>
-      </ThemeProvider>
-    </TrackingProvider>
-  </Router>
-);
-
-describe('Plugin | Users and Permissions | RoleListPage', () => {
-  beforeAll(() => server.listen());
-
+describe('Roles – ListPage', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  afterEach(() => server.resetHandlers());
+  it('renders as expected with headers, actions and a table', async () => {
+    const { getByRole, queryByText, getByText } = render();
 
-  afterAll(() => server.close());
+    expect(queryByText('Loading content.')).toBeInTheDocument();
 
-  it('renders and matches the snapshot', () => {
-    useRBAC.mockImplementation(() => ({ isLoading: false, allowedActions: { canRead: true } }));
-    const history = createMemoryHistory();
-    const App = makeApp(history);
-    const {
-      container: { firstChild },
-    } = render(App);
+    expect(getByRole('heading', { name: 'Roles' })).toBeInTheDocument();
+    expect(getByText('List of roles')).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Add new role' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Search' })).toBeInTheDocument();
 
-    expect(firstChild).toMatchInlineSnapshot(`
-      .c22 {
-        border: 0;
-        -webkit-clip: rect(0 0 0 0);
-        clip: rect(0 0 0 0);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: 1px;
-      }
+    await waitForElementToBeRemoved(() => queryByText('Loading content.'));
 
-      .c9 {
-        font-weight: 600;
-        font-size: 2rem;
-        line-height: 1.25;
-        color: #32324d;
-      }
-
-      .c14 {
-        font-size: 0.75rem;
-        line-height: 1.33;
-        font-weight: 600;
-        line-height: 0;
-        color: #ffffff;
-      }
-
-      .c15 {
-        font-size: 1rem;
-        line-height: 1.5;
-        color: #666687;
-      }
-
-      .c36 {
-        font-weight: 500;
-        font-size: 1rem;
-        line-height: 1.25;
-        color: #666687;
-        text-align: center;
-      }
-
-      .c1 {
-        padding-bottom: 56px;
-      }
-
-      .c4 {
-        background: #f6f6f9;
-        padding-top: 40px;
-        padding-right: 56px;
-        padding-bottom: 40px;
-        padding-left: 56px;
-      }
-
-      .c6 {
-        min-width: 0;
-      }
-
-      .c10 {
-        background: #4945ff;
-        padding: 8px;
-        padding-right: 16px;
-        padding-left: 16px;
-        border-radius: 4px;
-        border-color: #4945ff;
-        border: 1px solid #4945ff;
-        cursor: pointer;
-      }
-
-      .c16 {
-        padding-right: 56px;
-        padding-bottom: 16px;
-        padding-left: 56px;
-      }
-
-      .c19 {
-        background: #ffffff;
-        padding: 8px;
-        border-radius: 4px;
-        border-color: #dcdce4;
-        border: 1px solid #dcdce4;
-        width: 2rem;
-        height: 2rem;
-        cursor: pointer;
-      }
-
-      .c23 {
-        color: #32324d;
-      }
-
-      .c25 {
-        -webkit-flex-shrink: 0;
-        -ms-flex-negative: 0;
-        flex-shrink: 0;
-      }
-
-      .c27 {
-        padding-right: 56px;
-        padding-left: 56px;
-      }
-
-      .c31 {
-        background: #ffffff;
-        padding: 64px;
-        border-radius: 4px;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-      }
-
-      .c33 {
-        padding-bottom: 24px;
-      }
-
-      .c35 {
-        padding-bottom: 16px;
-      }
-
-      .c5 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: justify;
-        -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
-      }
-
-      .c7 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-      }
-
-      .c11 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        gap: 8px;
-      }
-
-      .c17 {
-        -webkit-align-items: flex-start;
-        -webkit-box-align: flex-start;
-        -ms-flex-align: flex-start;
-        align-items: flex-start;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: justify;
-        -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
-      }
-
-      .c18 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-
-      .c20 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-      }
-
-      .c26 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-flex-shrink: 0;
-        -ms-flex-negative: 0;
-        flex-shrink: 0;
-        -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-
-      .c28 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: space-around;
-        -webkit-justify-content: space-around;
-        -ms-flex-pack: space-around;
-        justify-content: space-around;
-      }
-
-      .c32 {
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c24 path {
-        fill: #32324d;
-      }
-
-      .c12 {
-        position: relative;
-        outline: none;
-      }
-
-      .c12 > svg {
-        height: 12px;
-        width: 12px;
-      }
-
-      .c12 > svg > g,
-      .c12 > svg path {
-        fill: #ffffff;
-      }
-
-      .c12[aria-disabled='true'] {
-        pointer-events: none;
-      }
-
-      .c12:after {
-        -webkit-transition-property: all;
-        transition-property: all;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -4px;
-        bottom: -4px;
-        left: -4px;
-        right: -4px;
-        border: 2px solid transparent;
-      }
-
-      .c12:focus-visible {
-        outline: none;
-      }
-
-      .c12:focus-visible:after {
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -5px;
-        bottom: -5px;
-        left: -5px;
-        right: -5px;
-        border: 2px solid #4945ff;
-      }
-
-      .c13 {
-        height: 2rem;
-      }
-
-      .c13 svg {
-        height: 0.75rem;
-        width: auto;
-      }
-
-      .c13[aria-disabled='true'] {
-        border: 1px solid #dcdce4;
-        background: #eaeaef;
-      }
-
-      .c13[aria-disabled='true'] .c8 {
-        color: #666687;
-      }
-
-      .c13[aria-disabled='true'] svg > g,.c13[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
-      .c13[aria-disabled='true']:active {
-        border: 1px solid #dcdce4;
-        background: #eaeaef;
-      }
-
-      .c13[aria-disabled='true']:active .c8 {
-        color: #666687;
-      }
-
-      .c13[aria-disabled='true']:active svg > g,.c13[aria-disabled='true']:active svg path {
-        fill: #666687;
-      }
-
-      .c13:hover {
-        border: 1px solid #7b79ff;
-        background: #7b79ff;
-      }
-
-      .c13:active {
-        border: 1px solid #4945ff;
-        background: #4945ff;
-      }
-
-      .c13 svg > g,
-      .c13 svg path {
-        fill: #ffffff;
-      }
-
-      .c30 {
-        -webkit-animation: gzYjWD 1s infinite linear;
-        animation: gzYjWD 1s infinite linear;
-        will-change: transform;
-      }
-
-      .c34 svg {
-        height: 5.5rem;
-      }
-
-      .c21 svg > g,
-      .c21 svg path {
-        fill: #8e8ea9;
-      }
-
-      .c21:hover svg > g,
-      .c21:hover svg path {
-        fill: #666687;
-      }
-
-      .c21:active svg > g,
-      .c21:active svg path {
-        fill: #a5a5ba;
-      }
-
-      .c21[aria-disabled='true'] svg path {
-        fill: #666687;
-      }
-
-      .c0 {
-        display: grid;
-        grid-template-columns: 1fr;
-      }
-
-      .c2 {
-        overflow-x: hidden;
-      }
-
-      .c3:focus-visible {
-        outline: none;
-      }
-
-      .c29 {
-        height: 100vh;
-      }
-
-      <div
-        class="c0"
-      >
-        <div
-          class="c1 c2"
-        >
-          <main
-            aria-busy="true"
-            aria-labelledby="main-content-title"
-            class="c3"
-            id="main-content"
-            tabindex="-1"
-          >
-            <div
-              style="height: 0px;"
-            >
-              <div
-                class="c4"
-                data-strapi-header="true"
-              >
-                <div
-                  class="c5"
-                >
-                  <div
-                    class="c6 c7"
-                  >
-                    <h1
-                      class="c8 c9"
-                    >
-                      Roles
-                    </h1>
-                  </div>
-                  <button
-                    aria-disabled="false"
-                    class="c10 c11 c12 c13"
-                    type="button"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class=""
-                    >
-                      <svg
-                        fill="none"
-                        height="1rem"
-                        viewBox="0 0 24 24"
-                        width="1rem"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M24 13.604a.3.3 0 0 1-.3.3h-9.795V23.7a.3.3 0 0 1-.3.3h-3.21a.3.3 0 0 1-.3-.3v-9.795H.3a.3.3 0 0 1-.3-.3v-3.21a.3.3 0 0 1 .3-.3h9.795V.3a.3.3 0 0 1 .3-.3h3.21a.3.3 0 0 1 .3.3v9.795H23.7a.3.3 0 0 1 .3.3v3.21Z"
-                          fill="#212134"
-                        />
-                      </svg>
-                    </div>
-                    <span
-                      class="c8 c14"
-                    >
-                      Add new role
-                    </span>
-                  </button>
-                </div>
-                <p
-                  class="c8 c15"
-                >
-                  List of roles
-                </p>
-              </div>
-            </div>
-            <div
-              class="c16 c17"
-            >
-              <div
-                class="c18"
-                wrap="wrap"
-              >
-                <span>
-                  <button
-                    aria-disabled="false"
-                    aria-labelledby=":r0:"
-                    class="c19 c20 c12 c21"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="c22"
-                    >
-                      Search
-                    </span>
-                    <svg
-                      aria-hidden="true"
-                      class="c23 c24"
-                      fill="none"
-                      focusable="false"
-                      height="1rem"
-                      viewBox="0 0 24 24"
-                      width="1rem"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="m23.813 20.163-5.3-5.367a9.792 9.792 0 0 0 1.312-4.867C19.825 4.455 15.375 0 9.913 0 4.45 0 0 4.455 0 9.929c0 5.473 4.45 9.928 9.912 9.928a9.757 9.757 0 0 0 5.007-1.4l5.275 5.35a.634.634 0 0 0 .913 0l2.706-2.737a.641.641 0 0 0 0-.907ZM9.91 3.867c3.338 0 6.05 2.718 6.05 6.061s-2.712 6.061-6.05 6.061c-3.337 0-6.05-2.718-6.05-6.06 0-3.344 2.713-6.062 6.05-6.062Z"
-                        fill="#32324D"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-              <div
-                class="c25 c26"
-                wrap="wrap"
-              />
-            </div>
-            <div
-              class="c27"
-            >
-              <div
-                class="c28 c29"
-                data-testid="loader"
-              >
-                <div
-                  aria-live="assertive"
-                  role="alert"
-                >
-                  <div
-                    class="c22"
-                  >
-                    Loading content.
-                  </div>
-                  <img
-                    aria-hidden="true"
-                    class="c30"
-                    src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
-                  />
-                </div>
-              </div>
-              <div
-                class="c31 c32"
-              >
-                <div
-                  aria-hidden="true"
-                  class="c33 c34"
-                >
-                  <svg
-                    fill="none"
-                    height="1rem"
-                    viewBox="0 0 216 120"
-                    width="10rem"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <g
-                      clip-path="url(#EmptyDocuments_svg__a)"
-                      opacity="0.84"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M189.25 19.646a7.583 7.583 0 0 1 0 15.166h-43.333a7.583 7.583 0 0 1 0 15.167h23.833a7.583 7.583 0 0 1 0 15.167h-11.022c-5.28 0-9.561 3.395-9.561 7.583 0 1.956 1.063 3.782 3.19 5.48 2.017 1.608 4.824 1.817 7.064 3.096a7.583 7.583 0 0 1-3.754 14.174H65.75a7.583 7.583 0 0 1 0-15.166H23.5a7.583 7.583 0 1 1 0-15.167h43.333a7.583 7.583 0 1 0 0-15.167H39.75a7.583 7.583 0 1 1 0-15.166h43.333a7.583 7.583 0 0 1 0-15.167H189.25Zm0 30.333a7.583 7.583 0 1 1 0 15.166 7.583 7.583 0 0 1 0-15.166Z"
-                        fill="#D9D8FF"
-                        fill-opacity="0.8"
-                        fill-rule="evenodd"
-                      />
-                      <path
-                        clip-rule="evenodd"
-                        d="m132.561 19.646 10.077 73.496.906 7.374a4.334 4.334 0 0 1-3.773 4.829l-63.44 7.789a4.333 4.333 0 0 1-4.83-3.772l-9.767-79.547a2.166 2.166 0 0 1 1.91-2.417l5.262-.59 63.655-7.162ZM73.162 26.33l4.97-.557-4.97.557Z"
-                        fill="#fff"
-                        fill-rule="evenodd"
-                      />
-                      <path
-                        d="m73.162 26.33 4.97-.557m54.429-6.127 10.077 73.496.906 7.374a4.334 4.334 0 0 1-3.773 4.829l-63.44 7.789a4.333 4.333 0 0 1-4.83-3.772l-9.767-79.547a2.166 2.166 0 0 1 1.91-2.417l5.262-.59 63.655-7.162Z"
-                        stroke="#7B79FF"
-                        stroke-width="2.5"
-                      />
-                      <path
-                        clip-rule="evenodd"
-                        d="m129.818 24.27 9.122 66.608.82 6.682c.264 2.153-1.246 4.11-3.373 4.371l-56.812 6.976c-2.127.261-4.066-1.272-4.33-3.425l-8.83-71.908a2.167 2.167 0 0 1 1.887-2.415l7.028-.863"
-                        fill="#F0F0FF"
-                        fill-rule="evenodd"
-                      />
-                      <path
-                        clip-rule="evenodd"
-                        d="M135.331 5.833H85.978a2.97 2.97 0 0 0-2.107.873A2.97 2.97 0 0 0 83 8.813v82.333c0 .823.333 1.567.872 2.106a2.97 2.97 0 0 0 2.107.873h63.917a2.97 2.97 0 0 0 2.106-.873 2.97 2.97 0 0 0 .873-2.106V23.367a2.98 2.98 0 0 0-.873-2.107L137.437 6.705a2.98 2.98 0 0 0-2.106-.872Z"
-                        fill="#fff"
-                        fill-rule="evenodd"
-                        stroke="#7B79FF"
-                        stroke-width="2.5"
-                      />
-                      <path
-                        d="M135.811 7.082v12.564a3.25 3.25 0 0 0 3.25 3.25h8.595M94.644 78.146h28.167m-28.167-55.25h28.167-28.167Zm0 13h46.584-46.584Zm0 14.083h46.584-46.584Zm0 14.084h46.584-46.584Z"
-                        stroke="#7B79FF"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2.5"
-                      />
-                    </g>
-                    <defs>
-                      <clippath
-                        id="EmptyDocuments_svg__a"
-                      >
-                        <path
-                          d="M0 0h216v120H0z"
-                          fill="#fff"
-                        />
-                      </clippath>
-                    </defs>
-                  </svg>
-                </div>
-                <div
-                  class="c35"
-                >
-                  <p
-                    class="c8 c36"
-                  >
-                    You don't have any roles yet.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </main>
-        </div>
-      </div>
-    `);
+    expect(getByRole('grid')).toBeInTheDocument();
+    expect(getByRole('gridcell', { name: 'Authenticated' })).toBeInTheDocument();
+    expect(getByRole('gridcell', { name: 'Public' })).toBeInTheDocument();
   });
 
-  it('should show a loader when fetching data', () => {
-    const history = createMemoryHistory();
-    const App = makeApp(history);
-    render(App);
+  it('should direct me to the new user page when I press the add a new role button', async () => {
+    const { getByRole } = render();
 
-    expect(screen.getByTestId('loader')).toBeInTheDocument();
+    await userEvent.click(getByRole('button', { name: 'Add new role' }));
+
+    expect(testLocation.pathname).toBe('/settings/users-permissions/roles/new');
   });
 
-  it('should show a list of roles', async () => {
-    const history = createMemoryHistory();
-    const App = makeApp(history);
-    render(App);
+  it('should direct me to the edit view of a selected role if I click the edit role button', async () => {
+    const { getByRole, queryByText } = render();
 
-    await waitFor(() => {
-      expect(screen.getByText('Authenticated')).toBeInTheDocument();
-      expect(screen.getByText('Public')).toBeInTheDocument();
-    });
+    await waitForElementToBeRemoved(() => queryByText('Loading content.'));
+
+    await userEvent.click(getByRole('button', { name: 'Edit Authenticated', hidden: true }));
+
+    expect(testLocation.pathname).toBe('/settings/users-permissions/roles/1');
   });
 });
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/server.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/server.js
deleted file mode 100644
index dde6e1ef0a..0000000000
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/server.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-
-const handlers = [
-  rest.get('*/roles', (req, res, ctx) => {
-    return res(
-      ctx.delay(1000),
-      ctx.status(200),
-      ctx.json({
-        roles: [
-          {
-            id: 1,
-            name: 'Authenticated',
-            description: 'Default role given to authenticated user.',
-            type: 'authenticated',
-            nb_users: 0,
-          },
-          {
-            id: 2,
-            name: 'Public',
-            description: 'Default role given to unauthenticated user.',
-            type: 'public',
-            nb_users: 0,
-          },
-        ],
-      })
-    );
-  }),
-];
-
-const server = setupServer(...handlers);
-
-export default server;
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/utils/api.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/utils/api.js
index 9c4d2f22ca..67fb5e706e 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/utils/api.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/utils/api.js
@@ -15,7 +15,7 @@ export const fetchData = async (toggleNotification, notifyStatus) => {
       message: { id: 'notification.error' },
     });
 
-    throw new Error('error');
+    throw new Error(err);
   }
 };
 
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedCreatePage/index.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedCreatePage.js
similarity index 74%
rename from packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedCreatePage/index.js
rename to packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedCreatePage.js
index 2ed1c26346..be2a0d1441 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedCreatePage/index.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedCreatePage.js
@@ -2,8 +2,9 @@ import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
 
-import pluginPermissions from '../../../permissions';
-import RolesCreatePage from '../CreatePage';
+import pluginPermissions from '../../permissions';
+
+import RolesCreatePage from './CreatePage';
 
 const ProtectedRolesCreatePage = () => (
   <CheckPagePermissions permissions={pluginPermissions.createRole}>
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedEditPage/index.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedEditPage.js
similarity index 75%
rename from packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedEditPage/index.js
rename to packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedEditPage.js
index 01d37685aa..c3e0691b07 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedEditPage/index.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedEditPage.js
@@ -2,8 +2,9 @@ import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
 
-import pluginPermissions from '../../../permissions';
-import RolesEditPage from '../EditPage';
+import pluginPermissions from '../../permissions';
+
+import RolesEditPage from './EditPage';
 
 const ProtectedRolesEditPage = () => (
   <CheckPagePermissions permissions={pluginPermissions.updateRole}>
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedListPage/index.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedListPage.js
similarity index 76%
rename from packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedListPage/index.js
rename to packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedListPage.js
index 6476f6f5a5..867a72be07 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedListPage/index.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ProtectedListPage.js
@@ -2,8 +2,9 @@ import React from 'react';
 
 import { CheckPagePermissions } from '@strapi/helper-plugin';
 
-import pluginPermissions from '../../../permissions';
-import RolesListPage from '../ListPage';
+import pluginPermissions from '../../permissions';
+
+import RolesListPage from './ListPage';
 
 const ProtectedRolesListPage = () => {
   return (
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/utils/schema.js b/packages/plugins/users-permissions/admin/src/pages/Roles/constants.js
similarity index 78%
rename from packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/utils/schema.js
rename to packages/plugins/users-permissions/admin/src/pages/Roles/constants.js
index c3bcd9cf28..51bd2c31b3 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/utils/schema.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/constants.js
@@ -1,9 +1,7 @@
 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;
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/tests/CreatePage.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/tests/CreatePage.test.js
new file mode 100644
index 0000000000..032064f349
--- /dev/null
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/tests/CreatePage.test.js
@@ -0,0 +1,108 @@
+import React from 'react';
+
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { NotificationsProvider } from '@strapi/helper-plugin';
+import { fireEvent, render as renderRTL, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter, Switch, Route } from 'react-router-dom';
+
+import pluginId from '../../../pluginId';
+import RolesCreatePage from '../CreatePage';
+
+jest.mock('@strapi/helper-plugin', () => ({
+  ...jest.requireActual('@strapi/helper-plugin'),
+  useOverlayBlocker: jest.fn(() => ({ lockApp: jest.fn(), unlockApp: jest.fn() })),
+}));
+
+const render = () => ({
+  ...renderRTL(<Route path={`/settings/${pluginId}/roles/new`} component={RolesCreatePage} />, {
+    wrapper({ children }) {
+      const client = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+          },
+        },
+      });
+
+      return (
+        <IntlProvider locale="en" messages={{}} textComponent="span">
+          <ThemeProvider theme={lightTheme}>
+            <QueryClientProvider client={client}>
+              <NotificationsProvider>
+                <MemoryRouter initialEntries={[`/settings/${pluginId}/roles/new`]}>
+                  <Switch>{children}</Switch>
+                </MemoryRouter>
+              </NotificationsProvider>
+            </QueryClientProvider>
+          </ThemeProvider>
+        </IntlProvider>
+      );
+    },
+  }),
+  user: userEvent.setup(),
+});
+
+describe('Roles – CreatePage', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it('renders correctly', async () => {
+    const { getByRole, user } = render();
+
+    expect(getByRole('heading', { name: 'Create a role' })).toBeInTheDocument();
+    expect(getByRole('heading', { name: 'Role details' })).toBeInTheDocument();
+
+    /**
+     * This means the `usePlugins` hook has finished fetching
+     */
+    await waitFor(() => expect(getByRole('heading', { name: 'Permissions' })).toBeInTheDocument());
+
+    expect(getByRole('heading', { name: 'Advanced settings' })).toBeInTheDocument();
+
+    expect(getByRole('button', { name: 'Save' })).toBeInTheDocument();
+
+    expect(getByRole('textbox', { name: 'Name' })).toBeInTheDocument();
+    expect(getByRole('textbox', { name: 'Description' })).toBeInTheDocument();
+
+    await user.click(getByRole('button', { name: 'Address' }));
+
+    expect(getByRole('region', { name: 'Address' })).toBeInTheDocument();
+
+    expect(getByRole('checkbox', { name: 'Select all' })).toBeInTheDocument();
+    expect(getByRole('checkbox', { name: 'create' })).toBeInTheDocument();
+  });
+
+  it('will show an error if the user does not fill the name or description field', async () => {
+    const { getByRole, getAllByText } = render();
+
+    await waitFor(() => expect(getByRole('heading', { name: 'Permissions' })).toBeInTheDocument());
+
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+
+    await waitFor(() =>
+      expect(getByRole('textbox', { name: 'Name' })).toHaveAttribute('aria-invalid', 'true')
+    );
+
+    expect(getByRole('textbox', { name: 'Description' })).toHaveAttribute('aria-invalid', 'true');
+
+    expect(getAllByText('Invalid value')).toHaveLength(2);
+  });
+
+  it('can create a new role and show a notification', async () => {
+    const { getByRole, getByText, user } = render();
+
+    await waitFor(() => expect(getByRole('heading', { name: 'Permissions' })).toBeInTheDocument());
+
+    await user.type(getByRole('textbox', { name: 'Name' }), 'Test role');
+    await user.type(getByRole('textbox', { name: 'Description' }), 'This is a test role');
+
+    await user.click(getByRole('button', { name: 'Address' }));
+    await user.click(getByRole('checkbox', { name: 'create' }));
+
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+
+    await waitFor(() => expect(getByText('Role created')).toBeInTheDocument());
+  });
+});
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/tests/EditPage.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/tests/EditPage.test.js
new file mode 100644
index 0000000000..a0d2cf6846
--- /dev/null
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/tests/EditPage.test.js
@@ -0,0 +1,155 @@
+import React from 'react';
+
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { NotificationsProvider } from '@strapi/helper-plugin';
+import {
+  fireEvent,
+  render as renderRTL,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter, Switch, Route } from 'react-router-dom';
+
+import pluginId from '../../../pluginId';
+import RolesEditPage from '../EditPage';
+
+jest.mock('@strapi/helper-plugin', () => ({
+  ...jest.requireActual('@strapi/helper-plugin'),
+  useOverlayBlocker: jest.fn(() => ({ lockApp: jest.fn(), unlockApp: jest.fn() })),
+}));
+
+const render = () => ({
+  ...renderRTL(<Route path={`/settings/${pluginId}/roles/:id`} component={RolesEditPage} />, {
+    wrapper({ children }) {
+      const client = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+          },
+        },
+      });
+
+      return (
+        <IntlProvider locale="en" messages={{}} textComponent="span">
+          <ThemeProvider theme={lightTheme}>
+            <QueryClientProvider client={client}>
+              <NotificationsProvider>
+                <MemoryRouter initialEntries={[`/settings/${pluginId}/roles/1`]}>
+                  <Switch>{children}</Switch>
+                </MemoryRouter>
+              </NotificationsProvider>
+            </QueryClientProvider>
+          </ThemeProvider>
+        </IntlProvider>
+      );
+    },
+  }),
+  user: userEvent.setup(),
+});
+
+describe('Roles – EditPage', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it('renders correctly', async () => {
+    const { getByTestId, getByRole, user } = render();
+
+    await waitForElementToBeRemoved(() => getByTestId('loader'));
+
+    expect(getByRole('link', { name: 'Back' })).toBeInTheDocument();
+
+    expect(getByRole('heading', { name: 'Authenticated' })).toBeInTheDocument();
+    expect(getByRole('heading', { name: 'Role details' })).toBeInTheDocument();
+    expect(getByRole('heading', { name: 'Permissions' })).toBeInTheDocument();
+    expect(getByRole('heading', { name: 'Advanced settings' })).toBeInTheDocument();
+
+    expect(getByRole('button', { name: 'Save' })).toBeInTheDocument();
+
+    expect(getByRole('textbox', { name: 'Name' })).toBeInTheDocument();
+    expect(getByRole('textbox', { name: 'Description' })).toBeInTheDocument();
+
+    await user.click(getByRole('button', { name: 'Address' }));
+
+    expect(getByRole('region', { name: 'Address' })).toBeInTheDocument();
+
+    expect(getByRole('checkbox', { name: 'Select all' })).toBeInTheDocument();
+    expect(getByRole('checkbox', { name: 'create' })).toBeInTheDocument();
+  });
+
+  it('will show an error if the user does not fill the name field', async () => {
+    const { getByRole, user, getByTestId, getByText } = render();
+
+    await waitForElementToBeRemoved(() => getByTestId('loader'));
+
+    await user.clear(getByRole('textbox', { name: 'Name' }));
+
+    await user.click(getByRole('button', { name: 'Save' }));
+
+    expect(getByRole('textbox', { name: 'Name' })).toHaveAttribute('aria-invalid', 'true');
+    expect(getByText('Invalid value')).toBeInTheDocument();
+  });
+
+  it('will show an error if the user does not fill out the description field', async () => {
+    const { getByRole, user, getByTestId, getByText } = render();
+
+    await waitForElementToBeRemoved(() => getByTestId('loader'));
+
+    await user.clear(getByRole('textbox', { name: 'Description' }));
+
+    await user.click(getByRole('button', { name: 'Save' }));
+
+    expect(getByRole('textbox', { name: 'Description' })).toHaveAttribute('aria-invalid', 'true');
+    expect(getByText('Invalid value')).toBeInTheDocument();
+  });
+
+  it("can update a role's name and description", async () => {
+    const { getByRole, user, getByTestId, getByText } = render();
+
+    await waitForElementToBeRemoved(() => getByTestId('loader'));
+
+    await user.type(getByRole('textbox', { name: 'Name' }), 'test');
+    await user.type(getByRole('textbox', { name: 'Description' }), 'testing');
+
+    /**
+     * @note user.click will not trigger the form.
+     */
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+
+    await waitFor(() => expect(getByText('Role edited')).toBeInTheDocument());
+  });
+
+  it("can update a role's permissions", async () => {
+    const { getByRole, user, getByText, getByTestId } = render();
+
+    await waitForElementToBeRemoved(() => getByTestId('loader'));
+
+    await user.click(getByRole('button', { name: 'Address' }));
+
+    await user.click(getByRole('checkbox', { name: 'create' }));
+
+    /**
+     * @note user.click will not trigger the form.
+     */
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+
+    await waitFor(() => expect(getByText('Role edited')).toBeInTheDocument());
+  });
+
+  it('will update the Advanced Settings panel when you click on the cog icon of a specific permission', async () => {
+    const { getByRole, user, getByText, getByTestId } = render();
+
+    await waitForElementToBeRemoved(() => getByTestId('loader'));
+
+    await user.click(getByRole('button', { name: 'Address' }));
+
+    await user.hover(getByRole('checkbox', { name: 'create' }));
+
+    await user.click(getByRole('button', { name: /Show bound route/i }));
+
+    expect(getByRole('heading', { name: 'Bound route to address .create' })).toBeInTheDocument();
+    expect(getByText('POST')).toBeInTheDocument();
+    expect(getByText('/addresses')).toBeInTheDocument();
+  });
+});
diff --git a/packages/plugins/users-permissions/jest.config.front.js b/packages/plugins/users-permissions/jest.config.front.js
index c4f1adbda6..3e8054a997 100644
--- a/packages/plugins/users-permissions/jest.config.front.js
+++ b/packages/plugins/users-permissions/jest.config.front.js
@@ -3,4 +3,5 @@
 module.exports = {
   preset: '../../../jest-preset.front.js',
   displayName: 'Users & Permissions plugin',
+  setupFilesAfterEnv: ['./tests/setup.js'],
 };
diff --git a/packages/plugins/users-permissions/package.json b/packages/plugins/users-permissions/package.json
index 31643adacd..75f4d3d237 100644
--- a/packages/plugins/users-permissions/package.json
+++ b/packages/plugins/users-permissions/package.json
@@ -54,7 +54,6 @@
     "@testing-library/dom": "9.2.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "history": "^4.9.0",
     "msw": "1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/packages/plugins/users-permissions/tests/server.js b/packages/plugins/users-permissions/tests/server.js
new file mode 100644
index 0000000000..bdc45ba202
--- /dev/null
+++ b/packages/plugins/users-permissions/tests/server.js
@@ -0,0 +1,191 @@
+'use strict';
+
+const { setupServer } = require('msw/node');
+const { rest } = require('msw');
+const pluginId = require('../admin/src/pluginId').default;
+
+const handlers = [
+  // Mock get role route
+  rest.get(`*/${pluginId}/roles/:roleId`, (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        role: {
+          id: req.params.roleId,
+          name: 'Authenticated',
+          description: 'Default role given to authenticated user.',
+          type: 'authenticated',
+          createdAt: '2021-09-08T16:26:18.061Z',
+          updatedAt: '2021-09-08T16:26:18.061Z',
+          permissions: {
+            'api::address': {
+              controllers: {
+                address: {
+                  create: {
+                    enabled: false,
+                    policy: '',
+                  },
+                },
+              },
+            },
+          },
+        },
+      })
+    );
+  }),
+
+  // Mock edit role route
+  rest.put(`*/${pluginId}/roles/:roleId`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json({ ok: true }));
+  }),
+
+  // Mock create role route
+  rest.post(`*/${pluginId}/roles`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json({ ok: true }));
+  }),
+
+  // Mock get all routes route
+  rest.get(`*/${pluginId}/routes`, (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        routes: {
+          'api::address': [
+            {
+              method: 'POST',
+              path: '/addresses',
+              handler: 'address.create',
+              config: {
+                policies: [],
+                auth: {
+                  scope: 'api::address.address.create',
+                },
+              },
+              info: {
+                apiName: 'address',
+                type: 'content-api',
+              },
+            },
+          ],
+        },
+      })
+    );
+  }),
+
+  // Mock permissions route
+  rest.get(`*/${pluginId}/permissions`, (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        permissions: {
+          'api::address': {
+            controllers: {
+              address: {
+                create: {
+                  enabled: false,
+                  policy: '',
+                },
+              },
+            },
+          },
+        },
+      })
+    );
+  }),
+
+  rest.get('*/roles', (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        roles: [
+          {
+            id: 1,
+            name: 'Authenticated',
+            description: 'Default role given to authenticated user.',
+            type: 'authenticated',
+            nb_users: 0,
+          },
+          {
+            id: 2,
+            name: 'Public',
+            description: 'Default role given to unauthenticated user.',
+            type: 'public',
+            nb_users: 0,
+          },
+        ],
+      })
+    );
+  }),
+
+  rest.get('*/providers', (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        email: { enabled: true, icon: 'envelope' },
+        discord: {
+          callback: '/auth/discord/callback',
+          enabled: false,
+          icon: 'discord',
+          key: '',
+          scope: ['identify', 'email'],
+          secret: '',
+        },
+      })
+    );
+  }),
+
+  rest.get('*/email-templates', (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        email_confirmation: {
+          display: 'Email.template.email_confirmation',
+          options: {
+            from: {
+              email: 'mochoko@strapi.io',
+              name: 'Administration Panel',
+            },
+            message: 'Thank you for registering. Please click on the link below.',
+            object: 'Account confirmation',
+            response_email: '',
+          },
+        },
+        reset_password: {
+          display: 'Email.template.reset_password',
+          options: {
+            from: {
+              email: 'mochoko@strapi.io',
+              name: 'Administration Panel',
+            },
+            message: 'We heard that you lost your password. Sorry about that!',
+            object: 'Reset password',
+            response_email: '',
+          },
+        },
+      })
+    );
+  }),
+
+  rest.get('*/advanced', (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        roles: [{ name: 'Authenticated', type: 'authenticated' }],
+        settings: {
+          allow_register: false,
+          default_role: 'authenticated',
+          email_confirmation: false,
+          email_confirmation_redirection: '',
+          email_reset_password: 'https://cat-bounce.com/',
+          unique_email: false,
+        },
+      })
+    );
+  }),
+];
+
+const server = setupServer(...handlers);
+
+module.exports = {
+  server,
+};
diff --git a/packages/plugins/users-permissions/tests/setup.js b/packages/plugins/users-permissions/tests/setup.js
new file mode 100644
index 0000000000..2727d42e3a
--- /dev/null
+++ b/packages/plugins/users-permissions/tests/setup.js
@@ -0,0 +1,15 @@
+'use strict';
+
+const { server } = require('./server');
+
+beforeAll(() => {
+  server.listen();
+});
+
+afterEach(() => {
+  server.resetHandlers();
+});
+
+afterAll(() => {
+  server.close();
+});
diff --git a/yarn.lock b/yarn.lock
index e81ba5ce41..f5f8a4d1e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8514,7 +8514,6 @@ __metadata:
     bcryptjs: 2.4.3
     formik: 2.4.0
     grant-koa: 5.4.8
-    history: ^4.9.0
     immer: 9.0.19
     jsonwebtoken: 9.0.0
     jwk-to-pem: 2.0.5