UIE-9379: Implementing Add Pool functionality for PgBouncer by smans-akamai · Pull Request #13276 · linode/manager

smans-akamai · 2026-01-13T16:23:02Z

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

Backend Errors Displaying Below Fields

Uncomment the mock error response included in this pull request for the connection-pools POST request
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
Select submit and see that the POST returns an error response
Verify that the backend errors are displayed below their respective fields.

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

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolAddDrawer.tsx

smans-akamai · 2026-01-15T22:38:29Z

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx

+          border: `1px solid ${theme.tokens.component.Select.Error.Border}`,
+        }
+      : undefined;
+  };


The drawer is currently using the CDS Select and Linode MUI TextField since the numeric spinner isn't available in the cds-web-components yet. This is to give the cds Select component the same error border color that gets used with the Linode components in their error state.

It looks like we can also provide an error class to select, so I'm going to look into whether that gives the same border color. If so, we may be able to remove this and leverage that instead.

After testing it out, it looks like providing className="error" to the Select component doesn't provide the error class to the component and, as a result, it won't display the error styles for that class from the component. I also tried wrapping it in a div with the error class name, but that didn't work either.

Is there a specific way this class needs to be applied to Select? Otherwise we may need to keep this as a workaround for now.

I'm not sure since it's a CDS Select and it's different from how our UI Select component works. Maybe the CDS team would know

@smans-akamai, your approach also seems fine.

I wasn't able to reproduce an error state for these selects since there are no empty options, but I was playing around with cds-web-components and also just adding a new select there:

you can add your className but you also need to use styled :

const StyledSelect = styled(Select)` &.your-class { ... } `; <StyledSelect {...field} className="your-class" data-testid="database-name-select" ... />

@aaleksee-akamai Thanks, I'll look into this other approach. In the meantime, you can reproduce the error state in this pull request with the following steps:

Uncomment the mock error response for the connection-pools POST request

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

Select submit and see that the POST returns an error response

Verify that the backend errors are displayed below their respective fields.

I've included the steps in the description.

Switched to the MUI select for now while we troubleshoot this issue. Here's my latest comment related to this.

smans-akamai · 2026-01-16T16:11:32Z

packages/manager/src/mocks/serverHandlers.ts

+      //   },
+      //   { status: 400 }
+      // );
+      return HttpResponse.json(connectionPool);


You can uncomment the lines above to mock the error response for the fields to see the inline errors.

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolAddDrawer.tsx

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolAddDrawer.tsx

...manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolAddDrawer.tsx

...manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx

dwiley-akamai

Verification steps ✅

dwiley-akamai · 2026-01-16T21:28:13Z

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx

+  /** Shared ErrorText component that displays formatted error messages below form field components that don't have the errorText property */
+  const SharedErrorText = (errorMessage: string | undefined) =>
+    errorMessage && (
+      <FormHelperText
+        error
+        role="alert"
+        sx={{ marginTop: theme.spacingFunction(4) }}
+      >
+        {errorMessage}
+      </FormHelperText>
+    );
+
+  /** Utility function to generate error styles for form field components that can't set them by default */
+  const makeErrorStyles = (errorMessage: string | undefined) => {
+    return errorMessage
+      ? {
+          border: `1px solid ${theme.tokens.component.Select.Error.Border}`,
+        }
+      : undefined;
+  };


Could consider moving these to the databases utilities file, especially if they may be used elsewhere for the feature

I've removed these for now as they aren't necessary any more. Here's the related comment on the changes I made.

aaleksee-akamai · 2026-01-20T11:11:36Z

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx

+                    return `${poolMode.charAt(0).toUpperCase()}${poolMode.slice(1)}`;
+                  }}
+                />
+                {SharedErrorText(fieldState.error?.message)}


that seems ok but just curious - why you don't use rules there?

For validating the fields in this form, we're using schema validation with Yup rather than through the rules property of the Controller. This moves the main validation logic from the component to a central file (ie. the database.schema.ts). It makes it easier for us to reuse validation we need to. There are other benefits too, but this is generally the approach we use in the DBaaS UI.

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx

smans-akamai · 2026-01-21T19:12:29Z

@bnussman-akamai @hana-akamai @aaleksee-akamai @dwiley-akamai
Due to the issue I came across with the error class, I've changed the Select component used here to the Linode UI version.

We've created the ticket UIE-10056, to look into this issue separately. I've also removed the workaround functions that were created for this. Once that component gets pull back in, I plan to revisit whether we still need those helper functions. I've also included the verification steps for showing the error state in the description.

bnussman-akamai

Drawer looks good!

Also confirmed field errors worked using the provided mock.

bnussman-akamai · 2026-01-21T19:58:25Z

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx

+        resources.
+      </Typography>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Box mt={2.5}>


Nit: Can we look into using a <Stack spacing={2.5}> .... </Stack> to handle spacing rather than many Boxes?

I'd considered making a shared component to address that, but this makes it much easier! The default spacing looked good, so I left out the spacing={2.5}. Thanks for the suggestion!

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx

linode-gh-bot · 2026-01-21T22:24:50Z

Cloud Manager UI test results

🔺 1 failing test on test run #15 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`1 Failing`	`864 Passing`	`11 Skipped`	`42m 45s`

Details

Failing Tests
	Spec	Test
❌	`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/linodes/clone-linode.spec.ts"

…3276) * UIE-9379: Implementing Add Pool functionality for PgBouncer * Adding fix to schema for null value validation issue and cleanup * starting on initial validation * Adding error mocking for calls in serverHandlers * Adding backend error handling for add pool drawer fields * Initial cleanup and adjusting validation based on discussions * Creating initial test file * Adding unit tests and updating markup for add pool drawer * additional cleanup * Added changesets * Applying initial feedback * Applying secondary feedback * Applying smaller changes in feedback with text update * Switching to Linode UI Select and cleanup * Applying additional feedback

github-project-automation bot added this to Cloud Manager Jan 13, 2026

github-project-automation bot moved this to Review in Cloud Manager Jan 13, 2026

smans-akamai requested a review from hana-akamai January 13, 2026 16:23

smans-akamai force-pushed the UIE-9379-dbaas-networking-pgbouncer-add-connection-pool branch from 3595b01 to eceb323 Compare January 15, 2026 20:37

smans-akamai added the DBaaS Relates to Database as a Service label Jan 15, 2026

smans-akamai marked this pull request as ready for review January 15, 2026 22:30

smans-akamai requested a review from a team as a code owner January 15, 2026 22:30

smans-akamai commented Jan 15, 2026

View reviewed changes

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolAddDrawer.tsx Outdated Show resolved Hide resolved

smans-akamai commented Jan 15, 2026

View reviewed changes

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolAddDrawer.tsx Outdated Show resolved Hide resolved

smans-akamai commented Jan 15, 2026

View reviewed changes

smans-akamai commented Jan 16, 2026

View reviewed changes

smans-akamai self-assigned this Jan 16, 2026

hana-akamai reviewed Jan 16, 2026

View reviewed changes

dwiley-akamai reviewed Jan 16, 2026

View reviewed changes

aaleksee-akamai reviewed Jan 20, 2026

View reviewed changes

hana-akamai reviewed Jan 20, 2026

View reviewed changes

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx Outdated Show resolved Hide resolved

bnussman-akamai approved these changes Jan 20, 2026

View reviewed changes

smans-akamai added 12 commits January 21, 2026 11:04

UIE-9379: Implementing Add Pool functionality for PgBouncer

8d26c6a

Adding fix to schema for null value validation issue and cleanup

6f36b51

starting on initial validation

3bc798e

Adding error mocking for calls in serverHandlers

a7c427a

Adding backend error handling for add pool drawer fields

017a6d2

Initial cleanup and adjusting validation based on discussions

be6ea0e

Creating initial test file

3cd1728

Adding unit tests and updating markup for add pool drawer

40631e3

additional cleanup

ae5d5dc

Added changesets

a0eae09

Applying initial feedback

e1b1284

Applying secondary feedback

a0247f2

Applying smaller changes in feedback with text update

e49ae24

smans-akamai force-pushed the UIE-9379-dbaas-networking-pgbouncer-add-connection-pool branch from 6ee00ae to e49ae24 Compare January 21, 2026 16:04

Switching to Linode UI Select and cleanup

be62160

smans-akamai requested review from aaleksee-akamai, bnussman-akamai, dwiley-akamai and hana-akamai January 21, 2026 19:17

bnussman-akamai approved these changes Jan 21, 2026

View reviewed changes

hana-akamai approved these changes Jan 21, 2026

View reviewed changes

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx Outdated Show resolved Hide resolved

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx Outdated Show resolved Hide resolved

github-project-automation bot moved this from Review to Approved in Cloud Manager Jan 21, 2026

Applying additional feedback

f765794

dwiley-akamai approved these changes Jan 21, 2026

View reviewed changes

aaleksee-akamai approved these changes Jan 22, 2026

View reviewed changes

smans-akamai merged commit 8cfec37 into linode:develop Jan 22, 2026
34 of 35 checks passed

github-project-automation bot moved this from Approved to Merged in Cloud Manager Jan 22, 2026

Conversation

smans-akamai commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Scope 🚢

Preview 📷

How to test 🧪

Prerequisites

Verification steps

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

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

Uh oh!

Uh oh!

Uh oh!

smans-akamai Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smans-akamai Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smans-akamai Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dwiley-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smans-akamai Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

smans-akamai commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bnussman-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

linode-gh-bot commented Jan 21, 2026

Cloud Manager UI test results

🔺 1 failing test on test run #15 ↗︎

Details

Troubleshooting

smans-akamai commented Jan 13, 2026 •

edited

Loading

smans-akamai Jan 15, 2026 •

edited

Loading

smans-akamai Jan 16, 2026 •

edited

Loading

smans-akamai Jan 20, 2026 •

edited

Loading

smans-akamai Jan 20, 2026 •

edited

Loading

smans-akamai commented Jan 21, 2026 •

edited

Loading