diff --git a/app/forms/floating-ip-create.tsx b/app/forms/floating-ip-create.tsx index 017c9ec096..3682cc1803 100644 --- a/app/forms/floating-ip-create.tsx +++ b/app/forms/floating-ip-create.tsx @@ -8,7 +8,6 @@ import * as Accordion from '@radix-ui/react-accordion' import { useState } from 'react' import { useNavigate } from 'react-router-dom' -import type { SetRequired } from 'type-fest' import { useApiMutation, @@ -22,14 +21,12 @@ import { AccordionItem } from '~/components/AccordionItem' import { DescriptionField } from '~/components/form/fields/DescriptionField' import { ListboxField } from '~/components/form/fields/ListboxField' import { NameField } from '~/components/form/fields/NameField' -import { TextField } from '~/components/form/fields/TextField' import { SideModalForm } from '~/components/form/SideModalForm' import { useForm, useProjectSelector } from '~/hooks' import { addToast } from '~/stores/toast' import { Badge } from '~/ui/lib/Badge' import { Message } from '~/ui/lib/Message' import { pb } from '~/util/path-builder' -import { validateIp } from '~/util/str' const toListboxItem = (p: SiloIpPool) => { if (!p.isDefault) { @@ -50,11 +47,10 @@ const toListboxItem = (p: SiloIpPool) => { } } -const defaultValues: SetRequired = { +const defaultValues: Omit = { name: '', description: '', pool: undefined, - ip: '', } export function CreateFloatingIpSideModalForm() { @@ -78,7 +74,6 @@ export function CreateFloatingIpSideModalForm() { }) const form = useForm({ defaultValues }) - const isPoolSelected = !!form.watch('pool') const [openItems, setOpenItems] = useState([]) @@ -88,13 +83,7 @@ export function CreateFloatingIpSideModalForm() { formType="create" resourceName="floating IP" onDismiss={() => navigate(pb.floatingIps(projectSelector))} - onSubmit={({ ip, ...rest }) => { - createFloatingIp.mutate({ - query: projectSelector, - // if address is '', evaluate as false and send as undefined - body: { ip: ip || undefined, ...rest }, - }) - }} + onSubmit={(body) => createFloatingIp.mutate({ query: projectSelector, body })} loading={createFloatingIp.isPending} submitError={createFloatingIp.error} > @@ -124,16 +113,6 @@ export function CreateFloatingIpSideModalForm() { control={form.control} placeholder="Select pool" /> - v.replace(/\s/g, '')} - validate={(ip) => - ip && !validateIp(ip).valid ? 'Not a valid IP address' : true - } - /> diff --git a/test/e2e/floating-ip-create.e2e.ts b/test/e2e/floating-ip-create.e2e.ts index 47f579a8a0..d8dd2c9ea7 100644 --- a/test/e2e/floating-ip-create.e2e.ts +++ b/test/e2e/floating-ip-create.e2e.ts @@ -6,14 +6,7 @@ * Copyright Oxide Computer Company */ -import { - clickRowAction, - expect, - expectNotVisible, - expectRowVisible, - expectVisible, - test, -} from './utils' +import { clickRowAction, expect, expectRowVisible, expectVisible, test } from './utils' const floatingIpsPage = '/projects/mock-project/floating-ips' @@ -36,28 +29,19 @@ test('can create a floating IP', async ({ page }) => { .fill('A description for this Floating IP') const poolListbox = page.getByRole('button', { name: 'IP pool' }) - const ipTextbox = page.getByRole('textbox', { name: 'IP address' }) // accordion content should be hidden - await expectNotVisible(page, [ipTextbox]) + await expect(poolListbox).toBeHidden() // open accordion await page.getByRole('button', { name: 'Advanced' }).click() // accordion content should be visible - await expectVisible(page, [poolListbox, ipTextbox]) + await expect(poolListbox).toBeVisible() - // test that the IP validation works + // choose pool and submit await poolListbox.click() await page.getByRole('option', { name: 'ip-pool-1' }).click() - await ipTextbox.fill('256.256.256.256') - await page.getByRole('button', { name: 'Create floating IP' }).click() - await expect(page.getByText('Not a valid IP address').first()).toBeVisible() - - // correct IP and submit - await ipTextbox.clear() - await ipTextbox.fill('12.34.56.78') - await page.getByRole('button', { name: 'Create floating IP' }).click() await expect(page).toHaveURL(floatingIpsPage)