diff --git a/ui2/src/cconstants.ts b/ui2/src/cconstants.ts
index ea9756a3e..1d0c89dac 100644
--- a/ui2/src/cconstants.ts
+++ b/ui2/src/cconstants.ts
@@ -43,3 +43,4 @@ export const STORAGE_KEY_PAGINATION_MITEMS_PER_PAGE = "mitems_per_page"
export const STORAGE_KEY_PAGINATION_SITEMS_PER_PAGE = "sitems_per_page"
export const PAGINATION_PAGE_SIZES = ["5", "10", "15", "25", "50"]
+export const INITIAL_PAGE_SIZE = 5
diff --git a/ui2/src/components/users/List.tsx b/ui2/src/components/users/List.tsx
index 60fb3ff43..cce243551 100644
--- a/ui2/src/components/users/List.tsx
+++ b/ui2/src/components/users/List.tsx
@@ -50,7 +50,7 @@ export default function UsersList() {
Username
Email
- UUID
+ ID
{groupRows}
diff --git a/ui2/src/components/users/Pagination.tsx b/ui2/src/components/users/Pagination.tsx
index 2bb071196..0a619534d 100644
--- a/ui2/src/components/users/Pagination.tsx
+++ b/ui2/src/components/users/Pagination.tsx
@@ -1,12 +1,13 @@
import {Pagination, Skeleton, Group, Select} from "@mantine/core"
import {useDispatch, useSelector} from "react-redux"
-import {selectPagination, fetchUsers} from "@/slices/users"
+import {selectPagination, fetchUsers, selectLastPageSize} from "@/slices/users"
import classes from "./Pagination.module.css"
import {PAGINATION_PAGE_SIZES} from "@/cconstants"
export default function UserPagination() {
const dispatch = useDispatch()
const pagination = useSelector(selectPagination)
+ const lastPageSize = useSelector(selectLastPageSize)
const onPageNumberChange = (page: number) => {
dispatch(fetchUsers({pageNumber: page, pageSize: pagination?.pageSize}))
@@ -26,6 +27,7 @@ export default function UserPagination() {
className={classes.select}
value={`${pagination.pageSize}`}
onChange={onPageSizeChange}
+ defaultValue={`${lastPageSize}`}
data={PAGINATION_PAGE_SIZES}
/>
diff --git a/ui2/src/pages/users/List.tsx b/ui2/src/pages/users/List.tsx
index 56aeae1a3..d4d64ab8d 100644
--- a/ui2/src/pages/users/List.tsx
+++ b/ui2/src/pages/users/List.tsx
@@ -7,7 +7,11 @@ export default function UsersListPage() {
}
export async function loader() {
- await store.dispatch(fetchUsers({pageNumber: 1}))
+ const state = store.getState()
+
+ await store.dispatch(
+ fetchUsers({pageNumber: 1, pageSize: state.users.lastPageSize})
+ )
return null
}
diff --git a/ui2/src/slices/users.ts b/ui2/src/slices/users.ts
index 38d8e77fa..5695a49b8 100644
--- a/ui2/src/slices/users.ts
+++ b/ui2/src/slices/users.ts
@@ -8,8 +8,8 @@ import axios from "@/httpClient"
import {RootState} from "@/app/types"
import type {CreateUser, User, UserDetails, Paginated} from "@/types"
-
import type {SliceStateStatus, SliceStateError} from "@/types"
+import {INITIAL_PAGE_SIZE} from "@/cconstants"
export type Pagination = {
numPages: number
@@ -22,17 +22,17 @@ export type ExtraStateType = {
error: SliceStateError
selectedIds: Array
pagination: Pagination | null
+ lastPageSize: number
}
export const extraState: ExtraStateType = {
status: "idle",
error: null,
selectedIds: [],
- pagination: null
+ pagination: null,
+ lastPageSize: INITIAL_PAGE_SIZE
}
-export const INITIAL_PAGE_SIZE = 5
-
const usersAdapter = createEntityAdapter({
selectId: (user: User) => user.id,
sortComparer: (u1, u2) => u1.username.localeCompare(u2.username)
@@ -66,6 +66,7 @@ const usersSlice = createSlice({
pageNumber: action.payload.page_number,
pageSize: action.payload.page_size
}
+ state.lastPageSize = action.payload.page_size
})
builder.addCase(fetchUser.fulfilled, (state, action) => {
const newUser = action.payload
@@ -175,3 +176,7 @@ export const selectUsersByIds = (state: RootState, userIds: string[]) => {
export const selectPagination = (state: RootState): Pagination | null => {
return state.users.pagination
}
+
+export const selectLastPageSize = (state: RootState): number => {
+ return state.users.lastPageSize
+}