Fix resetting page index to 0 when reloading, add page index bounds guard

Author: Georgi2704

.changeset/tall-cows-fry.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': patch
+---
+
+Fix resetting page index to 0 when reloading, add page index bounds guard

apps/wfo-ui

@@ -18,7 +18,11 @@ import { getPageCount } from '../utils/tableUtils';
 import { WfoTableDataRows } from './WfoTableDataRows';
 import { WfoTableHeaderRow } from './WfoTableHeaderRow';
 import { getWfoTableStyles } from './styles';
-import { getColumnWidthsFromConfig, getSortedVisibleColumns } from './utils';
+import {
+    getColumnWidthsFromConfig,
+    getSortedVisibleColumns,
+    usePageIndexBoundsGuard,
+} from './utils';
 
 export type Pagination = {
     pageSize: number;
@@ -133,6 +137,8 @@ export const WfoTable = <T extends object>({
 }: WfoTableProps<T>) => {
     const [localColumnWidths, setLocalColumnWidths] =
         useState<LocalColumnWidths>(getColumnWidthsFromConfig(columnConfig));
+    const dataLength = data.length;
+    usePageIndexBoundsGuard({ dataLength, isLoading, pagination });
 
     const parentRef = useRef<HTMLDivElement>(null);
 
@@ -191,7 +197,7 @@ export const WfoTable = <T extends object>({
     }, {} as WfoTableColumnConfig<T>);
 
     const rowVirtualizer = useVirtualizer({
-        count: data.length,
+        count: dataLength,
         getScrollElement: () => parentRef.current,
         estimateSize: () => ROW_HEIGHT,
         overscan: 10,
@@ -231,7 +237,7 @@ export const WfoTable = <T extends object>({
                             />
                         </thead>
                     )}
-                    {data.length === 0 ? (
+                    {dataLength === 0 ? (
                         <tbody css={isLoading && bodyLoadingStyle}>
                             <tr css={rowStyle}>
                                 <td

package-lock.json

@@ -1,4 +1,6 @@
-import { LocalColumnWidths, TableColumnKeys } from '@/components';
+import { useEffect } from 'react';
+
+import { LocalColumnWidths, Pagination, TableColumnKeys } from '@/components';
 import { SortOrder } from '@/types';
 import { toObjectWithSortedKeys } from '@/utils';
 
@@ -93,3 +95,29 @@ export const getColumnWidthsFromConfig = <T extends object>(
         return columnWidths;
     }, {} as LocalColumnWidths);
 };
+
+export const usePageIndexBoundsGuard = ({
+    dataLength,
+    isLoading,
+    pagination,
+}: {
+    dataLength: number;
+    isLoading: boolean;
+    pagination?: Pagination;
+}) => {
+    useEffect(() => {
+        if (!pagination) return;
+
+        const { pageIndex, pageSize, totalItemCount, onChangePage } =
+            pagination;
+
+        const maxPage = Math.max(
+            0,
+            Math.floor(((totalItemCount ?? 1) - 1) / pageSize),
+        );
+
+        if (!isLoading && dataLength === 0 && pageIndex > maxPage) {
+            onChangePage?.(maxPage);
+        }
+    }, [dataLength, isLoading, pagination]);
+};

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx

@@ -64,7 +64,6 @@ export const getQueryStringHandler =
                 ? `${queryString}*`
                 : queryString;
         setDataDisplayParam('queryString', query);
-        setDataDisplayParam('pageIndex', 0);
     };
 
 export const getPageCount = (pagination: Pagination) =>