From 787eec41358b81c1e81c7d43e5f00b7d4d579438 Mon Sep 17 00:00:00 2001
From: robertdavidsmith <34475852+robertdavidsmith@users.noreply.github.com>
Date: Wed, 13 Dec 2023 17:29:15 +0000
Subject: [PATCH] LookoutV2: Move back to first page when set of rows changes
 (#39) (#3194)

---
 .../lookoutV2/JobsTableContainer.tsx          | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/internal/lookout/ui/src/containers/lookoutV2/JobsTableContainer.tsx b/internal/lookout/ui/src/containers/lookoutV2/JobsTableContainer.tsx
index 66698b75527..0816bde2462 100644
--- a/internal/lookout/ui/src/containers/lookoutV2/JobsTableContainer.tsx
+++ b/internal/lookout/ui/src/containers/lookoutV2/JobsTableContainer.tsx
@@ -290,11 +290,18 @@ export const JobsTableContainer = ({
     }
   }
 
+  const setToFirstPage = () => {
+    setPagination({
+      pageIndex: 0,
+      pageSize: pageSize,
+    })
+  }
+
   const loadPrefs = (prefs: JobsTablePreferences) => {
     setGrouping(prefs.groupedColumns)
     setExpanded(prefs.expandedState)
     setPagination({
-      pageIndex: prefs.pageIndex,
+      pageIndex: 0,
       pageSize: prefs.pageSize,
     })
     setLookoutOrder(prefs.order)
@@ -320,9 +327,7 @@ export const JobsTableContainer = ({
     setTextFields(prefs.filters)
 
     // Load data
-    setRowsToFetch(
-      pendingDataForAllVisibleData(prefs.expandedState, data, prefs.pageSize, prefs.pageIndex * prefs.pageSize),
-    )
+    setRowsToFetch(pendingDataForAllVisibleData(prefs.expandedState, data, prefs.pageSize))
   }
 
   // Update query params with table state
@@ -360,6 +365,7 @@ export const JobsTableContainer = ({
   const loadCustomView = (name: string) => {
     try {
       const prefs = customViewsService.getView(name)
+      setToFirstPage()
       loadPrefs(prefs)
     } catch (e) {
       console.error(getErrorMessage(e))
@@ -449,6 +455,7 @@ export const JobsTableContainer = ({
 
   const onGroupingChange = useCallback(
     (newGroups: ColumnId[]) => {
+      setToFirstPage()
       // Reset currently expanded/selected when grouping changes
       setSelectedRows({})
       setSidebarJobId(undefined)
@@ -565,6 +572,7 @@ export const JobsTableContainer = ({
   }
 
   const onFilterChange = (updater: Updater<ColumnFiltersState>) => {
+    setToFirstPage()
     const newFilterState = updaterToValue(updater, columnFilterState)
     setLookoutFilters(parseLookoutFilters(newFilterState))
     setColumnFilterState(newFilterState)
@@ -583,11 +591,12 @@ export const JobsTableContainer = ({
   }
 
   const onSortingChange = (updater: Updater<SortingState>) => {
+    setToFirstPage()
     const newSortingState = updaterToValue(updater, sorting)
     setLookoutOrder(toLookoutOrder(newSortingState))
     setSorting(newSortingState)
     // Refetch any expanded subgroups, and root data with updated sorting params
-    setRowsToFetch(pendingDataForAllVisibleData(expanded, data, pageSize, pageIndex * pageSize))
+    setRowsToFetch(pendingDataForAllVisibleData(expanded, data, pageSize))
   }
 
   const onColumnSizingChange = useCallback(
@@ -729,7 +738,9 @@ export const JobsTableContainer = ({
             activeJobSets={activeJobSets}
             onActiveJobSetsChanged={(newVal) => {
               setActiveJobSets(newVal)
-              onRefresh()
+              setToFirstPage()
+              setSelectedRows({})
+              setRowsToFetch(pendingDataForAllVisibleData(expanded, data, pageSize))
             }}
             onRefresh={onRefresh}
             autoRefresh={autoRefresh}