feat(admin-ui): gentle push

GluuFederation · Sep 20, 2022 · 5a5c79b · 5a5c79b
1 parent 7b26106
commit 5a5c79b
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 35 deletions.
diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientListPage.js b/admin-ui/plugins/auth-server/components/Clients/ClientListPage.js
@@ -2,8 +2,8 @@ import React, { useState, useEffect, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
 import { useNavigate, useLocation } from 'react-router-dom'
-import { connect } from 'react-redux'
-import { Paper } from '@material-ui/core'
+import { useSelector, useDispatch } from 'react-redux'
+import { Paper, TablePagination } from '@material-ui/core'
 import { Card, CardBody, Badge } from 'Components'
 import { getScopes } from 'Plugins/auth-server/redux/actions/ScopeActions'
 import { resetUMAResources } from 'Plugins/auth-server/redux/actions/UMAResourceActions'
@@ -40,13 +40,19 @@ import SetTitle from 'Utils/SetTitle'
 import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
 
-function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
+function ClientListPage() {
   const { t } = useTranslation()
+  const dispatch = useDispatch()
+  let clients = useSelector((state) => state.oidcReducer.items)
+  const { totalItems, entriesCount } = useSelector((state) => state.oidcReducer)
+  const scopes = useSelector((state) => state.scopeReducer.items)
+  const loading = useSelector((state) => state.oidcReducer.loading)
+  const permissions = useSelector((state) => state.authReducer.permissions)
   clients = clients.map(addOrg)
   const userAction = {}
   const options = {}
   const myActions = []
-  const navigate =useNavigate()
+  const navigate = useNavigate()
   const { search } = useLocation()
   const pageSize = localStorage.getItem('paggingSize') || 10
   const theme = useContext(ThemeContext)
@@ -56,14 +62,14 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
   const [scopeClients, setScopeClients] = useState()
   const [haveScopeINUMParam] = useState(search.indexOf('?scopeInum=') > -1)
   const [isPageLoading, setIsPageLoading] = useState(loading)
-
+  const [pageNumber, setPageNumber] = useState(0)
   SetTitle(t('titles.oidc_clients'))
 
   const [scopesModal, setScopesModal] = useState({
     data: [],
     show: false,
   })
-  const [limit, setLimit] = useState(200)
+  const [limit, setLimit] = useState(10)
   const [pattern, setPattern] = useState(null)
   const [item, setItem] = useState({})
   const [modal, setModal] = useState(false)
@@ -180,8 +186,7 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
     } else {
       setIsPageLoading(true)
       makeOptions()
-      buildPayload(userAction, FETCHING_OIDC_CLIENTS, options)
-      dispatch(getOpenidClients(userAction))
+      dispatch(getOpenidClients(options))
 
       buildPayload(userAction, '', options)
       dispatch(getScopes(userAction))
@@ -251,6 +256,7 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
           limit={limit}
           pattern={pattern}
           handler={handleOptionsChange}
+          showLimit={false}
         />
       ),
       tooltip: `${t('messages.advanced_search')}`,
@@ -267,8 +273,8 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
       isFreeAction: true,
       onClick: () => {
         makeOptions()
-        buildPayload(userAction, SEARCHING_OIDC_CLIENTS, options)
-        dispatch(searchClients(userAction))
+        // buildPayload(userAction, SEARCHING_OIDC_CLIENTS, options)
+        dispatch(getOpenidClients(options))
       },
     })
   }
@@ -315,6 +321,24 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
     }
   }
 
+  const onPageChangeClick = (page) => {
+    makeOptions()
+    let startCount = page * limit
+    options['startIndex'] = parseInt(startCount) + 1
+    options['limit'] = limit
+    setPageNumber(page)
+    console.log(options)
+    dispatch(getOpenidClients(options))
+  }
+  const onRowCountChangeClick = (count) => {
+    makeOptions()
+    options['startIndex'] = 0
+    options['limit'] = count
+    setPageNumber(0)
+    setLimit(count)
+    dispatch(getOpenidClients(options))
+  }
+
   return (
     <Card style={applicationStyle.mainCard}>
       <ClientShowScopes
@@ -325,19 +349,34 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
       <CardBody>
         <GluuViewWrapper canShow={hasPermission(permissions, CLIENT_READ)}>
           <MaterialTable
+            key={limit ? limit : 0}
             components={{
               Container: (props) => <Paper {...props} elevation={0} />,
+              Pagination: (props) => (
+                <TablePagination
+                  component="div"
+                  count={totalItems}
+                  page={pageNumber}
+                  onPageChange={(prop, page) => {
+                    onPageChangeClick(page)
+                  }}
+                  rowsPerPage={limit}
+                  onRowsPerPageChange={(prop, count) =>
+                    onRowCountChangeClick(count.props.value)
+                  }
+                />
+              ),
             }}
             columns={tableColumns}
             data={haveScopeINUMParam ? scopeClients : clients}
-            isLoading={isPageLoading}
+            isLoading={isPageLoading ? isPageLoading : loading}
             title=""
             actions={myActions}
             options={{
               search: true,
               searchFieldAlignment: 'left',
               selection: false,
-              pageSize: pageSize,
+              pageSize: limit,
               headerStyle: {
                 ...applicationStyle.tableHeaderStyle,
                 ...bgThemeColor,
@@ -364,12 +403,4 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
   )
 }
 
-const mapStateToProps = (state) => {
-  return {
-    clients: state.oidcReducer.items,
-    scopes: state.scopeReducer.items,
-    loading: state.oidcReducer.loading,
-    permissions: state.authReducer.permissions,
-  }
-}
-export default connect(mapStateToProps)(ClientListPage)
+export default ClientListPage
diff --git a/admin-ui/plugins/auth-server/redux/api/OIDCApi.js b/admin-ui/plugins/auth-server/redux/api/OIDCApi.js
@@ -15,15 +15,16 @@ export default class OIDCApi {
 
   addNewOpenIdClient = (data) => {
     return new Promise((resolve, reject) => {
-      this.api.postOauthOpenidClients(data, (error, res) => {
+      console.log('PO', data)
+      this.api.postOauthOpenidClient(data, (error, res) => {
         handleResponse(error, reject, resolve, data)
       })
     })
   }
 
   editAClient = (data) => {
     return new Promise((resolve, reject) => {
-      this.api.putOauthOpenidClients(data, (error, res) => {
+      this.api.putOauthOpenidClient(data, (error, res) => {
         handleResponse(error, reject, resolve, data)
       })
     })

diff --git a/admin-ui/plugins/auth-server/redux/reducers/OIDCReducer.js b/admin-ui/plugins/auth-server/redux/reducers/OIDCReducer.js
@@ -21,6 +21,8 @@ const INIT_STATE = {
   loading: false,
   saveOperationFlag: false,
   errorInSaveOperationFlag: false,
+  totalItems: 0,
+  entriesCount: 0,
 }
 
 const reducerName = 'oidcReducer'
@@ -35,8 +37,10 @@ export default function oidcReducer(state = INIT_STATE, action) {
       if (action.payload.data) {
         return {
           ...state,
-          items: action.payload.data,
+          items: action.payload.data.entries,
           loading: false,
+          totalItems: action.payload.data.totalEntriesCount,
+          entriesCount: action.payload.data.entriesCount,
         }
       } else {
         return handleDefault()
@@ -154,4 +158,4 @@ export default function oidcReducer(state = INIT_STATE, action) {
     }
   }
 }
-reducerRegistry.register(reducerName, oidcReducer)
+reducerRegistry.register(reducerName, oidcReducer)
diff --git a/admin-ui/plugins/auth-server/redux/sagas/OIDCSaga.js b/admin-ui/plugins/auth-server/redux/sagas/OIDCSaga.js
@@ -1,14 +1,11 @@
 import { call, all, put, fork, takeLatest, select } from 'redux-saga/effects'
-import {
-  isFourZeroOneError,
-  addAdditionalData,
-} from 'Utils/TokenController'
+import { isFourZeroOneError, addAdditionalData } from 'Utils/TokenController'
 import { postUserAction } from 'Redux/api/backend-api'
 import {
   getOpenidClientsResponse,
   addClientResponse,
   editClientResponse,
-  deleteClientResponse
+  deleteClientResponse,
 } from '../actions/OIDCActions'
 import { getAPIAccessToken } from '../actions/AuthActions'
 import { OIDC } from '../audit/Resources'
@@ -23,7 +20,7 @@ import {
   ADD_NEW_CLIENT,
   EDIT_CLIENT,
   DELETE_CLIENT,
-  SEARCH_CLIENTS
+  SEARCH_CLIENTS,
 } from '../actions/types'
 import OIDCApi from '../api/OIDCApi'
 import { getClient } from 'Redux/api/base'
@@ -51,10 +48,7 @@ export function* getOauthOpenidClients({ payload }) {
     payload = payload ? payload : { action: {} }
     addAdditionalData(audit, FETCH, OIDC, payload)
     const openIdApi = yield* newFunction()
-    const data = yield call(
-      openIdApi.getAllOpenidClients,
-      payload.action.action_data,
-    )
+    const data = yield call(openIdApi.getAllOpenidClients, payload.action)
     yield put(getOpenidClientsResponse(data))
     yield call(postUserAction, audit)
   } catch (e) {