upcoming: [UIE-9327] - Add service URIs to Database summary tab (#13261)

## Description 📝
- Display general Service URI for all databases under Connection details in the summary tab
- If applicable, display PgBouncer connection details Service URI for postgres clusters with at least one connection pool

## How to test 🧪

### Prerequisites

(How to setup test environment)

- Ensure the Database PgBouncer feature flag is enabled and turn on the legacy MSW

### Verification steps

(How to verify changes)

- [ ] Go to a mysql Database cluster's summary page and confirm that a general mysql service URI displays under Connection Details. There should not be a PgBouncer section.
- [ ] Go to a postgres Database cluster's summary page and confirm that a general postgres service URI displays under Connection Details. There should be a PgBouncer section

Author: hana-akamai

packages/manager/.changeset/pr-13261-upcoming-features-1768256606077.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add service URIs to Database summary tab ([#13261](https://github.com/linode/manager/pull/13261))

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

@@ -20,6 +20,7 @@ import type { Database } from '@linode/api-v4/lib/databases/types';
 
 interface ConnectionDetailsHostRowsProps {
   database: Database;
+  isSummaryTab?: boolean;
 }
 
 type HostContentMode = 'default' | 'private' | 'public';
@@ -30,7 +31,7 @@ type HostContentMode = 'default' | 'private' | 'public';
 export const ConnectionDetailsHostRows = (
   props: ConnectionDetailsHostRowsProps
 ) => {
-  const { database } = props;
+  const { database, isSummaryTab } = props;
   const { classes } = useStyles();
 
   const sxTooltipIcon = {
@@ -136,21 +137,28 @@ export const ConnectionDetailsHostRows = (
 
   return (
     <>
-      <ConnectionDetailsRow label={hasVPC ? 'Private Host' : 'Host'}>
+      <ConnectionDetailsRow
+        isSummaryTab={isSummaryTab}
+        label={hasVPC ? 'Private Host' : 'Host'}
+      >
         {getHostContent(hasVPC ? 'private' : 'default')}
       </ConnectionDetailsRow>
       {hasPublicVPC && (
-        <ConnectionDetailsRow label="Public Host">
+        <ConnectionDetailsRow isSummaryTab={isSummaryTab} label="Public Host">
           {getHostContent('public')}
         </ConnectionDetailsRow>
       )}
       <ConnectionDetailsRow
+        isSummaryTab={isSummaryTab}
         label={hasVPC ? 'Private Read-only Host' : readonlyHostLabel}
       >
         {getReadOnlyHostContent(hasVPC ? 'private' : 'default')}
       </ConnectionDetailsRow>
       {hasPublicVPC && (
-        <ConnectionDetailsRow label="Public Read-only Host">
+        <ConnectionDetailsRow
+          isSummaryTab={isSummaryTab}
+          label="Public Read-only Host"
+        >
           {getReadOnlyHostContent('public')}
         </ConnectionDetailsRow>
       )}

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

@@ -8,22 +8,25 @@ import {
 
 interface ConnectionDetailsRowProps {
   children: React.ReactNode;
+  isSummaryTab?: boolean;
   label: string;
 }
 
 export const ConnectionDetailsRow = (props: ConnectionDetailsRowProps) => {
-  const { children, label } = props;
+  const { children, label, isSummaryTab } = props;
   return (
     <>
       <Grid
         size={{
-          md: 4,
+          md: isSummaryTab ? 3 : 4,
           xs: 3,
         }}
       >
         <StyledLabelTypography>{label}</StyledLabelTypography>
       </Grid>
-      <StyledValueGrid size={{ md: 8, xs: 9 }}>{children}</StyledValueGrid>
+      <StyledValueGrid size={{ md: isSummaryTab ? 9 : 8, xs: 9 }}>
+        {children}
+      </StyledValueGrid>
     </>
   );
 };

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

@@ -0,0 +1,107 @@
+import { getSSLFields } from '@linode/api-v4/lib/databases/databases';
+import { TooltipIcon } from '@linode/ui';
+import { downloadFile } from '@linode/utilities';
+import { styled } from '@mui/material/styles';
+import { Button } from 'akamai-cds-react-components';
+import { useSnackbar } from 'notistack';
+import * as React from 'react';
+
+import DownloadIcon from 'src/assets/icons/lke-download.svg';
+import { getErrorStringOrDefault } from 'src/utilities/errorUtils';
+
+import { sxTooltipIcon } from './DatabaseSummaryConnectionDetails';
+
+import type { Database, SSLFields } from '@linode/api-v4';
+
+interface Props {
+  database: Database;
+}
+
+export const DatabaseCaCert = (props: Props) => {
+  const { database } = props;
+  const { enqueueSnackbar } = useSnackbar();
+  const [isCACertDownloading, setIsCACertDownloading] =
+    React.useState<boolean>(false);
+
+  const handleDownloadCACertificate = () => {
+    setIsCACertDownloading(true);
+    getSSLFields(database.engine, database.id)
+      .then((response: SSLFields) => {
+        // Convert to utf-8 from base64
+        try {
+          const decodedFile = window.atob(response.ca_certificate);
+          downloadFile(`${database.label}-ca-certificate.crt`, decodedFile);
+          setIsCACertDownloading(false);
+        } catch {
+          enqueueSnackbar('Error parsing your CA Certificate file', {
+            variant: 'error',
+          });
+          setIsCACertDownloading(false);
+          return;
+        }
+      })
+      .catch((errorResponse: any) => {
+        const error = getErrorStringOrDefault(
+          errorResponse,
+          'Unable to download your CA Certificate'
+        );
+        setIsCACertDownloading(false);
+        enqueueSnackbar(error, { variant: 'error' });
+      });
+  };
+
+  const disableDownloadCACertificateBtn = database.status === 'provisioning';
+
+  return (
+    <>
+      <StyledCaCertButton
+        data-testid="download-ca-certificate"
+        disabled={disableDownloadCACertificateBtn}
+        onClick={handleDownloadCACertificate}
+        processing={isCACertDownloading}
+        variant="link"
+      >
+        <DownloadIcon />
+        Download CA Certificate
+      </StyledCaCertButton>
+      {disableDownloadCACertificateBtn && (
+        <span style={{ alignContent: 'center' }}>
+          <TooltipIcon
+            status="info"
+            sxTooltipIcon={sxTooltipIcon}
+            text="Your Database Cluster is currently provisioning."
+          />
+        </span>
+      )}
+    </>
+  );
+};
+
+export const StyledCaCertButton = styled(Button, {
+  label: 'StyledCaCertButton',
+})(({ theme }) => ({
+  '&:hover': {
+    backgroundColor: 'transparent',
+    opacity: 0.7,
+  },
+  '&[disabled]': {
+    '& g': {
+      stroke: theme.tokens.color.Neutrals[30],
+    },
+    '&:hover': {
+      backgroundColor: 'inherit',
+      textDecoration: 'none',
+    },
+    // Override disabled background color defined for dark mode
+    backgroundColor: 'transparent',
+    color: theme.tokens.color.Neutrals[30],
+    cursor: 'default',
+  },
+  color: theme.palette.primary.main,
+  font: theme.font.bold,
+  fontSize: '0.875rem',
+  lineHeight: '1.125rem',
+  minHeight: 'auto',
+  minWidth: 'auto',
+  padding: 0,
+}));

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

@@ -1,14 +1,32 @@
-import { Paper } from '@linode/ui';
+import { useDatabaseConnectionPoolsQuery } from '@linode/queries';
+import { Paper, Typography } from '@linode/ui';
 import Grid from '@mui/material/Grid';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import ClusterConfiguration from 'src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration';
 import ConnectionDetails from 'src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails';
+import { useFlags } from 'src/hooks/useFlags';
 
 import { useDatabaseDetailContext } from '../DatabaseDetailContext';
+import { ServiceURI } from '../ServiceURI';
+import { DatabaseCaCert } from './DatabaseCaCert';
 
 export const DatabaseSummary = () => {
   const { database } = useDatabaseDetailContext();
+  const flags = useFlags();
+
+  const { data: connectionPools } = useDatabaseConnectionPoolsQuery(
+    database.id,
+    flags.databasePgBouncer,
+    {}
+  );
+
+  const showPgBouncerConnectionDetails =
+    flags.databasePgBouncer &&
+    database.engine === 'postgresql' &&
+    connectionPools &&
+    connectionPools.data.length > 0;
 
   return (
     <Paper>
@@ -29,7 +47,34 @@ export const DatabaseSummary = () => {
         >
           <ConnectionDetails database={database} />
         </Grid>
+        {showPgBouncerConnectionDetails && (
+          <Grid
+            size={{
+              md: 12,
+              sm: 12,
+            }}
+          >
+            <Typography mb={2} variant="h3">
+              PgBouncer Connection Details
+            </Typography>
+            <ServiceURI database={database} />
+          </Grid>
+        )}
       </Grid>
+      {database.ssl_connection && (
+        <StyledButtonCtn>
+          <DatabaseCaCert database={database} />
+        </StyledButtonCtn>
+      )}
     </Paper>
   );
 };
+
+export const StyledButtonCtn = styled('div', {
+  label: 'StyledButtonCtn',
+})(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  marginTop: '10px',
+  padding: `${theme.spacingFunction(8)} 0`,
+}));

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts

@@ -3,45 +3,6 @@ import { makeStyles } from 'tss-react/mui';
 import type { Theme } from '@mui/material/styles';
 
 export const useStyles = makeStyles()((theme: Theme) => ({
-  actionBtnsCtn: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-    marginTop: '10px',
-    padding: `${theme.spacing(1)} 0`,
-  },
-  caCertBtn: {
-    '& svg': {
-      marginRight: theme.spacing(),
-    },
-    '&:hover': {
-      backgroundColor: 'transparent',
-      opacity: 0.7,
-    },
-    '&[disabled]': {
-      '& g': {
-        stroke: theme.tokens.color.Neutrals[30],
-      },
-      '&:hover': {
-        backgroundColor: 'inherit',
-        textDecoration: 'none',
-      },
-      // Override disabled background color defined for dark mode
-      backgroundColor: 'transparent',
-      color: theme.tokens.color.Neutrals[30],
-      cursor: 'default',
-    },
-    color: theme.palette.primary.main,
-    font: theme.font.bold,
-    fontSize: '0.875rem',
-    lineHeight: '1.125rem',
-    marginLeft: theme.spacing(),
-    minHeight: 'auto',
-    minWidth: 'auto',
-    padding: 0,
-  },
-  tooltipIcon: {
-    alignContent: 'center',
-  },
   connectionDetailsCtn: {
     '& p': {
       lineHeight: '1.5rem',