Rearrange firewall rules form and add help text

[david-crespo]

The diff is a nightmare compared to the amount of changes because it's a lot of shuffling and fiddly margin stuff. I'd focus on checking the rendered result.

https://console-git-firewall-rules-help-oxidecomputer.vercel.app/projects/mock-project/vpcs/mock-vpc



[vercel]

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

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Apr 24, 2024 5:47pm

[david-crespo]

I need to add a prop that lets me tweak the styling on this label to match the others. Or just use the inner components directly, but that’s fiddly too.

[benjaminleonard]

Some of those notes could possible be moved to the help text / description directly on the input.

Whilst you're in here, some placeholder values would be wonderful.

[david-crespo]

I don't think I can squeeze the help into individual fields because it's really about the whole thing. Placeholders are also kind of tough because they depend on which type you have picked in the listbox.

[charliepark]

This might be better for a different PR, but since we're making this sparkle …

would it be possible to disable the overall form's submit button while the input fields (as here) have un-saved content?

As it is, it's easy to not realize that you haven't actually "saved" the sub-form, and it won't make it into the final firewall rule.

I think this has come up in conversation before, but I'm not sure if we've ever discussed it in an issue. If not relevant for this PR, no worries, and I can create a new issue. If it fits, though, great.

[david-crespo]

That's a cool idea. I'll see if there's a way to make it work.

[david-crespo]

What you might be thinking of that came up before was making Enter submit the mini form when you're in one of those fields rather than submitting the whole form, we fixed that.

[david-crespo]

I don't think I can make it make sense to block leftover stuff in the input. You wouldn't want to just disable submit, you'd want it to be a validation error you can go find, but you'd only want it to be triggered by submit. We'd have to get pretty elaborate and I don't think it's worth it.

I added validation for port range because it's easy, but for the target and host fields, it's a lot more complicated because the way you validate the value input depends on which type is selected in the listbox. That's captured in #2187.

[david-crespo]

I'm going to merge this as-is and we can redo the text boxes in a different style as a followup per design feedback.