add list of roles in a table

packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js

@@ -1,10 +1,33 @@
 import React from 'react';
-import { Button, HeaderLayout, Layout, Main } from '@strapi/parts';
-import { AddIcon } from '@strapi/icons';
+import {
+  Button,
+  ContentLayout,
+  HeaderLayout,
+  IconButton,
+  Layout,
+  Main,
+  Table,
+  Tbody,
+  Text,
+  Tr,
+  Td,
+  Thead,
+  Th,
+  TableLabel,
+} from '@strapi/parts';
+import { AddIcon, EditIcon } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { useTracking, SettingsPageTitle, CheckPermissions } from '@strapi/helper-plugin';
+import {
+  useTracking,
+  SettingsPageTitle,
+  CheckPermissions,
+  LoadingIndicatorPage,
+  useNotification,
+} from '@strapi/helper-plugin';
 import { useHistory } from 'react-router-dom';
+import { useQuery } from 'react-query';
 
+import { fetchData } from './utils/api';
 import { getTrad } from '../../../utils';
 import pluginId from '../../../pluginId';
 import permissions from '../../../permissions';
@@ -13,6 +36,15 @@ const RoleListPage = () => {
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
   const { push } = useHistory();
+  const toggleNotification = useNotification();
+
+  const {
+    isLoading: isLoadingForData,
+    data: { roles },
+    isFetching,
+  } = useQuery('get-roles', () => fetchData(toggleNotification), { initialData: {} });
+
+  const isLoading = isLoadingForData || isFetching;
 
   const handleNewRoleClick = () => {
     trackUsage('willCreateRole');
@@ -24,6 +56,10 @@ const RoleListPage = () => {
     defaultMessage: 'Roles',
   });
 
+  const handleClickEdit = id => {
+    push(`/settings/${pluginId}/roles/${id}`);
+  };
+
   return (
     <Layout>
       <SettingsPageTitle name={pageTitle} />
@@ -55,6 +91,64 @@ const RoleListPage = () => {
             </CheckPermissions>
           }
         />
+        {isLoading ? (
+          <LoadingIndicatorPage />
+        ) : (
+          <ContentLayout>
+            <Table colCount={4}>
+              <Thead>
+                <Tr>
+                  <Th>
+                    <TableLabel>
+                      {formatMessage({ id: getTrad('Roles.name'), defaultMessage: 'Name' })}
+                    </TableLabel>
+                  </Th>
+                  <Th>
+                    <TableLabel>
+                      {formatMessage({
+                        id: getTrad('Roles.descriptions'),
+                        defaultMessage: 'Description',
+                      })}
+                    </TableLabel>
+                  </Th>
+                  <Th>
+                    <TableLabel>
+                      {formatMessage({
+                        id: getTrad('Roles.users'),
+                        defaultMessage: 'Users',
+                      })}
+                    </TableLabel>
+                  </Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {roles.map(role => (
+                  <Tr key={role.name}>
+                    <Td width="20%">
+                      <Text>{role.name}</Text>
+                    </Td>
+                    <Td width="50%">
+                      <Text>{role.description}</Text>
+                    </Td>
+                    <Td width="30%">
+                      <Text>{role.nb_users} users</Text>
+                    </Td>
+                    <Td>
+                      <CheckPermissions permissions={permissions.updateRole}>
+                        <IconButton
+                          onClick={() => handleClickEdit(role.id)}
+                          noBorder
+                          icon={<EditIcon />}
+                          label="Edit"
+                        />
+                      </CheckPermissions>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </ContentLayout>
+        )}
       </Main>
     </Layout>
   );

packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/server.js

@@ -0,0 +1,33 @@
+import { setupServer } from 'msw/node';
+import { rest } from 'msw';
+
+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;

packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/utils/api.js

@@ -0,0 +1,17 @@
+import { getRequestURL, axiosInstance } from '../../../../utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export const fetchData = async toggleNotification => {
+  try {
+    const { data } = await axiosInstance.get(getRequestURL('roles'));
+
+    return data;
+  } catch (err) {
+    toggleNotification({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    throw new Error('error');
+  }
+};