Truncate access review roles with badge list

Long role strings in the access review table broke row layout when
drivers joined many roles into one comma-separated value. Expose
roles as a string array in GraphQL by splitting the stored role at
the API layer, and render the first three roles as badges with a
"+X more" popover for the rest.

Closes ENG-459.

Signed-off-by: Ludovic Vielle <ludovic@probo.com>

apps/console/src/pages/organizations/access-reviews/campaigns/CampaignDetailPage.tsx

@@ -56,6 +56,7 @@ import type { CampaignDetailPageQuery } from "#/__generated__/core/CampaignDetai
 import type { CampaignDetailPageStartMutation } from "#/__generated__/core/CampaignDetailPageStartMutation.graphql";
 import { useOrganizationId } from "#/hooks/useOrganizationId";
 
+import { AccessEntryRolesCell } from "../_components/AccessEntryRolesCell";
 import {
   decisionBadgeVariant,
   decisionLabel,
@@ -169,7 +170,7 @@ export const campaignDetailPageQuery = graphql`
                 id
                 email
                 fullName
-                role
+                ...AccessEntryRolesCell_accessEntry
                 isAdmin
                 active
                 mfaStatus
@@ -721,7 +722,7 @@ function CampaignSourceCard({ source, isPendingActions }: { source: CampaignSour
                             </span>
                           </Td>
                           <Td>{edge.node.email || <NotAvailable />}</Td>
-                          <Td>{edge.node.role || <NotAvailable />}</Td>
+                          <AccessEntryRolesCell accessEntryKey={edge.node} />
                           <Td>{edge.node.isAdmin ? __("Yes") : __("No")}</Td>
                           <Td>
                             {edge.node.active == null