Skip to content
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

Merged
merged 8 commits into from
Sep 16, 2024

Conversation

charliepark
Copy link
Contributor

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.

Copy link

vercel bot commented Sep 12, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
console ✅ Ready (Inspect) Visit Preview Sep 16, 2024 4:01pm

@charliepark
Copy link
Contributor Author

Looking into an issue with editing existing routes.

@charliepark
Copy link
Contributor Author

This uses a useEffect where we had been using an onChange on the form field. We could define the onChange in the create and edit callsites and pass it through to the common fields, though it seemed cleaner to pass fewer props.

@charliepark charliepark marked this pull request as ready for review September 12, 2024 01:28
@charliepark
Copy link
Contributor Author

This uses a useEffect where we had been using an onChange on the form field. We could define the onChange in the create and edit callsites and pass it through to the common fields, though it seemed cleaner to pass fewer props.

Update: By passing the entire form in to the common fields, we can use form.setValue directly in the common component within the onChange, and so don't need to use a useEffect, and don't need to declare anything (useEffect or onChange) in the callsites.

@david-crespo
Copy link
Collaborator

Nice, passing form is a good trick. You could conceivably go all the way and share the entire <SideModalForm>, and just pass in the props that differ, but that would require a lot more props, so it could be harder to understand.

Copy link
Collaborator

@david-crespo david-crespo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

app/forms/vpc-router-route-create.tsx Outdated Show resolved Hide resolved
placeholder="Select a target type"
required
onChange={(value) => {
form.setValue('target.value', value === 'internet_gateway' ? 'outbound' : '')
Copy link
Collaborator

@david-crespo david-crespo Sep 14, 2024

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.

Copy link
Contributor Author

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.

@charliepark charliepark merged commit a5c2361 into main Sep 16, 2024
8 checks passed
@charliepark charliepark deleted the refactor-vpc-router-route-form branch September 16, 2024 16:47
david-crespo added a commit to oxidecomputer/omicron that referenced this pull request Sep 16, 2024
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
david-crespo added a commit to oxidecomputer/omicron that referenced this pull request Sep 16, 2024
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants