UIE-9379: Implementing Add Pool functionality for PgBouncer

[smans-akamai]

Description 📝

This pull request is to implement the Add Pool functionality for PgBouncer. This will allow users to create new connection pools via a new drawer. Those connection pools will then be added to the connection pools table in the Networking tab.

Changes 🔄

List any change(s) relevant to the reviewer.

• Configures the Add Pool button in the Database Details Networking tab Manage PgBouncer Connection Pools section to open an add connection pool drawer.
• Adds default values and validation for the fields in this drawer.

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

Preview 📷

Before	After

How to test 🧪

Prerequisites

(How to setup test environment)

• Have the Database PgBouncer feature flag enabled
• Turn on the legacy MSW
• To make sure the Add Pool button gets enabled for postgresql database clusters, modify the mock database response by setting the database status property in makeMockDatabase to active.
• To do this, add a new line here and add the following:

database.status = 'active';

Verification steps

(How to verify changes)
General

• Go to the Networking tab of an active Postgresql Database Cluster http://localhost:3000/databases/postgresql/1/networking
• Select the Add Pool button in the Manage PgBouncer Connection Pools section to open the Add a New Connection Pool drawer
• Make a valid selection in the fields and select Add Pool
• Verify that the connection pool is submitted successfully and that the drawer closes
• Verify that reopening the drawer resets it to the default state

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

[smans-akamai]

I'm considering refactoring some of this. For example, this Box and the added margin is used to manage the space for each of the form fields.

Since a similar style is used throughout the connection pool drawer form, should I make this a reusable component? Alternatively, I could make it shared and move it outside of this file.

[smans-akamai]

I kept the submit button enabled since we take a similar approach in DatabaseCreate where it prevents submitting with UI validation and also displays any backend errors related to individual fields.

Does this approach make sense here are would an alternative approach be preferred?

[smans-akamai]

The Select cds-web-components don't have an error state so this was added to give them the same error border that we see with the Linode components in their error state. In this case these are the Text Field components.

[linode-gh-bot]

Cloud Manager UI test results

🔺 2 failing tests on test run #9 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
2 Failing	853 Passing	11 Skipped	42m 43s

Details

Failing Tests
	Spec	Test
❌	search-images.spec.ts	Cloud Manager Cypress Tests→Search Images » creates two images and make sure they show up in the table and are searchable
❌	clone-linode.spec.ts	Cloud Manager Cypress Tests→clone linode » can clone a Linode from Linode details page

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/images/search-images.spec.ts,cypress/e2e/core/linodes/clone-linode.spec.ts"