Expand combobox flexibility

[charliepark]

Fixes #2065

This is an evolution of the combobox.

Currently, a combobox provides a dropdown list of items with a text input that allows the user to filter the items in the list.

If the user enters in a non-matching string, they just get the message that there isn't a match.

There are times, though, where the user needs to be able to enter in arbitrary text into the combobox, with the intent being "if this matches item(s) in the list, show me the matching item(s), but if not, give me the option to create a new item. We see this, for example, in the VPC Firewall Rules form, where the user might be selecting from a set of existing VPCs (or subnets, or instances), or might need to create a reference to a not-yet-existing VPC (etc.).

Here, for example, we see that mock- matches an option …

… but when we extend the search string a bit and it doesn't match any options, we see that it doesn't show the "no items match" text, and instead acts like a normal text input box …

… and the user can then add that new VPC to the form:

This behavioral change (enable addition of new option) is handled by the allowArbitraryValues prop.

This change in Combobox behavior is then applied in this PR to the firewall rules form. In a previous PR we pulled the common code from the firewall-rules-create and firewall-rules-edit forms into a new file, firewall-rules-common. This PR updates that code, moving from the existing text fields (where the user would have to know the instance name, or VPC name, or VPC subnet name), so they can select from a dropdown. This usecase is also where we see the need for the user to add a new item that isn't currently in the list of dropdown items (via that prop mentioned above, allowArbitraryValues).

[vercel]

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

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Sep 9, 2024 9:44pm

[charliepark]

This is coming along, but man it feels like there's a lot of code duplication in this main file.

Also, we'll eventually need to do something similar re: comboboxes in the router routes forms, and possibly other places. Would love to come up with an extracted component that we could just drop in place.

[david-crespo]

You didn't introduce this here, so we can fix it later: #2417

[david-crespo]

LET'S JAM

[david-crespo]

Is this right? Seems like the mismatch between disabled and isDisabled may require this to be passed.

[david-crespo]

Ah, I think I see what you did: you changed the prop on ComboboxField to isDisabled and let it get passed through as part of the props spread.

045c58a

[charliepark]

Yeah, I realized that there was an existing isDisabled prop and it made sense to just use that.