Skip to content

Remove IP address field from floating IP create form #2146

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

Merged
david-crespo merged 1 commit into from
Apr 14, 2024
Merged

Remove IP address field from floating IP create form #2146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 2 additions & 23 deletions app/forms/floating-ip-create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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) {
Expand All @@ -50,11 +47,10 @@ const toListboxItem = (p: SiloIpPool) => {
}
}

const defaultValues: SetRequired<FloatingIpCreate, 'ip'> = {
const defaultValues: Omit<FloatingIpCreate, 'ip'> = {
name: '',
description: '',
pool: undefined,
ip: '',
}

export function CreateFloatingIpSideModalForm() {
Expand All @@ -78,7 +74,6 @@ export function CreateFloatingIpSideModalForm() {
})

const form = useForm({ defaultValues })
const isPoolSelected = !!form.watch('pool')

const [openItems, setOpenItems] = useState<string[]>([])

Expand All @@ -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}
>
Expand Down Expand Up @@ -124,16 +113,6 @@ export function CreateFloatingIpSideModalForm() {
control={form.control}
placeholder="Select pool"
/>
<TextField
name="ip"
label="IP address"
control={form.control}
disabled={!isPoolSelected}
transform={(v) => v.replace(/\s/g, '')}
validate={(ip) =>
ip && !validateIp(ip).valid ? 'Not a valid IP address' : true
}
/>
</AccordionItem>
</Accordion.Root>
</SideModalForm>
Expand Down
24 changes: 4 additions & 20 deletions test/e2e/floating-ip-create.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -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)
Expand Down