fix(admin-ui): getting blank page for user management #1421

Signed-off-by: Jeet Viramgama <jviramgama5@gmail.com>

admin-ui/app/redux/features/attributesSlice.js

@@ -5,13 +5,17 @@ import unionBy from 'lodash/unionBy'
 const initialState = {
   items: [],
   loading: false,
-  initLoading: true
+  initLoading: true,
+  accessToken: null
 }
 
 const attributesSlice = createSlice({
   name: 'attributes',
   initialState,
   reducers: {
+    setAccessToken: (state, action) => {
+      state.accessToken = action.payload
+    },
     getAttributesRoot: (state, action) => {
       state.loading = true
     },
@@ -28,7 +32,7 @@ const attributesSlice = createSlice({
   }
 })
 
-export const { getAttributesRoot, getAttributesResponseRoot, toggleInitAttributeLoader } =
+export const { getAttributesRoot, getAttributesResponseRoot, toggleInitAttributeLoader, setAccessToken } =
   attributesSlice.actions
 
 export default attributesSlice.reducer

admin-ui/app/redux/sagas/AttributesSaga.js

@@ -2,24 +2,42 @@ import { call, all, put, fork, takeLatest, select } from 'redux-saga/effects'
 import { isFourZeroOneError, addAdditionalData } from 'Utils/TokenController'
 import {
   getAttributesResponseRoot,
+  setAccessToken,
   toggleInitAttributeLoader
 } from '../features/attributesSlice'
 import { getAPIAccessToken } from 'Redux/features/authSlice'
-import { postUserAction } from 'Redux/api/backend-api'
+import { postUserAction, fetchApiAccessToken } from 'Redux/api/backend-api'
 import {
   FETCH,
 } from '../../audit/UserActionType'
 // } from '../../../../app/audit/UserActionType'
 import AttributeApi from '../api/AttributeApi'
 import { getClient } from 'Redux/api/base'
 import { initAudit } from 'Redux/sagas/SagaUtils'
+import { ATTRIBUTES_TAGS } from 'Utils/PermChecker'
 
 const PERSON_SCHEMA = 'person schema'
 
 const JansConfigApi = require('jans_config_api')
 
 function* newFunction() {
-  const token = yield select((state) => state.authReducer.token.access_token)
+  let token
+  const savedToken = yield select((state) => state.attributesReducerRoot.accessToken)
+
+  if (!savedToken) {
+    const jwt = yield select((state) => state.authReducer.userinfo_jwt)
+    const apiToken = yield call(fetchApiAccessToken, jwt, ATTRIBUTES_TAGS)
+    if (apiToken.access_token) {
+      token = apiToken.access_token
+      yield put(setAccessToken(apiToken.access_token))
+    } else {
+      token = yield select((state) => state.authReducer.token.access_token)
+    } 
+  } else {
+    token = savedToken;
+  }
+
+
   const issuer = yield select((state) => state.authReducer.issuer)
   const api = new JansConfigApi.AttributeApi(
     getClient(JansConfigApi, token, issuer),

admin-ui/app/utils/PermChecker.js

@@ -105,6 +105,7 @@ export const SESSION_READ = BASE_URL + '/jans-auth-server/session.readonly'
 export const SESSION_DELETE = BASE_URL + '/jans-auth-server/session.delete'
 
 export const SCOPE_TAGS = ['scopes']
+export const ATTRIBUTES_TAGS = ['attributes']
 
 export const hasPermission = (scopes, scope) => {
   let available = false

admin-ui/plugins/auth-server/redux/sagas/OAuthScopeSaga.js

@@ -38,19 +38,19 @@ import { SCOPE_TAGS } from 'Utils/PermChecker'
 
 function* newFunction() {
   let token
-  const scopesToken = yield select((state) => state.scopeReducer.accessToken)
+  const savedToken = yield select((state) => state.scopeReducer.accessToken)
 
-  if (!scopesToken) {
+  if (!savedToken) {
     const jwt = yield select((state) => state.authReducer.userinfo_jwt)
-    const scopeApiToken = yield call(fetchApiAccessToken, jwt, SCOPE_TAGS)
-    if (scopeApiToken.access_token) {
-      token = scopeApiToken.access_token
-      yield put(setAccessToken(scopeApiToken.access_token))
+    const apiToken = yield call(fetchApiAccessToken, jwt, SCOPE_TAGS)
+    if (apiToken.access_token) {
+      token = apiToken.access_token
+      yield put(setAccessToken(apiToken.access_token))
     } else {
       token = yield select((state) => state.authReducer.token.access_token)
     } 
   } else {
-    token = scopesToken;
+    token = savedToken;
   }
 
   const issuer = yield select((state) => state.authReducer.issuer)

admin-ui/plugins/user-management/components/UserManagement/UserDetailViewPage.js

@@ -1,14 +1,16 @@
-import React, { useEffect } from 'react'
-import { Container, Row, Col } from '../../../../app/components'
-import GluuFormDetailRow from '../../../../app/routes/Apps/Gluu/GluuFormDetailRow'
+import React, { Fragment } from 'react'
+import { Container, Row, Col } from 'Components'
+import GluuFormDetailRow from 'Routes/Apps/Gluu/GluuFormDetailRow'
 import { useSelector } from 'react-redux'
 import moment from 'moment'
 
 const UserDetailViewPage = ({ row }) => {
   const { rowData } = row
   const DOC_SECTION = 'user'
-  const personAttributes = useSelector((state) => state.attributesReducerRoot.items)
-
+  const personAttributes = useSelector(
+    (state) => state.attributesReducerRoot.items
+  )
+
   const getCustomAttributeById = (id) => {
     let claimData = null
     for (let i in personAttributes) {
@@ -24,54 +26,66 @@ const UserDetailViewPage = ({ row }) => {
         <Row>
           <Col sm={4}>
             <GluuFormDetailRow
-              label="fields.name"
+              label='fields.name'
               value={rowData.displayName}
               doc_category={DOC_SECTION}
-              doc_entry="displayName"
+              doc_entry='displayName'
             />
           </Col>
           <Col sm={4}>
             <GluuFormDetailRow
-              label="fields.givenName"
+              label='fields.givenName'
               value={rowData.givenName}
               doc_category={DOC_SECTION}
-              doc_entry="givenName"
+              doc_entry='givenName'
             />
           </Col>
           <Col sm={4}>
             <GluuFormDetailRow
-              label="fields.userName"
+              label='fields.userName'
               value={rowData.userId}
               doc_category={DOC_SECTION}
-              doc_entry="userId"
+              doc_entry='userId'
             />
           </Col>
           <Col sm={4}>
             <GluuFormDetailRow
-              label="fields.email"
-              doc_entry="mail"
+              label='fields.email'
+              doc_entry='mail'
               value={rowData?.mail}
               doc_category={DOC_SECTION}
             />
           </Col>
           {rowData.customAttributes?.map((data, key) => {
             let valueToShow = ''
             if (data.name == 'birthdate') {
-              valueToShow = moment(data?.values[0]).format('YYYY-MM-DD')
+              valueToShow = moment(data?.values[0]).format('YYYY-MM-DD') || ''
             } else {
-              valueToShow = data?.values[0]
+              valueToShow = data?.values?.[0] || ''
             }
-              return (
-                <Col sm={4} key={'customAttributes' + key}>
-                  <GluuFormDetailRow
-                    label={getCustomAttributeById(data.name) ? getCustomAttributeById(data.name).displayName : ''}
-                    doc_category={getCustomAttributeById(data.name) ? getCustomAttributeById(data.name).description : ''}
-                    isDirect={true}
-                    value={valueToShow}
-                  />
-                </Col>
-              )
-
+
+            return (
+              <Fragment key={'customAttributes' + key}>
+                {valueToShow !== '' ? (
+                  <Col sm={4} key={'customAttributes' + key}>
+                    <GluuFormDetailRow
+                      label={
+                        getCustomAttributeById(data.name)
+                          ? getCustomAttributeById(data.name).displayName
+                          : ''
+                      }
+                      doc_category={
+                        getCustomAttributeById(data.name)
+                          ? getCustomAttributeById(data.name).description
+                          : ''
+                      }
+                      isDirect={true}
+                      value={valueToShow}
+                    />
+                  </Col>
+                ) : null}
+              </Fragment>
+            )
           })}
         </Row>
       </Container>