fix pagination state shared between collections (#28618)

frontend/src/metabase/collections/containers/CollectionContent.jsx

@@ -80,7 +80,8 @@ function CollectionContent({
     sort_column: "name",
     sort_direction: "asc",
   });
-  const { handleNextPage, handlePreviousPage, setPage, page } = usePagination();
+  const { handleNextPage, handlePreviousPage, setPage, page, resetPage } =
+    usePagination();
   const { selected, toggleItem, toggleAll, getIsSelected, clear } =
     useListSelect(itemKeyFn);
   const previousCollection = usePrevious(collection);
@@ -94,8 +95,9 @@ function CollectionContent({
   useEffect(() => {
     if (previousCollection && previousCollection.id !== collection.id) {
       clear();
+      resetPage();
     }
-  }, [previousCollection, collection, clear]);
+  }, [previousCollection, collection, clear, resetPage]);
 
   useEffect(() => {
     const shouldBeBookmarked = bookmarks.some(

frontend/src/metabase/hooks/use-pagination.js → frontend/src/metabase/hooks/use-pagination.ts

@@ -12,10 +12,16 @@ export const usePagination = (initialPage = 0) => {
     [setPage],
   );
 
+  const resetPage = useCallback(
+    () => setPage(initialPage),
+    [setPage, initialPage],
+  );
+
   return {
     handleNextPage,
     handlePreviousPage,
     setPage,
     page,
+    resetPage,
   };
 };

frontend/src/metabase/hooks/use-pagination.unit.spec.ts

+import { renderHook, act } from "@testing-library/react-hooks";
+import { usePagination } from "./use-pagination";
+
+describe("usePagination", () => {
+  it("should set 'page' to 'initialPage' upon calling 'resetPage'", () => {
+    const initialPage = 3;
+    const { result } = renderHook(() => usePagination(initialPage));
+
+    act(() => result.current.handleNextPage());
+    expect(result.current.page).toEqual(initialPage + 1);
+
+    act(() => result.current.resetPage());
+    expect(result.current.page).toEqual(initialPage);
+  });
+});