INFRA-3107 | Saurabh | Elastic Cache Version upgrade dropdown in UI (#593)

src/coreform/baseform/BaseForm.tsx

@@ -72,9 +72,6 @@ const BaseForm = (props: BaseFormProps) => {
   const tabList = BaseFormTabList(props.type);
 
   const isDisabled = (): boolean => {
-    console.log('manifest version : ', manifestVersion);
-    console.log('isUndefined', manifestVersion === undefined);
-    console.log('haveValidationError : ', haveValidationError);
     if (haveValidationError) return true;
     if (
       manifestVersion === LATEST_VERSION ||
@@ -172,9 +169,6 @@ const BaseForm = (props: BaseFormProps) => {
             v = await validateYupSchema(value, manifestValidationSchema, false, value);
             setHaveValidationError(false);
           } catch (err) {
-            console.log('v: ', v);
-            console.log(err);
-            console.log(yupToFormErrors(err));
             setHaveValidationError(true);
             errors = yupToFormErrors(err); //for rendering validation errors
           } finally {

src/coreform/elasticcache/ElasticCacheForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useField, useFormikContext } from 'formik';
 import {
   Card,
@@ -13,7 +13,6 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  Typography,
 } from '@material-ui/core';
 import { FormikTextField } from '../../components/common/FormikTextField';
 import * as _m from '../../models/Manifest';
@@ -28,6 +27,8 @@ import {
   awsInstanceClasses,
   DEFAULT_NUMBER_OF_NODES_GROUP,
   DEFAULT_REPLICAS_PER_GROUP,
+  engineVersionUpgradeCompatibleList,
+  LATEST_EC_VERSION,
 } from './constant';
 
 const MarginedTextField = styled(FormikTextField)({
@@ -60,6 +61,23 @@ const getInstancesWithCurrentSelection = (
 
 const ElasticCacheConfiguration = (props: ElasticCacheConfigurationProps): JSX.Element => {
   const instance = props.instance;
+  const { values, setFieldValue }: { values: any; setFieldValue: any } = useFormikContext();
+  const [engineVersion, setEngineVersion] = useState(LATEST_EC_VERSION);
+  const [originalApplyImmediately, setOriginalApplyImmediately] = useState(false);
+
+  useEffect(() => {
+    setEngineVersion(values.extraResources.elasticCache.engineVersion);
+    setOriginalApplyImmediately(values.extraResources.elasticCache.applyImmediately);
+  }, []);
+
+  const handleEngineVersionChange = (event: { target: { value: string } }): void => {
+    const newVersion = event.target.value;
+    setFieldValue('extraResources.elasticCache.engineVersion', newVersion);
+    const shouldApplyImmediately =
+      newVersion === LATEST_EC_VERSION ? true : originalApplyImmediately;
+    setFieldValue('extraResources.elasticCache.applyImmediately', shouldApplyImmediately);
+  };
+
   return (
     <CardLayout heading="Configuration">
       <MarginedTextField
@@ -76,6 +94,15 @@ const ElasticCacheConfiguration = (props: ElasticCacheConfigurationProps): JSX.E
       >
         {toMenuItems(getInstancesWithCurrentSelection(instance, awsInstanceClasses))}
       </MarginedTextField>
+      <MarginedTextField
+        select
+        label="Engine Version"
+        name="extraResources.elasticCache.engineVersion"
+        onChange={handleEngineVersionChange}
+        fullWidth
+      >
+        {toMenuItems(engineVersionUpgradeCompatibleList[engineVersion])}
+      </MarginedTextField>
     </CardLayout>
   );
 };

src/coreform/elasticcache/constant.ts

@@ -39,3 +39,12 @@ export const alertHeaders = ['Metric', 'Threshold', 'Duration\n(minutes)'];
 export const DEFAULT_NUMBER_OF_NODES_GROUP = 1;
 
 export const DEFAULT_REPLICAS_PER_GROUP = 0;
+
+export const LATEST_EC_VERSION = '7.1';
+
+export const engineVersionUpgradeCompatibleList = {
+  '5.0.6': ['5.0.6', '7.1'],
+  '6.0': ['6.0', '7.1'],
+  '6.2': ['6.2', '7.1'],
+  '7.1': ['7.1'],
+};

src/models/Manifest.ts

@@ -9,6 +9,7 @@ import { DefaultAlerts } from '../constants/DefaultAlerts';
 import { Manifest } from '../types/Manifest';
 import { EfsVolume, FsxMount } from '../types/Deployment';
 import { DEFAULT_ELASTIC_SEARCH_VERSION } from '../constants/ElasticSearchConstants';
+import { LATEST_EC_VERSION } from '@src/coreform/elasticcache/constant';
 import { FormType } from '@components/manifest/ShowSelectedForm';
 
 // lodash like path for resources in the manifest object
@@ -669,6 +670,7 @@ export const addElasticCache = (manifest: any) => {
   return setIn(manifest, path.elasticCache, {
     instanceName: `${manifest.environment}-${manifest.name}`,
     awsInstanceClass: 'cache.t4g.micro',
+    engineVersion: LATEST_EC_VERSION,
     multiAZ: multiAZProdState,
     elasticCacheAlertThresholds: {
       cpuUtilization: 75,