13765011492

Committed 10 Mar 2025 12:46PM UTC coverage: 66.347% (-3.6%) from 69.903%

Build # 13765011492

Build Type

Pull #368

github

Committed by

web-flow

Commit Message

Merge aca3fc44f into db80e1ec2

Pull Request Pull Request #368: fix: implement server side pagination in frontend

Run Details

419 of 703 branches covered (59.6%)

Branch coverage included in aggregate %.

106 of 163 new or added lines in 19 files covered. (65.03%)

15 existing lines in 6 files now uncovered.

894 of 1276 relevant lines covered (70.06%)

42.64 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

34.48

/src/features/dashboard-messages/components/table-messages-pagination.tsx

import { Button } from '@stacklok/ui-kit'
import { useMessagesFilterSearchParams } from '../hooks/use-messages-filter-search-params'
import { useQueryGetWorkspaceMessagesTable } from '../hooks/use-query-get-workspace-messages-table'
import {
  ChevronLeft,
  ChevronLeftDouble,
  ChevronRight,
  ChevronRightDouble,
} from '@untitled-ui/icons-react'

export function TableMessagesPagination() {
  const { state, goToPrevPage, goToNextPage, setPage } =
    useMessagesFilterSearchParams()

  const { data } = useQueryGetWorkspaceMessagesTable()

  const totalRecords: number = data?.total ?? 0
  const totalPages: number = Math.ceil(totalRecords / (data?.limit ?? 1))

  // We only show pagination when there is something to paginate :)
  if (totalPages < 2) return null

  const hasNextPage: boolean = data
    ? data.offset + data.limit < totalRecords
    : false
  const hasPreviousPage: boolean = data ? data.offset > 0 : false

  // A sliding window of page numbers to render as clickable buttons
  // e.g. if the page number is `7`, the pages shown should be `[5, 6, 7, 8, 9]`
  // e.g. if the page number is `1`, the pages shown should be `[1, 2, 3, 4, 5]`
  const pageNumsToShow = Array.from(
    { length: Math.min(5, totalPages) },
    (_, i) => {
      const startPage = Math.max(1, Math.min(state.page - 2, totalPages - 4))
      return startPage + i
    }
  )

  return (
    <div className="flex w-full justify-center px-4 py-2">
      <div className="flex gap-2">
        <Button
          className="size-8"
          isIcon
          variant="secondary"
          isDisabled={totalPages < 2 || state.page === 1}
          onPress={() => setPage(1)}
          aria-label="First"
        >
          <ChevronLeftDouble />
        </Button>
        <Button
          className="size-8"
          isIcon
          variant="secondary"
          isDisabled={!hasPreviousPage}
          onPress={goToPrevPage}
          aria-label="Previous"
        >
          <ChevronLeft />
        </Button>

        {pageNumsToShow.map((pageNum) => (
          <Button
            className="size-8"
            isIcon
            key={pageNum}
            onPress={() => setPage(pageNum)}
            variant={pageNum === state.page ? 'primary' : 'secondary'}
          >
            {pageNum}
          </Button>
        ))}

        <Button
          className="size-8"
          isIcon
          variant="secondary"
          isDisabled={!hasNextPage}
          onPress={goToNextPage}
          aria-label="Next"
        >
          <ChevronRight />
        </Button>
        <Button
          className="size-8"
          isIcon
          variant="secondary"
          isDisabled={totalPages < 2 || state.page === totalPages}
          onPress={() => setPage(totalPages)}
          aria-label="Last"
        >
          <ChevronRightDouble />
        </Button>
      </div>
    </div>
  )
}

1	import { Button } from '@stacklok/ui-kit'
2	import { useMessagesFilterSearchParams } from '../hooks/use-messages-filter-search-params'
3	import { useQueryGetWorkspaceMessagesTable } from '../hooks/use-query-get-workspace-messages-table'
4	import {
5	ChevronLeft,
6	ChevronLeftDouble,
7	ChevronRight,
8	ChevronRightDouble,
9	} from '@untitled-ui/icons-react'
10
11	export function TableMessagesPagination() {
12	const { state, goToPrevPage, goToNextPage, setPage } =
13	useMessagesFilterSearchParams()	46✔
14
15	const { data } = useQueryGetWorkspaceMessagesTable()	46✔
16
17	const totalRecords: number = data?.total ?? 0	46✔
18	const totalPages: number = Math.ceil(totalRecords / (data?.limit ?? 1))	46✔
19
20	// We only show pagination when there is something to paginate :)
21	if (totalPages < 2) return null	46!
22
NEW 23	const hasNextPage: boolean = data	×
24	? data.offset + data.limit < totalRecords
25	: false
NEW 26	const hasPreviousPage: boolean = data ? data.offset > 0 : false	×
27
28	// A sliding window of page numbers to render as clickable buttons
29	// e.g. if the page number is `7`, the pages shown should be `[5, 6, 7, 8, 9]`
30	// e.g. if the page number is `1`, the pages shown should be `[1, 2, 3, 4, 5]`
NEW 31	const pageNumsToShow = Array.from(	×
32	{ length: Math.min(5, totalPages) },
33	(_, i) => {
NEW 34	const startPage = Math.max(1, Math.min(state.page - 2, totalPages - 4))	×
NEW 35	return startPage + i	×
36	}
37	)
38
39	return (
40	<div className="flex w-full justify-center px-4 py-2">
41	<div className="flex gap-2">
42	<Button
43	className="size-8"
44	isIcon
45	variant="secondary"
46	isDisabled={totalPages < 2 \|\| state.page === 1}	×
NEW 47	onPress={() => setPage(1)}	×
48	aria-label="First"
49	>
50	<ChevronLeftDouble />
51	</Button>
52	<Button
53	className="size-8"
54	isIcon
55	variant="secondary"
56	isDisabled={!hasPreviousPage}
57	onPress={goToPrevPage}
58	aria-label="Previous"
59	>
60	<ChevronLeft />
61	</Button>
62
63	{pageNumsToShow.map((pageNum) => (
64	<Button
65	className="size-8"
66	isIcon
67	key={pageNum}
NEW 68	onPress={() => setPage(pageNum)}	×
69	variant={pageNum === state.page ? 'primary' : 'secondary'}	×
70	>
71	{pageNum}
72	</Button>
73	))}
74
75	<Button
76	className="size-8"
77	isIcon
78	variant="secondary"
79	isDisabled={!hasNextPage}
80	onPress={goToNextPage}
81	aria-label="Next"
82	>
83	<ChevronRight />
84	</Button>
85	<Button
86	className="size-8"
87	isIcon
88	variant="secondary"
89	isDisabled={totalPages < 2 \|\| state.page === totalPages}	×
NEW 90	onPress={() => setPage(totalPages)}	×
91	aria-label="Last"
92	>
93	<ChevronRightDouble />
94	</Button>
95	</div>
96	</div>
97	)
98	}

stacklok / codegate-ui / 13765011492

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous