diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx index 3e353052e6..47394dcb8f 100644 --- a/app/components/form/SideModalForm.tsx +++ b/app/components/form/SideModalForm.tsx @@ -19,7 +19,7 @@ import { SideModal } from '~/ui/lib/SideModal' type CreateFormProps = { formType: 'create' /** Only needed if you need to override the default button text (`Create ${resourceName}`) */ - submitLabel?: string + submitLabel?: 'Add' | 'Assign' | 'Attach' | 'Create' | 'Done' | 'Upload' } type EditFormProps = { @@ -90,10 +90,7 @@ export function SideModalForm({ } }, [submitError, form]) - const label = - formType === 'edit' - ? `Update ${resourceName}` - : submitLabel || title || `Create ${resourceName}` + const label = formType === 'edit' ? 'Update' : submitLabel || title || 'Create' // must be destructured up here to subscribe to changes. inlining // form.formState.isDirty does not work diff --git a/app/forms/firewall-rules-create.tsx b/app/forms/firewall-rules-create.tsx index 6aeacbee67..ba983aef30 100644 --- a/app/forms/firewall-rules-create.tsx +++ b/app/forms/firewall-rules-create.tsx @@ -122,7 +122,7 @@ export default function CreateFirewallRuleForm() { }} loading={updateRules.isPending} submitError={updateRules.error} - submitLabel="Add rule" + submitLabel="Add" > createImage.mutate({ diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx index 6ad5a37e97..5e978007e9 100644 --- a/app/forms/image-upload.tsx +++ b/app/forms/image-upload.tsx @@ -560,7 +560,7 @@ export default function ImageCreate() { }} loading={formLoading} submitError={formError} - submitLabel={allDone ? 'Done' : 'Upload image'} + submitLabel={allDone ? 'Done' : 'Upload'} > { 'role=textbox[name="Description"]', 'role=radiogroup[name="Block size (Bytes)"]', 'role=textbox[name="Size (GiB)"]', - 'role=button[name="Create disk"]', + 'role=button[name="Create"]', ]) await page.goBack() }) diff --git a/test/e2e/disks.e2e.ts b/test/e2e/disks.e2e.ts index 13482ad3ee..bbdb4df6b0 100644 --- a/test/e2e/disks.e2e.ts +++ b/test/e2e/disks.e2e.ts @@ -64,7 +64,7 @@ test.describe('Disk create', () => { }) test.afterEach(async ({ page }) => { - await page.getByRole('button', { name: 'Create disk' }).click() + await page.getByRole('button', { name: 'Create' }).click() await expect(page.getByRole('dialog', { name: 'Create disk' })).toBeHidden() await expectToast(page, 'Disk a-new-disk created') diff --git a/test/e2e/firewall-rules.e2e.ts b/test/e2e/firewall-rules.e2e.ts index 9ad4af8fd4..9acad83a64 100644 --- a/test/e2e/firewall-rules.e2e.ts +++ b/test/e2e/firewall-rules.e2e.ts @@ -42,14 +42,14 @@ test('can create firewall rule', async ({ page }) => { await selectOption(page, 'Target type', 'IP') await page.getByRole('textbox', { name: 'IP address' }).fill('192.168.0.1') - await page.getByRole('button', { name: 'Add target' }).click() + await page.getByRole('button', { name: 'Add' }).click() await expectRowVisible(targets, { Type: 'ip', Value: '192.168.0.1' }) // add host filter instance "host-filter-instance" await selectOption(page, 'Host type', 'Instance') await page.getByRole('combobox', { name: 'Instance name' }).fill('host-filter-instance') await page.getByText('host-filter-instance').click() - await page.getByRole('button', { name: 'Add host filter' }).click() + await page.getByRole('button', { name: 'Add' }).click() // host is added to hosts table const hosts = page.getByRole('table', { name: 'Host filters' }) @@ -57,7 +57,7 @@ test('can create firewall rule', async ({ page }) => { const portRangeField = page.getByRole('textbox', { name: 'Port filters' }) const invalidPort = page.getByRole('dialog').getByText('Not a valid port range') - const addPortButton = page.getByRole('button', { name: 'Add port filter' }) + const addPortButton = page.getByRole('button', { name: 'Add' }) await portRangeField.fill('abc') await expect(invalidPort).toBeHidden() await addPortButton.click() @@ -85,7 +85,7 @@ test('can create firewall rule', async ({ page }) => { await page.locator('text=UDP').click() // submit the form - await page.getByRole('button', { name: 'Add rule' }).click() + await page.getByRole('button', { name: 'Add' }).click() // modal closes again await expect(modal).toBeHidden() @@ -158,7 +158,7 @@ test('firewall rule form targets table', async ({ page }) => { const targets = page.getByRole('table', { name: 'Targets' }) const targetVpcNameField = page.getByRole('combobox', { name: 'VPC name' }).first() - const addButton = page.getByRole('button', { name: 'Add target' }) + const addButton = page.getByRole('button', { name: 'Add' }) // addButton should be disabled until a value is added await expect(addButton).toBeDisabled() @@ -231,7 +231,7 @@ test('firewall rule form targets table', async ({ page }) => { test('firewall rule form target validation', async ({ page }) => { await page.goto('/projects/mock-project/vpcs/mock-vpc/firewall-rules-new') - const addButton = page.getByRole('button', { name: 'Add target' }) + const addButton = page.getByRole('button', { name: 'Add' }) const targets = page.getByRole('table', { name: 'Targets' }) const formModal = page.getByRole('dialog', { name: 'Add firewall rule' }) @@ -296,7 +296,7 @@ test('firewall rule form target validation', async ({ page }) => { test('firewall rule form host validation', async ({ page }) => { await page.goto('/projects/mock-project/vpcs/mock-vpc/firewall-rules-new') - const addButton = page.getByRole('button', { name: 'Add host filter' }) + const addButton = page.getByRole('button', { name: 'Add' }) const hosts = page.getByRole('table', { name: 'Host filters' }) const formModal = page.getByRole('dialog', { name: 'Add firewall rule' }) @@ -368,7 +368,7 @@ test('firewall rule form hosts table', async ({ page }) => { const hosts = page.getByRole('table', { name: 'Host filters' }) const hostFiltersVpcNameField = page.getByRole('combobox', { name: 'VPC name' }).nth(1) - const addButton = page.getByRole('button', { name: 'Add host filter' }) + const addButton = page.getByRole('button', { name: 'Add' }) // add hosts with overlapping names and types to test delete @@ -454,14 +454,14 @@ test('can update firewall rule', async ({ page }) => { await selectOption(page, 'Host type', 'VPC subnet') await page.getByRole('combobox', { name: 'Subnet name' }).fill('edit-filter-subnet') await page.getByText('edit-filter-subnet').click() - await page.getByRole('button', { name: 'Add host filter' }).click() + await page.getByRole('button', { name: 'Add' }).click() // new host is added to hosts table const hosts = page.getByRole('table', { name: 'Host filters' }) await expectRowVisible(hosts, { Type: 'subnet', Value: 'edit-filter-subnet' }) // submit the form - await page.getByRole('button', { name: 'Update rule' }).click() + await page.getByRole('button', { name: 'Update' }).click() // modal closes again await expect(modal).toBeHidden() @@ -554,7 +554,7 @@ test('name conflict error on create', async ({ page }) => { const error = page.getByText('Name taken').first() await expect(error).toBeHidden() - await page.getByRole('button', { name: 'Add rule' }).click() + await page.getByRole('button', { name: 'Add' }).click() await expect(error).toBeVisible() }) @@ -570,7 +570,7 @@ test('name conflict error on edit', async ({ page }) => { const error = page.getByRole('dialog').getByText('Name taken') await expect(error).toBeHidden() - await page.getByRole('button', { name: 'Update rule' }).click() + await page.getByRole('button', { name: 'Update' }).click() await expect(error).toBeVisible() // change name back @@ -578,14 +578,14 @@ test('name conflict error on edit', async ({ page }) => { // changing a value _without_ changing the name is allowed await page.getByRole('textbox', { name: 'Priority' }).fill('37') - await page.getByRole('button', { name: 'Update rule' }).click() + await page.getByRole('button', { name: 'Update' }).click() await expect(error).toBeHidden() await expectRowVisible(page.getByRole('table'), { Name: 'allow-icmp', Priority: '37' }) // changing the name to a non-conflicting name is allowed await page.getByRole('link', { name: 'allow-icmp' }).click() await nameField.fill('allow-icmp2') - await page.getByRole('button', { name: 'Update rule' }).click() + await page.getByRole('button', { name: 'Update' }).click() await expectRowVisible(page.getByRole('table'), { Name: 'allow-icmp2', Priority: '37' }) }) @@ -609,7 +609,7 @@ test('arbitrary values combobox', async ({ page }) => { await expectOptions(page, ['Custom: d']) await vpcInput.blur() - page.getByRole('button', { name: 'Add target' }).click() + page.getByRole('button', { name: 'Add' }).click() await expect(vpcInput).toHaveValue('') await vpcInput.focus() diff --git a/test/e2e/floating-ip-create.e2e.ts b/test/e2e/floating-ip-create.e2e.ts index 4bedc596ce..39d87a9342 100644 --- a/test/e2e/floating-ip-create.e2e.ts +++ b/test/e2e/floating-ip-create.e2e.ts @@ -42,7 +42,7 @@ test('can create a floating IP', async ({ page }) => { // choose pool and submit await label.click() await page.getByRole('option', { name: 'ip-pool-1' }).click() - await page.getByRole('button', { name: 'Create floating IP' }).click() + await page.getByRole('button', { name: 'Create' }).click() await expect(page).toHaveURL(floatingIpsPage) diff --git a/test/e2e/floating-ip-update.e2e.ts b/test/e2e/floating-ip-update.e2e.ts index 4ce1179c90..7300a02b95 100644 --- a/test/e2e/floating-ip-update.e2e.ts +++ b/test/e2e/floating-ip-update.e2e.ts @@ -23,7 +23,7 @@ const expectedFormElements = [ 'role=heading[name*="Edit floating IP"]', 'role=textbox[name="Name"]', 'role=textbox[name="Description"]', - 'role=button[name="Update floating IP"]', + 'role=button[name="Update"]', ] test('can update a floating IP', async ({ page }) => { @@ -33,7 +33,7 @@ test('can update a floating IP', async ({ page }) => { await page.fill('input[name=name]', updatedName) await page.getByRole('textbox', { name: 'Description' }).fill(updatedDescription) - await page.getByRole('button', { name: 'Update floating IP' }).click() + await page.getByRole('button', { name: 'Update' }).click() await expect(page).toHaveURL(floatingIpsPage) await expectRowVisible(page.getByRole('table'), { name: updatedName, @@ -49,7 +49,7 @@ test('can update *just* the floating IP description', async ({ page }) => { await expectVisible(page, expectedFormElements) await page.getByRole('textbox', { name: 'Description' }).fill(updatedDescription) - await page.getByRole('button', { name: 'Update floating IP' }).click() + await page.getByRole('button', { name: 'Update' }).click() await expect(page).toHaveURL(floatingIpsPage) await expectRowVisible(page.getByRole('table'), { name: originalName, diff --git a/test/e2e/image-upload.e2e.ts b/test/e2e/image-upload.e2e.ts index 36619b8d2b..a4b0cf9213 100644 --- a/test/e2e/image-upload.e2e.ts +++ b/test/e2e/image-upload.e2e.ts @@ -64,7 +64,7 @@ test.describe('Image upload', () => { await fillForm(page, 'new-image') - await page.getByRole('button', { name: 'Upload image' }).click() + await page.getByRole('button', { name: 'Upload' }).click() // now the modal pops open and the thing starts going await expectUploadProcess(page) @@ -84,12 +84,12 @@ test.describe('Image upload', () => { await fillForm(page, 'image-1') await expectNotVisible(page, ['text="Image name already exists"']) - await page.getByRole('button', { name: 'Upload image' }).click() + await page.getByRole('button', { name: 'Upload' }).click() await expectVisible(page, ['text="Image name already exists"']) // changing name and resubmitting removes error await page.fill('role=textbox[name="Name"]', 'image-5') - await page.getByRole('button', { name: 'Upload image' }).click() + await page.getByRole('button', { name: 'Upload' }).click() await expectNotVisible(page, ['text="Image name already exists"']) await expectUploadProcess(page) @@ -107,7 +107,7 @@ test.describe('Image upload', () => { await expectNotVisible(page, [nameRequired, fileRequired]) - await page.getByRole('button', { name: 'Upload image' }).click() + await page.getByRole('button', { name: 'Upload' }).click() await expectVisible(page, [nameRequired, fileRequired]) await page.fill('role=textbox[name="Name"]', 'new-image') @@ -118,7 +118,7 @@ test.describe('Image upload', () => { await expectNotVisible(page, [fileRequired]) await page.click('role=button[name="Clear file"]') - await page.getByRole('button', { name: 'Upload image' }).click() + await page.getByRole('button', { name: 'Upload' }).click() await expectVisible(page, [fileRequired]) }) @@ -172,7 +172,7 @@ test.describe('Image upload', () => { const progressModal = page.getByRole('dialog', { name: 'Image upload progress' }) - await page.getByRole('button', { name: 'Upload image' }).click() + await page.getByRole('button', { name: 'Upload' }).click() await expect(progressModal).toBeVisible() let confirmCount = 0 @@ -203,7 +203,7 @@ test.describe('Image upload', () => { await fillForm(page, 'new-image') - await page.getByRole('button', { name: 'Upload image' }).click() + await page.getByRole('button', { name: 'Upload' }).click() // wait to be in the middle of upload const uploadStep = page.getByTestId('upload-step: Upload image file') @@ -223,10 +223,10 @@ test.describe('Image upload', () => { await expect(page.getByRole('textbox', { name: 'Name' })).toBeVisible() // need to wait for submit button to come back because it's in a loading // state while the cleanup runs - await expect(page.getByRole('button', { name: 'Upload image' })).toBeVisible() + await expect(page.getByRole('button', { name: 'Upload' })).toBeVisible() // resubmit and it should work fine - await page.getByRole('button', { name: 'Upload image' }).click() + await page.getByRole('button', { name: 'Upload' }).click() await expectUploadProcess(page) }) @@ -244,7 +244,7 @@ test.describe('Image upload', () => { await fillForm(page, imageName) - await page.getByRole('button', { name: 'Upload image' }).click() + await page.getByRole('button', { name: 'Upload' }).click() const step = page.getByTestId(`upload-step: ${stepText}`) await expect(step).toHaveAttribute('data-status', 'error', { timeout: 15000 }) diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts index 45d7572848..83e017b58b 100644 --- a/test/e2e/instance-create.e2e.ts +++ b/test/e2e/instance-create.e2e.ts @@ -260,12 +260,12 @@ test('can’t create a disk with a name that collides with the boot disk name', await page.getByRole('button', { name: 'Create new disk' }).click() const dialog = page.getByRole('dialog') await dialog.getByRole('textbox', { name: 'name' }).fill('disk-11') - await dialog.getByRole('button', { name: 'Create disk' }).click() + await dialog.getByRole('button', { name: 'Create' }).click() // Expect to see an error message await expect(dialog.getByText('Name is already in use')).toBeVisible() // Change the disk name to something else await dialog.getByRole('textbox', { name: 'name' }).fill('disk-12') - await dialog.getByRole('button', { name: 'Create disk' }).click() + await dialog.getByRole('button', { name: 'Create' }).click() // The disk has been "created" (is in the list of Additional Disks) await expectVisible(page, ['text=disk-12']) // Create the instance @@ -571,12 +571,12 @@ test('create instance with additional disks', async ({ page }) => { await sizeField.fill('5') await expect(sizeField).toHaveValue('5') - await createForm.getByRole('button', { name: 'Create disk' }).click() + await createForm.getByRole('button', { name: 'Create' }).click() await expect(createForm.getByText('Name is already in use')).toBeVisible() // rename the disk to one that's allowed await createForm.getByRole('textbox', { name: 'Name', exact: true }).fill('new-disk-1') - await createForm.getByRole('button', { name: 'Create disk' }).click() + await createForm.getByRole('button', { name: 'Create' }).click() const disksTable = page.getByRole('table', { name: 'Disks' }) await expect(disksTable.getByText('disk-6')).toBeHidden() @@ -585,7 +585,7 @@ test('create instance with additional disks', async ({ page }) => { // now that name is taken too, so disk create disallows it await page.getByRole('button', { name: 'Create new disk' }).click() await createForm.getByRole('textbox', { name: 'Name', exact: true }).fill('new-disk-1') - await createForm.getByRole('button', { name: 'Create disk' }).click() + await createForm.getByRole('button', { name: 'Create' }).click() await expect(createForm.getByText('Name is already in use')).toBeVisible() await createForm.getByRole('button', { name: 'Cancel' }).click() diff --git a/test/e2e/instance-disks.e2e.ts b/test/e2e/instance-disks.e2e.ts index f6c59b063f..b6a2dbf03a 100644 --- a/test/e2e/instance-disks.e2e.ts +++ b/test/e2e/instance-disks.e2e.ts @@ -110,7 +110,7 @@ test('Create disk', async ({ page }) => { // New disk form const createForm = page.getByRole('dialog', { name: 'Create disk' }) await expect(createForm).toBeHidden() - await page.getByRole('button', { name: 'Create disk' }).click() + await page.getByRole('button', { name: 'Create' }).click() await expect(createForm).toBeVisible() await createForm.getByRole('textbox', { name: 'Name' }).fill('created-disk') @@ -120,7 +120,7 @@ test('Create disk', async ({ page }) => { await page.getByRole('button', { name: 'Source snapshot' }).click() await page.getByRole('option', { name: 'snapshot-heavy' }).click() - await createForm.getByRole('button', { name: 'Create disk' }).click() + await createForm.getByRole('button', { name: 'Create' }).click() const otherDisksTable = page.getByRole('table', { name: 'Additional disks' }) await expectRowVisible(otherDisksTable, { Disk: 'created-disk', size: '20 GiB' }) diff --git a/test/e2e/ip-pools.e2e.ts b/test/e2e/ip-pools.e2e.ts index 70db5b15fb..cc30821fac 100644 --- a/test/e2e/ip-pools.e2e.ts +++ b/test/e2e/ip-pools.e2e.ts @@ -164,7 +164,7 @@ test('IP pool create', async ({ page }) => { await page.getByRole('textbox', { name: 'Name' }).fill('another-pool') await page.getByRole('textbox', { name: 'Description' }).fill('whatever') - await page.getByRole('button', { name: 'Create IP pool' }).click() + await page.getByRole('button', { name: 'Create' }).click() await expect(modal).toBeHidden() await expectRowVisible(page.getByRole('table'), { @@ -183,7 +183,7 @@ test('IP pool edit', async ({ page }) => { await page.getByRole('textbox', { name: 'Name' }).fill('updated-pool') await page.getByRole('textbox', { name: 'Description' }).fill('an updated description') - await page.getByRole('button', { name: 'Update IP pool' }).click() + await page.getByRole('button', { name: 'Update' }).click() await expect(modal).toBeHidden() await expect(page).toHaveURL('/system/networking/ip-pools/updated-pool') diff --git a/test/e2e/networking.e2e.ts b/test/e2e/networking.e2e.ts index b13bf99b52..3e46c77000 100644 --- a/test/e2e/networking.e2e.ts +++ b/test/e2e/networking.e2e.ts @@ -63,10 +63,10 @@ test('Create and edit VPC', async ({ page }) => { 'role=textbox[name="Name"]', 'role=textbox[name="Description"]', 'role=textbox[name="DNS name"]', - 'role=button[name="Update VPC"]', + 'role=button[name="Update"]', ]) await page.fill('role=textbox[name="Name"]', 'new-vpc') - await page.click('role=button[name="Update VPC"]') + await page.click('role=button[name="Update"]') // Close toast, it holds up the test for some reason await closeToast(page) @@ -94,7 +94,7 @@ test('Create and edit subnet', async ({ page }) => { ]) await page.fill('role=textbox[name="Name"]', 'new-subnet') await page.fill('role=textbox[name="IPv4 block"]', '10.1.1.1/24') - await page.click('role=button[name="Create subnet"]') + await page.click('role=button[name="Create"]') // Edit subnet await expectVisible(page, ['role=cell[name="new-subnet"]']) @@ -106,11 +106,11 @@ test('Create and edit subnet', async ({ page }) => { await expectVisible(page, [ 'role=heading[name="Edit subnet"]', - 'role=button[name="Update subnet"]', + 'role=button[name="Update"]', ]) await page.fill('role=textbox[name="Name"]', 'edited-subnet') await page.fill('role=textbox[name="Description"]', 'behold') - await page.click('role=button[name="Update subnet"]') + await page.click('role=button[name="Update"]') await expectNotVisible(page, ['role=cell[name="new-subnet"]']) await expectVisible(page, ['role=cell[name="edited-subnet"]']) diff --git a/test/e2e/silos.e2e.ts b/test/e2e/silos.e2e.ts index e0b8dd1dc8..866cf87431 100644 --- a/test/e2e/silos.e2e.ts +++ b/test/e2e/silos.e2e.ts @@ -359,7 +359,7 @@ test('form scrolls to name field on already exists error', async ({ page }) => { await addTlsCert(page) - await page.getByRole('button', { name: 'Create silo' }).click() + await page.getByRole('button', { name: 'Create' }).click() await expect(nameField).toBeInViewport() await expect(page.getByText('name already exists').nth(0)).toBeVisible() @@ -387,8 +387,8 @@ test('Quotas tab', async ({ page }) => { }) const sideModal = page.getByRole('dialog', { name: 'Edit quotas' }) - const edit = page.getByRole('button', { name: 'Edit quotas' }) - const submit = sideModal.getByRole('button', { name: 'Update quotas' }) + const edit = page.getByRole('button', { name: 'Edit' }) + const submit = sideModal.getByRole('button', { name: 'Update' }) await edit.click() await expect(sideModal).toBeVisible()