feat: roles data & delete alert.

src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
-import { defaultTo, sumBy, isEmpty } from 'lodash';
 
 import 'style/pages/Preferences/Roles/Form.scss';
 
@@ -32,6 +32,9 @@ function RolesForm({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
+  // History context.
+  const history = useHistory();
+
   const {
     isNewMode,
     createRolePermissionMutate,
@@ -67,6 +70,7 @@ function RolesForm({
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
+      history.push('/preferences/users');
     };
 
     const onError = (errors) => {

src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useParams } from 'react-router-dom';
 import RolesForm from './RolesForm';
 import { RolesFormProvider } from './RolesFormProvider';
 
@@ -6,8 +7,11 @@ import { RolesFormProvider } from './RolesFormProvider';
  * Roles Form page.
  */
 export default function RolesFormPage() {
+  const { id } = useParams();
+  const idInteger = parseInt(id, 10);
+
   return (
-    <RolesFormProvider roleId={undefined}>
+    <RolesFormProvider roleId={idInteger}>
       <RolesForm />
     </RolesFormProvider>
   );

src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js

@@ -31,8 +31,6 @@ function RolesFormProvider({ roleId, ...props }) {
     isFetching: isPermissionsSchemaFetching,
   } = usePermissionsSchema();
 
-  // const roleId = 6;
-
   const { data: permission, isLoading: isPermissionLoading } =
     useRolePermission(roleId, {
       enabled: !!roleId,

src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
+
 import intl from 'react-intl-universal';
 
 import { DataTable } from 'components';
@@ -6,6 +8,7 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
 import { useRolesTableColumns, ActionsMenu } from './components';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import { useRolesContext } from './RolesListProvider';
 
 import { compose } from 'utils';
 
@@ -16,23 +19,33 @@ function RolesDataTable({
   // #withAlertsActions
   openAlert,
 }) {
+  // History context.
+  const history = useHistory();
+
   const columns = useRolesTableColumns();
 
+  const { roles, isRolesFetching, isRolesLoading } = useRolesContext();
+
   const handleDeleteRole = ({ id }) => {
     openAlert('role-delete', { roleId: id });
   };
 
-  // const Data = [{ name: 'AH', description: 'Description' }];
+  const handleEditRole = ({ id }) => {
+    history.push(`/preferences/roles/${id}`);
+  };
+
   return (
     <DataTable
       columns={columns}
-      data={[]}
-      // loading={}
-      // progressBarLoading={}
+      data={roles}
+      loading={isRolesLoading}
+      headerLoading={isRolesFetching}
+      progressBarLoading={isRolesFetching}
       TableLoadingRenderer={TableSkeletonRows}
       ContextMenu={ActionsMenu}
       payload={{
         onDeleteRole: handleDeleteRole,
+        onEditRole: handleEditRole,
       }}
     />
   );

src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-// import {} from 'hooks/query';
+import { useRoles } from 'hooks/query';
 
 const RolesListContext = React.createContext();
 
@@ -9,8 +9,20 @@ const RolesListContext = React.createContext();
  * Roles list provider.
  */
 function RolesListProvider({ ...props }) {
+
+   // fetch roles list.
+  const {
+    data: roles,
+    isFetching: isRolesFetching,
+    isLoading: isRolesLoading,
+  } = useRoles();
+
   // Provider state.
-  const provider = {};
+  const provider = {
+    roles,
+    isRolesFetching,
+    isRolesLoading,
+  };
   return (
     <div
       className={classNames(

src/containers/Preferences/Users/Roles/RolesLanding/components.js

@@ -8,12 +8,16 @@ import { Icon, If } from 'components';
 /**
  * Context menu of roles.
  */
-export function ActionsMenu({ payload: { onDeleteRole }, row: { original } }) {
+export function ActionsMenu({
+  payload: { onDeleteRole, onEditRole },
+  row: { original },
+}) {
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="pen-18" />}
         text={intl.get('roles.edit_roles')}
+        onClick={safeCallback(onEditRole, original)}
       />
       <MenuDivider />
       <MenuItem
@@ -38,16 +42,16 @@ export function useRolesTableColumns() {
         Header: intl.get('roles.column.name'),
         accessor: 'name',
         className: 'name',
-        width: '100',
-        disableSortBy: true,
+        width: '80',
+        textOverview: true,
       },
       {
         id: 'description',
         Header: intl.get('roles.column.description'),
         accessor: 'description',
         className: 'description',
-        width: '120',
-        disableSortBy: true,
+        width: '180',
+        textOverview: true,
       },
     ],
     [],