From f0d376078458fb86bc4bc25832e88980e3db07f6 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 3 Nov 2023 07:40:19 -0400
Subject: [PATCH] Fleet UI: Changing pages, filters, or search query clears
 checkbox selections (#14902)

---
 changes/14596-reset-selected-rows                        | 1 +
 .../components/TableContainer/DataTable/DataTable.tsx    | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)
 create mode 100644 changes/14596-reset-selected-rows

diff --git a/changes/14596-reset-selected-rows b/changes/14596-reset-selected-rows
new file mode 100644
index 0000000000..40b7886412
--- /dev/null
+++ b/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
diff --git a/frontend/components/TableContainer/DataTable/DataTable.tsx b/frontend/components/TableContainer/DataTable/DataTable.tsx
index 2e496ba902..4afa3fb518 100644
--- a/frontend/components/TableContainer/DataTable/DataTable.tsx
+++ b/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();