Access roles refactor suggestions

app/components/AccessBadge.tsx

@@ -10,7 +10,7 @@ import type { RoleKey } from '~/api'
 import { Badge } from '~/ui/lib/Badge'
 import { getBadgeColor } from '~/util/access'
 
-type AccessBadgeProps = { labelPrefix: 'silo' | 'project'; role: RoleKey }
+type AccessBadgeProps = { labelPrefix: string; role: RoleKey }
 
 export const AccessBadge = ({ labelPrefix, role }: AccessBadgeProps) => (
   <Badge color={getBadgeColor(role)}>

app/components/ListPlusCell.tsx

@@ -0,0 +1,39 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import React from 'react'
+
+import { Tooltip } from '~/ui/lib/Tooltip'
+
+type ListPlusCellProps = {
+  tooltipTitle: string
+  children: React.ReactNode
+}
+
+/**
+ * Gives a count with a tooltip that expands to show details when the user hovers over it
+ */
+export const ListPlusCell = ({ tooltipTitle, children }: ListPlusCellProps) => {
+  const [first, ...rest] = React.Children.toArray(children)
+  const content = (
+    <div>
+      <div className="mb-2">{tooltipTitle}</div>
+      {...rest}
+    </div>
+  )
+  return (
+    <div className="flex items-baseline gap-2">
+      {first}
+      {rest.length > 0 && (
+        <Tooltip content={content} placement="bottom">
+          <div className="text-mono-sm">+{rest.length}</div>
+        </Tooltip>
+      )}
+    </div>
+  )
+}

app/pages/project/access/ProjectAccessPage.tsx

@@ -14,7 +14,7 @@ import {
   apiQueryClient,
   byGroupThenName,
   deleteRole,
-  getEffectiveRole,
+  roleOrder,
   useApiMutation,
   useApiQueryClient,
   usePrefetchedApiQuery,
@@ -24,8 +24,9 @@ import {
 } from '@oxide/api'
 import { Access24Icon } from '@oxide/design-system/icons/react'
 
+import { AccessBadge } from '~/components/AccessBadge'
 import { HL } from '~/components/HL'
-import { ProjectAccessRolesCell } from '~/components/ProjectAccessRolesCell'
+import { ListPlusCell } from '~/components/ListPlusCell'
 import {
   ProjectAccessAddUserSideModal,
   ProjectAccessEditUserSideModal,
@@ -39,7 +40,7 @@ import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
 import { accessTypeLabel } from '~/util/access'
-import { groupBy, isTruthy } from '~/util/array'
+import { groupBy, isTruthy, sortBy } from '~/util/array'
 
 const EmptyState = ({ onClick }: { onClick: () => void }) => (
   <TableEmptyBox>
@@ -69,9 +70,8 @@ type UserRow = {
   id: string
   identityType: IdentityType
   name: string
-  siloRole: RoleKey | undefined
   projectRole: RoleKey | undefined
-  effectiveRole: RoleKey
+  roleBadges: { roleSource: string; roleName: RoleKey }[]
 }
 
 const colHelper = createColumnHelper<UserRow>()
@@ -92,26 +92,23 @@ export function ProjectAccessPage() {
   const rows = useMemo(() => {
     return groupBy(siloRows.concat(projectRows), (u) => u.id)
       .map(([userId, userAssignments]) => {
-        const siloRole = userAssignments.find((a) => a.roleSource === 'silo')?.roleName
-        const projectRole = userAssignments.find(
-          (a) => a.roleSource === 'project'
-        )?.roleName
+        const { name, identityType } = userAssignments[0]
 
-        const roles = [siloRole, projectRole].filter(isTruthy)
+        const siloAccessRow = userAssignments.find((a) => a.roleSource === 'silo')
+        const projectAccessRow = userAssignments.find((a) => a.roleSource === 'project')
 
-        const { name, identityType } = userAssignments[0]
+        const roleBadges = sortBy(
+          [siloAccessRow, projectAccessRow].filter(isTruthy),
+          (r) => roleOrder[r.roleName] // sorts strongest role first
+        )
 
-        const row: UserRow = {
+        return {
           id: userId,
           identityType,
           name,
-          siloRole,
-          projectRole,
-          // we know there has to be at least one
-          effectiveRole: getEffectiveRole(roles)!,
-        }
-
-        return row
+          projectRole: projectAccessRow?.roleName,
+          roleBadges,
+        } satisfies UserRow
       })
       .sort(byGroupThenName)
   }, [siloRows, projectRows])
@@ -132,7 +129,16 @@ export function ProjectAccessPage() {
         header: 'Type',
         cell: (props) => accessTypeLabel(props.getValue()),
       }),
-      colHelper.accessor('effectiveRole', { header: 'Role', cell: ProjectAccessRolesCell }),
+      colHelper.accessor('roleBadges', {
+        header: 'Role',
+        cell: (props) => (
+          <ListPlusCell tooltipTitle="Other roles">
+            {props.getValue().map(({ roleName, roleSource }) => (
+              <AccessBadge key={roleSource} role={roleName} labelPrefix={roleSource} />
+            ))}
+          </ListPlusCell>
+        ),
+      }),
 
       // TODO: tooltips on disabled elements explaining why
       getActionsCol((row: UserRow) => [