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; };