diff --git a/changes/issue-7357-fix-next-button-server-side b/changes/issue-7357-fix-next-button-server-side new file mode 100644 index 0000000000..7814bbfb3f --- /dev/null +++ b/changes/issue-7357-fix-next-button-server-side @@ -0,0 +1 @@ +* Disable next buton for manage host page when next page has 0 results diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx index 298a003b0f..49b61f1421 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx @@ -78,6 +78,7 @@ import { LABEL_SLUG_PREFIX, DEFAULT_SORT_HEADER, DEFAULT_SORT_DIRECTION, + DEFAULT_PAGE_SIZE, HOST_SELECT_STATUSES, } from "./constants"; import { isAcceptableStatus, getNextLocationPath } from "./helpers"; @@ -563,6 +564,12 @@ const ManageHostsPage = ({ } }, [availableTeams, currentTeam, location, labels]); + const isLastPage = + tableQueryData && + !!filteredHostCount && + DEFAULT_PAGE_SIZE * tableQueryData.pageIndex + (hosts?.length || 0) >= + filteredHostCount; + const handleLabelChange = ({ slug }: ILabel): boolean => { if (!slug) { return false; @@ -1889,6 +1896,7 @@ const ManageHostsPage = ({ onPrimarySelectActionClick={onDeleteHostsClick} onQueryChange={onTableQueryChange} toggleAllPagesSelected={toggleAllMatchingHosts} + disableNextPage={isLastPage} /> ); }; diff --git a/frontend/pages/hosts/ManageHostsPage/constants.ts b/frontend/pages/hosts/ManageHostsPage/constants.ts index a2a83ae5ab..d1354fce43 100644 --- a/frontend/pages/hosts/ManageHostsPage/constants.ts +++ b/frontend/pages/hosts/ManageHostsPage/constants.ts @@ -5,6 +5,7 @@ export const LABEL_SLUG_PREFIX = "labels/"; export const DEFAULT_SORT_HEADER = "hostname"; export const DEFAULT_SORT_DIRECTION = "asc"; +export const DEFAULT_PAGE_SIZE = 20; export const HOST_SELECT_STATUSES = [ {