feat(admin-ui): add more details to user profile page #1213

admin-ui/app/redux/api/axios.js

@@ -3,5 +3,5 @@ import axios from "axios"
 export const baseUrl = process.env.CONFIG_API_BASE_URL || "http://localhost:8080"
 export default axios.create({
   baseURL: baseUrl,
-  timeout: 30000
+  timeout: 60000
 })

admin-ui/app/redux/api/index.js

@@ -3,5 +3,5 @@ import axios from "axios"
 export const baseUrl = process.env.CONFIG_API_BASE_URL || "http://localhost:8080"
 export default axios.create({
   baseURL: baseUrl,
-  timeout: 30000
+  timeout: 60000
 })

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

@@ -0,0 +1,27 @@
+import { createSlice } from '@reduxjs/toolkit'
+import reducerRegistry from 'Redux/reducers/ReducerRegistry'
+
+const initialState = {
+  profileDetails: null,
+  loading: false,
+}
+
+const profileDetailsSlice = createSlice({
+  name: 'profileDetails',
+  initialState,
+  reducers: {
+    checkIsLoadingDetails: (state, action) => {
+      state.loading = action.payload
+    },
+    setUserProfileDetails: (state, action) => {
+      state.profileDetails = action.payload
+    },
+    getProfileDetails: () => {}
+  },
+})
+
+export const { checkIsLoadingDetails, getProfileDetails, setUserProfileDetails } =
+  profileDetailsSlice.actions
+
+export default profileDetailsSlice.reducer
+reducerRegistry.register('profileDetailsReducer', profileDetailsSlice.reducer)

admin-ui/app/redux/reducers/index.js

@@ -11,6 +11,7 @@ import { reducer as licenseDetailsReducer } from '../features/licenseDetailsSlic
 import oidcDiscoveryReducer from '../features/oidcDiscoverySlice'
 import attributesReducerRoot from '../features/attributesSlice'
 import toastReducer from '../features/toastSlice'
+import profileDetailsReducer from '../features/ProfileDetailsSlice'
 const appReducers = {
   authReducer,
   initReducer,
@@ -21,7 +22,8 @@ const appReducers = {
   healthReducer,
   licenseDetailsReducer,
   attributesReducerRoot,
-  toastReducer
+  toastReducer,
+  profileDetailsReducer
 }
 
 export default appReducers

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

@@ -0,0 +1,50 @@
+import { all, call, fork, put, select, takeLatest } from 'redux-saga/effects'
+import { isFourZeroOneError, addAdditionalData } from 'Utils/TokenController'
+import { FETCH } from '../../audit/UserActionType'
+import { getAPIAccessToken } from 'Redux/features/authSlice'
+import { API_USERS } from 'Plugins/user-management/redux/audit/Resources'
+import UserApi from 'Plugins/user-management/redux/api/UserApi'
+import { initAudit } from 'Redux/sagas/SagaUtils'
+import { postUserAction } from 'Redux/api/backend-api'
+import { setUserProfileDetails } from 'Redux/features/ProfileDetailsSlice'
+import { getProfileDetails, checkIsLoadingDetails } from '../features/ProfileDetailsSlice'
+const JansConfigApi = require('jans_config_api')
+import { getClient } from 'Redux/api/base'
+
+function* newFunction() {
+  const token = yield select((state) => state.authReducer.token.access_token)
+  const issuer = yield select((state) => state.authReducer.issuer)
+  const api = new JansConfigApi.ConfigurationUserManagementApi(
+    getClient(JansConfigApi, token, issuer)
+  )
+  return new UserApi(api)
+}
+
+function* getProfileDetailsWorker({ payload }) {
+  const audit = yield* initAudit()
+  try {
+    yield put(checkIsLoadingDetails(true))
+    addAdditionalData(audit, FETCH, API_USERS, payload)
+    const userApi = yield* newFunction()
+    const data = yield call(userApi.getUsers, payload)
+    yield put(setUserProfileDetails(data?.entries?.[0]))
+    yield call(postUserAction, audit)
+  } catch (e) {
+    yield put(setUserProfileDetails(null))
+    if (isFourZeroOneError(e)) {
+      const jwt = yield select((state) => state.authReducer.userinfo_jwt)
+      yield put(getAPIAccessToken(jwt))
+    }
+  } finally {
+    yield put(checkIsLoadingDetails(false))
+  }
+}
+
+//watcher sagas
+export function* getProfileDetailsWatcher() {
+  yield takeLatest(getProfileDetails.toString(), getProfileDetailsWorker)
+}
+
+export default function* rootSaga() {
+  yield all([fork(getProfileDetailsWatcher)])
+}

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

@@ -13,6 +13,7 @@ import licenseDetailsSaga from './LicenseDetailsSaga'
 import oidcDiscoverySaga from './OidcDiscoverySaga'
 import process from 'Plugins/PluginSagasResolver'
 import attributes from './AttributesSaga'
+import profileDetails from './ProfileDetailsSaga'
 export default function* rootSaga() {
   const pluginSagaArr = process()
   yield all(
@@ -25,7 +26,8 @@ export default function* rootSaga() {
         mauSaga(),
         healthSaga(),
         licenseDetailsSaga(),
-        attributes()
+        attributes(),
+        profileDetails()
       ],
       pluginSagaArr,
     ),

admin-ui/app/routes/Apps/Gluu/GluuNavBar.js

@@ -46,7 +46,7 @@ function GluuNavBar({ userinfo }) {
             <Notifications />
             <LanguageMenu userInfo={userInfo} />
             <ThemeSetting userInfo={userInfo} />
-            <UncontrolledDropdown nav inNavbar>
+            <UncontrolledDropdown nav direction="down">
               <DropdownToggle nav>
                 <Avatar.Image
                   size="md"
@@ -65,7 +65,7 @@ function GluuNavBar({ userinfo }) {
                   ]}
                 />
               </DropdownToggle>
-              <DropdownProfile right userinfo={userInfo} />
+              <DropdownProfile end userinfo={userInfo} />
             </UncontrolledDropdown>
           </Nav>
         </Box>

admin-ui/app/routes/Apps/Gluu/styles/GluuAppSidebar.style.js

@@ -7,12 +7,10 @@ const styles = makeStyles()({
     left: 0,
     top: 140,
     height: 70,
-    width: 250,
     borderBottomLeftRadius: 20,
     borderBottomRightRadius: 20,
   },
   wave: {
-    width: 250,
     position: 'relative',
     top: -75
   },