Fix #19068: While user in Pagination, Browser Back button takes them to start page

openmetadata-ui/src/main/resources/ui/src/hooks/paging/usePaging.ts

@@ -17,12 +17,21 @@ import {
   useMemo,
   useState,
 } from 'react';
+import { useHistory } from 'react-router-dom';
 import {
   INITIAL_PAGING_VALUE,
   PAGE_SIZE_BASE,
   pagingObject,
 } from '../../constants/constants';
+import { CursorType } from '../../enums/pagination.enum';
 import { Paging } from '../../generated/type/paging';
+import useCustomLocation from '../useCustomLocation/useCustomLocation';
+
+interface CursorState {
+  cursorType: CursorType | null;
+  cursorValue: string | null;
+  currentPage: number | null;
+}
 
 export interface UsePagingInterface {
   paging: Paging;
@@ -32,6 +41,12 @@ export interface UsePagingInterface {
   pageSize: number;
   handlePageSizeChange: (page: number) => void;
   showPagination: boolean;
+  storeCursor: (params: {
+    cursorType: CursorType | null;
+    cursorValue: string | null;
+    currentPage: number | null;
+  }) => void;
+  getStoredCursor: () => CursorState;
 }
 
 export const usePaging = (
@@ -40,6 +55,8 @@ export const usePaging = (
   const [paging, setPaging] = useState<Paging>(pagingObject);
   const [currentPage, setCurrentPage] = useState<number>(INITIAL_PAGING_VALUE);
   const [pageSize, setPageSize] = useState(defaultPageSize);
+  const history = useHistory();
+  const location = useCustomLocation();
 
   const handlePageSize = useCallback(
     (page: number) => {
@@ -53,6 +70,39 @@ export const usePaging = (
     return paging.total > pageSize || pageSize !== defaultPageSize;
   }, [defaultPageSize, paging, pageSize]);
 
+  const storeCursor = useCallback(
+    ({
+      cursorType,
+      cursorValue,
+      currentPage,
+    }: {
+      cursorType: CursorType | null;
+      cursorValue: string | null;
+      currentPage: number | null;
+    }) => {
+      history.replace({
+        state: {
+          cursorType,
+          cursorValue,
+          currentPage,
+        },
+      });
+    },
+    []
+  );
+
+  const getStoredCursor = () => {
+    const cursorState = location.state as CursorState | undefined;
+
+    return cursorState
+      ? {
+          cursorType: cursorState.cursorType || null,
+          cursorValue: cursorState.cursorValue || null,
+          currentPage: cursorState.currentPage || null,
+        }
+      : { cursorType: null, cursorValue: null, currentPage: null };
+  };
+
   return {
     paging,
     handlePagingChange: setPaging,
@@ -61,5 +111,7 @@ export const usePaging = (
     pageSize,
     handlePageSizeChange: handlePageSize,
     showPagination: paginationVisible,
+    storeCursor,
+    getStoredCursor,
   };
 };

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx

@@ -56,6 +56,7 @@ import {
   EntityType,
   TabSpecificField,
 } from '../../enums/entity.enum';
+import { CursorType } from '../../enums/pagination.enum';
 import { CreateThread } from '../../generated/api/feed/createThread';
 import { Tag } from '../../generated/entity/classification/tag';
 import { DatabaseSchema } from '../../generated/entity/data/databaseSchema';
@@ -100,6 +101,8 @@ const DatabaseSchemaPage: FunctionComponent = () => {
     handlePagingChange,
     currentPage,
     handlePageChange,
+    storeCursor,
+    getStoredCursor,
   } = pagingInfo;
 
   const { tab: activeTab = EntityTabs.TABLE } =
@@ -461,10 +464,15 @@ const DatabaseSchemaPage: FunctionComponent = () => {
     ({ cursorType, currentPage }: PagingHandlerParams) => {
       if (cursorType) {
         getSchemaTables({ [cursorType]: paging[cursorType] });
+        storeCursor({
+          cursorType: cursorType,
+          cursorValue: paging[cursorType as CursorType]!,
+          currentPage: currentPage,
+        });
       }
       handlePageChange(currentPage);
     },
-    [paging, getSchemaTables]
+    [paging, getSchemaTables, storeCursor, handlePageChange]
   );
 
   const versionHandler = useCallback(() => {
@@ -520,8 +528,19 @@ const DatabaseSchemaPage: FunctionComponent = () => {
   }, [viewDatabaseSchemaPermission]);
 
   useEffect(() => {
+    const cursorState = getStoredCursor();
     if (viewDatabaseSchemaPermission && decodedDatabaseSchemaFQN) {
-      getSchemaTables({ limit: pageSize });
+      if (cursorState.cursorType) {
+        // Fetch data if cursorType is present in state with cursor Value to handle browser back navigation
+        getSchemaTables({
+          [cursorState.cursorType]: cursorState.cursorValue,
+          limit: pageSize,
+        });
+        handlePageChange(cursorState.currentPage as number);
+      } else {
+        // Otherwise, just fetch the data without cursor value
+        getSchemaTables({ limit: pageSize });
+      }
     }
   }, [
     showDeletedTables,

openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.test.tsx

@@ -192,6 +192,7 @@ jest.mock('react-router-dom', () => ({
       push: jest.fn(),
     },
   })),
+  useLocation: jest.fn(),
   useParams: jest.fn().mockImplementation(() => mockParams),
 }));