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

Author: david-crespo

app/components/form/fields/RadioField.tsx

@@ -19,6 +19,8 @@ import { FieldLabel } from '~/ui/lib/FieldLabel'
 import { Radio, 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<
@@ -126,6 +128,10 @@ 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">

app/forms/access-util.tsx

@@ -6,6 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import type { Control } from 'react-hook-form'
+import * as R from 'remeda'
 
 import {
   allRoles,
@@ -25,12 +26,12 @@ 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
@@ -84,7 +85,6 @@ type RoleRadioFieldProps = {
 
 export function RoleRadioField({ control, scope }: RoleRadioFieldProps) {
   const roleDescriptions = scope === 'Silo' ? siloRoleDescriptions : projectRoleDescriptions
-  const currentRole = control._formValues.roleName || ''
   return (
     <>
       <RadioFieldDyn
@@ -95,25 +95,17 @@ export function RoleRadioField({ control, scope }: RoleRadioFieldProps) {
         column
         className="mt-2"
       >
-        {allRoles.map((role) => (
-          <div className="mt-1" key={role}>
-            <Radio
-              name="roleName"
-              value={role}
-              defaultChecked={currentRole === role}
-              alignTop
-            >
-              {/* negative top margin to control spacing with radio button and label */}
-              <div className="-mt-0.5 ml-1">
-                <div className="text-sans-md text-raise">
-                  {capitalize(role).replace('_', ' ')}
-                </div>
-                <div className="text-sans-sm text-secondary mt-0.5">
-                  {roleDescriptions[role]}
-                </div>
+        {R.reverse(allRoles).map((role) => (
+          <Radio name="roleName" key={role} value={role} alignTop>
+            <div className="ml-1">
+              <div className="text-sans-md text-raise">
+                {capitalize(role).replace('_', ' ')}
               </div>
-            </Radio>
-          </div>
+              <div className="text-sans-sm text-secondary mt-0.5">
+                {roleDescriptions[role]}
+              </div>
+            </div>
+          </Radio>
         ))}
       </RadioFieldDyn>
       {scope === 'Project' && (

app/forms/project-access.tsx

@@ -51,10 +51,6 @@ export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModa
       form={form}
       formType="create"
       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
 

app/forms/silo-access.tsx

@@ -46,10 +46,6 @@ export function SiloAccessAddUserSideModal({ onDismiss, policy }: AddRoleModalPr
       title="Add user or group"
       onDismiss={onDismiss}
       onSubmit={({ identityId, roleName }) => {
-        // can't happen because roleName is validated not to be '', but TS
-        // wants to be sure
-        if (roleName === '') return
-
         // TODO: DRY logic
         // actor is guaranteed to be in the list because it came from there
         const identityType = actors.find((a) => a.id === identityId)!.identityType