Add external IP selection to instance creation form

[charliepark]

Fixes #1097
Fixes #1098

Currently, when the user creates an instance, we just create an ephemeral IP and attach it to the instance. With this PR, we give them a checkbox (default = checked) to let them opt out/in of the ephemeral IP creation step, and we give them a dropdown that lets them pick which IP pool to draw the ephemeral IP from.

We will also add the option to select a floating IP (#1099), but that'll be separate from this PR.

I'm not sure about the layout / copy I have in this PR, so would welcome design feedback from @paryhin and @benjaminleonard. @david-crespo and I were able to simplify the designs in Figma a bit (we can consolidate some of the options there), but I think Eugene will have good suggestions on what I have here.

[vercel]

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

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	May 8, 2024 6:36pm

[charliepark]

Ben had some suggestions, which I incorporated in the recent PRs. Here's the latest …

Main changes from Ben …

• added microcopy and link to docs
• made select/option dropdown conditionally render, based on whether box is checked or not (parallel with radio group above, with selective rendering of "network interface" second-level options

I know Eugene has a few thoughts as well.

[paryhin]

1. We should keep the title for the IP pool input, as currently it is not clear what you are selecting.
2. We should show "default" pool badge in the input in its rest state.
3. If we want to have this type of long description with links, we may consider the following behavior:
   

[charliepark]

I'm not against having some kind of <details> component to reveal the text content, but it might need a different visual treatment, if all of our other info icons have a tooltip?

[charliepark]

The latest:

[david-crespo]

Looking good. How about “Allocate” instead of “Automatically assign”? Automatic is redundant, everything the form does is automatic. And “assign” isn’t really a term we use, it would be attach, though I could live with assign. “Allocate and attach” would be most precise but is kind of long.

[david-crespo]

I agree with Eugene that the fact that the listbox is for picking a pool should be indicated somehow. If the name of the pool wasn’t “ip-pool-1” the problem would be more obvious.

[charliepark]

Ah, right; I'd meant to get that in there.

[charliepark]

I can see what Eugene was getting at with the microcopy being on the screen. With the various titles and labels, it was getting crowded. I've put it into a tooltip for now, though that loses the link to find out more.

[paryhin]

Yeah, switching from a tooltip is probably a separate PR, we can keep it as it is for now. If we want the link, we may put it in the contextual docs popover. Everything else looks good to me.

[david-crespo]

I think it needs more space and more hierarchy to the text. Below shows a sort of maximalist approach: extra 1rem under heading, checkbox, and listbox, extra 2.5rem above heading, heading one size bigger, checkbox label text-secondary. The size bump is a problem because it doesn't match the other ones. It makes me wonder if all the input labels in forms should be one size up, or at least whether we should have some type pattern that makes it easier to imply grouping.

[david-crespo]

Looks great. Happy to have design follow up on the spacing and hierarchy stuff.