fix(dashboard): Forward transformQueryKey and view options from ListPage (#5066)

Author: grolmus

packages/dashboard/src/lib/framework/page/list-page.spec.tsx

@@ -0,0 +1,62 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ListPage } from './list-page.js';
+
+// Capture the props ListPage forwards to PaginatedListDataTable.
+const captured: { props?: Record<string, any> } = {};
+
+vi.mock('@/vdb/components/shared/paginated-list-data-table.js', () => ({
+    PaginatedListDataTable: (props: Record<string, any>) => {
+        captured.props = props;
+        return null;
+    },
+}));
+
+vi.mock('../layout-engine/page-layout.js', () => ({
+    Page: ({ children }: any) => <>{children}</>,
+    PageTitle: ({ children }: any) => <>{children}</>,
+    PageActionBar: ({ children }: any) => <>{children}</>,
+    PageLayout: ({ children }: any) => <>{children}</>,
+    FullWidthPageBlock: ({ children }: any) => <>{children}</>,
+}));
+
+vi.mock('@/vdb/hooks/use-user-settings.js', () => ({
+    useUserSettings: () => ({ setTableSettings: vi.fn(), settings: {} }),
+}));
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => vi.fn(),
+}));
+
+describe('ListPage prop forwarding', () => {
+    const baseProps = {
+        route: { useSearch: () => ({}), fullPath: '/' } as any,
+        title: 'Test',
+        listQuery: {} as any,
+    };
+
+    beforeEach(() => {
+        captured.props = undefined;
+    });
+
+    it('forwards transformQueryKey, disableViewOptions and includeSelectionColumn to PaginatedListDataTable', () => {
+        const transformQueryKey = (queryKey: any[]) => [...queryKey, 'extra'];
+
+        renderToStaticMarkup(
+            <ListPage
+                {...baseProps}
+                transformQueryKey={transformQueryKey}
+                disableViewOptions={true}
+                // false is the non-default value, so this asserts the value is really forwarded
+                // rather than coinciding with PaginatedListDataTable's own default of true.
+                includeSelectionColumn={false}
+            />,
+        );
+
+        expect(captured.props).toBeDefined();
+        expect(captured.props?.transformQueryKey).toBe(transformQueryKey);
+        expect(captured.props?.disableViewOptions).toBe(true);
+        expect(captured.props?.includeSelectionColumn).toBe(false);
+    });
+});

packages/dashboard/src/lib/framework/page/list-page.tsx

@@ -322,6 +322,27 @@ export interface ListPageProps<
      * that is not often required.
      */
     transformData?: (data: any[]) => any[];
+    /**
+     * @description
+     * Allows the react-query cache key to be transformed. Use this together with the
+     * `transformVariables` prop when a page injects extra state into the query
+     * (e.g. a language selector or a status filter): the default key only reflects page, sorting,
+     * column filters and the search term, so without transforming the key too, changing the injected
+     * state serves a stale cached result instead of refetching.
+     */
+    transformQueryKey?: (queryKey: any[]) => any[];
+    /**
+     * @description
+     * When true, disables the view options (column visibility) control in the table toolbar.
+     */
+    disableViewOptions?: boolean;
+    /**
+     * @description
+     * When false, the row selection checkbox column will not be included.
+     *
+     * @default true
+     */
+    includeSelectionColumn?: boolean;
     /**
      * @description
      * Allows you to directly manipulate the TanStack Table `TableOptions` object before the
@@ -500,6 +521,9 @@ export function ListPage<
     children,
     rowActions,
     transformData,
+    transformQueryKey,
+    disableViewOptions,
+    includeSelectionColumn,
     setTableOptions,
     bulkActions,
     registerRefresher,
@@ -599,6 +623,9 @@ export function ListPage<
         bulkActions,
         setTableOptions,
         transformData,
+        transformQueryKey,
+        disableViewOptions,
+        includeSelectionColumn,
         registerRefresher,
     };