Feat: add size listing parameter

dashboard/src/components/Table/PaginationInfo.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { MdArrowBackIos, MdArrowForwardIos } from 'react-icons/md';
 
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import type {
   AccordionItemBuilds,
@@ -37,11 +37,13 @@ interface IPaginationInfo {
     | Table<PreparedTrees>
     | Table<Trees>;
   intlLabel: MessagesKey;
+  onPaginationChange?: (pageSize: number) => void;
 }
 
 export function PaginationInfo({
   table,
   intlLabel,
+  onPaginationChange,
 }: IPaginationInfo): JSX.Element {
   const buttonsClassName = 'text-blue font-bold';
 
@@ -57,6 +59,15 @@ export function PaginationInfo({
   const startIndex = countData > 0 ? pageIndex * pageSize + 1 : 0;
   const endIndex = Math.min((pageIndex + 1) * pageSize, countData);
 
+  const onValueChange = useCallback(
+    (value: number) => {
+      if (onPaginationChange) onPaginationChange(value);
+
+      table.setPageSize(value);
+    },
+    [onPaginationChange, table],
+  );
+
   return (
     <div className="flex flex-row justify-end gap-4 text-sm">
       <div className="flex flex-row items-center gap-2">
@@ -70,7 +81,7 @@ export function PaginationInfo({
       </div>
       <ItemsPerPageSelector
         selected={table.getState().pagination.pageSize}
-        onValueChange={table.setPageSize}
+        onValueChange={onValueChange}
         values={ItemsPerPageValues}
       />
       <div className="flex flex-row items-center gap-2">

dashboard/src/components/TreeListingPage/InputTime.tsx

@@ -12,10 +12,11 @@ import { Controller, useForm } from 'react-hook-form';
 import type { ChangeEvent } from 'react';
 import { useCallback } from 'react';
 
-import { DEFAULT_TIME_SEARCH } from '@/pages/treeConstants';
 import { toast } from '@/hooks/useToast';
 
-import DebounceInput from '../DebounceInput/DebounceInput';
+import { DEFAULT_TIME_SEARCH } from '@/utils/constants/general';
+
+import DebounceInput from '@/components/DebounceInput/DebounceInput';
 
 export function InputTime(): JSX.Element {
   const { formatMessage } = useIntl();

dashboard/src/components/TreeListingPage/TreeTable.tsx

@@ -13,12 +13,12 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 
-import { memo, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
 import type { LinkProps } from '@tanstack/react-router';
-import { Link, useSearch } from '@tanstack/react-router';
+import { Link, useNavigate, useSearch } from '@tanstack/react-router';
 
 import { TooltipDateTime } from '@/components/TooltipDateTime';
 
@@ -322,11 +322,16 @@ interface ITreeTable {
 }
 
 export function TreeTable({ treeTableRows }: ITreeTable): JSX.Element {
+  const { origin: unsafeOrigin, listingSize } = useSearch({ strict: false });
+  const navigate = useNavigate({ from: '/tree' });
+
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const { pagination, paginationUpdater } = usePaginationState('treeListing');
+  const { pagination, paginationUpdater } = usePaginationState(
+    'treeListing',
+    listingSize,
+  );
 
-  const { origin: unsafeOrigin } = useSearch({ strict: false });
   const origin = zOrigin.parse(unsafeOrigin);
 
   const columns = useMemo(() => getColumns(origin), [origin]);
@@ -422,6 +427,16 @@ export function TreeTable({ treeTableRows }: ITreeTable): JSX.Element {
     );
   }, [modelRows, columns.length, origin]);
 
+  const navigateWithPageSize = useCallback(
+    (pageSize: number) => {
+      navigate({
+        search: prev => ({ ...prev, listingSize: pageSize }),
+        state: s => s,
+      });
+    },
+    [navigate],
+  );
+
   return (
     <div className="flex flex-col gap-6 pb-4">
       <div className="flex items-center justify-between gap-4">
@@ -433,13 +448,21 @@ export function TreeTable({ treeTableRows }: ITreeTable): JSX.Element {
         </span>
         <div className="flex items-center justify-between gap-10">
           <MemoizedInputTime />
-          <PaginationInfo table={table} intlLabel="global.trees" />
+          <PaginationInfo
+            table={table}
+            intlLabel="global.trees"
+            onPaginationChange={navigateWithPageSize}
+          />
         </div>
       </div>
       <BaseTable headerComponents={tableHeaders}>
         <TableBody>{tableBody}</TableBody>
       </BaseTable>
-      <PaginationInfo table={table} intlLabel="global.trees" />
+      <PaginationInfo
+        table={table}
+        intlLabel="global.trees"
+        onPaginationChange={navigateWithPageSize}
+      />
     </div>
   );
 }

dashboard/src/hooks/usePaginationState.tsx

@@ -4,18 +4,39 @@ import type { Updater, PaginationState } from '@tanstack/react-table';
 
 import type { TableKeys } from '@/utils/constants/tables';
 
+import { ItemsPerPageValues } from '@/utils/constants/general';
+
 import { useFeatureFlag } from './useFeatureFlag';
 
 const DEFAULT_PAGINATION_STATE = { pageIndex: 0, pageSize: 10 } as const;
 
+const DEFAULT_LISTING_SIZE = 10;
+
+const findClosestGreaterNumber = (sortedList: number[], x: number): number => {
+  for (let i = 0; i < sortedList.length; i++) {
+    if (sortedList[i] >= x) return sortedList[i];
+  }
+
+  return sortedList.slice(-1)[0] ?? DEFAULT_LISTING_SIZE;
+};
+
 export const usePaginationState = (
   selectedTable: TableKeys,
+  defaultValue?: number,
 ): {
   pagination: PaginationState;
   paginationUpdater: (updater: Updater<PaginationState>) => void;
 } => {
   const { showDev } = useFeatureFlag();
   const [pagination, setPagination] = useState<PaginationState>(() => {
+    if (defaultValue) {
+      const pageSize = findClosestGreaterNumber(
+        ItemsPerPageValues,
+        defaultValue,
+      );
+      return { pageIndex: DEFAULT_PAGINATION_STATE.pageIndex, pageSize };
+    }
+
     const storageData = window.localStorage.getItem(selectedTable);
     if (storageData && showDev) {
       try {

dashboard/src/pages/Hardware/HardwareTable.tsx

@@ -14,11 +14,11 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 
-import { memo, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import type { LinkProps } from '@tanstack/react-router';
+import { useNavigate, useSearch, type LinkProps } from '@tanstack/react-router';
 
 import BaseTable, { TableHead } from '@/components/Table/BaseTable';
 
@@ -302,10 +302,15 @@ export function HardwareTable({
   startTimestampInSeconds,
   endTimestampInSeconds,
 }: ITreeTable): JSX.Element {
+  const { listingSize } = useSearch({ strict: false });
+  const navigate = useNavigate({ from: '/hardware' });
+
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const { pagination, paginationUpdater } =
-    usePaginationState('hardwareListing');
+  const { pagination, paginationUpdater } = usePaginationState(
+    'hardwareListing',
+    listingSize,
+  );
 
   const data = useMemo(() => {
     return treeTableRows;
@@ -394,6 +399,16 @@ export function HardwareTable({
 
   const MemoizedInputTime = memo(InputTime);
 
+  const navigateWithPageSize = useCallback(
+    (pageSize: number) => {
+      navigate({
+        search: prev => ({ ...prev, listingSize: pageSize }),
+        state: s => s,
+      });
+    },
+    [navigate],
+  );
+
   return (
     <div className="flex flex-col gap-6 pb-4">
       <div className="flex items-center justify-between gap-4">
@@ -405,13 +420,21 @@ export function HardwareTable({
         </span>
         <div className="flex items-center justify-between gap-10">
           <MemoizedInputTime />
-          <PaginationInfo table={table} intlLabel="global.hardwares" />
+          <PaginationInfo
+            table={table}
+            intlLabel="global.hardwares"
+            onPaginationChange={navigateWithPageSize}
+          />
         </div>
       </div>
       <BaseTable headerComponents={tableHeaders}>
         <TableBody>{tableBody}</TableBody>
       </BaseTable>
-      <PaginationInfo table={table} intlLabel="global.hardwares" />
+      <PaginationInfo
+        table={table}
+        intlLabel="global.hardwares"
+        onPaginationChange={navigateWithPageSize}
+      />
     </div>
   );
 }

dashboard/src/routes/(alternatives)/t/route.tsx

@@ -6,17 +6,26 @@ import {
 
 import { z } from 'zod';
 
-import { makeZIntervalInDays, type SearchSchema } from '@/types/general';
-import { DEFAULT_TIME_SEARCH } from '@/pages/treeConstants';
+import {
+  makeZIntervalInDays,
+  zListingSize,
+  type SearchSchema,
+} from '@/types/general';
+import {
+  DEFAULT_LISTING_ITEMS,
+  DEFAULT_TIME_SEARCH,
+} from '@/utils/constants/general';
 
 const defaultValues = {
   intervalInDays: DEFAULT_TIME_SEARCH,
   treeSearch: '',
+  listingSize: DEFAULT_LISTING_ITEMS,
 };
 
 export const RootSearchSchema = z.object({
   intervalInDays: makeZIntervalInDays(DEFAULT_TIME_SEARCH),
   treeSearch: z.string().catch(''),
+  listingSize: zListingSize,
 } satisfies SearchSchema);
 
 export const Route = createFileRoute('/(alternatives)/t')({

dashboard/src/routes/build/$buildId/route.tsx

@@ -12,7 +12,7 @@ import {
   DEFAULT_ORIGIN,
   type SearchSchema,
 } from '@/types/general';
-import { DEFAULT_TIME_SEARCH } from '@/pages/treeConstants';
+import { DEFAULT_TIME_SEARCH } from '@/utils/constants/general';
 
 const defaultValues = {
   origin: DEFAULT_ORIGIN,

dashboard/src/routes/hardware/route.tsx

@@ -1,17 +1,24 @@
 import { createFileRoute, stripSearchParams } from '@tanstack/react-router';
 import { z } from 'zod';
 
-import { makeZIntervalInDays, type SearchSchema } from '@/types/general';
+import {
+  makeZIntervalInDays,
+  zListingSize,
+  type SearchSchema,
+} from '@/types/general';
 import { DEFAULT_HARDWARE_INTERVAL_IN_DAYS } from '@/utils/constants/hardware';
+import { DEFAULT_LISTING_ITEMS } from '@/utils/constants/general';
 
 const defaultValues = {
   intervalInDays: DEFAULT_HARDWARE_INTERVAL_IN_DAYS,
   hardwareSearch: '',
+  listingSize: DEFAULT_LISTING_ITEMS,
 };
 
 const zHardwareSchema = z.object({
   intervalInDays: makeZIntervalInDays(DEFAULT_HARDWARE_INTERVAL_IN_DAYS),
   hardwareSearch: z.string().catch(''),
+  listingSize: zListingSize,
 } satisfies SearchSchema);
 
 export const Route = createFileRoute('/hardware')({

dashboard/src/routes/index.tsx

@@ -1,8 +1,8 @@
 import { createFileRoute, redirect } from '@tanstack/react-router';
 import { z } from 'zod';
 
-import { DEFAULT_TIME_SEARCH } from '@/pages/treeConstants';
 import { makeZIntervalInDays, type SearchSchema } from '@/types/general';
+import { DEFAULT_TIME_SEARCH } from '@/utils/constants/general';
 
 export const HomeSearchSchema = z.object({
   treeSearch: z.string().catch(''),

dashboard/src/routes/issue/$issueId/route.tsx

@@ -12,7 +12,7 @@ import {
   DEFAULT_ORIGIN,
   type SearchSchema,
 } from '@/types/general';
-import { DEFAULT_TIME_SEARCH } from '@/pages/treeConstants';
+import { DEFAULT_TIME_SEARCH } from '@/utils/constants/general';
 
 const defaultValues = {
   origin: DEFAULT_ORIGIN,

dashboard/src/routes/test/$testId/route.tsx

@@ -11,7 +11,7 @@ import {
   DEFAULT_ORIGIN,
   type SearchSchema,
 } from '@/types/general';
-import { DEFAULT_TIME_SEARCH } from '@/pages/treeConstants';
+import { DEFAULT_TIME_SEARCH } from '@/utils/constants/general';
 
 const defaultValues = {
   origin: DEFAULT_ORIGIN,

dashboard/src/routes/tree/route.tsx

@@ -2,17 +2,26 @@ import { createFileRoute, stripSearchParams } from '@tanstack/react-router';
 
 import { z } from 'zod';
 
-import { makeZIntervalInDays, type SearchSchema } from '@/types/general';
-import { DEFAULT_TIME_SEARCH } from '@/pages/treeConstants';
+import {
+  makeZIntervalInDays,
+  zListingSize,
+  type SearchSchema,
+} from '@/types/general';
+import {
+  DEFAULT_LISTING_ITEMS,
+  DEFAULT_TIME_SEARCH,
+} from '@/utils/constants/general';
 
 const defaultValues = {
   intervalInDays: DEFAULT_TIME_SEARCH,
   treeSearch: '',
+  listingSize: DEFAULT_LISTING_ITEMS,
 };
 
 export const RootSearchSchema = z.object({
   intervalInDays: makeZIntervalInDays(DEFAULT_TIME_SEARCH),
   treeSearch: z.string().catch(''),
+  listingSize: zListingSize,
 } satisfies SearchSchema);
 
 export const Route = createFileRoute('/tree')({

dashboard/src/types/general.ts

@@ -1,5 +1,7 @@
 import { z, type ZodTypeAny } from 'zod';
 
+import { DEFAULT_LISTING_ITEMS } from '@/utils/constants/general';
+
 import type { Status } from './database';
 import type { TTreeDetailsFilter } from './tree/TreeDetails';
 import type { THardwareDetailsFilter } from './hardware/hardwareDetails';
@@ -128,6 +130,10 @@ export type ArchCompilerStatus = {
   status: StatusCounts;
 };
 
+export const zListingSize = z
+  .optional(z.number().min(1).catch(DEFAULT_LISTING_ITEMS))
+  .default(DEFAULT_LISTING_ITEMS);
+
 const zIntervalInDaysUncatched = z.number().min(1);
 
 export const makeZIntervalInDays = (
@@ -236,6 +242,7 @@ export type SearchParamsKeys =
   | 'tableFilter'
   | 'diffFilter'
   | 'treeSearch'
+  | 'listingSize'
   | 'hardwareSearch'
   | 'treeInfo'
   | 'treeIndexes'