PMM-14848: import useTableUrlState

ui/apps/pmm/package.json

@@ -26,7 +26,7 @@
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
     "@mui/x-date-pickers": "^7.5.0",
-    "@percona/percona-ui": "1.0.22",
+    "@percona/percona-ui": "1.0.23",
     "@pmm/shared": "*",
     "@reactour/tour": "^3.8.0",
     "@tanstack/react-query": "^5.45.1",

ui/apps/pmm/src/hooks/utils/useTableUrlState.test.ts

@@ -0,0 +1,97 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import reactRouter from 'react-router-dom';
+import { useTableUrlState } from './useTableUrlState';
+
+const { usePerconaTableUrlState } = vi.hoisted(() => ({
+  usePerconaTableUrlState: vi.fn(),
+}));
+
+vi.mock('@percona/percona-ui', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@percona/percona-ui')>();
+  return {
+    ...actual,
+    usePerconaTableUrlState,
+  };
+});
+
+const setup = (params: string) => {
+  const searchParams = new URLSearchParams(params);
+  const setSearchParams = vi.fn();
+
+  vi.spyOn(reactRouter, 'useSearchParams').mockReturnValue([searchParams, setSearchParams]);
+  vi.mocked(usePerconaTableUrlState).mockReturnValue({
+    tableState: {
+      state: {
+        columnFilters: [],
+        globalFilter: '',
+        sorting: [],
+        pagination: { pageIndex: 0, pageSize: 10 },
+      },
+      onColumnFiltersChange: vi.fn(),
+      onGlobalFilterChange: vi.fn(),
+      onSortingChange: vi.fn(),
+      onPaginationChange: vi.fn(),
+    },
+    tableProps: {
+      state: {
+        columnFilters: [],
+        globalFilter: '',
+        sorting: [],
+        pagination: { pageIndex: 0, pageSize: 10 },
+        showColumnFilters: false,
+        showGlobalFilter: false,
+      },
+      onColumnFiltersChange: vi.fn(),
+      onGlobalFilterChange: vi.fn(),
+      onSortingChange: vi.fn(),
+      onPaginationChange: vi.fn(),
+      onShowColumnFiltersChange: vi.fn(),
+      onShowGlobalFilterChange: vi.fn(),
+    },
+  });
+
+  return { searchParams, setSearchParams };
+};
+
+describe('useTableUrlState', () => {
+  it('passes react-router search params to percona useTableUrlState', () => {
+    const { searchParams, setSearchParams } = setup(
+      'serviceIds=123&overview.sort=queryText:desc'
+    );
+
+    renderHook(() =>
+      useTableUrlState({
+        paramPrefix: 'overview',
+      })
+    );
+
+    expect(usePerconaTableUrlState).toHaveBeenCalledWith({
+      searchParams,
+      setSearchParams,
+      paramPrefix: 'overview',
+    });
+  });
+
+  it('forwards optional hook configuration', () => {
+    const { searchParams, setSearchParams } = setup('');
+
+    renderHook(() =>
+      useTableUrlState({
+        paramPrefix: 'sessions',
+        debounceMs: 500,
+        replace: false,
+        sync: { pagination: false },
+      })
+    );
+
+    expect(usePerconaTableUrlState).toHaveBeenCalledWith({
+      searchParams,
+      setSearchParams,
+      paramPrefix: 'sessions',
+      debounceMs: 500,
+      replace: false,
+      sync: { pagination: false },
+    });
+  });
+});

ui/apps/pmm/src/hooks/utils/useTableUrlState.ts

@@ -0,0 +1,25 @@
+import { useSearchParams } from 'react-router-dom';
+import {
+  usePerconaTableUrlState,
+  type UsePerconaTableUrlStateOptions,
+  type UsePerconaTableUrlStateResult,
+} from '@percona/percona-ui';
+
+export type UseTableUrlStateOptions = Omit<
+  UsePerconaTableUrlStateOptions,
+  'searchParams' | 'setSearchParams'
+>;
+
+export type UseTableUrlStateResult = UsePerconaTableUrlStateResult;
+
+export const useTableUrlState = (
+  options: UseTableUrlStateOptions = {}
+): UseTableUrlStateResult => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  return usePerconaTableUrlState({
+    searchParams,
+    setSearchParams,
+    ...options,
+  });
+};

ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx

@@ -75,7 +75,12 @@ const RealtimeOverviewPage: FC = () => {
       });
     }
 
-    setSearchParams({ serviceIds: newServiceIds });
+    setSearchParams((prev) => {
+      const next = new URLSearchParams(prev);
+      next.delete('serviceIds');
+      newServiceIds.forEach((id) => next.append('serviceIds', id));
+      return next;
+    });
   };
 
   if (isLoading) {

ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.constants.tsx

@@ -41,8 +41,9 @@ export const OVERVIEW_TABLE_COLUMNS: MRT_ColumnDef<QueryData>[] = [
     accessorKey: 'queryExecutionDurationMs',
     filterVariant: 'range',
     filterFn: 'timeRangeFilterFn',
-    muiTableHeadCellFilterTextFieldProps: {
-      inputProps: { step: 0.25, type: 'number' },
+    muiFilterTextFieldProps: {
+      type: 'text',
+      inputProps: { inputMode: 'decimal' },
     },
     Cell: ({ cell }) =>
       cell.getValue() ? (

ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx

@@ -1,15 +1,20 @@
-import {
-  type MRT_Row,
-  type MaterialReactTableProps,
-} from 'material-react-table';
+import { FC } from 'react';
+import { type MRT_Row, MaterialReactTableProps } from 'material-react-table';
 import { Table, useNavigableRows } from '@percona/percona-ui';
-import type { FC } from 'react';
-import type { QueryData } from 'types/rta.types';
+import { QueryData } from 'types/rta.types';
 import { OVERVIEW_TABLE_COLUMNS } from './OverviewTable.constants';
 import { RealtimeTableWrapper } from 'pages/rta/components/rta-table-wrapper';
 import { boxClasses } from '@mui/material/Box';
 import { Messages } from './OverviewTable.messages';
 import { filterElapsedTime } from './OverviewTable.utils';
+import { useTableUrlState } from 'hooks/utils/useTableUrlState';
+
+const OVERVIEW_TABLE_URL_STATE_OPTIONS = {
+  paramPrefix: 'overview',
+  defaults: {
+    pagination: { pageIndex: 0, pageSize: 25 },
+  }
+};
 
 interface Props {
   queries: QueryData[];
@@ -26,21 +31,16 @@ const OverviewTable: FC<Props> = ({
   actions,
   onRowHover,
 }) => {
-  const { tableProps, refresh } = useNavigableRows<QueryData>({
+  const { tableProps: navigableTableProps, refresh } = useNavigableRows<QueryData>({
     data: queries,
     onChange: onNavigableQueriesChange,
   });
+  const { tableProps: urlStateTableProps } = useTableUrlState(OVERVIEW_TABLE_URL_STATE_OPTIONS);
 
   return (
     <RealtimeTableWrapper>
       <Table
         tableName="realtime-overview-table"
-        initialState={{
-          pagination: {
-            pageSize: 25,
-            pageIndex: 0,
-          },
-        }}
         columns={OVERVIEW_TABLE_COLUMNS}
         data={queries}
         noDataMessage={Messages.noData}
@@ -53,7 +53,8 @@ const OverviewTable: FC<Props> = ({
             },
           },
         }}
-        {...tableProps}
+        {...navigableTableProps}
+        {...urlStateTableProps}
         enableStickyHeader
         enableGlobalFilter={false}
         enableHiding={false}

ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsx

@@ -21,6 +21,11 @@ import { enqueueSnackbar } from 'notistack';
 import { RealtimeTableWrapper } from 'pages/rta/components/rta-table-wrapper';
 import { useUser } from 'contexts/user';
 import { Navigate } from 'react-router-dom';
+import { useTableUrlState } from 'hooks/utils/useTableUrlState';
+
+const SESSIONS_TABLE_URL_STATE_OPTIONS = {
+  paramPrefix: 'sessions',
+};
 
 const SessionsTable: FC = () => {
   const { user } = useUser();
@@ -38,6 +43,10 @@ const SessionsTable: FC = () => {
     [rowSelection, rows]
   );
   const { mutateAsync: stopSessions } = useStopSessions();
+  const { tableProps } = useTableUrlState({
+    ...SESSIONS_TABLE_URL_STATE_OPTIONS,
+    additionalState: { rowSelection },
+  });
 
   const closeModal = () => {
     setModal(null);
@@ -129,9 +138,6 @@ const SessionsTable: FC = () => {
             ...(user?.isPMMAdmin ? ['mrt-row-actions'] : []),
           ],
         }}
-        state={{
-          rowSelection,
-        }}
         positionToolbarAlertBanner="none"
         getRowId={(row) => row.sessionId}
         noDataMessage={Messages.empty}
@@ -163,7 +169,7 @@ const SessionsTable: FC = () => {
               color="inherit"
               size="small"
               data-testid="open-stop-modal"
-              onClick={() => openStopModal(row.original)}
+              onClick={() => openStopModal(row.original as SessionRow)}
             >
               {Messages.stop}
             </Button>
@@ -223,6 +229,7 @@ const SessionsTable: FC = () => {
             </Stack>
           )
         }
+        {...tableProps}
       />
       <StopSessionModal
         open={modal === 'stop'}

ui/apps/pmm/src/utils/testStubs.ts

@@ -64,6 +64,19 @@ export const TEST_USER_VIEWER: User = {
   },
 };
 
+export const TEST_USER_ANONYMOUS: User = {
+  ...TEST_USER_VIEWER,
+  id: 0,
+  login: 'anonymous',
+  name: 'Anonymous',
+  isAnonymous: true,
+  isPMMAdmin: false,
+  info: {
+    ...TEST_USER_ADMIN.info,
+    userId: 0,
+  },
+};
+
 export const TEST_SERVICE: BaseService = {
   serviceId: 'service-1',
   serviceName: 'Service 1',
@@ -166,16 +179,3 @@ export const TEST_MONGO_DB_QUERY_DATA: QueryData = {
     username: 'username',
   },
 };
-
-export const TEST_USER_ANONYMOUS: User = {
-  ...TEST_USER_VIEWER,
-  id: 0,
-  login: 'anonymous',
-  name: 'Anonymous',
-  isAnonymous: true,
-  isPMMAdmin: false,
-  info: {
-    ...TEST_USER_ADMIN.info,
-    userId: 0,
-  },
-};