feat(admin-ui): design the layout for role-permission mapping #336

Author: syntrydy

.env

@@ -1,6 +1,6 @@
 BASE_PATH=/
 CONFIG_API_BASE_URL=https://admin-ui-test.gluu.org
 JANS_API_BASE_URL=https://jans-ui.jans.io
-API_BASE_URL=http://localhost:8080
+API_BASE_URL=http://localhost:8080/jans-config-api/admin-ui
 NPM_TOKEN=
-SESSION_TIMEOUT_IN_MINUTES=30
+SESSION_TIMEOUT_IN_MINUTES=30

plugins/admin/components/Mapping/RoleMappingPage.js

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react'
+import { connect } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import { Card, CardBody, FormGroup } from '../../../../app/components'
+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 { getMapping } from '../../redux/actions/ApiRoleMappingActions'
+import {
+  hasPermission,
+  buildPayload,
+  ROLE_READ,
+} from '../../../../app/utils/PermChecker'
+
+function RoleMappingPage({ mapping, permissions, loading, dispatch }) {
+  const { t } = useTranslation()
+  console.log('============== ' + JSON.stringify(mapping))
+  console.log('============== ' + JSON.stringify(loading))
+  const options = []
+  const userAction = {}
+  useEffect(() => {
+    buildPayload(userAction, 'ROLES_MAPPING', options)
+    dispatch(getMapping(userAction))
+  }, [])
+  return (
+    <Card>
+      <GluuRibbon title={t('titles.mapping')} fromLeft />
+      <CardBody>
+        <FormGroup row />
+        <FormGroup row />
+        <GluuViewWrapper
+          canShow={hasPermission(permissions, ROLE_READ)}
+        ></GluuViewWrapper>
+      </CardBody>
+    </Card>
+  )
+}
+
+const mapStateToProps = (state) => {
+  return {
+    mapping: state.apiMappingReducer.items,
+    loading: state.apiMappingReducer.loading,
+    permissions: state.authReducer.permissions,
+  }
+}
+
+export default connect(mapStateToProps)(RoleMappingPage)

plugins/admin/plugin-metadata.js

@@ -3,6 +3,7 @@ import ReportPage from './components/Reports/ReportPage'
 import LicenseDetailsPage from './components/Configuration/LicenseDetailsPage'
 import UiRoleListPage from './components/Roles/UiRoleListPage'
 import UiPermListPage from './components/Permissions/UiPermListPage'
+import RoleMappingPage from './components/Mapping/RoleMappingPage'
 import MonthlyActiveUsersPage from './components/MonthlyActiveUsersPage'
 import ScriptListPage from './components/CustomScripts/ScriptListPage'
 import CustomScriptAddPage from './components/CustomScripts/CustomScriptAddPage'
@@ -14,12 +15,14 @@ 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 roleMappingSaga from './redux/sagas/RoleMappingSaga'
 
 import mauReducer from './redux/reducers/MauReducer'
 import scriptReducer from './redux/reducers/CustomScriptReducer'
 import apiRoleReducer from './redux/reducers/ApiRoleReducer'
 import apiPermissionReducer from './redux/reducers/ApiPermissionReducer'
 import licenseDetailsReducer from './redux/reducers/LicenseDetailsReducer'
+import apiMappingReducer from './redux/reducers/ApiMappingReducer'
 import {
   ACR_READ,
   ROLE_READ,
@@ -106,9 +109,9 @@ const pluginMetadata = {
       permission: PERMISSION_READ,
     },
     {
-      component: UiRoleListPage,
+      component: RoleMappingPage,
       path: PLUGIN_BASE_APTH + '/mapping',
-      permission: '/config/acrs.readonly',
+      permission: PERMISSION_READ,
     },
     {
       component: ScriptListPage,
@@ -142,13 +145,15 @@ const pluginMetadata = {
     { name: 'apiRoleReducer', reducer: apiRoleReducer },
     { name: 'apiPermissionReducer', reducer: apiPermissionReducer },
     { name: 'licenseDetailsReducer', reducer: licenseDetailsReducer },
+    { name: 'apiMappingReducer', reducer: apiMappingReducer },
   ],
   sagas: [
     mauSaga(),
     scriptSaga(),
     licenseDetailsSaga(),
     apiRoleSaga(),
     apiPermissionSaga(),
+    roleMappingSaga(),
   ],
 }
 

plugins/admin/redux/actions/ApiRoleMappingActions.js

@@ -0,0 +1,11 @@
+import { GET_MAPPING, GET_MAPPING_RESPONSE } from './types'
+
+export const getMapping = (action) => ({
+  type: GET_MAPPING,
+  payload: { action },
+})
+
+export const getMappingResponse = (data) => ({
+  type: GET_MAPPING_RESPONSE,
+  payload: { data },
+})

plugins/admin/redux/actions/types.js

@@ -45,6 +45,9 @@ export const DELETE_PERMISSION = 'DELETE_PERMISSION'
 export const DELETE_PERMISSION_RESPONSE = 'DELETE_PERMISSION_RESPONSE'
 export const SET_PERMISSION_ITEM = 'SET_PERMISSION_ITEM'
 
+export const GET_MAPPING = 'GET_MAPPING'
+export const GET_MAPPING_RESPONSE = 'GET_MAPPING_RESPONSE'
+
 //License Details
 
 export const GET_LICENSE_DETAILS = 'GET_LICENSE_DETAILS'

plugins/admin/redux/api/RoleApi.js

@@ -4,7 +4,6 @@ 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)
       })

plugins/admin/redux/api/RoleMappingApi.js

@@ -0,0 +1,20 @@
+export default class RoleMappingApi {
+  constructor(api) {
+    this.api = api
+  }
+  getMappings = () => {
+    return new Promise((resolve, reject) => {
+      this.api.getAdminuiRolePermissions((error, data) => {
+        this.handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+
+  handleResponse(error, reject, resolve, data) {
+    if (error) {
+      reject(error)
+    } else {
+      resolve(data)
+    }
+  }
+}

plugins/admin/redux/audit/Resources.js

@@ -1,3 +1,4 @@
 export const SCRIPT = 'custom-script'
 export const API_ROLE = 'api-role'
 export const API_PERMISSION = 'api-permission'
+export const API_MAPPING = 'api-role-mapping'

plugins/admin/redux/reducers/ApiMappingReducer.js

@@ -0,0 +1,54 @@
+import { GET_MAPPING, GET_MAPPING_RESPONSE, RESET } from '../actions/types'
+import reducerRegistry from '../../../../app/redux/reducers/ReducerRegistry'
+
+const INIT_STATE = {
+  items: [],
+  loading: false,
+}
+const reducerName = 'apiMappingReducer'
+
+export default function apiMappingReducer(state = INIT_STATE, action) {
+  switch (action.type) {
+    case GET_MAPPING:
+      console.log("==================>")
+      return handleLoading()
+    case GET_MAPPING_RESPONSE:
+      if (action.payload.data) {
+        return handleItems()
+      } else {
+        return handleDefault()
+      }
+
+    case RESET:
+      return {
+        ...state,
+        items: INIT_STATE.items,
+        loading: INIT_STATE.loading,
+      }
+    default:
+      return handleDefault()
+  }
+
+  function handleItems() {
+    return {
+      ...state,
+      items: action.payload.data,
+      loading: false,
+    }
+  }
+
+  function handleLoading() {
+    return {
+      ...state,
+      loading: true,
+    }
+  }
+
+  function handleDefault() {
+    return {
+      ...state,
+      loading: false,
+    }
+  }
+}
+reducerRegistry.register(reducerName, apiMappingReducer)

plugins/admin/redux/sagas/RoleMappingSaga.js

@@ -0,0 +1,50 @@
+import { call, all, put, fork, takeLatest, select } from 'redux-saga/effects'
+import { getMappingResponse } from '../actions/ApiRoleMappingActions'
+import { API_MAPPING } from '../audit/Resources'
+import { FETCH } from '../../../../app/audit/UserActionType'
+import { getAPIAccessToken } from '../../../../app/redux/actions/AuthActions'
+import {
+  isFourZeroOneError,
+  addAdditionalData,
+} from '../../../../app/utils/TokenController'
+import { GET_MAPPING } from '../actions/types'
+import RoleMappingApi from '../api/RoleMappingApi'
+import { getClient } from '../../../../app/redux/api/base'
+import { postUserAction } from '../../../../app/redux/api/backend-api'
+const JansConfigApi = require('jans_config_api')
+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.AdminUIRolePermissionsMappingApi(
+    getClient(JansConfigApi, token, issuer),
+  )
+  return new RoleMappingApi(api)
+}
+
+export function* getMapping({ payload }) {
+  const audit = yield* initAudit()
+  try {
+    addAdditionalData(audit, FETCH, API_MAPPING, payload)
+    const roleApi = yield* newFunction()
+    const data = yield call(roleApi.getRoles)
+    yield put(getMappingResponse(data))
+    yield call(postUserAction, audit)
+  } catch (e) {
+    yield put(getMappingResponse(null))
+    if (isFourZeroOneError(e)) {
+      const jwt = yield select((state) => state.authReducer.userinfo_jwt)
+      yield put(getAPIAccessToken(jwt))
+    }
+  }
+}
+
+export function* watchGetMapping() {
+  console.log("=========called")
+  yield takeLatest(GET_MAPPING, getMapping)
+}
+
+export default function* rootSaga() {
+  yield all([fork(watchGetMapping)])
+}