From d19e5c4a9a6ef3c77210ac86a48cc3dc4d362b66 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Wed, 31 Jul 2024 10:02:16 -0700
Subject: [PATCH] =?UTF-8?q?=20UI=20=E2=80=93=20Fix=20hosts=20table=20pagin?=
 =?UTF-8?q?ation=20(#20853)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## #20604
<img width="1511" alt="Screenshot 2024-07-30 at 11 50 20 AM"
src="https://github.com/user-attachments/assets/c96ff108-4c3b-436a-8d4b-c3e2099264dd">

<img width="1511" alt="Screenshot 2024-07-30 at 11 50 48 AM"
src="https://github.com/user-attachments/assets/63a4596a-dd12-41e3-8c83-f196ac3b3a40">

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/20604-hosts-page-pagination                      | 1 +
 frontend/pages/hosts/ManageHostsPage/HostsPageConfig.tsx | 2 +-
 frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx | 6 +++---
 3 files changed, 5 insertions(+), 4 deletions(-)
 create mode 100644 changes/20604-hosts-page-pagination

diff --git a/changes/20604-hosts-page-pagination b/changes/20604-hosts-page-pagination
new file mode 100644
index 0000000000..c1f68d5f94
--- /dev/null
+++ b/changes/20604-hosts-page-pagination
@@ -0,0 +1 @@
+* Fix a bug where hosts page would sometimes allow excess pagination
\ No newline at end of file
diff --git a/frontend/pages/hosts/ManageHostsPage/HostsPageConfig.tsx b/frontend/pages/hosts/ManageHostsPage/HostsPageConfig.tsx
index 114b537d3b..910f4813f3 100644
--- a/frontend/pages/hosts/ManageHostsPage/HostsPageConfig.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/HostsPageConfig.tsx
@@ -55,7 +55,7 @@ export const LABEL_SLUG_PREFIX = "labels/";
 
 export const DEFAULT_SORT_HEADER = "display_name";
 export const DEFAULT_SORT_DIRECTION = "asc";
-export const DEFAULT_PAGE_SIZE = 20;
+export const DEFAULT_PAGE_SIZE = 50;
 export const DEFAULT_PAGE_INDEX = 0;
 
 export const getHostSelectStatuses = (isSandboxMode = false) => {
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
index e5bd75fd0e..71f2386c58 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
@@ -405,8 +405,8 @@ const ManageHostsPage = ({
         osName,
         osVersion,
         vulnerability,
-        page: tableQueryData ? tableQueryData.pageIndex : 0,
-        perPage: tableQueryData ? tableQueryData.pageSize : 50,
+        page: tableQueryData ? tableQueryData.pageIndex : DEFAULT_PAGE_INDEX,
+        perPage: tableQueryData ? tableQueryData.pageSize : DEFAULT_PAGE_SIZE,
         device_mapping: true,
         osSettings: osSettingsStatus,
         diskEncryptionStatus,
@@ -1578,7 +1578,7 @@ const ManageHostsPage = ({
         }
         defaultPageIndex={page || DEFAULT_PAGE_INDEX}
         defaultSearchQuery={searchQuery}
-        pageSize={50}
+        pageSize={DEFAULT_PAGE_SIZE}
         additionalQueries={JSON.stringify(selectedFilters)}
         inputPlaceHolder={HOSTS_SEARCH_BOX_PLACEHOLDER}
         actionButton={{