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

GluuFederation · Dec 15, 2021 · 4a28921 · 4a28921
1 parent 43173bf
commit 4a28921
Show file tree

Hide file tree

Showing 10 changed files with 255 additions and 66 deletions.
diff --git a/app/locales/en/translation.json b/app/locales/en/translation.json
@@ -379,11 +379,12 @@
     "detail_information": "Detailed information",
     "detail_contact": "Detail Contact",
     "ldap_authentication": "LDAP Authentication",
-    "services_health":"Services Health Status",
+    "services_health": "Services Health Status",
     "sql_authentication": "SQL Authentication",
     "logging": "LOGGING",
     "jwk_keys": "JWK keys",
     "jans_json_property": "Jans Server JSON Configuration",
+    "mapping": "API ROLES/PERMISSIONS MAPPING",
     "modules_properties": "Module Properties",
     "oauth_server_status_title": "OAuth server status",
     "oidc_clients": "OpenID Connect Clients",

diff --git a/plugins/admin/components/Mapping/MappingPage.js b/plugins/admin/components/Mapping/MappingPage.js
@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react'
+import { connect } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import {
+  Card,
+  CardBody,
+  FormGroup,
+  Row,
+  Badge,
+  Col,
+  Accordion,
+} 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/MappingActions'
+import {
+  hasPermission,
+  buildPayload,
+  ROLE_READ,
+} from '../../../../app/utils/PermChecker'
+
+function MappingPage({ mapping, permissions, loading, dispatch }) {
+  console.log('=============' + loading)
+  const { t } = useTranslation()
+  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 />
+        <FormGroup row />
+        <GluuViewWrapper canShow={hasPermission(permissions, ROLE_READ)}>
+          {mapping.map((candidate, key) => (
+            <Row key={key}>
+              <Col sm={12}>
+                <Accordion className="mb-12">
+                  <Accordion.Header className="text-info">
+                    <Accordion.Indicator className="mr-2" />
+                    {candidate.role}
+                    <Badge
+                      color="info"
+                      style={{
+                        float: 'right',
+                        background: applicationStyle.buttonStyle,
+                      }}
+                    >
+                      {candidate.permissions.length}
+                    </Badge>
+                  </Accordion.Header>
+
+                  <Accordion.Body>
+                    {candidate.permissions.map((perm, id) => (
+                      <div key={id}>{perm}</div>
+                    ))}
+                  </Accordion.Body>
+                </Accordion>
+              </Col>
+            </Row>
+          ))}
+        </GluuViewWrapper>
+      </CardBody>
+    </Card>
+  )
+}
+
+const mapStateToProps = (state) => {
+  return {
+    mapping: state.mappingReducer.items,
+    loading: state.mappingReducer.loading,
+    permissions: state.authReducer.permissions,
+  }
+}
+
+export default connect(mapStateToProps)(MappingPage)
diff --git a/plugins/admin/components/Mapping/RoleMappingPage.js b/plugins/admin/components/Mapping/RoleMappingPage.js
diff --git a/plugins/admin/components/Mapping/mapping.js b/plugins/admin/components/Mapping/mapping.js
@@ -0,0 +1,154 @@
+export default mapping = [
+  {
+    role: 'api-viewer',
+    permissions: [
+      'https://jans.io/oauth/config/attributes.readonly',
+      'https://jans.io/oauth/config/acrs.readonly',
+      'https://jans.io/oauth/config/scopes.readonly',
+      'https://jans.io/oauth/config/scripts.readonly',
+      'https://jans.io/oauth/config/openid/clients.readonly',
+      'https://jans.io/oauth/config/smtp.readonly',
+      'https://jans.io/oauth/config/logging.readonly',
+      'https://jans.io/oauth/config/uma/resources.readonly',
+      'https://jans.io/oauth/config/database/ldap.readonly',
+      'https://jans.io/oauth/config/jwks.readonly',
+      'https://jans.io/oauth/config/fido2.readonly',
+      'https://jans.io/oauth/config/cache.readonly',
+      'https://jans.io/oauth/jans-auth-server/config/properties.readonly',
+      'https://jans.io/oauth/config/database/couchbase.readonly',
+      'https://jans.io/oauth/config/database/sql.readonly',
+      'https://jans.io/oauth/config/stats.readonly',
+    ],
+  },
+  {
+    role: 'api-editor',
+    permissions: [
+      'https://jans.io/oauth/config/attributes.readonly',
+      'https://jans.io/oauth/config/attributes.write',
+      'https://jans.io/oauth/config/acrs.readonly',
+      'https://jans.io/oauth/config/acrs.write',
+      'https://jans.io/oauth/config/scopes.readonly',
+      'https://jans.io/oauth/config/scopes.write',
+      'https://jans.io/oauth/config/scripts.readonly',
+      'https://jans.io/oauth/config/scripts.write',
+      'https://jans.io/oauth/config/openid/clients.readonly',
+      'https://jans.io/oauth/config/openid/clients.write',
+      'https://jans.io/oauth/config/smtp.readonly',
+      'https://jans.io/oauth/config/smtp.write',
+      'https://jans.io/oauth/config/logging.readonly',
+      'https://jans.io/oauth/config/logging.write',
+      'https://jans.io/oauth/config/uma/resources.readonly',
+      'https://jans.io/oauth/config/uma/resources.write',
+      'https://jans.io/oauth/config/database/ldap.readonly',
+      'https://jans.io/oauth/config/database/ldap.write',
+      'https://jans.io/oauth/config/jwks.readonly',
+      'https://jans.io/oauth/config/jwks.write',
+      'https://jans.io/oauth/config/fido2.readonly',
+      'https://jans.io/oauth/config/fido2.write',
+      'https://jans.io/oauth/config/cache.readonly',
+      'https://jans.io/oauth/config/cache.write',
+      'https://jans.io/oauth/config/database/couchbase.readonly',
+      'https://jans.io/oauth/config/database/couchbase.write',
+      'https://jans.io/oauth/config/database/sql.readonly',
+      'https://jans.io/oauth/config/database/sql.write',
+      'https://jans.io/oauth/jans-auth-server/config/properties.readonly',
+      'https://jans.io/oauth/config/stats.readonly',
+      'jans_stat',
+    ],
+  },
+  {
+    role: 'api-manager',
+    permissions: [
+      'https://jans.io/oauth/config/attributes.readonly',
+      'https://jans.io/oauth/config/attributes.write',
+      'https://jans.io/oauth/config/attributes.delete',
+      'https://jans.io/oauth/config/acrs.readonly',
+      'https://jans.io/oauth/config/acrs.write',
+      'https://jans.io/oauth/config/acrs.delete',
+      'https://jans.io/oauth/config/scopes.readonly',
+      'https://jans.io/oauth/config/scopes.write',
+      'https://jans.io/oauth/config/scopes.delete',
+      'https://jans.io/oauth/config/scripts.readonly',
+      'https://jans.io/oauth/config/scripts.write',
+      'https://jans.io/oauth/config/scripts.delete',
+      'https://jans.io/oauth/config/openid/clients.readonly',
+      'https://jans.io/oauth/config/openid/clients.write',
+      'https://jans.io/oauth/config/openid/clients.delete',
+      'https://jans.io/oauth/config/smtp.readonly',
+      'https://jans.io/oauth/config/smtp.write',
+      'https://jans.io/oauth/config/smtp.delete',
+      'https://jans.io/oauth/config/logging.readonly',
+      'https://jans.io/oauth/config/logging.write',
+      'https://jans.io/oauth/config/uma/resources.readonly',
+      'https://jans.io/oauth/config/uma/resources.write',
+      'https://jans.io/oauth/config/uma/resources.delete',
+      'https://jans.io/oauth/config/database/ldap.readonly',
+      'https://jans.io/oauth/config/database/ldap.write',
+      'https://jans.io/oauth/config/database/ldap.delete',
+      'https://jans.io/oauth/config/jwks.readonly',
+      'https://jans.io/oauth/config/jwks.write',
+      'https://jans.io/oauth/config/fido2.readonly',
+      'https://jans.io/oauth/config/fido2.write',
+      'https://jans.io/oauth/config/cache.readonly',
+      'https://jans.io/oauth/config/cache.write',
+      'https://jans.io/oauth/config/database/couchbase.readonly',
+      'https://jans.io/oauth/config/database/couchbase.write',
+      'https://jans.io/oauth/config/database/sql.readonly',
+      'https://jans.io/oauth/config/database/sql.write',
+      'https://jans.io/oauth/jans-auth-server/config/properties.readonly',
+      'https://jans.io/oauth/config/stats.readonly',
+      'jans_stat',
+    ],
+  },
+  {
+    role: 'api-admin',
+    permissions: [
+      'https://jans.io/oauth/config/attributes.readonly',
+      'https://jans.io/oauth/config/attributes.write',
+      'https://jans.io/oauth/config/attributes.delete',
+      'https://jans.io/oauth/config/acrs.readonly',
+      'https://jans.io/oauth/config/acrs.write',
+      'https://jans.io/oauth/config/acrs.delete',
+      'https://jans.io/oauth/config/scopes.readonly',
+      'https://jans.io/oauth/config/scopes.write',
+      'https://jans.io/oauth/config/scopes.delete',
+      'https://jans.io/oauth/config/scripts.readonly',
+      'https://jans.io/oauth/config/scripts.write',
+      'https://jans.io/oauth/config/scripts.delete',
+      'https://jans.io/oauth/config/openid/clients.readonly',
+      'https://jans.io/oauth/config/openid/clients.write',
+      'https://jans.io/oauth/config/openid/clients.delete',
+      'https://jans.io/oauth/config/smtp.readonly',
+      'https://jans.io/oauth/config/smtp.write',
+      'https://jans.io/oauth/config/smtp.delete',
+      'https://jans.io/oauth/config/logging.readonly',
+      'https://jans.io/oauth/config/logging.write',
+      'https://jans.io/oauth/config/uma/resources.readonly',
+      'https://jans.io/oauth/config/uma/resources.write',
+      'https://jans.io/oauth/config/uma/resources.delete',
+      'https://jans.io/oauth/config/database/ldap.readonly',
+      'https://jans.io/oauth/config/database/ldap.write',
+      'https://jans.io/oauth/config/database/ldap.delete',
+      'https://jans.io/oauth/config/jwks.readonly',
+      'https://jans.io/oauth/config/jwks.write',
+      'https://jans.io/oauth/config/fido2.readonly',
+      'https://jans.io/oauth/config/fido2.write',
+      'https://jans.io/oauth/config/cache.readonly',
+      'https://jans.io/oauth/config/cache.write',
+      'https://jans.io/oauth/config/database/couchbase.readonly',
+      'https://jans.io/oauth/config/database/couchbase.write',
+      'https://jans.io/oauth/config/database/sql.readonly',
+      'https://jans.io/oauth/config/database/sql.write',
+      'https://jans.io/oauth/jans-auth-server/config/properties.readonly',
+      'https://jans.io/oauth/config/stats.readonly',
+      'jans_stat',
+      'https://jans.io/adminui/user/role.read',
+      'https://jans.io/adminui/user/role.write',
+      'https://jans.io/adminui/user/permission.read',
+      'https://jans.io/adminui/user/permission.write',
+      'https://jans.io/adminui/user/rolePermissionMapping.read',
+      'https://jans.io/adminui/user/rolePermissionMapping.write',
+    ],
+  },
+]
+
diff --git a/plugins/admin/plugin-metadata.js b/plugins/admin/plugin-metadata.js
@@ -3,7 +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 MappingPage from './components/Mapping/MappingPage'
 import MonthlyActiveUsersPage from './components/MonthlyActiveUsersPage'
 import ScriptListPage from './components/CustomScripts/ScriptListPage'
 import CustomScriptAddPage from './components/CustomScripts/CustomScriptAddPage'
@@ -15,14 +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 mappingSaga from './redux/sagas/MappingSaga'
 
 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 mappingReducer from './redux/reducers/MappingReducer'
 import {
   ACR_READ,
   ROLE_READ,
@@ -109,7 +109,7 @@ const pluginMetadata = {
       permission: PERMISSION_READ,
     },
     {
-      component: RoleMappingPage,
+      component: MappingPage,
       path: PLUGIN_BASE_APTH + '/mapping',
       permission: PERMISSION_READ,
     },
@@ -145,15 +145,15 @@ const pluginMetadata = {
     { name: 'apiRoleReducer', reducer: apiRoleReducer },
     { name: 'apiPermissionReducer', reducer: apiPermissionReducer },
     { name: 'licenseDetailsReducer', reducer: licenseDetailsReducer },
-    { name: 'apiMappingReducer', reducer: apiMappingReducer },
+    { name: 'mappingReducer', reducer: mappingReducer },
   ],
   sagas: [
     mauSaga(),
     scriptSaga(),
     licenseDetailsSaga(),
     apiRoleSaga(),
     apiPermissionSaga(),
-    roleMappingSaga(),
+    mappingSaga(),
   ],
 }
 

diff --git a/...in/redux/actions/ApiRoleMappingActions.js → ...ins/admin/redux/actions/MappingActions.js b/...in/redux/actions/ApiRoleMappingActions.js → ...ins/admin/redux/actions/MappingActions.js
diff --git a/plugins/admin/redux/actions/types.js b/plugins/admin/redux/actions/types.js
@@ -45,6 +45,7 @@ export const DELETE_PERMISSION = 'DELETE_PERMISSION'
 export const DELETE_PERMISSION_RESPONSE = 'DELETE_PERMISSION_RESPONSE'
 export const SET_PERMISSION_ITEM = 'SET_PERMISSION_ITEM'
 
+//ROLE-PERMISSION Mapping
 export const GET_MAPPING = 'GET_MAPPING'
 export const GET_MAPPING_RESPONSE = 'GET_MAPPING_RESPONSE'
 

diff --git a/plugins/admin/redux/api/RoleMappingApi.js → plugins/admin/redux/api/MappingApi.js b/plugins/admin/redux/api/RoleMappingApi.js → plugins/admin/redux/api/MappingApi.js
@@ -1,4 +1,4 @@
-export default class RoleMappingApi {
+export default class MappingApi {
   constructor(api) {
     this.api = api
   }

diff --git a/...admin/redux/reducers/ApiMappingReducer.js → ...ns/admin/redux/reducers/MappingReducer.js b/...admin/redux/reducers/ApiMappingReducer.js → ...ns/admin/redux/reducers/MappingReducer.js
@@ -5,9 +5,9 @@ const INIT_STATE = {
   items: [],
   loading: false,
 }
-const reducerName = 'apiMappingReducer'
+const reducerName = 'mappingReducer'
 
-export default function apiMappingReducer(state = INIT_STATE, action) {
+export default function mappingReducer(state = INIT_STATE, action) {
   switch (action.type) {
     case GET_MAPPING:
       console.log("==================>")
@@ -51,4 +51,4 @@ export default function apiMappingReducer(state = INIT_STATE, action) {
     }
   }
 }
-reducerRegistry.register(reducerName, apiMappingReducer)
+reducerRegistry.register(reducerName, mappingReducer)