Limited collaborator UI (#2960)

* Bump Omicron version and add limited_collaborator role

* Add restriction in MSW around VPC creation and add tests

* Use radio buttons for forms; refactor

* Better spacing, copy

* More spacing tweaks; message about stacked role rules

* copy

* Show current state in form

* Cleanup unused variable

* let RadioFieldDyn handle its own radio state

the div wrapping the radios was messing up the way RadioFieldDyn passes
checked state to its child radios because they're expected to be direct
children

* update import

* improve tests; add silo-to-project authz conferral mechanism to msw

* Add new unit test for silo limited-collaborator

* Microcopy tweaks

* Move silo and project access forms into regular modal

* Move back to side modal

* update button copy

* Update header for edit modals

* Update string matching in tests

* go to great lengths to avoid casting

* also show message box on silo access

* add space under role radio heading

* Bump Omicron version

* special message text for project and silo access, link to docs

* remove unneeded import

* final copy

---------

Co-authored-by: David Crespo <[email protected]>

Author: charliepark

OMICRON_VERSION

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

app/api/__generated__/Api.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/__generated__/OMICRON_VERSION

@@ -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/api/__generated__/validate.ts

@@ -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/api/roles.spec.ts

@@ -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/api/roles.ts

@@ -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/components/form/fields/RadioField.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>
   )
 }