feat(UserList): add users per page selector

landonreed · landonreed · commit 0445e120afda · 2020-11-11T17:13:38.000-05:00
works with changes in ibi-group/datatools-server#353
diff --git a/i18n/english.yml b/i18n/english.yml
@@ -764,6 +764,7 @@ components:
   UserList:
     filterByOrg: Filter by org.
     of: of
+    perPage: Users per page
     search: Search by username
     showing: Showing Users
     title: User Management
diff --git a/lib/admin/actions/admin.js b/lib/admin/actions/admin.js
@@ -1,6 +1,7 @@
 // @flow
 
 import {createAction, type ActionType} from 'redux-actions'
+import qs from 'qs'
 
 import {createVoidPayloadAction, secureFetch} from '../../common/actions'
 import {setErrorMessage} from '../../manager/actions/status'
@@ -47,6 +48,10 @@ export const setUserPage = createAction(
   'SET_USER_PAGE',
   (payload: number) => payload
 )
+export const setUserPerPage = createAction(
+  'SET_USER_PER_PAGE',
+  (payload: number) => payload
+)
 export const setUserQueryString = createAction(
   'SET_USER_QUERY_STRING',
   (payload: string) => payload
@@ -56,6 +61,7 @@ export type AdminActions = ActionType<typeof createdUser> |
   ActionType<typeof receiveUsers> |
   ActionType<typeof requestingUsers> |
   ActionType<typeof setUserPage> |
+  ActionType<typeof setUserPerPage> |
   ActionType<typeof setUserQueryString> |
   ActionType<typeof deleteServer> |
   ActionType<typeof fetchServers> |
@@ -64,17 +70,15 @@ export type AdminActions = ActionType<typeof createdUser> |
 export function fetchUsers () {
   return function (dispatch: dispatchFn, getState: getStateFn) {
     dispatch(requestingUsers())
-    const queryString = getState().admin.users.userQueryString
-
+    const {page, perPage, userQueryString: queryString} = getState().admin.users
     let countUrl = '/api/manager/secure/usercount'
-    if (queryString) countUrl += `?queryString=${queryString}`
+    if (queryString) countUrl += `?${qs.stringify({queryString})}`
     const getCount = dispatch(secureFetch(countUrl))
-      .then(response => response.json())
-
-    let usersUrl = `/api/manager/secure/user?page=${getState().admin.users.page}`
-    if (queryString) usersUrl += `&queryString=${queryString}`
+      .then(res => res.json())
+    const params = queryString ? {page, perPage, queryString} : {page, perPage}
+    const usersUrl = `/api/manager/secure/user?${qs.stringify(params)}`
     const getUsers = dispatch(secureFetch(usersUrl))
-      .then(response => response.json())
+      .then(res => res.json())
 
     Promise.all([getCount, getUsers]).then((results) => {
       if (Array.isArray(results[1])) {
diff --git a/lib/admin/components/UserList.js b/lib/admin/components/UserList.js
@@ -3,7 +3,19 @@
 import Icon from '@conveyal/woonerf/components/icon'
 import React, {Component} from 'react'
 import {connect} from 'react-redux'
-import {Panel, Row, Col, Button, ButtonGroup, InputGroup, FormControl, ListGroup, ListGroupItem} from 'react-bootstrap'
+import {
+  Panel,
+  Row,
+  Col,
+  Button,
+  ButtonGroup,
+  DropdownButton,
+  InputGroup,
+  FormControl,
+  ListGroup,
+  ListGroupItem,
+  MenuItem
+} from 'react-bootstrap'
 
 import * as adminActions from '../actions/admin'
 import {getComponentMessages} from '../../common/util/config'
@@ -27,6 +39,7 @@ type Props = {
   perPage: number,
   projects: Array<Project>,
   setUserPage: typeof adminActions.setUserPage,
+  setUserPerPage: typeof adminActions.setUserPerPage,
   setUserQueryString: typeof adminActions.setUserQueryString,
   token: string,
   updateUserData: typeof managerUserActions.updateUserData,
@@ -75,6 +88,12 @@ class UserList extends Component<Props, State> {
     fetchUsers()
   }
 
+  _setUserPerPage = (perPage: number) => {
+    const {fetchUsers, setUserPerPage} = this.props
+    setUserPerPage(perPage)
+    fetchUsers()
+  }
+
   _userSearch = () => {
     const {fetchUsers, setUserPage, setUserQueryString} = this.props
     setUserPage(0)
@@ -132,6 +151,21 @@ class UserList extends Component<Props, State> {
               </span>
               : <span style={headerStyle}>(No results to show)</span>
             }
+            <div className='pull-right'>
+              {this.messages('perPage')}{' '}
+              <DropdownButton
+                id='per-page-dropdown'
+                title={perPage}
+                onSelect={this._setUserPerPage}>
+                {// Render users per page options.
+                  [10, 25, 50, 100].map(val =>
+                    <MenuItem key={`option-${val}`} eventKey={val}>
+                      {val} {val === perPage ? <Icon type='check' /> : null}
+                    </MenuItem>
+                  )
+                }
+              </DropdownButton>
+            </div>
           </Col>
         </Row>
         <Panel
@@ -238,6 +272,7 @@ const {
   deleteUser,
   fetchUsers,
   setUserPage,
+  setUserPerPage,
   setUserQueryString
 } = adminActions
 
@@ -247,6 +282,7 @@ const mapDispatchToProps = {
   fetchProjectFeeds,
   fetchUsers,
   setUserPage,
+  setUserPerPage,
   setUserQueryString,
   updateUserData
 }
diff --git a/lib/admin/components/UserRow.js b/lib/admin/components/UserRow.js
@@ -45,6 +45,17 @@ export default class UserRow extends Component<Props, State> {
     this.toggleExpansion()
   }
 
+  _getOrgLabel = (permissions: UserPermissions) => {
+    const {creatingUser, organizations} = this.props
+    if (!organizations) return null
+    const userOrganization = organizations.find(o => o.id === permissions.getOrganizationId())
+    const creatorIsApplicationAdmin = creatingUser.permissions &&
+      creatingUser.permissions.isApplicationAdmin()
+    return userOrganization && creatorIsApplicationAdmin
+      ? <BsLabel bsStyle='default'>{userOrganization.name}</BsLabel>
+      : null
+  }
+
   /**
    * Constructs label indicating user authorization level (e.g., app/org admin)
    * or listing the projects the user has access to.
@@ -127,7 +138,6 @@ export default class UserRow extends Component<Props, State> {
     const permissions = new UserPermissions(user.app_metadata && user.app_metadata.datatools)
     const creatorIsApplicationAdmin = creatingUser.permissions &&
       creatingUser.permissions.isApplicationAdmin()
-    const userOrganization = organizations.find(o => o.id === permissions.getOrganizationId())
     const creatorDoesNotHaveOrg = !creatingUser.permissions ||
       // $FlowFixMe
       !creatingUser.permissions.hasOrganization(permissions.getOrganizationId())
@@ -152,10 +162,7 @@ export default class UserRow extends Component<Props, State> {
               {user.email}{' '}
               {this._getUserPermissionLabel(permissions)}
               {' '}
-              {userOrganization && creatorIsApplicationAdmin
-                ? <BsLabel bsStyle='default'>{userOrganization.name}</BsLabel>
-                : null
-              }
+              {this._getOrgLabel(permissions)}
             </h5>
             <small />
           </Col>
diff --git a/lib/admin/reducers/users.js b/lib/admin/reducers/users.js
@@ -6,11 +6,11 @@ import type {Action} from '../../types/actions'
 import type {AdminUsersState} from '../../types/reducers'
 
 export const defaultState = {
-  isFetching: false,
   data: null,
-  userCount: 0,
+  isFetching: false,
   page: 0,
   perPage: 10,
+  userCount: 0,
   userQueryString: null
 }
 
@@ -32,6 +32,8 @@ const users = (state: AdminUsersState = defaultState, action: Action): AdminUser
       return state
     case 'SET_USER_PAGE':
       return update(state, {page: { $set: action.payload }})
+    case 'SET_USER_PER_PAGE':
+      return update(state, {perPage: { $set: action.payload }})
     case 'SET_USER_QUERY_STRING':
       return update(state, {userQueryString: { $set: action.payload }})
     default:
