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>

pkg/server/api/console/v1/graphql/access_review_campaign.graphql

@@ -377,7 +377,7 @@ type AccessReviewEntry implements Node {
     campaignSource: AccessReviewCampaignSource! @goField(forceResolver: true)
     email: String!
     fullName: String!
-    role: String!
+    roles: [String!]!
     jobTitle: String!
     isAdmin: Boolean!
     active: Boolean

pkg/server/api/console/v1/types/access_review.go

@@ -278,6 +278,11 @@ func NewAccessReviewEntryEdge(e *coredata.AccessReviewEntry, orderBy coredata.Ac
 }
 
 func NewAccessReviewEntry(e *coredata.AccessReviewEntry) *AccessReviewEntry {
+	roles := e.Roles
+	if roles == nil {
+		roles = []string{}
+	}
+
 	entry := &AccessReviewEntry{
 		ID: e.ID,
 		Campaign: &AccessReviewCampaign{
@@ -288,7 +293,7 @@ func NewAccessReviewEntry(e *coredata.AccessReviewEntry) *AccessReviewEntry {
 		},
 		Email:            e.Email,
 		FullName:         e.FullName,
-		Role:             e.Role,
+		Roles:            roles,
 		JobTitle:         e.JobTitle,
 		IsAdmin:          e.IsAdmin,
 		Active:           e.Active,