upcoming: [UIE-10422] - Fix PgBouncer and Service URI bugs

packages/manager/.changeset/pr-13487-upcoming-features-1773343579695.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Fix PgBouncer and Service URI bugs ([#13487](https://github.com/linode/manager/pull/13487))

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

@@ -28,15 +28,15 @@ interface Props {
 
 export const DatabaseConnectionPoolRow = (props: Props) => {
   const { pool, onDelete, onEdit, databaseStatus } = props;
-  const editDisabled = databaseStatus === 'provisioning';
+  const editDisabled = databaseStatus !== 'active';
 
   const connectionPoolActions: Action[] = [
     {
       onClick: () => onEdit(pool),
       title: 'Edit',
       disabled: editDisabled,
       tooltip: editDisabled
-        ? 'Your Database Cluster is currently provisioning.'
+        ? 'You can only edit connection pools on active database clusters'
         : '',
     },
     {

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

@@ -1,11 +1,17 @@
 import { useDatabaseCredentialsQuery } from '@linode/queries';
 import { Box, CircleProgress, TooltipIcon, Typography } from '@linode/ui';
 import { Button } from 'akamai-cds-react-components';
+import { enqueueSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import { Link } from 'src/components/Link';
 import { DB_ROOT_USERNAME } from 'src/constants';
+import {
+  CLUSTER_PROVISIONING_TEXT,
+  CREDENTIALS_ERROR_TEXT,
+  DISABLED_PASSWORD_BUTTON_TEXT,
+} from 'src/features/Databases/constants';
 import { useFlags } from 'src/hooks/useFlags';
 
 import { isDefaultDatabase } from '../../utilities';
@@ -58,15 +64,19 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
 
   const handleShowPasswordClick = () => {
     setShowPassword((showCredentials) => !showCredentials);
+    getDatabaseCredentials();
   };
 
   React.useEffect(() => {
-    if (showCredentials && !credentials) {
-      getDatabaseCredentials();
+    if (showCredentials && credentialsError) {
+      setShowPassword(false);
+      enqueueSnackbar(CREDENTIALS_ERROR_TEXT, { variant: 'error' });
     }
-  }, [credentials, getDatabaseCredentials, showCredentials]);
+  }, [showCredentials, credentialsError]);
 
-  const disableShowBtn = ['failed', 'provisioning'].includes(database.status);
+  const disableShowBtn = ['failed', 'provisioning', 'suspended'].includes(
+    database.status
+  );
 
   const credentialsBtn = (handleClick: () => void, btnText: string) => {
     return (
@@ -89,11 +99,6 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
         <div className={classes.progressCtn}>
           <CircleProgress noPadding size="xs" />
         </div>
-      ) : credentialsError ? (
-        <>
-          <span className={classes.error}>Error retrieving credentials.</span>
-          {credentialsBtn(() => getDatabaseCredentials(), 'Retry')}
-        </>
       ) : (
         credentialsBtn(
           handleShowPasswordClick,
@@ -106,8 +111,8 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
           sxTooltipIcon={sxTooltipIcon}
           text={
             database.status === 'provisioning'
-              ? 'Your Database Cluster is currently provisioning.'
-              : 'Your root password is unavailable when your Database Cluster has failed.'
+              ? CLUSTER_PROVISIONING_TEXT
+              : DISABLED_PASSWORD_BUTTON_TEXT
           }
         />
       )}

packages/manager/src/features/Databases/DatabaseDetail/ServiceURI.test.tsx

@@ -204,19 +204,6 @@ describe('ServiceURI', () => {
     );
   });
 
-  it('should render error retry button if the credentials call fails', () => {
-    queryMocks.useDatabaseCredentialsQuery.mockReturnValue({
-      error: new Error('Failed to fetch credentials'),
-    });
-
-    renderWithTheme(<ServiceURI database={databaseWithNoVPC} />);
-
-    const errorRetryBtn = screen.getByRole('button', {
-      name: '{error. click to retry}',
-    });
-    expect(errorRetryBtn).toBeInTheDocument();
-  });
-
   it('should render general service URI if isGeneralServiceURI is true', () => {
     queryMocks.useDatabaseCredentialsQuery.mockReturnValue({
       data: mockCredentials,

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

@@ -7,6 +7,11 @@ import React, { useState } from 'react';
 
 import { Code } from 'src/components/Code/Code';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import {
+  CLUSTER_PROVISIONING_TEXT,
+  CREDENTIALS_ERROR_TEXT,
+  DISABLED_PASSWORD_BUTTON_TEXT,
+} from 'src/features/Databases/constants';
 import { StyledValueGrid } from 'src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.style';
 
 import type { Database, DatabaseCredentials } from '@linode/api-v4';
@@ -66,18 +71,12 @@ export const ServiceURI = (props: ServiceURIProps) => {
           // copy with revealed credentials
           copy(getServiceURIText(data, isGeneralServiceURI));
         } else {
-          enqueueSnackbar(
-            'There was an error retrieving cluster credentials. Please try again.',
-            { variant: 'error' }
-          );
+          enqueueSnackbar(CREDENTIALS_ERROR_TEXT, { variant: 'error' });
         }
         setIsCopying(false);
       } catch {
         setIsCopying(false);
-        enqueueSnackbar(
-          'There was an error retrieving cluster credentials. Please try again.',
-          { variant: 'error' }
-        );
+        enqueueSnackbar(CREDENTIALS_ERROR_TEXT, { variant: 'error' });
       }
     }
   };
@@ -100,36 +99,48 @@ export const ServiceURI = (props: ServiceURIProps) => {
 
   // hide loading state if the user clicks on the copy icon
   const showBtnLoading =
-    !isCopying && (credentialsLoading || credentialsFetching);
-
-  const ErrorButton = (
-    <Button
-      loading={showBtnLoading}
-      onClick={() => getDatabaseCredentials()}
-      sx={(theme) => ({
-        p: 0,
-        color: theme.tokens.alias.Content.Text.Negative,
-        '&:hover, &:focus': {
-          color: theme.tokens.alias.Content.Text.Negative,
-        },
-      })}
-    >
-      {`{error. click to retry}`}
-    </Button>
-  );
+    !hidePassword && !isCopying && (credentialsLoading || credentialsFetching);
 
-  const RevealPasswordButton = (
-    <Button
-      loading={showBtnLoading}
-      onClick={() => {
-        setHidePassword(false);
-        getDatabaseCredentials();
-      }}
-      sx={{ p: 0 }}
-    >
-      {`{click to reveal password}`}
-    </Button>
+  const disablePasswordBtn = ['failed', 'provisioning', 'suspended'].includes(
+    database.status
   );
+  const disabledPasswordTooltipText =
+    database.status === 'provisioning'
+      ? CLUSTER_PROVISIONING_TEXT
+      : DISABLED_PASSWORD_BUTTON_TEXT;
+
+  React.useEffect(() => {
+    if (!hidePassword && credentialsError) {
+      setHidePassword(true);
+      enqueueSnackbar(CREDENTIALS_ERROR_TEXT, { variant: 'error' });
+    }
+  }, [credentialsError, hidePassword]);
+
+  const renderPassword = () => {
+    if (hidePassword || credentialsError || !credentials) {
+      return (
+        <Button
+          disabled={disablePasswordBtn}
+          loading={showBtnLoading}
+          onClick={() => {
+            getDatabaseCredentials();
+            setHidePassword(false);
+          }}
+          sx={{
+            p: 0,
+            '& .MuiButton-icon': {
+              margin: 0,
+            },
+          }}
+          tooltipText={disablePasswordBtn ? disabledPasswordTooltipText : ''}
+        >
+          {`{click to reveal password}`}
+        </Button>
+      );
+    }
+
+    return getCredentials(isGeneralServiceURI);
+  };
 
   return (
     <Grid display="contents">
@@ -144,11 +155,7 @@ export const ServiceURI = (props: ServiceURIProps) => {
         whiteSpace="pre"
       >
         {engine}://
-        {credentialsError
-          ? ErrorButton
-          : hidePassword || (!credentialsError && !credentials)
-            ? RevealPasswordButton
-            : getCredentials(isGeneralServiceURI)}
+        {renderPassword()}
         {isGeneralServiceURI ? (
           <>
             @{primaryHost?.address}:

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

@@ -62,6 +62,15 @@ export const SUMMARY_PRIVATE_HOST_COPY =
 export const SUMMARY_PRIVATE_HOST_LEGACY_COPY =
   'A private network host and a private IP can only be used to access a Database Cluster from Linodes in the same data center and will not incur transfer costs.';
 
+export const CREDENTIALS_ERROR_TEXT =
+  'There was an error retrieving cluster credentials. Please try again.';
+
+export const DISABLED_PASSWORD_BUTTON_TEXT =
+  'Your root password is unavailable when your Database Cluster is in a failed or suspended state.';
+
+export const CLUSTER_PROVISIONING_TEXT =
+  'Your Database Cluster is currently provisioning.';
+
 // Links
 export const LEARN_MORE_LINK_LEGACY =
   'https://techdocs.akamai.com/cloud-computing/docs/manage-access-controls';