feat(admin-ui): design the layout for api role management #327

plugins/admin/components/Roles/UiRoleListPage.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import MaterialTable from 'material-table'
 import { Paper } from '@material-ui/core'
 import UiRoleDetailPage from './UiRoleDetailPage'
@@ -9,16 +9,28 @@ import { useTranslation } from 'react-i18next'
 import GluuViewWrapper from '../../../../app/routes/Apps/Gluu/GluuViewWrapper'
 import GluuRibbon from '../../../../app/routes/Apps/Gluu/GluuRibbon'
 import applicationStyle from '../../../../app/routes/Apps/Gluu/styles/applicationstyle'
+import {
+  deleteRole,
+  getRoles,
+  setCurrentItem,
+} from '../../redux/actions/ApiRoleActions'
 import {
   hasPermission,
+  buildPayload,
   SCRIPT_READ,
   SCRIPT_WRITE,
 } from '../../../../app/utils/PermChecker'
 
-function UiRoleListPage({ apiRoles, permissions, loading }) {
+function UiRoleListPage({ apiRoles, permissions, loading, dispatch }) {
   const { t } = useTranslation()
   const myActions = []
+  const options = []
+  const userAction = {}
   const pageSize = localStorage.getItem('paggingSize') || 10
+  useEffect(() => {
+    buildPayload(userAction, 'ROLES', options)
+    dispatch(getRoles(userAction))
+  }, [])
 
   if (hasPermission(permissions, SCRIPT_READ)) {
     myActions.push((rowData) => ({
@@ -69,9 +81,9 @@ function UiRoleListPage({ apiRoles, permissions, loading }) {
             columns={[
               {
                 title: `${t('fields.name')}`,
-                field: 'name',
+                field: 'role',
                 width: '20%',
-                render: (rowData) => <Badge color="info">{rowData.name}</Badge>,
+                render: (rowData) => <Badge color="info">{rowData.role}</Badge>,
               },
               { title: `${t('fields.description')}`, field: 'description' },
             ]}

plugins/admin/components/Roles/roles.js

@@ -1,6 +1,6 @@
 export const roles = [
   {
-    name: 'api-admin',
+    role: 'api-admin',
     description:
       'This role allows a user to access all list and search features available. Not possible for this role to perform edition nor deletion',
     scopes: [
@@ -9,7 +9,7 @@ export const roles = [
     ],
   },
   {
-    name: 'api-viewer',
+    role: 'api-viewer',
     description:
       'This role allows a user to perform all possible actions on api objects',
     scopes: [
@@ -18,7 +18,7 @@ export const roles = [
     ],
   },
   {
-    name: 'api-editor',
+    role: 'api-editor',
     description:
       'This role allow a user to list, search, add and edit on all available objects excepts the configuration object which is critical for a running server',
     scopes: [
@@ -27,7 +27,7 @@ export const roles = [
     ],
   },
   {
-    name: 'api-manager',
+    role: 'api-manager',
     description:
       'This role allows a user to list, search, add, edit and delete all available objects include the configuration object(only in view mode). The user cannot edit nor delete the configuration object.',
     scopes: [

plugins/admin/plugin-metadata.js

@@ -11,6 +11,8 @@ import SettingsPage from './components/Settings/SettingsPage'
 import mauSaga from './redux/sagas/MauSaga'
 import scriptSaga from './redux/sagas/CustomScriptSaga'
 import licenseDetailsSaga from './redux/sagas/LicenseDetailsSaga'
+import apiRoleSaga from './redux/sagas/ApiRoleSaga'
+import apiPermissionSaga from './redux/sagas/ApiPermissionSaga'
 
 import mauReducer from './redux/reducers/MauReducer'
 import scriptReducer from './redux/reducers/CustomScriptReducer'
@@ -133,7 +135,13 @@ const pluginMetadata = {
     { name: 'apiPermissionReducer', reducer: apiPermissionReducer },
     { name: 'licenseDetailsReducer', reducer: licenseDetailsReducer },
   ],
-  sagas: [mauSaga(), scriptSaga(), licenseDetailsSaga()],
+  sagas: [
+    mauSaga(),
+    scriptSaga(),
+    licenseDetailsSaga(),
+    apiRoleSaga(),
+    apiPermissionSaga(),
+  ],
 }
 
 export default pluginMetadata

plugins/admin/redux/api/RoleApi.js

@@ -5,6 +5,9 @@ export default class RoleApi {
   getRoles = () => {
     return new Promise((resolve, reject) => {
       console.log('=============get roles')
+      this.api.getAdminuiRoles((error, data) => {
+        this.handleResponse(error, reject, resolve, data)
+      })
     })
   }
   getRole = (options) => {

plugins/admin/redux/reducers/ApiRoleReducer.js

@@ -13,11 +13,10 @@ import {
   RESET,
 } from '../actions/types'
 import reducerRegistry from '../../../../app/redux/reducers/ReducerRegistry'
-import roles from '../../components/Roles/roles'
 
 const INIT_STATE = {
-  items: roles,
-  loading: true,
+  items: [],
+  loading: false,
 }
 const reducerName = 'apiRoleReducer'
 

plugins/admin/redux/sagas/ApiRoleSaga.js

@@ -33,7 +33,7 @@ import { initAudit } from '../../../../app/redux/sagas/SagaUtils'
 function* newFunction() {
   const token = yield select((state) => state.authReducer.token.access_token)
   const issuer = yield select((state) => state.authReducer.issuer)
-  const api = new JansConfigApi.CustomScriptsApi(
+  const api = new JansConfigApi.AdminUIRoleApi(
     getClient(JansConfigApi, token, issuer),
   )
   return new RoleApi(api)