frontend:table: fix the rows-per-page settings persist among views

Author: ChayanDass

frontend/src/components/App/Home/ClusterTable.tsx

@@ -187,6 +187,7 @@ export default function ClusterTable({
 
   return (
     <Table
+      reflectInURL="clusters"
       columns={[
         {
           id: 'name',

frontend/src/components/App/Notifications/List/List.tsx

@@ -153,6 +153,7 @@ export default function NotificationList() {
           }}
         >
           <Table
+            reflectInURL="notifications"
             columns={[
               {
                 header: t('translation|Message'),

frontend/src/components/App/PluginSettings/PluginSettings.tsx

@@ -218,6 +218,7 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) {
         title={<SectionFilterHeader title={t('translation|Plugins')} noNamespaceFilter />}
       >
         <Table
+          reflectInURL="plugins"
           columns={[
             {
               header: t('translation|Name'),

frontend/src/components/common/Resource/ResourceTable.tsx

@@ -328,7 +328,7 @@ function ResourceTableContent<RowItem extends KubeObject>(props: ResourceTablePr
     hideColumns = [],
     filterFunction,
     errorMessage,
-    reflectInURL,
+    reflectInURL = `${id ? `${id}-` : ''}`,
     data,
     defaultGlobalFilter,
     actions,

frontend/src/components/common/Table/Table.tsx

@@ -48,7 +48,7 @@ import { MRT_Localization_ZH_HANS } from 'material-react-table/locales/zh-Hans';
 import { MRT_Localization_ZH_HANT } from 'material-react-table/locales/zh-Hant';
 import { memo, ReactNode, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { getTablesRowsPerPage } from '../../../helpers/tablesRowsPerPage';
+import { getTablesRowsPerPage, setTablesRowsPerPage } from '../../../helpers/tablesRowsPerPage';
 import { useShortcut } from '../../../lib/useShortcut';
 import { useURLState } from '../../../lib/util';
 import { useSettings } from '../../App/Settings/hook';
@@ -203,9 +203,11 @@ export default function Table<RowItem extends Record<string, any>>({
 
   const storeRowsPerPageOptions = useSettings('tableRowsPerPageOptions');
   const rowsPerPageOptions = rowsPerPage || storeRowsPerPageOptions;
-  const defaultRowsPerPage = useMemo(() => getTablesRowsPerPage(rowsPerPageOptions[0]), []);
-  const [pageSize, setPageSize] = useURLState(shouldReflectInURL ? 'perPage' : '', {
+  const defaultRowsPerPage = getTablesRowsPerPage(rowsPerPageOptions[0]);
+
+  const [pageSize, setPageSize] = useURLState('perPage', {
     defaultValue: defaultRowsPerPage,
+    hideDefault: false,
     prefix,
   });
 
@@ -272,6 +274,8 @@ export default function Table<RowItem extends Record<string, any>>({
       const pagination = updater({ pageIndex: Number(page) - 1, pageSize: Number(pageSize) });
       setPage(pagination.pageIndex + 1);
       setPageSize(pagination.pageSize);
+      // Persist the rows per page setting
+      setTablesRowsPerPage(pagination.pageSize);
     },
     onGlobalFilterChange: setGlobalFilter,
     renderToolbarInternalActions: props => {
@@ -285,27 +289,21 @@ export default function Table<RowItem extends Record<string, any>>({
       }
       return null;
     },
-    initialState: useMemo(
-      () => ({
-        density: 'compact',
-        globalFilter: globalFilter || '',
-        ...(tableProps.initialState ?? {}),
-      }),
-      [tableProps.initialState, globalFilter]
-    ),
-    state: useMemo(
-      () => ({
-        ...(tableProps.state ?? {}),
-        columnOrder,
-        pagination: {
-          pageIndex: page - 1,
-          pageSize: pageSize,
-        },
-        globalFilter,
-        ...(globalFilter ? { showGlobalFilter: true } : {}),
-      }),
-      [tableProps.state, columnOrder, page, pageSize, globalFilter]
-    ),
+    initialState: {
+      density: 'compact',
+      globalFilter: globalFilter || '',
+      ...(tableProps.initialState ?? {}),
+    },
+    state: {
+      ...(tableProps.state ?? {}),
+      columnOrder,
+      pagination: {
+        pageIndex: page - 1,
+        pageSize: pageSize,
+      },
+      globalFilter,
+      ...(globalFilter ? { showGlobalFilter: true } : {}),
+    },
     positionActionsColumn: 'last',
     layoutMode: 'grid',
     // Need to provide our own empty message

frontend/src/components/common/Table/__snapshots__/Table.ReflectInURL.stories.storyshot

@@ -15,7 +15,7 @@
           Current URL search:
         </b>
 
-        ?p=2
+        ?p=2&perPage=5
       </p>
       <div
         class="MuiBox-root css-1ipmh7v"

frontend/src/components/common/Table/__snapshots__/Table.ReflectInURLWithPrefix.stories.storyshot

@@ -15,7 +15,7 @@
           Current URL search:
         </b>
 
-        ?p=2
+        ?p=2&mySuperTable.perPage=5
       </p>
       <div
         class="MuiBox-root css-1ipmh7v"