diff --git a/app/components/form/fields/TlsCertsField.tsx b/app/components/form/fields/TlsCertsField.tsx index dec73aa26..39cffa5d3 100644 --- a/app/components/form/fields/TlsCertsField.tsx +++ b/app/components/form/fields/TlsCertsField.tsx @@ -18,6 +18,7 @@ import * as MiniTable from '~/ui/lib/MiniTable' import { Modal } from '~/ui/lib/Modal' import { DescriptionField } from './DescriptionField' +import { ErrorMessage } from './ErrorMessage' import { FileField } from './FileField' import { validateName } from './NameField' import { TextField } from './TextField' @@ -26,8 +27,18 @@ export function TlsCertsField({ control }: { control: Control + certs.length < 1 ? 'At least one certificate is required' : undefined, + }, + }) return ( <> @@ -61,16 +72,18 @@ export function TlsCertsField({ control }: { control: Control )} - + {showAddCert && ( setShowAddCert(false)} onSubmit={async (values) => { - const certCreate: (typeof items)[number] = { + const certCreate: CertificateCreate = { ...values, // cert and key are required fields. they will always be present if we get here cert: await values.cert!.text(), diff --git a/test/e2e/silos.e2e.ts b/test/e2e/silos.e2e.ts index 4dccf3656..87a33a84d 100644 --- a/test/e2e/silos.e2e.ts +++ b/test/e2e/silos.e2e.ts @@ -8,6 +8,7 @@ import { expect, test } from '@playwright/test' import { + addTlsCert, chooseFile, clickRowAction, closeToast, @@ -31,6 +32,9 @@ test('Create silo', async ({ page }) => { await page.click('role=link[name="New silo"]') + const modal = page.getByRole('dialog', { name: 'Create silo' }) + await expect(modal).toBeVisible() + // fill out form await page.getByRole('textbox', { name: 'Name', exact: true }).fill('other-silo') await page.getByRole('textbox', { name: 'Description' }).fill('definitely a silo') @@ -68,6 +72,11 @@ test('Create silo', async ({ page }) => { await page.getByRole('textbox', { name: 'Memory quota' }).fill('58') await page.getByRole('textbox', { name: 'Storage quota' }).fill('735') + await page.getByRole('button', { name: 'Create silo' }).click() + + // expect error because no TLS cert + await expect(modal.getByText('At least one certificate is required')).toBeVisible() + //////////////////////////// // TLS CERT //////////////////////////// @@ -348,6 +357,8 @@ test('form scrolls to name field on already exists error', async ({ page }) => { .evaluate((el: HTMLElement, to) => el.scrollTo(0, to), 800) await expect(nameField).not.toBeInViewport() + await addTlsCert(page) + await page.getByRole('button', { name: 'Create silo' }).click() await expect(nameField).toBeInViewport() diff --git a/test/e2e/utilization.e2e.ts b/test/e2e/utilization.e2e.ts index f37b1a17e..382c8eaea 100644 --- a/test/e2e/utilization.e2e.ts +++ b/test/e2e/utilization.e2e.ts @@ -6,6 +6,7 @@ * Copyright Oxide Computer Company */ import { + addTlsCert, clickRowAction, clipboardText, closeToast, @@ -70,6 +71,10 @@ test.describe('System utilization', () => { await page.goto('/system/silos-new') await page.getByRole('textbox', { name: 'Name', exact: true }).fill('all-zeros') // don't need to set silo values, they're zero by default + + // but do need to add a tls cert + await addTlsCert(page) + await page.getByRole('button', { name: 'Create silo' }).click() await closeToast(page) diff --git a/test/e2e/utils.ts b/test/e2e/utils.ts index 5d477cb80..137b9dba7 100644 --- a/test/e2e/utils.ts +++ b/test/e2e/utils.ts @@ -243,3 +243,14 @@ export async function scrollTo(page: Page, to: number) { const container = page.getByTestId('scroll-container') await container.evaluate((el: HTMLElement, to) => el.scrollTo(0, to), to) } + +export async function addTlsCert(page: Page) { + page.getByRole('button', { name: 'Add TLS certificate' }).click() + await page + .getByRole('dialog', { name: 'Add TLS certificate' }) + .getByRole('textbox', { name: 'Name' }) + .fill('test-cert') + await chooseFile(page, page.getByLabel('Cert', { exact: true }), 'small') + await chooseFile(page, page.getByLabel('Key'), 'small') + await page.getByRole('button', { name: 'Add Certificate' }).click() +}