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/accessreview/drivers/cloudflare.go

@@ -21,7 +21,6 @@ import (
 	"net/http"
 	"net/url"
 	"strconv"
-	"strings"
 
 	"go.probo.inc/probo/pkg/coredata"
 )
@@ -170,9 +169,8 @@ func (d *CloudflareDriver) queryAllMembers(ctx context.Context, accountID string
 				roles = append(roles, r.Name)
 			}
 
-			role := "Member"
-			if len(roles) > 0 {
-				role = strings.Join(roles, ", ")
+			if len(roles) == 0 {
+				roles = []string{"Member"}
 			}
 
 			isAdmin := false
@@ -192,7 +190,7 @@ func (d *CloudflareDriver) queryAllMembers(ctx context.Context, accountID string
 			record := AccountRecord{
 				Email:       m.User.Email,
 				FullName:    m.User.FirstName + " " + m.User.LastName,
-				Role:        role,
+				Roles:       roles,
 				Active:      new(m.Status == "accepted"),
 				IsAdmin:     isAdmin,
 				ExternalID:  m.ID,