[UI] fix: missing last 5 runs on each run page (#23817)

## Summary & Motivation

#23815

Extracted const PAGE_SIZE to function param to make it configurable from
the outside.

## How I Tested These Changes

## Changelog [New | Bug | Docs]

Bug: Fix UI not showing last 5 runs on each page

---------

Co-authored-by: Hynek Blaha <[email protected]>

js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRunsTab.tsx

@@ -28,6 +28,7 @@ import {useRunsForTimeline} from '../../runs/useRunsForTimeline';
 import {StickyTableContainer} from '../../ui/StickyTableContainer';
 
 const BACKFILL_RUNS_HOUR_WINDOW_KEY = 'dagster.backfill-run-timeline-hour-window';
+const PAGE_SIZE = 25;
 
 export const BackfillRunsTab = ({backfill}: {backfill: BackfillDetailsBackfillFragment}) => {
   const [view, setView] = useQueryPersistedState<'timeline' | 'list'>({
@@ -113,7 +114,7 @@ const ExecutionRunTable = ({
   filter: RunsFilter;
   actionBarComponents: React.ReactNode;
 }) => {
-  const {queryResult, paginationProps} = usePaginatedRunsTableRuns(filter);
+  const {queryResult, paginationProps} = usePaginatedRunsTableRuns(filter, PAGE_SIZE);
   const pipelineRunsOrError = queryResult.data?.pipelineRunsOrError;
 
   const refreshState = useQueryRefreshAtInterval(queryResult, 15000);

js_modules/dagster-ui/packages/ui-core/src/runs/RunsRoot.tsx

@@ -45,7 +45,7 @@ export const RunsRoot = () => {
 
   const [filterTokens, setFilterTokens] = useQueryPersistedRunFilters();
   const filter = runsFilterForSearchTokens(filterTokens);
-  const {queryResult, paginationProps} = usePaginatedRunsTableRuns(filter);
+  const {queryResult, paginationProps} = usePaginatedRunsTableRuns(filter, PAGE_SIZE);
 
   useBlockTraceOnQueryResult(queryResult, 'RunsRootQuery');
 
@@ -203,7 +203,7 @@ export const RunsRoot = () => {
               <>
                 <StickyTableContainer $top={0}>
                   <RunTable
-                    runs={pipelineRunsOrError.results.slice(0, PAGE_SIZE)}
+                    runs={pipelineRunsOrError.results}
                     onAddTag={onAddTag}
                     filter={filter}
                     actionBarComponents={actionBar()}

js_modules/dagster-ui/packages/ui-core/src/runs/usePaginatedRunsTableRuns.tsx

@@ -4,10 +4,9 @@ import {RUN_TABLE_RUN_FRAGMENT} from './RunTableRunFragment';
 import {RunsRootQuery, RunsRootQueryVariables} from './types/usePaginatedRunsTableRuns.types';
 import {useCursorPaginatedQuery} from './useCursorPaginatedQuery';
 import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
-import {PAGE_SIZE} from '../assets/AutoMaterializePolicyPage/useEvaluationsQueryResult';
 import {RunsFilter} from '../graphql/types';
 
-export function usePaginatedRunsTableRuns(filter: RunsFilter) {
+export function usePaginatedRunsTableRuns(filter: RunsFilter, pageSize: number) {
   const {queryResult, paginationProps} = useCursorPaginatedQuery<
     RunsRootQuery,
     RunsRootQueryVariables
@@ -16,7 +15,7 @@ export function usePaginatedRunsTableRuns(filter: RunsFilter) {
       if (runs.pipelineRunsOrError.__typename !== 'Runs') {
         return undefined;
       }
-      return runs.pipelineRunsOrError.results[PAGE_SIZE - 1]?.id;
+      return runs.pipelineRunsOrError.results[pageSize - 1]?.id;
     },
     getResultArray: (data) => {
       if (!data || data.pipelineRunsOrError.__typename !== 'Runs') {
@@ -28,7 +27,7 @@ export function usePaginatedRunsTableRuns(filter: RunsFilter) {
       filter,
     },
     query: RUNS_ROOT_QUERY,
-    pageSize: PAGE_SIZE,
+    pageSize,
   });
   return {queryResult, paginationProps};
 }