change: [M3-9881] - Improve behavior of VLANSelect component when creating a new VLAN

[coliu-akamai]

Description 📝

Updates UX for VLAN Select to be more user friendly

Changes 🔄

• clears VlanSelect textfield if no vlan explicitly selected to make it clear that you must select a VLAN
• Adds region filtering for VLAN Select in Add Interface form
• Can change VLAN value via typing if already existing VLAN gets selected

Preview 📷

no visual changes Main behavior change:

Before	After

How to test 🧪

have:

• Linode Interfaces flag + account capability
• two vlans in different regions

Verification steps

• Confirm no regressions/changes in behavior besides these in VLANSelect on Create (both old and new UIs) and AddInterfaceForm
• Confirm VLANSelect textfield clears if no vlan option or 'create new vlan option' explicitly selected
• confirm VLANSelect in AddInterfaceForm only filters for the vlans in given region
• Confirm that if you've already selected a VLAN, and you use the keyboard to try to change your option (ex: backspacing a bunch), the select updates accordingly

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review ❔ Our contribution guidelines 🤏 Splitting feature into small PRs ➕ Adding a changeset 🧪 Providing/improving test coverage 🔐 Removing all sensitive information from the code and PR description 🚩 Using a feature flag to protect the release 👣 Providing comprehensive reproduction steps 📑 Providing or updating our documentation 🕛 Scheduling a pair reviewing session 📱 Providing mobile support ♿ Providing accessibility support

• [ ] I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• [ ] All unit tests are passing
• [ ] TypeScript compilation succeeded without errors
• [ ] Code passes all linting rules

[bnussman-akamai]

https://github.com/user-attachments/assets/6ae02ba4-26fa-465e-8be5-2e4eacfbecf9

I think users want the new VLAN to be selected onBlur if the only option is to create it. I think that's what's been tripping them up.

I don't mind the current behavior personally, but I think users get confused when they type in a VLAN name but don't select the "Create" option in the dropdown. I guess they expect the option to be selected for them

[bnussman-akamai]

Seeing a small difference between this PR and prod.

Prod seems to not filter options when one is selected but this PR does

Prod	This PR

[linode-gh-bot]

Cloud Manager UI test results

:small_red_triangle: 2 failing tests on test run #9 ↗︎

:x: Failing	:white_check_mark: Passing	:arrow_right_hook: Skipped	:clock1: Duration
2 Failing	663 Passing	5 Skipped	117m 57s

Details

Failing Tests
	Spec	Test
:x:	object-storage-objects-multicluster.spec.ts	Cloud Manager Cypress Tests→Object Storage Multicluster objects » Object Storage Multicluster objects
:x:	access-key.e2e.spec.ts	Cloud Manager Cypress Tests→object storage access key end-to-end tests » object storage access key end-to-end tests

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/objectStorageMulticluster/object-storage-objects-multicluster.spec.ts,cypress/e2e/core/objectStorage/access-key.e2e.spec.ts"

[coliu-akamai]

@bnussman-akamai @hana-akamai think what I pushed up fixed filtering + switched to only keeping value of what's typed inside the select!

unfortunately I had to remove the changes that addressed the issues here to fix filtering - will continue looking into how to fix typing in the select once we've chosen a value without messing up filtering, but not yet sure if there's a solution to keep both features

current behavior:

[hana-akamai]

Should the onBlur / clicking Create in the VLAN dropdown send a request to create the VLAN without having to wait until the user clicks Create Linode?

[coliu-akamai]

hmm I feel like I wouldn't expect clicking an option in a select to have different behavior than the other options / behavior besides just selecting. having a select with two different functionalities might be confusing

However since we provide the option to create a VPC/firewall within the Create Page (albeit as a separate action/button), matching that behavior here could be nice. (In the Add Interface drawer though, we don't provide the option to create a new VPC)

@bnussman-akamai what are your thoughts?

Should we get UX input?

[bnussman-akamai]

There is no endpoint for creating a VLANs so I don't think that is possible @hana-akamai

From my understanding, VLANs have to be created by defining an interface.