fix: [UIE-10140] - DBaaS - Update Autocomplete fields in VPC, Add, and Edit Connection Pool to use autoHighlight

[smans-akamai]

Description 📝

This pull request updates the Autocomplete fields in DBaaS for VPC, Add, and Edit Connection Pool to use autoHighlight.

Changes 🔄

List any change(s) relevant to the reviewer.

• Database Create and Database Manage Networking drawer VPC and Subnet Autocomplete fields now use autoHighlight feature.
• Add and Edit Connection Pool Drawer Autocomplete fields now use autoHighlight feature.

Scope 🚢

Upon production release, changes in this PR will be visible to:

• All customers
• Some customers (e.g. in Beta or Limited Availability)
• No customers / Not applicable

Target release date 🗓️

Next release

Preview 📷

Note: The before and after videos below are to show the auto highlight behavior being applied to the Database Create VPC and Subnet fields. The same behavior has been applied to the Database Manage Networking drawer and Add and Edit Connection Pool Drawer Autocomplete fields.

Before	After
BEFORE-dbaas-autohighlight.mov	AFTER-dbaas-autohighlight.mov

How to test 🧪

Prerequisites

(How to setup test environment)

• Have access to the Databases tab
• Turn on the legacy MSW and use mock data

Note: This issue is present in the other workflows mentioned above, but the reproduction and verifications steps listed below are just for the Database Create workflow to show the issue and the fix being applied with the autoHighlight behavior for the Autocomplete fields.

Reproduction steps

(How to reproduce the issue, if applicable)

• Using the develop branch in your local environment with mock data enabled, access the Databases workflow and Select the Create Database Cluster button to navigate to the Database Create view.
• Select an available region and scroll down to the Assign a VPC section
• Click into the Select a VPC Autocomplete field and confirm that the first option in the dropdown list isn't highlighted
• Confirm that pressing the Enter key, does not select a VPC option
• Select a VPC manually, then once the VPC field populates, follow the same steps for the Subnet field that appears
• Confirm that selecting the enter key, does not select the Subnet option.

Verification steps

(How to verify changes)

• Using the branch in this pull request with mock data enabled in your local environment, access the Databases workflow and Select the Create Database Cluster button to navigate to the Database Create view.
• Select an available region and scroll down to the Assign a VPC section
• Click into the Select a VPC Autocomplete field and confirm that the first option in the dropdown list is highlighted
• Confirm that pressing the Enter key, automatically selects the highlighted VPC option
• After the VPC field populates, follow the same steps for the Subnet field that appears
• Confirm that selecting the enter key, automatically selects the highlighted Subnet option

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 tests and CI checks are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[hana-akamai]

"Do not auto highlight options" sounds like we're removing highlight. What about something like this instead?

Suggested change

	DBaaS Autocomplete fields for VPC, Add, and Edit Connection Pool do not auto highlight options ([#13373](https://github.com/linode/manager/pull/13373))
	DBaaS Autocomplete highlight for VPC, Add, and Edit Connection Pool ([#13373](https://github.com/linode/manager/pull/13373))

[smans-akamai]

Thanks for the suggestion @hana-akamai! I've pushed up this change to update the changeset message.

[linode-gh-bot]

Cloud Manager UI test results

🔺 1 failing test on test run #3 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
1 Failing	865 Passing	11 Skipped	36m 38s

Details

Failing Tests
	Spec	Test
❌	rebuild-linode.spec.ts	Cloud Manager Cypress Tests→rebuild linode » rebuilds a linode from Account StackScript

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/linodes/rebuild-linode.spec.ts"