[PLAT-15280][PLAT-14753] - Pg parity improvements and other ui fixes

Summary:
**[PLAT-15280]**

Show Reminder modal for **ANALYZE** statement whenever pg toggle is enabled both in create and edit flow.

**[PLAT-14753]**

Access keys getting overwritten on edit universe page. This is because old code was not handling multiple access keys for a provider.

**Others**

  - Changes label Internal YSQL Port
  - Do not show empty tooltip for connection pooling

Test Plan:
Tested manually

**Screenshot**

{F287332}

Reviewers: kkannan

Reviewed By: kkannan

Subscribers: ui, yugaware

Differential Revision: https://phorge.dev.yugabyte.com/D38191

managed/ui/src/redesign/features/universe/universe-actions/edit-pg-compatibility/AnalyzeDialog.tsx

@@ -0,0 +1,75 @@
+import { FC } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+import { Box, makeStyles, Typography, Chip, Link } from '@material-ui/core';
+import { YBModal } from '../../../../components';
+
+//icons
+import { ReactComponent as ReminderIcon } from '../../../../assets/reminder.svg';
+
+interface AnalyzeDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const useStyles = makeStyles((theme) => ({
+  innerContainer: {
+    height: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: theme.spacing(2),
+    backgroundColor: '#FCFCFC',
+    border: '1px solid #D7DEE4',
+    borderRadius: '8px'
+  },
+  chip: {
+    height: 24,
+    width: 'fit-content',
+    padding: '4px 6px',
+    borderRadius: '6px',
+    backgroundColor: '#FFFFFF',
+    border: '1px solid #D7DEE4',
+    fontFamily: 'Menio',
+    color: '#0B1117',
+    fontSize: '13px',
+    fontWeight: 400
+  }
+}));
+
+export const AnalyzeDialog: FC<AnalyzeDialogProps> = ({ open, onClose }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+  return (
+    <YBModal
+      open={open}
+      title={t('common.reminder')}
+      titleIcon={<ReminderIcon />}
+      onClose={onClose}
+      cancelLabel={t('common.close')}
+      cancelTestId="AnalyzeDialog-Cancel"
+      overrideHeight={'auto'}
+      overrideWidth={'600px'}
+      dialogContentProps={{ style: { padding: '32px 16px 32px 24px' }, dividers: true }}
+    >
+      <Box className={classes.innerContainer}>
+        <Typography variant="body2">
+          <Trans i18nKey={'universeActions.pgCompatibility.analyzeModal.msg1'} />
+          <br />
+          <br />
+          {t('universeActions.pgCompatibility.analyzeModal.msg2')}&nbsp;
+          <Chip label="ANALYZE ;" className={classes.chip} size="small" />
+          &nbsp;
+          {t('universeActions.pgCompatibility.analyzeModal.msg3')}
+          <br />
+          <br />
+          <Link
+            underline="always"
+            target="_blank"
+            href="https://docs.yugabyte.com/preview/api/ysql/the-sql-language/statements/cmd_analyze/#analyze-affects-query-plans"
+          >
+            {t('universeActions.pgCompatibility.analyzeModal.learnLink')}
+          </Link>
+        </Typography>
+      </Box>
+    </YBModal>
+  );
+};

managed/ui/src/redesign/features/universe/universe-actions/edit-pg-compatibility/EditPGCompatibilityModal.tsx

@@ -1,11 +1,12 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { get, cloneDeep } from 'lodash';
 import { toast } from 'react-toastify';
 import { useForm } from 'react-hook-form';
 import { useMutation } from 'react-query';
 import { useTranslation, Trans } from 'react-i18next';
 import { Box, makeStyles, Typography, Link } from '@material-ui/core';
 import { YBModal, YBToggleField } from '../../../../components';
+import { AnalyzeDialog } from './AnalyzeDialog';
 import {
   getPrimaryCluster,
   createErrorMessage,
@@ -108,13 +109,17 @@ export const EditPGCompatibilityModal: FC<PGCompatibilityModalProps> = ({
   const universeName = get(primaryCluster, 'userIntent.universeName');
   const currentRF = get(primaryCluster, 'userIntent.replicationFactor');
   const isPGEnabled = primaryCluster ? isPGEnabledFromIntent(primaryCluster?.userIntent) : false;
+  const [openAnalyzeModal, setAnalyzeModal] = useState(false);
 
-  const { control, handleSubmit, watch } = useForm<PGFormValues>({
+  const { control, watch, getValues } = useForm<PGFormValues>({
     defaultValues: {
       enablePGCompatibitilty: isPGEnabled ? true : false
     }
   });
 
+  //watchers
+  const pgToggleValue = watch('enablePGCompatibitilty');
+
   const upgradePGCompatibility = useMutation(
     (values: EditGflagPayload) => {
       return api.upgradeGflags(values, universeUUID);
@@ -129,10 +134,7 @@ export const EditPGCompatibilityModal: FC<PGCompatibilityModalProps> = ({
     }
   );
 
-  //watchers
-  const pgToggleValue = watch('enablePGCompatibitilty');
-
-  const handleFormSubmit = handleSubmit(async (formValues) => {
+  const handleFormSubmit = async (formValues: PGFormValues) => {
     try {
       const payload: EditGflagPayload = {
         nodePrefix,
@@ -169,7 +171,15 @@ export const EditPGCompatibilityModal: FC<PGCompatibilityModalProps> = ({
     } catch (e) {
       console.error(createErrorMessage(e));
     }
-  });
+  };
+
+  const onFormSubmit = () => {
+    if (pgToggleValue) setAnalyzeModal(true);
+    else {
+      const formValues = getValues();
+      handleFormSubmit(formValues);
+    }
+  };
 
   const canEditGFlags = hasNecessaryPerm({
     onResource: universeUUID,
@@ -183,7 +193,7 @@ export const EditPGCompatibilityModal: FC<PGCompatibilityModalProps> = ({
       submitLabel={t('common.applyChanges')}
       cancelLabel={t('common.cancel')}
       onClose={onClose}
-      onSubmit={handleFormSubmit}
+      onSubmit={onFormSubmit}
       overrideHeight={'420px'}
       overrideWidth={'600px'}
       submitTestId="EditPGCompatibilityModal-Submit"
@@ -277,6 +287,14 @@ export const EditPGCompatibilityModal: FC<PGCompatibilityModalProps> = ({
             )}
           </Box>
         )}
+        <AnalyzeDialog
+          open={openAnalyzeModal}
+          onClose={() => {
+            setAnalyzeModal(false);
+            const formValues = getValues();
+            handleFormSubmit(formValues);
+          }}
+        />
       </Box>
     </YBModal>
   );

managed/ui/src/redesign/features/universe/universe-form/form/fields/AccessKeysField/AccessKeysField.tsx

@@ -8,8 +8,6 @@ import { YBLabel, YBSelectField } from '../../../../../../components';
 import { AccessKey, UniverseFormData } from '../../../utils/dto';
 import { ACCESS_KEY_FIELD, PROVIDER_FIELD } from '../../../utils/constants';
 import { useFormFieldStyles } from '../../../universeMainStyle';
-import { YBProvider } from '../../../../../../../components/configRedesign/providerRedesign/types';
-import { ProviderCode } from '../../../../../../../components/configRedesign/providerRedesign/constants';
 
 const useStyles = makeStyles((theme) => ({
   overrideMuiSelectMenu: {
@@ -21,9 +19,10 @@ const useStyles = makeStyles((theme) => ({
 
 interface AccessKeysFieldProps {
   disabled?: boolean;
+  isEditMode?: boolean;
 }
 
-export const AccessKeysField = ({ disabled }: AccessKeysFieldProps): ReactElement => {
+export const AccessKeysField = ({ disabled, isEditMode }: AccessKeysFieldProps): ReactElement => {
   const { control, setValue } = useFormContext<UniverseFormData>();
   const { t } = useTranslation();
   const classes = useFormFieldStyles();
@@ -45,19 +44,23 @@ export const AccessKeysField = ({ disabled }: AccessKeysFieldProps): ReactElemen
     const accessKeys = allAccessKeys.data.filter(
       (item: AccessKey) => item?.idKey?.providerUUID === provider?.uuid
     );
-    if (accessKeys?.length) {
-      setValue(ACCESS_KEY_FIELD, accessKeys[0]?.idKey.keyCode, { shouldValidate: true });
-    } else {
-      setValue(ACCESS_KEY_FIELD, null, { shouldValidate: true });
+    if (!isEditMode) {
+      if (accessKeys?.length) {
+        setValue(ACCESS_KEY_FIELD, accessKeys[0]?.idKey.keyCode, { shouldValidate: true });
+      } else {
+        setValue(ACCESS_KEY_FIELD, null, { shouldValidate: true });
+      }
     }
   }, [provider]);
 
   //only first time
   useEffectOnce(() => {
-    if (accessKeysList?.length && provider?.uuid) {
-      setValue(ACCESS_KEY_FIELD, accessKeysList[0]?.idKey.keyCode, { shouldValidate: true });
-    } else {
-      setValue(ACCESS_KEY_FIELD, null, { shouldValidate: true });
+    if (!isEditMode) {
+      if (accessKeysList?.length && provider?.uuid) {
+        setValue(ACCESS_KEY_FIELD, accessKeysList[0]?.idKey.keyCode, { shouldValidate: true });
+      } else {
+        setValue(ACCESS_KEY_FIELD, null, { shouldValidate: true });
+      }
     }
   });
 

managed/ui/src/redesign/features/universe/universe-form/form/fields/ConnectionPoolingField/ConnectionPoolingField.tsx

@@ -51,15 +51,20 @@ export const ConnectionPoolingField: FC<ConnectionPoolFieldProps> = ({ disabled
   return (
     <Box display="flex" width="100%" data-testid="ConnectionPoolingField-Container">
       <YBTooltip
-        interactive={true}
         title={
-          <Typography className={classes.subText}>
-            {isYSQLEnabled
-              ? isConnectionPoolSupported
-                ? ''
-                : t('universeForm.advancedConfig.conPoolVersionTooltip')
-              : t('universeForm.advancedConfig.conPoolYSQLWarn')}
-          </Typography>
+          isYSQLEnabled ? (
+            isConnectionPoolSupported ? (
+              ''
+            ) : (
+              <Typography className={classes.subText}>
+                {t('universeForm.advancedConfig.conPoolVersionTooltip')}
+              </Typography>
+            )
+          ) : (
+            <Typography className={classes.subText}>
+              {t('universeForm.advancedConfig.conPoolYSQLWarn')}
+            </Typography>
+          )
         }
       >
         <div>

managed/ui/src/redesign/features/universe/universe-form/form/fields/PGCompatibilityField/PGCompatibilityField.tsx

@@ -1,9 +1,10 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import { useTranslation, Trans } from 'react-i18next';
 import { Box, makeStyles, Typography, Link } from '@material-ui/core';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { YBToggleField, YBLabel, YBTooltip } from '../../../../../../components';
+import { AnalyzeDialog } from '../../../../universe-actions/edit-pg-compatibility/AnalyzeDialog';
 import { isVersionPGSupported } from '../../../utils/helpers';
 import { UniverseFormData } from '../../../utils/dto';
 import { PG_COMPATIBILITY_FIELD, SOFTWARE_VERSION_FIELD } from '../../../utils/constants';
@@ -41,11 +42,13 @@ const useStyles = makeStyles((theme) => ({
 
 export const PGCompatibiltyField: FC<PGCompatibiltyFieldProps> = ({ disabled }) => {
   const { control, setValue } = useFormContext<UniverseFormData>();
+  const [openAnalyzeModal, setAnalyzeModal] = useState(false);
   const classes = useStyles();
   const { t } = useTranslation();
 
   //watchers
   const dbVersionValue = useWatch({ name: SOFTWARE_VERSION_FIELD });
+  const pgValue = useWatch({ name: PG_COMPATIBILITY_FIELD });
 
   const isPGSupported = isVersionPGSupported(dbVersionValue);
 
@@ -54,6 +57,10 @@ export const PGCompatibiltyField: FC<PGCompatibiltyFieldProps> = ({ disabled })
     if (!isVersionPGSupported(dbVersionValue)) setValue(PG_COMPATIBILITY_FIELD, false);
   }, [dbVersionValue]);
 
+  useUpdateEffect(() => {
+    if (pgValue) setAnalyzeModal(true);
+  }, [pgValue]);
+
   return (
     <Box display="flex" width="100%" data-testid="PGCompatibiltyField-Container">
       <YBTooltip
@@ -106,6 +113,7 @@ export const PGCompatibiltyField: FC<PGCompatibiltyFieldProps> = ({ disabled })
           </Typography>
         </Box>
       </Box>
+      <AnalyzeDialog open={openAnalyzeModal} onClose={() => setAnalyzeModal(false)} />
     </Box>
   );
 };

managed/ui/src/redesign/features/universe/universe-form/form/sections/advanced/AdvancedConfiguration.tsx

@@ -65,7 +65,7 @@ export const AdvancedConfiguration = ({ runtimeConfigs }: UniverseFormConfigurat
       </Box>
       {provider.code !== CloudType.kubernetes && (
         <Box display="flex" width="100%" mt={2}>
-          <AccessKeysField disabled={!isCreatePrimary && !isCreateRR} />
+          <AccessKeysField disabled={!isCreatePrimary && !isCreateRR} isEditMode={!isCreateMode} />
         </Box>
       )}
       {provider.code === CloudType.aws && (

managed/ui/src/translations/en.json

@@ -41,6 +41,7 @@
       "and": "and",
       "learnMore": "Learn more",
       "clear": "Clear",
+      "reminder": "Reminder",
       "duration": {
         "seconds": "Seconds",
         "minutes": "Minutes",
@@ -250,7 +251,13 @@
         "disableWarning2": "Requires a <strong>rolling restart</strong> of <strong>{{universeName}}</strong>. The universe will remain online and available throughout.",
         "disableWarning3": "May impact performance.",
         "disableWarning1RF1": "<strong>Note!</strong> Disabling enhanced Postgres compatibility requires a <strong>restart</strong> of <strong>{{universeName}}</strong> and may impact performance.",
-        "disableWarning2RF1": "<strong>The universe won't be available for reads and writes during the restart.</strong>"
+        "disableWarning2RF1": "<strong>The universe won't be available for reads and writes during the restart.</strong>",
+        "analyzeModal": {
+          "msg1": "Enabling Enhanced Postgres Compatibility also enables the <strong>Cost Based Optimizer (CBO).</strong>",
+          "msg2": "You must run",
+          "msg3": "on user tables after data load for the CBO to create optimal execution plans.",
+          "learnLink": "Learn more about ANALYZE"
+        }
       },
       "connectionPooling": {
         "modalTitle": "Edit Connection Pooling",
@@ -326,7 +333,7 @@
         "yqlServerRpcPort": "YCQL RPC Port",
         "ysqlServerHttpPort": "YSQL HTTP Port",
         "ysqlServerRpcPort": "YSQL RPC Port",
-        "internalYsqlServerRpcPort": "YSQL Database Port",
+        "internalYsqlServerRpcPort": "Internal YSQL Port",
         "enhancePGCompatibility": "Enhanced Postgres Compatibility",
         "earlyAccess": "Early Access",
         "pgSubText": "Configure YSQL for maximum Postgres compatibility by enabling<br /> early access features. <1>Learn more</1>",
@@ -2704,16 +2711,16 @@
           "deleteMsg": "scheduled backup policy is being deleted",
           "editModal": {
             "title": "Edit Scheduled Backup Policy",
-            "backupStrategy":"Backup Strategy",
+            "backupStrategy": "Backup Strategy",
             "success": "Scheduled backup policy is being updated"
           },
           "deleteModal": {
-            "deleteMsg":"Are you sure you want to delete this schedule policy?"
+            "deleteMsg": "Are you sure you want to delete this schedule policy?"
           },
           "showIntervalModal": {
             "title": "Backup Intervals",
-            "fullBackup":"Full Backup",
-            "incrementalBackup":"Incremental Backup"
+            "fullBackup": "Full Backup",
+            "incrementalBackup": "Incremental Backup"
           },
           "backupTables": "Backup Tables"
         }
@@ -2769,11 +2776,11 @@
           "parallelThreads": "Parallel threads (Optional)"
         },
         "validationErrMsg": {
-          "keyspacesAlreadyExists":"Keyspace already exists in the target Universe",
+          "keyspacesAlreadyExists": "Keyspace already exists in the target Universe",
           "pitrMillisOptions.secs": "Secs must be between 0 to 59",
           "kmsConfigRequired": "KMS Config is required",
-          "invalidKeyspaceName":"Invalid keyspace name",
-          "duplicateKeyspaceName":"Duplicate keyspace name given"
+          "invalidKeyspaceName": "Invalid keyspace name",
+          "duplicateKeyspaceName": "Duplicate keyspace name given"
         }
       }
     },