moar testing and cleanup

packages/manager/src/hooks/usePaginationV2.test.ts

@@ -20,7 +20,7 @@ vi.mock('@tanstack/react-router', async () => {
       order: undefined,
       orderBy: undefined,
       page: undefined,
-      page_size: undefined,
+      pageSize: undefined,
     }),
   };
 });
@@ -107,7 +107,7 @@ describe('usePaginationV2', () => {
       order: 'asc',
       orderBy: 'name',
       page: 1,
-      page_size: 25,
+      pageSize: 25,
     };
 
     await waitFor(() => {
@@ -144,13 +144,13 @@ describe('usePaginationV2', () => {
       order: 'asc',
       orderBy: 'name',
       page: 2,
-      page_size: 50,
+      pageSize: 50,
     };
 
     await waitFor(() => {
       expect(pageSizeSearchFn(prevParams)).toEqual({
         ...prevParams,
-        page_size: 50,
+        pageSize: 50,
       });
     });
   });
@@ -181,7 +181,7 @@ describe('usePaginationV2', () => {
       order: 'asc',
       orderBy: 'name',
       page: 1,
-      page_size: 25,
+      pageSize: 25,
     };
 
     await waitFor(() => {
@@ -213,4 +213,46 @@ describe('usePaginationV2', () => {
       expect(mockUpdatePreferences).not.toHaveBeenCalled();
     });
   });
+
+  it('should handle the queryParamsPrefix for both the page and pageSize params', async () => {
+    const { result } = renderHook(
+      () =>
+        usePaginationV2({
+          ...defaultProps,
+          queryParamsPrefix: 'test-prefix',
+        }),
+      {
+        wrapper: (ui) => wrapWithThemeAndRouter(ui.children),
+      }
+    );
+
+    act(() => {
+      result.current.handlePageChange(2);
+      result.current.handlePageSizeChange(50);
+    });
+
+    const navigateCalls = mockNavigate.mock.calls;
+    const searchFnForPage = navigateCalls[0][0].search;
+    const searchFnForPageSize = navigateCalls[1][0].search;
+    const prevParams = {
+      order: 'asc',
+      orderBy: 'name',
+    };
+
+    await waitFor(() => {
+      expect(searchFnForPage(prevParams)).toEqual({
+        ...prevParams,
+        page: undefined,
+        pageSize: undefined,
+        'test-prefix-page': 2,
+      });
+
+      expect(searchFnForPageSize(prevParams)).toEqual({
+        ...prevParams,
+        page: undefined,
+        pageSize: undefined,
+        'test-prefix-pageSize': 50,
+      });
+    });
+  });
 });

packages/manager/src/hooks/usePaginationV2.ts

@@ -20,26 +20,38 @@ const setTableSearchParams = (prev: TableSearchParams) => ({
   order: prev.order,
   orderBy: prev.orderBy,
   page: prev.page,
-  page_size: prev.page_size,
+  pageSize: prev.pageSize,
 });
 
 export interface UsePaginationV2Props<T extends TableSearchParams> {
+  /**
+   * The route to which the pagination params are applied.
+   */
   currentRoute: ToSubOptions['to'];
+  /**
+   * The initial page pagination is set to - defaults to 1, it's unusual to set this.
+   */
   initialPage: number;
+  /**
+   * A key used to store a user's preferred page size for a specific table.
+   */
   preferenceKey: string;
+  /**
+   * A prefix that is applied to the query params in the url. Useful when this hook is used more than once on the same page.
+   * ex: two different sortable tables on the same route.
+   */
+  queryParamsPrefix?: string;
+  /**
+   * A function that is called to build the search params for the route.
+   */
   searchParams?: (prev: T) => T;
 }
 
-/**
- * usePagination hook
- * @param initialPage initial page to start on
- * @param preferenceKey a key used to store a user's prefered page size for a specific table
- * @param queryParamsPrefix a prefix that is applied to the query params in the url. Useful when this hook is used more than once on the same page.
- */
 export const usePaginationV2 = <T extends TableSearchParams>({
   currentRoute,
   initialPage,
   preferenceKey,
+  queryParamsPrefix,
   searchParams,
 }: UsePaginationV2Props<T>): PaginationPropsV2 => {
   const { data: preferences } = usePreferences();
@@ -49,7 +61,12 @@ export const usePaginationV2 = <T extends TableSearchParams>({
   const navigate = useNavigate();
 
   const searchParamPage = search.page;
-  const searchParamPageSize = search.page_size;
+  const searchParamPageSize = search.pageSize;
+
+  const pageKey = queryParamsPrefix ? `${queryParamsPrefix}-page` : 'page';
+  const pageSizeKey = queryParamsPrefix
+    ? `${queryParamsPrefix}-pageSize`
+    : 'pageSize';
 
   const preferredPageSize = preferenceKey
     ? preferences?.pageSizes?.[preferenceKey] ?? MIN_PAGE_SIZE
@@ -65,18 +82,20 @@ export const usePaginationV2 = <T extends TableSearchParams>({
       search: (prev: TableSearchParams & T) => ({
         ...setTableSearchParams(prev),
         ...(searchParams?.(prev) ?? {}),
-        page,
+        [pageKey]: page,
+        ...(queryParamsPrefix ? {} : { page }),
       }),
       to: currentRoute,
     });
   };
 
-  const setPageSize = (size: number) => {
+  const setPageSize = (pageSize: number) => {
     navigate({
       search: (prev: TableSearchParams & T) => ({
         ...setTableSearchParams(prev),
         ...(searchParams?.(prev) ?? {}),
-        page_size: size,
+        [pageSizeKey]: pageSize,
+        ...(queryParamsPrefix ? {} : { pageSize }),
       }),
       to: currentRoute,
     });

packages/manager/src/routes/types.ts

@@ -16,5 +16,5 @@ export interface TableSearchParams {
   order?: 'asc' | 'desc';
   orderBy?: string;
   page?: number;
-  page_size?: number;
+  pageSize?: number;
 }

packages/manager/src/routes/volumes/index.ts

@@ -1,4 +1,5 @@
 import { createRoute, redirect } from '@tanstack/react-router';
+import { enqueueSnackbar } from 'notistack';
 
 import { volumeQueries } from 'src/queries/volumes/volumes';
 
@@ -94,14 +95,15 @@ const volumeActionRoute = createRoute({
       volumeQueries.lists._ctx.paginated(
         {
           page: search.page ?? 1,
-          page_size: search.page_size ?? 25,
+          page_size: search.pageSize ?? 25,
         },
         volumeXFilters
       )
     );
 
     // if the volume is not found, redirect to the volumes landing page
     if (!volumes.data.find((v) => v.id === params.volumeId)) {
+      enqueueSnackbar('Volume not found', { variant: 'error' });
       throw redirect({
         search: () => ({}),
         to: '/volumes',