From dfbe9137a3935a2c53c019eb4c7d7cd8fedea580 Mon Sep 17 00:00:00 2001
From: Sacha Al Himdani <sacha@getprobo.com>
Date: Tue, 14 Apr 2026 14:04:49 +0200
Subject: [PATCH] Fix risk controls tab missing pagination

The controls tab used useRefetchableFragment which only showed the
first 20 controls with no "Show more" button, while the tab badge
displayed the actual total count. Switch to usePaginationFragment
to enable proper pagination via the SortableTable component.

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
---
 .../risks/tabs/RiskControlsTab.tsx            | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/apps/console/src/pages/organizations/risks/tabs/RiskControlsTab.tsx b/apps/console/src/pages/organizations/risks/tabs/RiskControlsTab.tsx
index c43e19033..cba0d8410 100644
--- a/apps/console/src/pages/organizations/risks/tabs/RiskControlsTab.tsx
+++ b/apps/console/src/pages/organizations/risks/tabs/RiskControlsTab.tsx
@@ -14,9 +14,11 @@
 
 import { useTranslate } from "@probo/i18n";
 import { Badge, Tbody, Td, Th, Thead, Tr } from "@probo/ui";
-import { graphql, useRefetchableFragment } from "react-relay";
+import type { ComponentProps } from "react";
+import { graphql, usePaginationFragment } from "react-relay";
 import { useOutletContext } from "react-router";
 
+import type { RiskControlsTabControlsQuery } from "#/__generated__/core/RiskControlsTabControlsQuery.graphql";
 import type { RiskControlsTabFragment$key } from "#/__generated__/core/RiskControlsTabFragment.graphql";
 import { SortableTable, SortableTh } from "#/components/SortableTable";
 import { useOrganizationId } from "#/hooks/useOrganizationId";
@@ -60,13 +62,20 @@ export default function RiskControlsTab() {
     risk: RiskControlsTabFragment$key & { id: string };
   }>();
   const { __ } = useTranslate();
-  // eslint-disable-next-line relay/generated-typescript-types
-  const [data, refetch] = useRefetchableFragment(controlsFragment, risk);
-  const controls = data.controls.edges.map(edge => edge.node);
+  const pagination = usePaginationFragment<
+    RiskControlsTabControlsQuery,
+    RiskControlsTabFragment$key
+  >(controlsFragment, risk);
+  const controls = pagination.data.controls.edges.map(edge => edge.node);
   const organizationId = useOrganizationId();
 
   return (
-    <SortableTable refetch={refetch}>
+    <SortableTable
+      {...pagination}
+      refetch={
+        pagination.refetch as ComponentProps<typeof SortableTable>["refetch"]
+      }
+    >
       <Thead>
         <Tr>
           <SortableTh field="SECTION_TITLE">{__("Reference")}</SortableTh>