fix: [UIE-10423] - PgBouncer Connection Pool bugs (#13474)

Fix various PgBouncer Connection Pool bugs now that we can test with a real API

Author: hana-akamai

packages/manager/.changeset/pr-13474-upcoming-features-1773090286395.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Fix Database PgBouncer Connection Pool bugs ([#13474](https://github.com/linode/manager/pull/13474))

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

@@ -6,10 +6,12 @@ import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { CONNECTION_POOL_LABEL_CELL_STYLES } from 'src/features/Databases/constants';
 import { StyledActionMenuWrapper } from 'src/features/Databases/shared.styles';
 
-import type { ConnectionPool } from '@linode/api-v4';
+import type { ConnectionPool, DatabaseStatus } from '@linode/api-v4';
 import type { Action } from 'src/components/ActionMenu/ActionMenu';
 
 interface Props {
+  /** Status of the Database */
+  databaseStatus: DatabaseStatus;
   /**
    * Function called when the delete button in the Action Menu is pressed.
    */
@@ -25,12 +27,17 @@ interface Props {
 }
 
 export const DatabaseConnectionPoolRow = (props: Props) => {
-  const { pool, onDelete, onEdit } = props;
+  const { pool, onDelete, onEdit, databaseStatus } = props;
+  const editDisabled = databaseStatus === 'provisioning';
 
   const connectionPoolActions: Action[] = [
     {
       onClick: () => onEdit(pool),
       title: 'Edit',
+      disabled: editDisabled,
+      tooltip: editDisabled
+        ? 'Your Database Cluster is currently provisioning.'
+        : '',
     },
     {
       onClick: () => onDelete(pool),

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

@@ -76,16 +76,6 @@ export const DatabaseConnectionPools = ({ database }: Props) => {
     page_size: pagination.pageSize,
   });
 
-  if (connectionPoolsLoading) {
-    return <CircleProgress />;
-  }
-
-  if (connectionPoolsError) {
-    return (
-      <ErrorState errorText="There was a problem retrieving your connection pools. Refresh the page or try again later." />
-    );
-  }
-
   const hasVPC = Boolean(database?.private_network?.vpc_id);
   const hasPublicVPC = hasVPC && database.private_network?.public_access;
 
@@ -190,6 +180,10 @@ export const DatabaseConnectionPools = ({ database }: Props) => {
             </TableRow>
           </TableHead>
           <TableBody>
+            {connectionPoolsLoading && <CircleProgress />}
+            {connectionPoolsError && (
+              <ErrorState errorText="There was a problem retrieving your connection pools. Refresh the page or try again later." />
+            )}
             {connectionPools?.data.length === 0 ? (
               <TableRow data-testid={'table-row-empty'}>
                 <TableCell
@@ -204,6 +198,7 @@ export const DatabaseConnectionPools = ({ database }: Props) => {
             ) : (
               connectionPools?.data.map((pool) => (
                 <DatabaseConnectionPoolRow
+                  databaseStatus={database.status}
                   key={pool.label}
                   onDelete={() => setDeletePoolLabelSelection(pool.label)}
                   onEdit={() => setEditPoolSelection(pool)}

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

@@ -20,6 +20,9 @@ export const DatabaseNetworking = () => {
     <Typography>{ACCESS_CONTROLS_IN_SETTINGS_TEXT}</Typography>
   );
 
+  const pgBouncerEnabled =
+    flags.databasePgBouncer && database.engine === 'postgresql';
+
   if (!isVPCEnabled) {
     navigate({
       to: `/databases/$engine/$databaseId/summary`,
@@ -40,9 +43,7 @@ export const DatabaseNetworking = () => {
           disabled={disabled}
         />
         <DatabaseManageNetworking database={database} />
-        {flags.databasePgBouncer && database.engine === 'postgresql' && (
-          <DatabaseConnectionPools database={database} />
-        )}
+        {pgBouncerEnabled && <DatabaseConnectionPools database={database} />}
       </Stack>
     </Paper>
   );

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.tsx

@@ -21,17 +21,17 @@ export const DatabaseSummary = () => {
   const { database } = useDatabaseDetailContext();
   const flags = useFlags();
 
+  const pgBouncerEnabled =
+    flags.databasePgBouncer && database.engine === 'postgresql';
+
   const { data: connectionPools } = useDatabaseConnectionPoolsQuery(
     database.id,
-    flags.databasePgBouncer,
+    pgBouncerEnabled,
     {}
   );
 
   const showPgBouncerConnectionDetails =
-    flags.databasePgBouncer &&
-    database.engine === 'postgresql' &&
-    connectionPools &&
-    connectionPools.data.length > 0;
+    pgBouncerEnabled && connectionPools && connectionPools.data.length > 0;
 
   const hasVPC = Boolean(database?.private_network?.vpc_id);
   const hasPublicVPC = hasVPC && database.private_network?.public_access;

packages/queries/src/databases/databases.ts

@@ -243,13 +243,11 @@ export const useUpdateDatabaseConnectionPoolMutation = (
     {
       mutationFn: (data) =>
         updateDatabaseConnectionPool(databaseId, poolName, data),
-      onSuccess(connectionPool) {
-        queryClient.setQueryData<ConnectionPool>(
-          databaseQueries
-            .database('postgresql', databaseId)
-            ._ctx.connectionPools._ctx.pool(connectionPool.label).queryKey,
-          connectionPool,
-        );
+      onSuccess() {
+        queryClient.invalidateQueries({
+          queryKey: databaseQueries.database('postgresql', databaseId)._ctx
+            .connectionPools.queryKey,
+        });
       },
     },
   );
@@ -266,10 +264,6 @@ export const useDeleteDatabaseConnectionPoolMutation = (
       queryClient.invalidateQueries(
         databaseQueries.database('postgresql', databaseId)._ctx.connectionPools,
       );
-      queryClient.removeQueries({
-        queryKey: databaseQueries.database('postgresql', databaseId)._ctx
-          .connectionPools.queryKey,
-      });
     },
   });
 };