implement page slicing

stacklok · Jan 17, 2025 · ea7f374 · ea7f374
1 parent 706d6eb
commit ea7f374
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/components/__tests__/Dashboard.test.tsx b/src/components/__tests__/Dashboard.test.tsx
@@ -348,4 +348,18 @@ describe("Dashboard", () => {
     await userEvent.click(screen.getByRole("button", { name: /previous/i }));
     expect(screen.getByRole("button", { name: /previous/i })).toBeDisabled();
   });
+
+  it("displays the correct rows when using pagination", async () => {
+    mockManyAlerts();
+
+    render(<Dashboard />);
+
+    await waitFor(async () => {
+      await userEvent.click(screen.getByRole("button", { name: /next/i }));
+
+      expect(
+        within(screen.getByTestId("alerts-table")).getAllByRole("row").length,
+      ).toBeLessThan(15);
+    });
+  });
 });
diff --git a/src/hooks/useAlertsData.ts b/src/hooks/useAlertsData.ts
@@ -35,8 +35,12 @@ export const useAlertsData = ({ ...args } = {}) => {
   });
 };
 
+const PAGE_SIZE = 15;
+
 export const useFilteredAlerts = () => {
-  const { isMaliciousFilterActive, search } = useAlertSearch();
+  const { isMaliciousFilterActive, search, page } = useAlertSearch();
+
+  const page_start = page * PAGE_SIZE;
 
   return useAlertsData({
     select: (
@@ -71,7 +75,7 @@ export const useFilteredAlerts = () => {
             (alert.trigger_type as TriggerType) === "codegate-context-retriever"
           );
         })
-        .slice(0, 14),
+        .slice(page_start, page_start + PAGE_SIZE - 1),
   });
 };