feat(admin-ui): implement server side pagination #446

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

@@ -1,10 +1,5 @@
 import React from 'react'
-import {
-  Input,
-  InputGroup,
-  CustomInput,
-  FormGroup,
-} from 'Components'
+import { Input, InputGroup, CustomInput, FormGroup } from 'Components'
 import { useTranslation } from 'react-i18next'
 
 function GluuCustomScriptSearch({
@@ -14,21 +9,20 @@ function GluuCustomScriptSearch({
   typeId,
   limit,
   scriptType,
+  pattern = '',
 }) {
   const { t } = useTranslation()
   return (
     <FormGroup row style={{ marginTop: '10px' }}>
-      <Input
-        style={{ width: '80px' }}
-        id={limitId}
-        type="number"
-        data-testid={limitId}
-        onChange={handler}
-        defaultValue={limit}
-      />
-      &nbsp;
       <InputGroup style={{ width: '210px' }}>
-        <CustomInput type="select" data-testid={typeId} id={typeId} defaultValue={scriptType} onChange={handler}>
+        <CustomInput
+          type="select"
+          name="type"
+          data-testid={typeId}
+          id={typeId}
+          defaultValue={scriptType}
+          onChange={handler}
+        >
           <option>PERSON_AUTHENTICATION</option>
           <option>INTROSPECTION</option>
           <option>RESOURCE_OWNER_PASSWORD_CREDENTIALS</option>
@@ -60,8 +54,10 @@ function GluuCustomScriptSearch({
         id={patternId}
         type="text"
         data-testid={patternId}
+        name="pattern"
         onChange={handler}
-        placeholder={t("placeholders.search_pattern")}
+        defaultValue={pattern}
+        placeholder={t('placeholders.search_pattern')}
       />
     </FormGroup>
   )

admin-ui/plugins/admin/components/CustomScripts/ScriptListPage.js

@@ -2,9 +2,9 @@ import React, { useState, useEffect, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
 import { useNavigate } from 'react-router-dom'
-import { Paper } from '@material-ui/core'
+import { Paper, TablePagination } from '@material-ui/core'
 import { Badge } from 'reactstrap'
-import { connect } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import GluuDialog from 'Routes/Apps/Gluu/GluuDialog'
 import { Card, CardBody } from 'Components'
 import CustomScriptDetailPage from './CustomScriptDetailPage'
@@ -40,9 +40,10 @@ import SetTitle from 'Utils/SetTitle'
 import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
 
-function ScriptListTable({ scripts, loading, dispatch, permissions }) {
+function ScriptListTable() {
   const { t } = useTranslation()
-  const navigate =useNavigate()
+  const dispatch = useDispatch()
+  const navigate = useNavigate()
   const userAction = {}
   const options = {}
   const myActions = []
@@ -58,29 +59,32 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
   const selectedTheme = theme.state.theme
   const themeColors = getThemeColor(selectedTheme)
   const bgThemeColor = { background: themeColors.background }
+  const scripts = useSelector((state) => state.customScriptReducer.items)
+  const loading = useSelector((state) => state.customScriptReducer.loading)
+  const permissions = useSelector((state) => state.authReducer.permissions)
+  const { totalItems, entriesCount } = useSelector(
+    (state) => state.customScriptReducer,
+  )
+  const [pageNumber, setPageNumber] = useState(0)
+  let memoPattern = pattern
+  let memoType = type
   SetTitle(t('titles.scripts'))
 
   function makeOptions() {
+    setPattern(memoPattern)
+    setType(memoType)
     options[LIMIT] = parseInt(limit)
-    if (pattern) {
-      options[PATTERN] = pattern
+    if (memoPattern) {
+      options[PATTERN] = memoPattern
     }
-    if (type && type != '') {
-      options[TYPE] = type
+    if (memoType != '') {
+      options[TYPE] = memoType
     }
   }
   useEffect(() => {
     makeOptions()
-    buildPayload(userAction, FETCHING_SCRIPTS, options)
-    dispatch(getCustomScripts(userAction))
+    dispatch(getCustomScriptByType(options))
   }, [])
-  useEffect(() => {
-    setSelectedScripts(
-      scripts.filter(
-        (script) => script.scriptType == document.getElementById(TYPE_ID).value,
-      ),
-    )
-  }, [scripts])
   if (hasPermission(permissions, SCRIPT_WRITE)) {
     myActions.push((rowData) => ({
       icon: 'edit',
@@ -113,6 +117,7 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
           typeId={TYPE_ID}
           patternId={PATTERN_ID}
           scriptType={type}
+          pattern={pattern}
           handler={handleOptionsChange}
         />
       ),
@@ -129,8 +134,7 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
       isFreeAction: true,
       onClick: () => {
         makeOptions()
-        buildPayload(userAction, SEARCHING_SCRIPTS, options)
-        dispatch(getCustomScriptByType(userAction))
+        dispatch(getCustomScriptByType(options))
       },
     })
   }
@@ -154,15 +158,14 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
       onClick: () => handleGoToCustomScriptAddPage(),
     })
   }
-  function handleOptionsChange() {
-    setLimit(document.getElementById(LIMIT_ID).value)
-    setPattern(document.getElementById(PATTERN_ID).value)
-    setType(document.getElementById(TYPE_ID).value)
-    setSelectedScripts(
-      scripts.filter(
-        (script) => script.scriptType == document.getElementById(TYPE_ID).value,
-      ),
-    )
+  function handleOptionsChange(event) {
+    const name = event.target.name
+    console.log(name, event.target.value)
+    if (name == 'pattern') {
+      memoPattern = event.target.value
+    } else if (name == 'type') {
+      memoType = event.target.value
+    }
   }
   function handleGoToCustomScriptAddPage() {
     return navigate('/adm/script/new')
@@ -182,13 +185,46 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
     navigate('/adm/scripts')
     toggle()
   }
+
+  const onPageChangeClick = (page) => {
+    makeOptions()
+    let startCount = page * limit
+    options['startIndex'] = parseInt(startCount) + 1
+    options['limit'] = limit
+    setPageNumber(page)
+    dispatch(getCustomScriptByType(options))
+  }
+  const onRowCountChangeClick = (count) => {
+    console.log(count)
+    makeOptions()
+    options['limit'] = count
+    setPageNumber(0)
+    setLimit(count)
+    dispatch(getCustomScriptByType(options))
+  }
+
   return (
     <Card style={applicationStyle.mainCard}>
       <CardBody>
         <GluuViewWrapper canShow={hasPermission(permissions, SCRIPT_READ)}>
           <MaterialTable
+            key={limit}
             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={[
               { title: `${t('fields.name')}`, field: 'name' },
@@ -211,15 +247,15 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
                 defaultSort: 'desc',
               },
             ]}
-            data={selectedScripts}
+            data={scripts}
             isLoading={loading}
             title=""
             actions={myActions}
             options={{
               search: true,
               searchFieldAlignment: 'left',
               selection: false,
-              pageSize: pageSize,
+              pageSize: limit,
               rowStyle: (rowData) => ({
                 backgroundColor: rowData.enabled
                   ? themeColors.lightBackground
@@ -250,11 +286,4 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
   )
 }
 
-const mapStateToProps = (state) => {
-  return {
-    scripts: state.customScriptReducer.items,
-    loading: state.customScriptReducer.loading,
-    permissions: state.authReducer.permissions,
-  }
-}
-export default connect(mapStateToProps)(ScriptListTable)
+export default ScriptListTable

admin-ui/plugins/admin/redux/api/ScriptApi.js

@@ -4,9 +4,9 @@ export default class ScriptApi {
   constructor(api) {
     this.api = api
   }
-  getAllCustomScript = () => {
+  getAllCustomScript = (options) => {
     return new Promise((resolve, reject) => {
-      this.api.getConfigScripts((error, data) => {
+      this.api.getConfigScripts(options, (error, data) => {
         handleResponse(error, reject, resolve, data)
       })
     })

admin-ui/plugins/admin/redux/reducers/CustomScriptReducer.js

@@ -20,6 +20,8 @@ const INIT_STATE = {
   view: false,
   saveOperationFlag: false,
   errorInSaveOperationFlag: false,
+  totalItems: 0,
+  entriesCount: 0,
 }
 
 const reducerName = 'customScriptReducer'
@@ -32,8 +34,10 @@ export default function customScriptReducer(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()
@@ -44,7 +48,7 @@ export default function customScriptReducer(state = INIT_STATE, action) {
       if (action.payload.data) {
         return {
           ...state,
-          items: action.payload.data,
+          items: action.payload.data.entries,
           loading: false,
         }
       } else {

admin-ui/plugins/admin/redux/sagas/CustomScriptSaga.js

@@ -13,10 +13,7 @@ import {
   FETCH,
 } from '../../../../app/audit/UserActionType'
 import { getAPIAccessToken } from 'Redux/actions/AuthActions'
-import {
-  isFourZeroOneError,
-  addAdditionalData,
-} from 'Utils/TokenController'
+import { isFourZeroOneError, addAdditionalData } from 'Utils/TokenController'
 import {
   GET_CUSTOM_SCRIPT,
   GET_CUSTOM_SCRIPT_BY_TYPE,
@@ -45,7 +42,7 @@ export function* getCustomScripts({ payload }) {
   try {
     addAdditionalData(audit, FETCH, SCRIPT, payload)
     const scriptApi = yield* newFunction()
-    const data = yield call(scriptApi.getAllCustomScript)
+    const data = yield call(scriptApi.getAllCustomScript, payload.action)
     yield put(getCustomScriptsResponse(data))
     yield call(postUserAction, audit)
   } catch (e) {
@@ -61,10 +58,7 @@ export function* getScriptsByType({ payload }) {
   try {
     addAdditionalData(audit, FETCH, SCRIPT, payload)
     const scriptApi = yield* newFunction()
-    const data = yield call(
-      scriptApi.getScriptsByType,
-      payload.action.action_data,
-    )
+    const data = yield call(scriptApi.getScriptsByType, payload.action)
     yield put(getCustomScriptsResponse(data))
     yield call(postUserAction, audit)
   } catch (e) {

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

@@ -223,7 +223,6 @@ function ScopeListPage() {
     options['startIndex'] = parseInt(startCount) + 1
     options['limit'] = limit
     setPageNumber(page)
-    console.log(options)
     dispatch(getScopes(options))
   }
   const onRowCountChangeClick = (count) => {