Limited collaborator UI

OMICRON_VERSION

@@ -1 +1 @@
-9617f40aa6f35b58ffd6b4e92c02ba8e7dd95033
+a6e111cf72ab987b2ea5acd7d26610ea2a55bf0f

app/api/roles.spec.ts

@@ -157,5 +157,5 @@ test('byGroupThenName sorts as expected', () => {
 })
 
 test('allRoles', () => {
-  expect(allRoles).toEqual(['admin', 'collaborator', 'viewer'])
+  expect(allRoles).toEqual(['admin', 'collaborator', 'limited_collaborator', 'viewer'])
 })

app/api/roles.ts

@@ -33,7 +33,8 @@ const flatRoles = (roleOrder: Record<RoleKey, number>): RoleKey[] =>
 export const roleOrder: Record<RoleKey, number> = {
   collaborator: 1,
   admin: 0,
-  viewer: 2,
+  viewer: 3,
+  limited_collaborator: 2,
 }
 
 /** `roleOrder` record converted to a sorted array of roles. */

app/components/form/fields/RadioField.tsx

@@ -16,9 +16,11 @@ import {
 } from 'react-hook-form'
 
 import { FieldLabel } from '~/ui/lib/FieldLabel'
-import { Radio, type RadioProps } from '~/ui/lib/Radio'
+import { Radio, RadioCard, type RadioProps } from '~/ui/lib/Radio'
 import { RadioGroup, type RadioGroupProps } from '~/ui/lib/RadioGroup'
 import { TextInputHint } from '~/ui/lib/TextInput'
+import { isOneOf } from '~/util/children'
+import { invariant } from '~/util/invariant'
 import { capitalize } from '~/util/str'
 
 export type RadioFieldProps<
@@ -99,11 +101,23 @@ export function RadioField<
 
 type RadioElt = React.ReactElement<RadioProps>
 
+// we do not extend RadioFieldProps here because it limits our ability to type
+// components like RoleRadioField. see https://tsplay.dev/ND13Om
+
 export type RadioFieldDynProps<
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>,
-> = Omit<RadioFieldProps<TFieldValues, TName>, 'parseValue' | 'items'> & {
+> = {
+  name: TName
+  label?: string
+  description?: string | React.ReactNode
+  units?: string
+  control: Control<TFieldValues>
   children: RadioElt | RadioElt[]
+  column?: boolean
+  className?: string
+  required?: boolean
+  disabled?: boolean
 }
 
 /**
@@ -117,7 +131,7 @@ export function RadioFieldDyn<
   TName extends FieldPath<TFieldValues>,
 >({
   name,
-  label = capitalize(name),
+  label,
   description,
   units,
   control,
@@ -126,9 +140,13 @@ export function RadioFieldDyn<
 }: RadioFieldDynProps<TFieldValues, TName>) {
   const id = useId()
   const { field } = useController({ name, control })
+  invariant(
+    isOneOf(children, [Radio, RadioCard]),
+    'Children of RadioFieldDyn must be Radio or RadioCard'
+  )
   return (
     <div>
-      <div className="mb-2">
+      <div className="mb-3">
         {label && (
           <FieldLabel id={`${id}-label`}>
             {label} {units && <span className="text-default ml-1">({units})</span>}

app/forms/access-util.tsx

@@ -5,6 +5,9 @@
  *
  * Copyright Oxide Computer Company
  */
+import type { Control, FieldPath, FieldValues } from 'react-hook-form'
+import * as R from 'remeda'
+
 import {
   allRoles,
   type Actor,
@@ -14,20 +17,38 @@ import {
 } from '@oxide/api'
 import { Badge } from '@oxide/design-system/ui'
 
+import { RadioFieldDyn } from '~/components/form/fields/RadioField'
 import { type ListboxItem } from '~/ui/lib/Listbox'
+import { Message } from '~/ui/lib/Message'
+import { Radio } from '~/ui/lib/Radio'
+import { links } from '~/util/links'
 import { capitalize } from '~/util/str'
 
 type AddUserValues = {
   identityId: string
-  roleName: RoleKey | ''
+  roleName: RoleKey
 }
 
 export const defaultValues: AddUserValues = {
   identityId: '',
-  roleName: '',
+  roleName: 'viewer',
+}
+
+// Role descriptions for project-level roles
+const projectRoleDescriptions: Record<RoleKey, string> = {
+  admin: 'Control all aspects of the project',
+  collaborator: 'Manage all project resources, including networking',
+  limited_collaborator: 'Manage project resources except networking configuration',
+  viewer: 'View resources within the project',
 }
 
-export const roleItems = allRoles.map((role) => ({ value: role, label: capitalize(role) }))
+// Role descriptions for silo-level roles
+const siloRoleDescriptions: Record<RoleKey, string> = {
+  admin: 'Control all aspects of the silo',
+  collaborator: 'Create and administer projects',
+  limited_collaborator: 'Manage project resources except networking configuration',
+  viewer: 'View resources within the silo',
+}
 
 export const actorToItem = (actor: Actor): ListboxItem => ({
   value: actor.id,
@@ -55,3 +76,62 @@ export type EditRoleModalProps = AddRoleModalProps & {
   identityType: IdentityType
   defaultValues: { roleName: RoleKey }
 }
+
+const AccessDocs = () => (
+  <a href={links.accessDocs} target="_blank" rel="noreferrer">
+    Access Control
+  </a>
+)
+export function RoleRadioField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+>({
+  name,
+  control,
+  scope,
+}: {
+  name: TName
+  control: Control<TFieldValues>
+  scope: 'Silo' | 'Project'
+}) {
+  const roleDescriptions = scope === 'Silo' ? siloRoleDescriptions : projectRoleDescriptions
+  return (
+    <>
+      <RadioFieldDyn
+        name={name}
+        label={`${scope} role`}
+        required
+        control={control}
+        column
+        className="mt-2"
+      >
+        {R.reverse(allRoles).map((role) => (
+          <Radio name="roleName" key={role} value={role} alignTop>
+            <div className="text-sans-md text-raise">
+              {capitalize(role).replace('_', ' ')}
+            </div>
+            <div className="text-sans-sm text-secondary">{roleDescriptions[role]}</div>
+          </Radio>
+        ))}
+      </RadioFieldDyn>
+      <Message
+        variant="info"
+        content={
+          scope === 'Silo' ? (
+            <>
+              Silo roles are inherited by all projects in the silo and override weaker
+              roles. For example, a silo viewer is <em>at least</em> a viewer on all
+              projects in the silo. Learn more in the <AccessDocs /> guide.
+            </>
+          ) : (
+            <>
+              Project roles can be overridden by a stronger role on the silo. For example, a
+              silo viewer is <em>at least</em> a viewer on all projects in the silo. Learn
+              more in the <AccessDocs /> guide.
+            </>
+          )
+        }
+      />
+    </>
+  )
+}

app/forms/instance-create.tsx

@@ -394,34 +394,19 @@ export default function CreateInstanceForm() {
             </Tabs.Trigger>
           </Tabs.List>
           <Tabs.Content value="general">
-            <RadioFieldDyn
-              name="presetId"
-              label=""
-              control={control}
-              disabled={isSubmitting}
-            >
+            <RadioFieldDyn name="presetId" control={control} disabled={isSubmitting}>
               {renderLargeRadioCards('general')}
             </RadioFieldDyn>
           </Tabs.Content>
 
           <Tabs.Content value="highCPU">
-            <RadioFieldDyn
-              name="presetId"
-              label=""
-              control={control}
-              disabled={isSubmitting}
-            >
+            <RadioFieldDyn name="presetId" control={control} disabled={isSubmitting}>
               {renderLargeRadioCards('highCPU')}
             </RadioFieldDyn>
           </Tabs.Content>
 
           <Tabs.Content value="highMemory">
-            <RadioFieldDyn
-              name="presetId"
-              label=""
-              control={control}
-              disabled={isSubmitting}
-            >
+            <RadioFieldDyn name="presetId" control={control} disabled={isSubmitting}>
               {renderLargeRadioCards('highMemory')}
             </RadioFieldDyn>
           </Tabs.Content>

app/forms/project-access.tsx

@@ -13,16 +13,18 @@ import {
   useApiMutation,
   useApiQueryClient,
 } from '@oxide/api'
+import { Access16Icon } from '@oxide/design-system/icons/react'
 
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { ResourceLabel } from '~/ui/lib/SideModal'
 
 import {
   actorToItem,
   defaultValues,
-  roleItems,
+  RoleRadioField,
   type AddRoleModalProps,
   type EditRoleModalProps,
 } from './access-util'
@@ -50,11 +52,8 @@ export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModa
       resourceName="role"
       form={form}
       formType="create"
+      submitLabel="Assign role"
       onSubmit={({ identityId, roleName }) => {
-        // can't happen because roleName is validated not to be '', but TS
-        // wants to be sure
-        if (roleName === '') return
-
         // actor is guaranteed to be in the list because it came from there
         const identityType = actors.find((a) => a.id === identityId)!.identityType
 
@@ -65,7 +64,6 @@ export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModa
       }}
       loading={updatePolicy.isPending}
       submitError={updatePolicy.error}
-      submitLabel="Assign role"
       onDismiss={onDismiss}
     >
       <ListboxField
@@ -75,13 +73,7 @@ export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModa
         required
         control={form.control}
       />
-      <ListboxField
-        name="roleName"
-        label="Role"
-        items={roleItems}
-        required
-        control={form.control}
-      />
+      <RoleRadioField name="roleName" control={form.control} scope="Project" />
     </SideModalForm>
   )
 }
@@ -109,11 +101,15 @@ export function ProjectAccessEditUserSideModal({
 
   return (
     <SideModalForm
-      // TODO: show user name in header or SOMEWHERE
       form={form}
       formType="edit"
       resourceName="role"
-      title={`Change project role for ${name}`}
+      title="Edit role"
+      subtitle={
+        <ResourceLabel>
+          <Access16Icon /> {name}
+        </ResourceLabel>
+      }
       onSubmit={({ roleName }) => {
         updatePolicy.mutate({
           path: { project },
@@ -124,13 +120,7 @@ export function ProjectAccessEditUserSideModal({
       submitError={updatePolicy.error}
       onDismiss={onDismiss}
     >
-      <ListboxField
-        name="roleName"
-        label="Role"
-        items={roleItems}
-        required
-        control={form.control}
-      />
+      <RoleRadioField name="roleName" control={form.control} scope="Project" />
     </SideModalForm>
   )
 }