upcoming: [UIE-9395] - Edit Connection Pool Drawer (#13304)

## Description 📝
Add Edit Connection Pool drawer to the Database Networking -> PgBouncer Connection Pools section

## How to test 🧪

### Prerequisites

(How to setup test environment)

- Ensure you have the Database PgBouncer flag on and the legacy MSW on

### Verification steps

(How to verify changes)

- [ ] Go to a postgresql Database cluster's networking tab and scroll to the PgBouncer Connection Pools section
- [ ] Edit an existing connection pool in the table via action menu dropdown
- [ ] The edit drawer should have the connection pool's details prefilled with the label disabled
- [ ] Make edits, click save, and check the network request
- [ ] Test error states, edits should not be saved if the user clicks cancel or closes out of the drawer without saving

```
pnpm test DatabaseEditConnectionPoolDrawer
```

Author: hana-akamai

packages/manager/.changeset/pr-13304-upcoming-features-1769102605365.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Edit Connection Pool Drawer ([#13304](https://github.com/linode/manager/pull/13304))

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

@@ -15,6 +15,12 @@ import * as React from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 
 import { Link } from 'src/components/Link';
+import {
+  databaseNamesOptions,
+  defaultUsername,
+  poolModeOptions,
+  usernameOptions,
+} from 'src/features/Databases/constants';
 
 import { MANAGE_CONNECTION_POOLS_LEARN_MORE_LINK } from '../../constants';
 
@@ -26,18 +32,6 @@ interface Props {
   open: boolean;
 }
 
-const defaultUsername = 'Reuse inbound user'; // Represented as null in the API
-const poolModeOptions = [
-  { label: 'Transaction', value: 'transaction' },
-  { label: 'Session', value: 'session' },
-  { label: 'Statement', value: 'statement' },
-];
-const databaseNamesOptions = [{ label: 'defaultdb', value: 'defaultdb' }]; // Currently the only option for the database name field, but more may be introduced later.
-const usernameOptions = [
-  { label: defaultUsername, value: defaultUsername },
-  { label: 'akmadmin', value: 'akmadmin' },
-]; // Currently the only options for the username field
-
 export const DatabaseAddConnectionPoolDrawer = (props: Props) => {
   const { databaseId, onClose, open } = props;
   const { enqueueSnackbar } = useSnackbar();

packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx

@@ -14,19 +14,23 @@ interface Props {
    * Function called when the delete button in the Action Menu is pressed.
    */
   onDelete: (pool: ConnectionPool) => void;
+  /**
+   * Function called when the edit button in the Action Menu is pressed.
+   */
+  onEdit: (pool: ConnectionPool) => void;
   /**
    * Payment method type and data.
    */
   pool: ConnectionPool;
 }
 
 export const DatabaseConnectionPoolRow = (props: Props) => {
-  const { pool, onDelete } = props;
+  const { pool, onDelete, onEdit } = props;
 
   const connectionPoolActions: Action[] = [
     {
-      onClick: () => null,
-      title: 'Edit', // TODO: UIE-9395 Implement edit functionality
+      onClick: () => onEdit(pool),
+      title: 'Edit',
     },
     {
       onClick: () => onDelete(pool),

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

@@ -35,8 +35,9 @@ import { ServiceURI } from '../ServiceURI';
 import { DatabaseAddConnectionPoolDrawer } from './DatabaseAddConnectionPoolDrawer';
 import { DatabaseConnectionPoolDeleteDialog } from './DatabaseConnectionPoolDeleteDialog';
 import { DatabaseConnectionPoolRow } from './DatabaseConnectionPoolRow';
+import { DatabaseEditConnectionPoolDrawer } from './DatabaseEditConnectionPoolDrawer';
 
-import type { Database } from '@linode/api-v4';
+import type { ConnectionPool, Database } from '@linode/api-v4';
 
 interface Props {
   database: Database;
@@ -49,8 +50,10 @@ export const DatabaseConnectionPools = ({ database }: Props) => {
   const isDatabaseInactive = database.status !== 'active';
 
   const [deletePoolLabelSelection, setDeletePoolLabelSelection] =
-    React.useState<null | string>();
+    React.useState<null | string>(null);
   const [isAddPoolDrawerOpen, setIsAddPoolDrawerOpen] = React.useState(false);
+  const [editPoolSelection, setEditPoolSelection] =
+    React.useState<ConnectionPool | null>(null);
 
   const pagination = usePaginationV2({
     currentRoute: '/databases/$engine/$databaseId/networking',
@@ -161,6 +164,7 @@ export const DatabaseConnectionPools = ({ database }: Props) => {
                 <DatabaseConnectionPoolRow
                   key={pool.label}
                   onDelete={() => setDeletePoolLabelSelection(pool.label)}
+                  onEdit={() => setEditPoolSelection(pool)}
                   pool={pool}
                 />
               ))
@@ -199,6 +203,14 @@ export const DatabaseConnectionPools = ({ database }: Props) => {
         onClose={() => setIsAddPoolDrawerOpen(false)}
         open={isAddPoolDrawerOpen}
       />
+      {editPoolSelection && (
+        <DatabaseEditConnectionPoolDrawer
+          databaseId={database.id}
+          onClose={() => setEditPoolSelection(null)}
+          open={Boolean(editPoolSelection)}
+          pool={editPoolSelection}
+        />
+      )}
     </>
   );
 };

packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseEditConnectionPoolDrawer.test.tsx

@@ -0,0 +1,140 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+import { describe, it } from 'vitest';
+
+import { databaseConnectionPoolFactory } from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { DatabaseEditConnectionPoolDrawer } from './DatabaseEditConnectionPoolDrawer';
+
+const mockProps = {
+  databaseId: 123,
+  onClose: vi.fn(),
+  open: true,
+  pool: databaseConnectionPoolFactory.build({
+    label: 'test-pool',
+    mode: 'session',
+    size: 22,
+    username: 'akmadmin',
+  }),
+};
+
+// Hoist query mocks
+const queryMocks = vi.hoisted(() => {
+  return {
+    useUpdateDatabaseConnectionPoolMutation: vi.fn(),
+  };
+});
+
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return {
+    ...actual,
+    useUpdateDatabaseConnectionPoolMutation:
+      queryMocks.useUpdateDatabaseConnectionPoolMutation,
+  };
+});
+
+describe('DatabaseEditConnectionPoolDrawer Component', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    queryMocks.useUpdateDatabaseConnectionPoolMutation.mockReturnValue({});
+    queryMocks.useUpdateDatabaseConnectionPoolMutation.mockReturnValue({
+      mutateAsync: vi.fn().mockResolvedValue({}),
+      isLoading: false,
+      reset: vi.fn(),
+    });
+  });
+
+  it('Should render the drawer title, prefilled inputs, and actions', () => {
+    renderWithTheme(<DatabaseEditConnectionPoolDrawer {...mockProps} />);
+
+    const drawerTitle = screen.getByText('Edit Connection Pool');
+    expect(drawerTitle).toBeInTheDocument();
+
+    const poolLabelInput = screen.getByLabelText('Pool Label');
+    expect(poolLabelInput).toBeVisible();
+    expect(poolLabelInput).toHaveValue('test-pool');
+    // Label should not be editable
+    expect(poolLabelInput).not.toBeEnabled();
+
+    const databaseNameInput = screen.getByLabelText('Database Name');
+    const poolModeInput = screen.getByLabelText('Pool Mode');
+    const poolSizeInput = screen.getByLabelText('Pool Size');
+    const usernameInput = screen.getByLabelText('Username');
+
+    expect(databaseNameInput).toBeVisible();
+    expect(databaseNameInput).toHaveValue('defaultdb');
+
+    expect(poolModeInput).toBeVisible();
+    expect(poolModeInput).toHaveValue('Session');
+
+    expect(poolSizeInput).toBeVisible();
+    expect(poolSizeInput).toHaveValue(22);
+
+    expect(usernameInput).toBeVisible();
+    expect(usernameInput).toHaveValue('akmadmin');
+
+    const saveBtn = screen.getByText('Save');
+    const cancelBtn = screen.getByText('Cancel');
+    expect(saveBtn).toBeVisible();
+    expect(cancelBtn).toBeVisible();
+  });
+
+  it('Should show error notice on root error', async () => {
+    const mockErrorMessage = 'This is a root level error';
+    queryMocks.useUpdateDatabaseConnectionPoolMutation.mockReturnValue({
+      mutateAsync: vi
+        .fn()
+        .mockRejectedValue([{ field: 'root', reason: mockErrorMessage }]),
+      isLoading: false,
+      reset: vi.fn(),
+    });
+
+    renderWithTheme(<DatabaseEditConnectionPoolDrawer {...mockProps} />);
+
+    // Edit and submit the filled form
+    const poolModeSelect = screen.getByLabelText('Pool Mode');
+    await userEvent.click(poolModeSelect);
+    await userEvent.click(screen.getByText('Statement'));
+    const saveBtn = screen.getByText('Save');
+    await userEvent.click(saveBtn);
+
+    // Check that the error notice is displayed
+    const errorNotice = screen.getByText(mockErrorMessage);
+    expect(errorNotice).toBeInTheDocument();
+  });
+
+  it('Should display inline errors', async () => {
+    queryMocks.useUpdateDatabaseConnectionPoolMutation.mockReturnValue({
+      mutateAsync: vi.fn().mockRejectedValue([
+        { field: 'size', reason: 'Size error message' },
+        { field: 'mode', reason: 'Mode error message' },
+        { field: 'database', reason: 'Database error message' },
+        { field: 'username', reason: 'Username error message' },
+      ]),
+      isLoading: false,
+      reset: vi.fn(),
+    });
+
+    renderWithTheme(<DatabaseEditConnectionPoolDrawer {...mockProps} />);
+
+    // Edit and submit the filled form
+    const poolModeSelect = screen.getByLabelText('Pool Mode');
+    await userEvent.click(poolModeSelect);
+    await userEvent.click(screen.getByText('Statement'));
+    const saveBtn = screen.getByText('Save');
+    await userEvent.click(saveBtn);
+
+    // Check that inline errors are displayed
+    const sizeError = screen.getByText('Size error message');
+    const modeError = screen.getByText('Mode error message');
+    const databaseError = screen.getByText('Database error message');
+    const usernameError = screen.getByText('Username error message');
+    expect(sizeError).toBeVisible();
+    expect(modeError).toBeVisible();
+    expect(databaseError).toBeVisible();
+    expect(usernameError).toBeVisible();
+  });
+});