[PLAT-15216] - fix : Missing guard condition to disable connection po…

…ol toggle Summary: Added missing condition Test Plan: Tested manually Reviewers: kkannan, rmadhavan Reviewed By: kkannan Subscribers: ui, yugaware Differential Revision: https://phorge.dev.yugabyte.com/D37905
yugabyte · Sep 10, 2024 · 9f50d34 · 9f50d34
1 parent db28666
commit 9f50d34
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/...ures/universe/universe-form/form/fields/ConnectionPoolingField/ConnectionPoolingField.tsx b/...ures/universe/universe-form/form/fields/ConnectionPoolingField/ConnectionPoolingField.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { useUpdateEffect } from 'react-use';
 import { useTranslation } from 'react-i18next';
 import { useFormContext, useWatch } from 'react-hook-form';
-import { Box } from '@material-ui/core';
+import { Box, makeStyles, Typography } from '@material-ui/core';
 import { YBToggleField, YBLabel, YBTooltip, YBEarlyAccessTag } from '../../../../../../components';
 import { isVersionConnectionPoolSupported } from '../../../utils/helpers';
 import { UniverseFormData } from '../../../utils/dto';
@@ -18,9 +18,19 @@ interface ConnectionPoolFieldProps {
   disabled: boolean;
 }
 
+const useStyles = makeStyles((theme) => ({
+  subText: {
+    fontSize: '11.5px',
+    lineHeight: '16px',
+    fontWeight: 400,
+    color: '#67666C'
+  }
+}));
+
 export const ConnectionPoolingField: FC<ConnectionPoolFieldProps> = ({ disabled }) => {
   const { control, setValue } = useFormContext<UniverseFormData>();
   const { t } = useTranslation();
+  const classes = useStyles();
 
   //watchers
   const isYSQLEnabled = useWatch({ name: YSQL_FIELD });
@@ -43,11 +53,13 @@ export const ConnectionPoolingField: FC<ConnectionPoolFieldProps> = ({ disabled
       <YBTooltip
         interactive={true}
         title={
-          isYSQLEnabled
-            ? isConnectionPoolSupported
-              ? ''
-              : t('universeForm.advancedConfig.ysqlConPortTooltip')
-            : t('universeForm.advancedConfig.conPoolYSQLWarn')
+          <Typography className={classes.subText}>
+            {isYSQLEnabled
+              ? isConnectionPoolSupported
+                ? ''
+                : t('universeForm.advancedConfig.conPoolVersionTooltip')
+              : t('universeForm.advancedConfig.conPoolYSQLWarn')}
+          </Typography>
         }
       >
         <div>
@@ -57,7 +69,7 @@ export const ConnectionPoolingField: FC<ConnectionPoolFieldProps> = ({ disabled
               'data-testid': 'PGCompatibiltyField-Toggle'
             }}
             control={control}
-            disabled={disabled || !isYSQLEnabled}
+            disabled={disabled || !isYSQLEnabled || !isConnectionPoolSupported}
           />
         </div>
       </YBTooltip>

diff --git a/managed/ui/src/translations/en.json b/managed/ui/src/translations/en.json
@@ -333,6 +333,7 @@
         "pgTooltip": "Access to enhanced Postgres compatible features is only available for database version 2024.2 or later. <1>Learn more</1>",
         "enableConnectionPooling": "Enable Connection Pooling",
         "conPoolTooltip": "Use built-in YSQL service for maximizing the number of simultaneous connections to your database",
+        "conPoolVersionTooltip": "Built-in connection pooling is only available for database version 2024.2 or later.",
         "conPoolYSQLWarn": "Enable YSQL first to use connection pooling.",
         "conPoolDBVersionWarn": "Built-in connection pooling is only available for database version 2024.2 or later",
         "dbRPCPortTooltip": "Port for connecting to your application clients.",