From cbae66114916acea73fb72fd9cc7958b2b85b59d Mon Sep 17 00:00:00 2001 From: Steven Palmesano <3100993+spalmesano0@users.noreply.github.com> Date: Tue, 16 Jun 2026 15:04:25 -0500 Subject: [PATCH] Show actual number of selected hosts (#46334) **Related issue:** Resolves #40502 # Checklist for submitter - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. ## Testing - [x] Added/updated automated tests - [x] QA'd all new/changed functionality manually ## Summary by CodeRabbit * **Bug Fixes** * Fixed "select all matching hosts" to display the actual total count instead of showing an estimate like "50+" in table headers and delete confirmation dialogs. * **Tests** * Updated test cases to reflect accurate host count display behavior when selecting all matching hosts. [![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/fleetdm/fleet/pull/46334?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) --- changes/40502-fix-select-all-matching-hosts-count | 1 + .../components/TableContainer/DataTable/DataTable.tsx | 8 ++++++-- frontend/components/TableContainer/TableContainer.tsx | 3 +++ .../pages/hosts/ManageHostsPage/ManageHostsPage.tsx | 1 + .../DeleteHostModal/DeleteHostModal.tests.tsx | 8 ++++---- .../components/DeleteHostModal/DeleteHostModal.tsx | 10 +++++++--- 6 files changed, 22 insertions(+), 9 deletions(-) create mode 100644 changes/40502-fix-select-all-matching-hosts-count diff --git a/changes/40502-fix-select-all-matching-hosts-count b/changes/40502-fix-select-all-matching-hosts-count new file mode 100644 index 0000000000..e91686e830 --- /dev/null +++ b/changes/40502-fix-select-all-matching-hosts-count @@ -0,0 +1 @@ +* Fixed "Select all matching hosts" to display the actual total host count instead of "50+" in both the hosts table header and the delete hosts modal. diff --git a/frontend/components/TableContainer/DataTable/DataTable.tsx b/frontend/components/TableContainer/DataTable/DataTable.tsx index 40b40dc0eb..ee1a221872 100644 --- a/frontend/components/TableContainer/DataTable/DataTable.tsx +++ b/frontend/components/TableContainer/DataTable/DataTable.tsx @@ -50,6 +50,7 @@ interface IDataTableProps { isAllPagesSelected: boolean; // TODO: make dependent on showMarkAllPages toggleAllPagesSelected?: any; // TODO: an event type and make it dependent on showMarkAllPages resultsTitle?: string; + totalCount?: number; defaultPageSize: number; defaultPageIndex?: number; defaultSelectedRows?: Record; @@ -109,6 +110,7 @@ const DataTable = ({ isAllPagesSelected, toggleAllPagesSelected, resultsTitle = "results", + totalCount, defaultPageSize, defaultPageIndex, defaultSelectedRows = {}, @@ -452,8 +454,10 @@ const DataTable = ({ return (

- {selectedCount} - {isAllPagesSelected && "+"} + {isAllPagesSelected && totalCount !== undefined + ? totalCount + : selectedCount} + {isAllPagesSelected && totalCount === undefined && "+"} {" "} selected

diff --git a/frontend/components/TableContainer/TableContainer.tsx b/frontend/components/TableContainer/TableContainer.tsx index 3770a1c74e..327de42a4f 100644 --- a/frontend/components/TableContainer/TableContainer.tsx +++ b/frontend/components/TableContainer/TableContainer.tsx @@ -59,6 +59,7 @@ interface ITableContainerProps { showMarkAllPages: boolean; isAllPagesSelected: boolean; // TODO: make dependent on showMarkAllPages toggleAllPagesSelected?: any; // TODO: an event type and make it dependent on showMarkAllPages + totalCount?: number; searchable?: boolean; disableSearch?: boolean; wideSearch?: boolean; @@ -152,6 +153,7 @@ const TableContainer = ({ showMarkAllPages, isAllPagesSelected, toggleAllPagesSelected, + totalCount, searchable, disableSearch, wideSearch, @@ -558,6 +560,7 @@ const TableContainer = ({ showMarkAllPages={showMarkAllPages} isAllPagesSelected={isAllPagesSelected} toggleAllPagesSelected={toggleAllPagesSelected} + totalCount={totalCount} resultsTitle={resultsTitle} defaultPageSize={pageSize} defaultPageIndex={pageIndex} diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx index 2bd9c0f314..a7207cfce7 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx @@ -1993,6 +1993,7 @@ const ManageHostsPage = ({ secondarySelectActions={secondarySelectActions} showMarkAllPages={!unsupportedFilter} // Shortterm fix for #17257 isAllPagesSelected={isAllMatchingHostsSelected} + totalCount={totalFilteredHostsCount} searchable disableSearch={isTrulyEmpty} renderCount={renderHostCountAndExport} diff --git a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tests.tsx b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tests.tsx index 9569b52a29..7aca75f584 100644 --- a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tests.tsx +++ b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tests.tsx @@ -29,7 +29,7 @@ describe("DeleteHostModal", () => { expect(screen.getByText("Host1")).toBeVisible(); }); - it("renders the number of hosts selected with '+' after when select all matching hosts is true", () => { + it("renders the total hosts count when select all matching hosts is true", () => { render( { isUpdating={false} /> ); - expect(screen.getByText("3+ hosts")).toBeVisible(); + expect(screen.getByText("50 hosts")).toBeVisible(); }); - it("renders the host count with '+' and an additional warning when there are more than 500 hosts and select all matching hosts is true", () => { + it("renders the host count with an additional warning when there are more than 500 hosts and select all matching hosts is true", () => { render( { isUpdating={false} /> ); - expect(screen.getByText("3+ hosts")).toBeVisible(); + expect(screen.getByText("500 hosts")).toBeVisible(); expect( screen.getByText( "When deleting a large volume of hosts, it may take some time for this change to be reflected in the UI." diff --git a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx index 784614afd0..5126232941 100644 --- a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx +++ b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx @@ -34,9 +34,13 @@ const DeleteHostModal = ({ }: IDeleteHostModalProps): JSX.Element => { const hostText = () => { if (selectedHostIds) { - return `${selectedHostIds.length}${ - isAllMatchingHostsSelected ? "+" : "" - } ${strUtils.pluralize(selectedHostIds.length, "host")}`; + const count = + isAllMatchingHostsSelected && hostsCount !== undefined + ? hostsCount + : selectedHostIds.length; + const suffix = + isAllMatchingHostsSelected && hostsCount === undefined ? "+" : ""; + return `${count}${suffix} ${strUtils.pluralize(count, "host")}`; } return hostName; };