Networking tab enhancements

[charliepark]

Fixes #1965

This PR adds a table of External IPs to the instance's networking tab, and gives the user the option to attach (new) or detach (existing) external IPs.

I believe the PR is basically ready to go, with two caveats.

The smaller one is that while the e2e test works, part of it is a little awkward right now. I tried variations of
await dialog.getByRole('option', { name: 'rootbeer-float' }).click(), replacing option with button, etc., but couldn't seem to get the locator to match correctly. I have a keyboard-based hack that's working, but I'd rather have the proper Playwright locator working.

Another issue is that I'm not sure what we want the actions column for the Ephemeral IP rows to include. Detaching ephemeral IPs? Something else? I've included a placeholder "Copy IP address" for now so there's something in the dropdown, but I suspect we'll want to do something else.

[vercel]

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

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

[benjaminleonard]

Detach and copy IP address sounds good to me for ephemeral IPs.

[david-crespo]

@benjaminleonard @paryhin I think the table titles don't stand out enough as text-mono-sm and look too similar to the tab button text. Unfortunately sans-semi-lg stands out a bit too much, but it also doesn't look good in text-secondary or md size.

[paryhin]

@david-crespo This is what I have in design, I've been using sans-reg-lg:

https://www.figma.com/file/zIBsgP7gAkhapyNvVOqsn6/Floating-IPs?type=design&node-id=125%3A20767&mode=design&t=k0m3pa7XAojobIQJ-1

One issue is that we are using text-mono-sm everywhere else, so if we introduce a new table title style we'll need to do it in other places too.

[david-crespo]

I don't mind changing them all! There aren't that many that have their own titles.

[david-crespo]

I think it has to be text-secondary still, unfortunately.

Otherwise it's the only bright white on the page and it sticks out.

[david-crespo]

I'm starting to think that text-secondary could be a little brighter if it's actually our main text color.

[paryhin]

The secondary text color has to differ from the primary, to play well together and have enough contrast between them. Table headlines that I currently see in the preview (sans-lg, secondary) look good to me. I would only tweak spacing to bring them closer to the tables, as currently they are slightly detached.

[david-crespo]

I think it might be nice to say the word "floating" on floating IPs. I don't see why only Ephemeral deserves a badge. I see the pool column in the design — I wish we could do that, but the API doesn't tell us the pool right now. I'll have to look and see how hard that would be.

[david-crespo]

@benjaminleonard and I decided to move kind into its own column and label both kinds.

[paryhin]

@david-crespo Not sure why you would do that as only 1 IP can be ephemeral, and all others are floating IPs

[paryhin]

Also, only floating IPs can have names, it feels redundant to have a separate "kind" column in this case.

[david-crespo]

I think we have to say the word "floating" somewhere. It doesn't have to be in a separate column. Since ephemeral IPs will never have a name or description, I almost want to move them into their own table. Then we could solve this in the table titles.

[paryhin]

As we can have only one Ephemeral IP, a separate table would be redundant. If we want to mention floating IPs, we can rename the Name column into Floating IP Name: