Add access roles column (#2062)

* Add Type column to access table

* Remove old Project and Silo role columns

* Remove duplicate columns

Co-authored-by: David Crespo <david-crespo@users.noreply.github.com>

* Add component for ExpandedCountWithDetails

* Access roles refactor suggestions (#2089)

* mostly move role badges logic out of cell

* ListPlusCell

* extract TipIcon and add one to Role column header

---------

Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>

Author: charliepark

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/components/RoleBadgeCell.tsx

@@ -107,7 +107,7 @@ export function ProjectAccessEditUserSideModal({
       form={form}
       formType="edit"
       resourceName="role"
-      title={`Change role for ${name}`}
+      title={`Change project role for ${name}`}
       onSubmit={({ roleName }) => {
         updatePolicy.mutate({
           path: { project },

app/forms/project-access.tsx

@@ -102,7 +102,7 @@ export function SiloAccessEditUserSideModal({
       form={form}
       formType="edit"
       resourceName="role"
-      title={`Change role for ${name}`}
+      title={`Change silo role for ${name}`}
       onSubmit={({ roleName }) => {
         updatePolicy.mutate({
           body: updateRole({ identityId, identityType, roleName }, policy),

app/forms/silo-access.tsx

@@ -23,19 +23,19 @@ import {
 import { Access24Icon } from '@oxide/design-system/icons/react'
 
 import { HL } from '~/components/HL'
-import { RoleBadgeCell } from '~/components/RoleBadgeCell'
 import {
   SiloAccessAddUserSideModal,
   SiloAccessEditUserSideModal,
 } from '~/forms/silo-access'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Table } from '~/table/Table'
+import { Badge } from '~/ui/lib/Badge'
 import { Button } from '~/ui/lib/Button'
 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 { accessTypeLabel, getBadgeColor } from '~/util/access'
 import { groupBy, isTruthy } from '~/util/array'
 
 const EmptyState = ({ onClick }: { onClick: () => void }) => (
@@ -117,8 +117,11 @@ export function SiloAccessPage() {
         cell: (props) => accessTypeLabel(props.getValue()),
       }),
       colHelper.accessor('siloRole', {
-        header: 'Silo role',
-        cell: RoleBadgeCell,
+        header: 'Role',
+        cell: (props) => {
+          const role = props.getValue()
+          return role ? <Badge color={getBadgeColor(role)}>silo.{role}</Badge> : null
+        },
       }),
       // TODO: tooltips on disabled elements explaining why
       getActionsCol((row: UserRow) => [

app/pages/SiloAccessPage.tsx

@@ -14,7 +14,7 @@ import {
   apiQueryClient,
   byGroupThenName,
   deleteRole,
-  getEffectiveRole,
+  roleOrder,
   useApiMutation,
   useApiQueryClient,
   usePrefetchedApiQuery,
@@ -25,7 +25,7 @@ import {
 import { Access24Icon } from '@oxide/design-system/icons/react'
 
 import { HL } from '~/components/HL'
-import { RoleBadgeCell } from '~/components/RoleBadgeCell'
+import { ListPlusCell } from '~/components/ListPlusCell'
 import {
   ProjectAccessAddUserSideModal,
   ProjectAccessEditUserSideModal,
@@ -34,12 +34,14 @@ import { getProjectSelector, useProjectSelector } from '~/hooks'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Table } from '~/table/Table'
+import { Badge } from '~/ui/lib/Badge'
 import { Button } from '~/ui/lib/Button'
 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 { TipIcon } from '~/ui/lib/TipIcon'
+import { accessTypeLabel, getBadgeColor } from '~/util/access'
+import { groupBy, isTruthy, sortBy } from '~/util/array'
 
 const EmptyState = ({ onClick }: { onClick: () => void }) => (
   <TableEmptyBox>
@@ -69,9 +71,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 +93,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,14 +130,27 @@ export function ProjectAccessPage() {
         header: 'Type',
         cell: (props) => accessTypeLabel(props.getValue()),
       }),
-      colHelper.accessor('siloRole', {
-        header: 'Silo role',
-        cell: RoleBadgeCell,
-      }),
-      colHelper.accessor('projectRole', {
-        header: 'Project role',
-        cell: RoleBadgeCell,
+      colHelper.accessor('roleBadges', {
+        header: () => (
+          <span className="inline-flex items-center">
+            Role
+            <TipIcon className="ml-2">
+              A user or group&apos;s effective role for this project is the strongest role
+              on either the silo or project.
+            </TipIcon>
+          </span>
+        ),
+        cell: (props) => (
+          <ListPlusCell tooltipTitle="Other roles">
+            {props.getValue().map(({ roleName, roleSource }) => (
+              <Badge key={roleSource} color={getBadgeColor(roleName)}>
+                {roleSource}.{roleName}
+              </Badge>
+            ))}
+          </ListPlusCell>
+        ),
       }),
+
       // TODO: tooltips on disabled elements explaining why
       getActionsCol((row: UserRow) => [
         {

app/pages/project/access/ProjectAccessPage.tsx

@@ -8,9 +8,7 @@
 import cn from 'classnames'
 import type { ElementType, PropsWithChildren } from 'react'
 
-import { Question12Icon } from '@oxide/design-system/icons/react'
-
-import { Tooltip } from '~/ui/lib/Tooltip'
+import { TipIcon } from './TipIcon'
 
 interface FieldLabelProps {
   id: string
@@ -43,13 +41,7 @@ export const FieldLabel = ({
           </span>
         )}
       </Component>
-      {tip && (
-        <Tooltip content={tip} placement="top">
-          <button className="svg:pointer-events-none" type="button">
-            <Question12Icon className="text-quinary" />
-          </button>
-        </Tooltip>
-      )}
+      {tip && <TipIcon>{tip}</TipIcon>}
     </div>
   )
 }

app/ui/lib/FieldLabel.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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 cn from 'classnames'
+
+import { Question12Icon } from '@oxide/design-system/icons/react'
+
+import { Tooltip } from './Tooltip'
+
+type TipIconProps = {
+  children: React.ReactNode
+  className?: string
+}
+export function TipIcon({ children, className }: TipIconProps) {
+  return (
+    <Tooltip content={children} placement="top">
+      <button
+        className={cn('inline-flex svg:pointer-events-none', className)}
+        type="button"
+      >
+        <Question12Icon className="text-quinary" />
+      </button>
+    </Tooltip>
+  )
+}

app/ui/lib/TipIcon.tsx

@@ -7,9 +7,15 @@
  */
 import { expect, test } from 'vitest'
 
-import { accessTypeLabel } from './access'
+import { accessTypeLabel, getBadgeColor } from './access'
 
 test('accessTypeLabel', () => {
   expect(accessTypeLabel('silo_group')).toEqual('Group')
   expect(accessTypeLabel('silo_user')).toEqual('User')
 })
+
+test('getBadgeColor', () => {
+  expect(getBadgeColor('admin')).toEqual('default')
+  expect(getBadgeColor('collaborator')).toEqual('purple')
+  expect(getBadgeColor('viewer')).toEqual('blue')
+})

app/util/access.spec.tsx

@@ -5,7 +5,18 @@
  *
  * Copyright Oxide Computer Company
  */
+
 import type { IdentityType } from '~/api'
+import type { BadgeColor } from '~/ui/lib/Badge'
 
 export const accessTypeLabel = (identityType: IdentityType) =>
   identityType === 'silo_group' ? 'Group' : 'User'
+
+export const getBadgeColor = (role: 'admin' | 'collaborator' | 'viewer'): BadgeColor => {
+  const badgeColor = {
+    admin: 'default',
+    collaborator: 'purple',
+    viewer: 'blue',
+  }
+  return badgeColor[role] as BadgeColor
+}