[PLAT-14749][Platform]Add a warning message to image upgrade dialog

Summary: Added the YBAlert to ask the user to verify the image in standalone pc before upgrading the linux version

Test Plan:
Tested manually

{F273453}

Reviewers: lsangappa

Reviewed By: lsangappa

Subscribers: yugaware

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

managed/ui/src/components/configRedesign/providerRedesign/components/linuxVersionCatalog/UpgradeLinuxVersionModal.tsx

@@ -17,7 +17,7 @@ import { find, isEmpty } from 'lodash';
 import * as yup from 'yup';
 import { useMutation } from 'react-query';
 import { Grid, MenuItem, Typography, makeStyles } from '@material-ui/core';
-import { YBInputField, YBModal, YBSelectField } from '../../../../../redesign/components';
+import { AlertVariant, YBAlert, YBInputField, YBModal, YBSelectField } from '../../../../../redesign/components';
 import { createErrorMessage } from '../../../../../redesign/features/universe/universe-form/utils/helpers';
 import { ClusterType, Universe } from '../../../../../redesign/helpers/dtos';
 import {
@@ -53,8 +53,11 @@ const useStyles = makeStyles((theme) => ({
   targetVersion: {
     marginTop: '28px'
   },
+  alert: {
+    marginTop: '50px'
+  },
   info: {
-    marginTop: '60px',
+    marginTop: '16px',
     padding: '15px',
     borderRadius: '4px',
     border: `1px solid ${theme.palette.ybacolors.ybBorderGray}`,
@@ -170,7 +173,7 @@ export const UpgradeLinuxVersionModal: FC<UpgradeLinuxVersionModalProps> = ({
         className: classes.content
       }}
       overrideWidth={'886px'}
-      overrideHeight={'686px'}
+      overrideHeight={'720px'}
       cancelLabel={t('cancel', { keyPrefix: 'common' })}
       submitLabel={t('submitLabel')}
       buttonProps={{
@@ -254,7 +257,19 @@ export const UpgradeLinuxVersionModal: FC<UpgradeLinuxVersionModalProps> = ({
           <YBInputField control={control} name={'sleepAfterInSeconds'} type="number" fullWidth />
         </Grid>
       </Grid>
-
+      <YBAlert
+        open
+        text={
+          <Trans
+          i18nKey={`linuxVersion.upgradeModal.verifyImageText`}
+          components={{
+            b: <b />
+          }}
+        />
+        }
+        variant={AlertVariant.Warning}
+        className={classes.alert}
+      />
       <div className={classes.info}>
         <Trans
           i18nKey={`linuxVersion.upgradeModal.infoContent`}

managed/ui/src/translations/en.json

@@ -1846,7 +1846,8 @@
         "submitLabel": "Upgrade",
         "restartAfterInSecond": "Rolling Restart Delay Between Servers (secs)",
         "successMsg": "Success. Click <0>here</0> for task details",
-        "sameVersionErrMsg": "Universe is already using the imageBundle \"{{image_name}}\". Performing OS patching using it will result in no operation."
+        "sameVersionErrMsg": "Universe is already using the imageBundle \"{{image_name}}\". Performing OS patching using it will result in no operation.",
+        "verifyImageText": "It is recommended to <b>verify that the selected image can boot successfully</b> on a standalone VM with the same instance type as the universe before initiating the upgrade."
       },
       "deleteModal": {
         "title": "Delete Linux Version",