Conditionally render silo creation fields, depending on identity mode (#2332)

* Tie rendering logic for admin group name to identity mode

* Put more of form behind conditional render; update test

* Copy adjustment

* add test assertions to match writeup in PR description

* Move checkboxes back out of hidey-block

* Remove unneeded classNames

* Break up sections

* small spacing below 'Role mapping' label

* tweak spacing slightly

---------

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

Author: charliepark

app/forms/silo-create.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { useApiMutation, useApiQueryClient, type SiloCreate } from '@oxide/api'
@@ -20,6 +21,7 @@ import { SideModalForm } from '~/components/form/SideModalForm'
 import { useForm } from '~/hooks'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
+import { FieldLabel } from '~/ui/lib/FieldLabel'
 import { Message } from '~/ui/lib/Message'
 import { pb } from '~/util/path-builder'
 import { GiB } from '~/util/units'
@@ -65,7 +67,13 @@ export function CreateSiloSideModalForm() {
   })
 
   const form = useForm({ defaultValues })
-
+  const identityMode = form.watch('identityMode')
+  // Clear the adminGroupName if the user selects the "local only" identity mode
+  useEffect(() => {
+    if (identityMode === 'local_only') {
+      form.setValue('adminGroupName', '')
+    }
+  }, [identityMode, form])
   return (
     <SideModalForm
       form={form}
@@ -145,21 +153,27 @@ export function CreateSiloSideModalForm() {
           { value: 'local_only', label: 'Local only' },
         ]}
       />
-      <TextField
-        name="adminGroupName"
-        label="Admin group name"
-        description="This group will be created and granted the Silo Admin role"
-        control={form.control}
-      />
+      {identityMode === 'saml_jit' && (
+        <TextField
+          name="adminGroupName"
+          label="Admin group name"
+          description="This group will be created and granted the Silo Admin role."
+          control={form.control}
+        />
+      )}
+      <FormDivider />
       <div>
-        <CheckboxField name="siloAdminGetsFleetAdmin" control={form.control}>
-          Grant fleet admin role to silo admins
-        </CheckboxField>
-      </div>
-      <div className="!mt-2">
-        <CheckboxField name="siloViewerGetsFleetViewer" control={form.control}>
-          Grant fleet viewer role to silo viewers
-        </CheckboxField>
+        <FieldLabel as="h3" id="role-mapping-label" className="mb-3">
+          Role mapping
+        </FieldLabel>
+        <div className="space-y-1">
+          <CheckboxField name="siloAdminGetsFleetAdmin" control={form.control}>
+            Grant fleet admin role to silo admins
+          </CheckboxField>
+          <CheckboxField name="siloViewerGetsFleetViewer" control={form.control}>
+            Grant fleet viewer role to silo viewers
+          </CheckboxField>
+        </div>
       </div>
       <FormDivider />
       <TlsCertsField control={form.control} />

test/e2e/silos.e2e.ts

@@ -38,9 +38,19 @@ test('Create silo', async ({ page }) => {
   const discoverable = page.getByRole('checkbox', { name: 'Discoverable' })
   await expect(discoverable).toBeChecked()
   await discoverable.click()
-  await page.getByRole('radio', { name: 'Local only' }).click()
+  await expect(page.getByRole('textbox', { name: 'Admin group name' })).toBeVisible()
   await page.getByRole('textbox', { name: 'Admin group name' }).fill('admins')
   await page.getByRole('checkbox', { name: 'Grant fleet admin' }).click()
+  await expect(page.getByRole('textbox', { name: 'Admin group name' })).toHaveValue(
+    'admins'
+  )
+  await expect(page.getByRole('checkbox', { name: 'Grant fleet admin' })).toBeChecked()
+  await page.getByRole('radio', { name: 'Local only' }).click()
+  await expect(page.getByRole('textbox', { name: 'Admin group name' })).toBeHidden()
+  await page.getByRole('radio', { name: 'SAML' }).click()
+  await expect(page.getByRole('textbox', { name: 'Admin group name' })).toHaveValue('')
+  await expect(page.getByRole('checkbox', { name: 'Grant fleet admin' })).toBeChecked()
+  await page.getByRole('textbox', { name: 'Admin group name' }).fill('admins')
   await page.getByRole('textbox', { name: 'CPU quota' }).fill('30')
   await page.getByRole('textbox', { name: 'Memory quota' }).fill('58')
   await page.getByRole('textbox', { name: 'Storage quota' }).fill('735')
@@ -99,7 +109,7 @@ test('Create silo', async ({ page }) => {
   await expectRowVisible(table, {
     name: 'other-silo',
     description: 'definitely a silo',
-    'Identity mode': 'local only',
+    'Identity mode': 'saml jit',
     // discoverable: 'false',
   })
   const otherSiloCell = page.getByRole('cell', { name: 'other-silo' })