Fleet UI: Changing pages, filters, or search query clears checkbox selections (#14902)

changes/14596-reset-selected-rows

@@ -0,0 +1 @@
+- All Fleet tables in the UI will reset rows selected if user changes filters, search query, or paginates

frontend/components/TableContainer/DataTable/DataTable.tsx

@@ -102,7 +102,6 @@ const DataTable = ({
   renderPagination,
   setExportRows,
 }: IDataTableProps): JSX.Element => {
-  const { resetSelectedRows } = useContext(TableContext);
   const { isOnlyObserver } = useContext(AppContext);
 
   const columns = useMemo(() => {
@@ -152,8 +151,8 @@ const DataTable = ({
       disableMultiSort: true,
       disableSortRemove: true,
       manualSortBy,
-      // Initializes as false, but changes briefly to true on successful notification
-      autoResetSelectedRows: resetSelectedRows,
+      // Resets row selection on (server-side) pagination
+      autoResetSelectedRows: true,
       // Expands the enumerated `filterTypes` for react-table
       // (see https://github.com/TanStack/react-table/blob/alpha/packages/react-table/src/filterTypes.ts)
       // with custom `filterTypes` defined for this `useTable` instance
@@ -254,12 +253,14 @@ const DataTable = ({
 
   useEffect(() => {
     if (isClientSideFilter && searchQueryColumn) {
+      toggleAllRowsSelected(false); // Resets row selection on query change (client-side)
       setDebouncedClientFilter(searchQueryColumn, searchQuery || "");
     }
   }, [searchQuery, searchQueryColumn]);
 
   useEffect(() => {
     if (isClientSideFilter && selectedDropdownFilter) {
+      toggleAllRowsSelected(false); // Resets row selection on filter change (client-side)
       selectedDropdownFilter === "all"
         ? setDebouncedClientFilter("platforms", "")
         : setDebouncedClientFilter("platforms", selectedDropdownFilter);
@@ -575,6 +576,7 @@ const DataTable = ({
             <Button
               variant="unstyled"
               onClick={() => {
+                toggleAllRowsSelected(false); // Resets row selection on pagination (client-side)
                 onClientSidePaginationChange &&
                   onClientSidePaginationChange(pageIndex - 1);
                 previousPage();
@@ -586,6 +588,7 @@ const DataTable = ({
             <Button
               variant="unstyled"
               onClick={() => {
+                toggleAllRowsSelected(false); // Resets row selection on pagination (client-side)
                 onClientSidePaginationChange &&
                   onClientSidePaginationChange(pageIndex + 1);
                 nextPage();