upcoming: [UIE-9768] - DBaaS - Learn more documentation link for PgBouncer

packages/manager/.changeset/pr-13315-upcoming-features-1769186942354.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add learn more documentation link for PgBouncer in DBaaS ([#13315](https://github.com/linode/manager/pull/13315))

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

@@ -14,6 +14,10 @@ import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 
+import { Link } from 'src/components/Link';
+
+import { MANAGE_CONNECTION_POOLS_LEARN_MORE_LINK } from '../../constants';
+
 import type { ConnectionPool } from '@linode/api-v4';
 
 interface Props {
@@ -103,7 +107,8 @@ export const DatabaseAddConnectionPoolDrawer = (props: Props) => {
       )}
       <Typography>
         Add a PgBouncer connection pool to minimize the use of your server
-        resources.
+        resources.{' '}
+        <Link to={MANAGE_CONNECTION_POOLS_LEARN_MORE_LINK}>Learn more.</Link>
       </Typography>
       <form onSubmit={handleSubmit(onSubmit)}>
         <Stack>

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

@@ -19,11 +19,15 @@ import {
 } from 'akamai-cds-react-components/Table';
 import React from 'react';
 
+import { Link } from 'src/components/Link';
 import {
   MIN_PAGE_SIZE,
   PAGE_SIZES,
 } from 'src/components/PaginationFooter/PaginationFooter.constants';
-import { CONNECTION_POOL_LABEL_CELL_STYLES } from 'src/features/Databases/constants';
+import {
+  CONNECTION_POOL_LABEL_CELL_STYLES,
+  MANAGE_CONNECTION_POOLS_LEARN_MORE_LINK,
+} from 'src/features/Databases/constants';
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 
 import { makeSettingsItemStyles } from '../../shared.styles';
@@ -82,7 +86,10 @@ export const DatabaseConnectionPools = ({ database }: Props) => {
           </Typography>
           <Typography sx={{ maxWidth: '500px' }}>
             Manage PgBouncer connection pools to minimize the use of your server
-            resources.
+            resources.{' '}
+            <Link to={MANAGE_CONNECTION_POOLS_LEARN_MORE_LINK}>
+              Learn more.
+            </Link>
           </Typography>
         </Stack>
         <Button

packages/manager/src/features/Databases/constants.ts

@@ -71,7 +71,10 @@ export const ADVANCED_CONFIG_LEARN_MORE_LINK =
   'https://techdocs.akamai.com/cloud-computing/docs/advanced-configuration-parameters';
 export const MANAGE_NETWORKING_LEARN_MORE_LINK =
   'https://techdocs.akamai.com/cloud-computing/docs/aiven-manage-database#manage-networking';
+export const MANAGE_CONNECTION_POOLS_LEARN_MORE_LINK =
+  'https://techdocs.akamai.com/cloud-computing/docs/aiven-manage-database#manage-pgbouncer-connection-pools';
 
+// Styles
 export const CONNECTION_POOL_LABEL_CELL_STYLES = {
   flex: '.5 1 20.5%',
 };