feat(admin-ui): implement server side pagination for scopes page #449

admin-ui/plugins/auth-server/components/Scopes/ScopeListPage.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
-import { Paper } from '@material-ui/core'
+import { Paper, TablePagination } from '@material-ui/core'
 import { useNavigate } from 'react-router-dom'
-import { connect } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import { Badge } from 'reactstrap'
 import { Link } from 'react-router-dom'
 import { Card, CardBody } from 'Components'
@@ -40,8 +40,9 @@ import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
 import styles from './styles'
 
-function ScopeListPage({ scopes, permissions, loading, dispatch }) {
+function ScopeListPage() {
   const { t } = useTranslation()
+  const dispatch = useDispatch()
   const userAction = {}
   const options = {}
   const clientOptions = {}
@@ -57,6 +58,13 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
   const selectedTheme = theme.state.theme
   const themeColors = getThemeColor(selectedTheme)
   const bgThemeColor = { background: themeColors.background }
+  const [pageNumber, setPageNumber] = useState(0)
+  const { totalItems, entriesCount } = useSelector(
+    (state) => state.scopeReducer,
+  )
+  const scopes = useSelector((state) => state.scopeReducer.items)
+  const loading = useSelector((state) => state.scopeReducer.loading)
+  const permissions = useSelector((state) => state.authReducer.permissions)
 
   SetTitle(t('titles.scopes'))
 
@@ -96,9 +104,7 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
 
   useEffect(() => {
     makeOptions()
-    buildPayload(userAction, FETCHING_SCOPES, options)
-    console.log(userAction)
-    dispatch(getScopes(userAction))
+    dispatch(getScopes(options))
   }, [])
 
   function handleOptionsChange(event) {
@@ -165,6 +171,7 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
           limit={limit}
           pattern={pattern}
           handler={handleOptionsChange}
+          showLimit={false}
         />
       ),
       tooltip: `${t('messages.advanced_search')}`,
@@ -181,8 +188,8 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
       isFreeAction: true,
       onClick: () => {
         makeOptions()
-        buildPayload(userAction, SEARCHING_SCOPES, options)
-        dispatch(searchScopes(userAction))
+        // buildPayload(userAction, SEARCHING_SCOPES, options)
+        dispatch(getScopes(options))
       },
     })
   }
@@ -210,13 +217,46 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
     }))
   }
 
+  const onPageChangeClick = (page) => {
+    makeOptions()
+    let startCount = page * limit
+    options['startIndex'] = parseInt(startCount) + 1
+    options['limit'] = limit
+    setPageNumber(page)
+    console.log(options)
+    dispatch(getScopes(options))
+  }
+  const onRowCountChangeClick = (count) => {
+    makeOptions()
+    options['startIndex'] = 0
+    options['limit'] = count
+    setPageNumber(0)
+    setLimit(count)
+    dispatch(getScopes(options))
+  }
+
   return (
     <Card style={applicationStyle.mainCard}>
       <CardBody>
         <GluuViewWrapper canShow={hasPermission(permissions, SCOPE_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={scopes}
@@ -228,7 +268,7 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
               search: true,
               searchFieldAlignment: 'left',
               selection: false,
-              pageSize: pageSize,
+              pageSize: limit,
               headerStyle: {
                 ...applicationStyle.tableHeaderStyle,
                 ...bgThemeColor,
@@ -255,11 +295,4 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
   )
 }
 
-const mapStateToProps = (state) => {
-  return {
-    scopes: state.scopeReducer.items,
-    loading: state.scopeReducer.loading,
-    permissions: state.authReducer.permissions,
-  }
-}
-export default connect(mapStateToProps)(ScopeListPage)
+export default ScopeListPage

admin-ui/plugins/auth-server/redux/api/ScopeApi.js

@@ -6,7 +6,6 @@ export default class ScopeApi {
   }
 
   getAllScopes = (options) => {
-    options['withAssociatedClients'] = true
     return new Promise((resolve, reject) => {
       this.api.getOauthScopes(options, (error, data) => {
         handleResponse(error, reject, resolve, data)

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

@@ -88,7 +88,7 @@ export function* getScopes({ payload }) {
   try {
     addAdditionalData(audit, FETCH, SCOPE, payload)
     const scopeApi = yield* newFunction()
-    const data = yield call(scopeApi.getAllScopes, payload.action.action_data)
+    const data = yield call(scopeApi.getAllScopes, payload.action)
     yield put(getScopesResponse(data))
     yield call(postUserAction, audit)
   } catch (e) {

admin-ui/plugins/schema/redux/api/AttributeApi.js

@@ -24,8 +24,10 @@ export default class AttributeApi {
   }
 
   addNewAttribute = (data) => {
+    let options = {}
+    options['gluuAttribute'] = data
     return new Promise((resolve, reject) => {
-      this.api.postAttributes(data, (error, data) => {
+      this.api.postAttributes(options, (error, data) => {
         handleResponse(error, reject, resolve, data)
       })
     })

admin-ui/plugins/user-management/redux/api/UserApi.js

@@ -15,7 +15,7 @@ export default class UserApi {
   createUsers = (data) => {
     // customUser
     const options = {}
-    options['extendedCustomUser'] = data
+    options['customUser'] = data
     return new Promise((resolve, reject) => {
       this.api.postUser(options, (error, data) => {
         handleResponse(error, reject, resolve, data)