-
Notifications
You must be signed in to change notification settings - Fork 11
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.
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
Extract common fields and refactor VPC router route forms #2436
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Looking into an issue with editing existing routes. |
This uses a useEffect where we had been using an onChange on the form field. We could define the onChange in the |
Update: By passing the entire |
Nice, passing form is a good trick. You could conceivably go all the way and share the entire |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!
placeholder="Select a target type" | ||
required | ||
onChange={(value) => { | ||
form.setValue('target.value', value === 'internet_gateway' ? 'outbound' : '') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see this is a change from the previous logic. Good one, it makes way more sense to always clear it. There is one minor issue but it's tolerable: "changing" the type to the same value it already is fires onChange
and clears the value (I tried it). The brute force fix would be to check if the new type is different from the current type before firing setValue
. I'm also fine without that. I checked the headless listbox docs and it doesn't seem like there's an obvious way to tell it not to fire onChange
unless the value has actually changed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I experimented with a few iterations with the brute force "pass a conditional prop through with the frozen originalTargetType and compare it to the form's targetType at the onChange firing time", but things got fairly squirrelly. For now, I'll get this folded in, as I think clearing the value is better as the default action. Absolutely good to revisit it down the road if we find UX friction on the field being problematic.
oxidecomputer/console@7712765...ce242e7 * [ce242e77](oxidecomputer/console@ce242e77) bump API to latest, only doc comment changes * [3fda42e3](oxidecomputer/console@3fda42e3) oxidecomputer/console#2446 * [a5c23616](oxidecomputer/console@a5c23616) oxidecomputer/console#2436 * [ca272336](oxidecomputer/console@ca272336) oxidecomputer/console#2445 * [22582e3c](oxidecomputer/console@22582e3c) oxidecomputer/console#2444 * [f9f0d157](oxidecomputer/console@f9f0d157) oxidecomputer/console#2443 * [be84c196](oxidecomputer/console@be84c196) oxidecomputer/console#2441 * [53e1da78](oxidecomputer/console@53e1da78) chore: just skip the flaky test in safari * [3a66ca77](oxidecomputer/console@3a66ca77) bump a couple of dev deps I missed * [ac67a4cf](oxidecomputer/console@ac67a4cf) bump omicron version to latest * [63c604b4](oxidecomputer/console@63c604b4) oxidecomputer/console#2440 * [b4e2626b](oxidecomputer/console@b4e2626b) oxidecomputer/console#2439 * [cdecf4e6](oxidecomputer/console@cdecf4e6) oxidecomputer/console#2435 * [01d71c07](oxidecomputer/console@01d71c07) oxidecomputer/console#2432 * [353b98d6](oxidecomputer/console@353b98d6) oxidecomputer/console#2404 * [49d6d7d8](oxidecomputer/console@49d6d7d8) oxidecomputer/console#2433 * [9c532ce9](oxidecomputer/console@9c532ce9) chore: fix react duplicate key warning on vpcs page * [1892fc14](oxidecomputer/console@1892fc14) npm audit fix, bump msw * [efc43be0](oxidecomputer/console@efc43be0) oxidecomputer/console#2422 * [f2cc79ee](oxidecomputer/console@f2cc79ee) oxidecomputer/console#2418 * [a0c29a53](oxidecomputer/console@a0c29a53) oxidecomputer/console#2427 * [a8fcdab9](oxidecomputer/console@a8fcdab9) oxidecomputer/console#2426 * [8ecb36ad](oxidecomputer/console@8ecb36ad) oxidecomputer/console#2425 * [93bcef9d](oxidecomputer/console@93bcef9d) oxidecomputer/console#2296 * [af42e704](oxidecomputer/console@af42e704) oxidecomputer/console#2421 * [4126f000](oxidecomputer/console@4126f000) oxidecomputer/console#2420 * [880cb8c4](oxidecomputer/console@880cb8c4) oxidecomputer/console#2415 * [c2909e7a](oxidecomputer/console@c2909e7a) oxidecomputer/console#2414 * [12fc862b](oxidecomputer/console@12fc862b) oxidecomputer/console#2412 * [169edeed](oxidecomputer/console@169edeed) remove unreachable sign in button in user dropdown * [f042ad4b](oxidecomputer/console@f042ad4b) oxidecomputer/console#2409 * [c648c44c](oxidecomputer/console@c648c44c) oxidecomputer/console#2408 * [e8175d30](oxidecomputer/console@e8175d30) oxidecomputer/console#2405 * [bdb55b86](oxidecomputer/console@bdb55b86) chore: bump ts client generator version in api-diff * [681355cd](oxidecomputer/console@681355cd) oxidecomputer/console#2396 * [286b8d28](oxidecomputer/console@286b8d28) oxidecomputer/console#2401 * [b2373359](oxidecomputer/console@b2373359) oxidecomputer/console#2400 * [267b9359](oxidecomputer/console@267b9359) oxidecomputer/console#2399
oxidecomputer/console@7712765...ce242e7 * [ce242e77](oxidecomputer/console@ce242e77) bump API to latest, only doc comment changes * [3fda42e3](oxidecomputer/console@3fda42e3) oxidecomputer/console#2446 * [a5c23616](oxidecomputer/console@a5c23616) oxidecomputer/console#2436 * [ca272336](oxidecomputer/console@ca272336) oxidecomputer/console#2445 * [22582e3c](oxidecomputer/console@22582e3c) oxidecomputer/console#2444 * [f9f0d157](oxidecomputer/console@f9f0d157) oxidecomputer/console#2443 * [be84c196](oxidecomputer/console@be84c196) oxidecomputer/console#2441 * [53e1da78](oxidecomputer/console@53e1da78) chore: just skip the flaky test in safari * [3a66ca77](oxidecomputer/console@3a66ca77) bump a couple of dev deps I missed * [ac67a4cf](oxidecomputer/console@ac67a4cf) bump omicron version to latest * [63c604b4](oxidecomputer/console@63c604b4) oxidecomputer/console#2440 * [b4e2626b](oxidecomputer/console@b4e2626b) oxidecomputer/console#2439 * [cdecf4e6](oxidecomputer/console@cdecf4e6) oxidecomputer/console#2435 * [01d71c07](oxidecomputer/console@01d71c07) oxidecomputer/console#2432 * [353b98d6](oxidecomputer/console@353b98d6) oxidecomputer/console#2404 * [49d6d7d8](oxidecomputer/console@49d6d7d8) oxidecomputer/console#2433 * [9c532ce9](oxidecomputer/console@9c532ce9) chore: fix react duplicate key warning on vpcs page * [1892fc14](oxidecomputer/console@1892fc14) npm audit fix, bump msw * [efc43be0](oxidecomputer/console@efc43be0) oxidecomputer/console#2422 * [f2cc79ee](oxidecomputer/console@f2cc79ee) oxidecomputer/console#2418 * [a0c29a53](oxidecomputer/console@a0c29a53) oxidecomputer/console#2427 * [a8fcdab9](oxidecomputer/console@a8fcdab9) oxidecomputer/console#2426 * [8ecb36ad](oxidecomputer/console@8ecb36ad) oxidecomputer/console#2425 * [93bcef9d](oxidecomputer/console@93bcef9d) oxidecomputer/console#2296 * [af42e704](oxidecomputer/console@af42e704) oxidecomputer/console#2421 * [4126f000](oxidecomputer/console@4126f000) oxidecomputer/console#2420 * [880cb8c4](oxidecomputer/console@880cb8c4) oxidecomputer/console#2415 * [c2909e7a](oxidecomputer/console@c2909e7a) oxidecomputer/console#2414 * [12fc862b](oxidecomputer/console@12fc862b) oxidecomputer/console#2412 * [169edeed](oxidecomputer/console@169edeed) remove unreachable sign in button in user dropdown * [f042ad4b](oxidecomputer/console@f042ad4b) oxidecomputer/console#2409 * [c648c44c](oxidecomputer/console@c648c44c) oxidecomputer/console#2408 * [e8175d30](oxidecomputer/console@e8175d30) oxidecomputer/console#2405 * [bdb55b86](oxidecomputer/console@bdb55b86) chore: bump ts client generator version in api-diff * [681355cd](oxidecomputer/console@681355cd) oxidecomputer/console#2396 * [286b8d28](oxidecomputer/console@286b8d28) oxidecomputer/console#2401 * [b2373359](oxidecomputer/console@b2373359) oxidecomputer/console#2400 * [267b9359](oxidecomputer/console@267b9359) oxidecomputer/console#2399
There was a lot of duplicated code in the VPC router route create/edit forms. I started on #2388, but realized it'd be good to clean the forms up a little first, so this is the result of that refactoring. Open to other refinements, if anything stands out.