Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 10 commits into from
Jul 24, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3d254ec
Tie rendering logic for admin group name to identity mode
charliepark Jul 17, 2024
e3a44d7
Put more of form behind conditional render; update test
charliepark Jul 17, 2024
43f9ecb
Copy adjustment
charliepark Jul 17, 2024
c285397
add test assertions to match writeup in PR description
charliepark Jul 17, 2024
b770fd6
Merge branch 'main' into sometimes-hide-admin-group-name
charliepark Jul 24, 2024
c4c89b4
Move checkboxes back out of hidey-block
charliepark Jul 24, 2024
0319829
Remove unneeded classNames
charliepark Jul 24, 2024
f7feafc
Break up sections
charliepark Jul 24, 2024
719f24f
small spacing below 'Role mapping' label
charliepark Jul 24, 2024
8744e7c
tweak spacing slightly
david-crespo Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 29 additions & 15 deletions app/forms/silo-create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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} />
Expand Down
14 changes: 12 additions & 2 deletions test/e2e/silos.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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' })
Expand Down
Loading