INFRA-1317 | Ashvin | Make fields immutable if they are deployed

package.json

@@ -71,6 +71,7 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "eslint": "^6.7.2",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-react-hooks": "^4.0.4",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "html-webpack-plugin": "^3.2.0",

src/coreform/DeploymentBasicTab.tsx

@@ -61,6 +61,7 @@ const MarginedFormControlLabel = styled(FormControlLabel)({
 const ClusterCard = () => {
   const classes = useStyles();
   const { values }: { values: any } = useFormikContext();
+  const isDeployed: boolean = values?.deployment?.isDeployed
   return (
     <CardLayout heading="Kubernetes Cluster">
       <FormikTextField
@@ -69,6 +70,7 @@ const ClusterCard = () => {
         label="Cluster"
         fullWidth
         name="deployment.cluster"
+        disabled={isDeployed}
       >
         {toMenuItems(_m.clusters)}
       </FormikTextField>
@@ -78,6 +80,7 @@ const ClusterCard = () => {
         label="Namespace"
         fullWidth
         name="deployment.namespace"
+        disabled={isDeployed}
       >
         {toMenuItems(_m.getProp( _m.teamNamespace, [values?.team.name, values?.environment]) || _m.namespaces[values?.environment] || [])}
       </FormikTextField>

src/coreform/FormUtil.tsx

@@ -53,4 +53,4 @@ export function TabPanel(props: TabPanelProps) {
       )}
     </div>
   );
-}
+}

src/coreform/LoadBalancerBasicTab.tsx

@@ -9,9 +9,8 @@ import FormikMultiSelect from '../components/common/FormikMultiSelect';
 import NotConfigured from './NotConfiguredPanel';
 import { useFormikContext } from 'formik';
 import { FormikCheckbox } from '../components/common/FormikCheckbox';
-import {FormikSelect} from "../components/common/FormikSelect";
 import { useState } from 'react';
-import { connect, getIn } from 'formik';
+import { getIn } from 'formik';
 
 const loadBalancerMap = {
     "prod": ["elb", "alb", "sharedAlbAcrossNamespace", "kubeLb"],
@@ -60,7 +59,7 @@ const LoadBalancerBasicTab = () => {
     const lbStateValue = (typeof getIn(values, `deployment.loadBalancers`) !== "undefined") ? getIn(values, `deployment.loadBalancers`) : [];
     const lbMapReduce = lbStateValue.map(x=> x.type);
     const [lbType, setLbType] = useState(lbMapReduce)
-    const componenetMap = (i) => {
+    const componentMap = (i) => {
         return {
             accessPolicy: lbType[i] == "sharedAlbAcrossNamespace",
             securityGroup: lbType[i] == "sharedAlbAcrossNamespace",
@@ -68,7 +67,7 @@ const LoadBalancerBasicTab = () => {
             tls: lbType[i] == "alb",
         }
     }
-    
+
     return (
         <NotConfigured
             name="LoadBalancers"
@@ -76,30 +75,60 @@ const LoadBalancerBasicTab = () => {
             addAction={() => setValues(_m.addLoadBalancers(values))}
             removeAction={() => setValues(_m.removeLoadBalancers(values))} >
             <Grid container direction="column" justify="space-between" alignItems="flex-start" className={classes.root}>
-                <FormikCardList name="deployment.loadBalancers" newItem={_m.newLoadBalancer} newItemLabel="Add LoadBalancer">
-                    {(i,setFieldValue) => (<>
-                        <FormikTextField className={classes.field} label="Endpoint" name={`deployment.loadBalancers.${i}.endpoint`} />
-                        <FormikTextField className={classes.field} label="Idle Timeout" type="number" name={`deployment.loadBalancers.${i}.idleTimeout`} />
-                        <FormikTextField onChange={(e)=>{lbType[i]=e.target.value
+                <FormikCardList name="deployment.loadBalancers"
+                                newItem={_m.newLoadBalancer}
+                                newItemLabel="Add LoadBalancer">
+                    {(i, setFieldValue) => <>
+                        <FormikTextField
+                            className={classes.field}
+                            label="Endpoint"
+                            name={`deployment.loadBalancers.${i}.endpoint`}
+                            disabled={lbStateValue[i].isDeployed}
+                        />
+                        <FormikTextField className={classes.field} label="Idle Timeout" type="number" name={`deployment.loadBalancers.${i}.idleTimeout`}/>
+                        <FormikTextField
+                            onChange={(e) => {
+                                lbType[i] = e.target.value
                                 setFieldValue(`deployment.loadBalancers.${i}.type`, e.target.value, true);
-                                setFieldValue(`deployment.loadBalancers.${i}.accessPolicies`, sharedAlbAcrossNamespaceAccessPolicyMap[values['environment']], true); }}
-                                select value={lbType[i]} className={classes.field} label="Type" name={`deployment.loadBalancers.${i}.type`} >
+                                setFieldValue(
+                                    `deployment.loadBalancers.${i}.accessPolicies`,
+                                    sharedAlbAcrossNamespaceAccessPolicyMap[values['environment']],
+                                    true
+                                );
+                            }}
+                            select
+                            value={lbType[i]}
+                            className={classes.field}
+                            label="Type"
+                            name={`deployment.loadBalancers.${i}.type`}
+                            disabled={lbStateValue[i].isDeployed}
+                        >
                             {toMenuItems(loadBalancerMap[values['environment']])}
                         </FormikTextField>
-                        {lbType[i]=="sharedAlbAcrossNamespace" && <FormikTextField select className={classes.field} label="GroupName" name={`deployment.loadBalancers.${i}.groupName`} >
+                        {lbType[i] == "sharedAlbAcrossNamespace" &&
+                            <FormikTextField select className={classes.field} label="GroupName"
+                                             name={`deployment.loadBalancers.${i}.groupName`}>
                                 {toMenuItems(sharedAlbEnvMap[values['environment']])}
                             </FormikTextField>}
-                        <FormikMultiSelect disabled={componenetMap(i)["accessPolicy"]} label="Access policy" name={`deployment.loadBalancers.${i}.accessPolicies`}>
+                        <FormikMultiSelect disabled={componentMap(i)["accessPolicy"]} label="Access policy"
+                                           name={`deployment.loadBalancers.${i}.accessPolicies`}>
                             {toMenuItems(accessPolicies)}
                         </FormikMultiSelect>
-                        <FormikTextField className={classes.field} label="ALB Name" name={`deployment.loadBalancers.${i}.name`} />
-                        <FormikMultiSelect disabled={componenetMap(i)["securityGroup"]} label="Security Groups" name={`deployment.loadBalancers.${i}.extraSecurityGroups`}>
+                        <FormikTextField className={classes.field} label="ALB Name"
+                                         name={`deployment.loadBalancers.${i}.name`}/>
+                        <FormikMultiSelect disabled={componentMap(i)["securityGroup"]} label="Security Groups"
+                                           name={`deployment.loadBalancers.${i}.extraSecurityGroups`}>
                             {toMenuItems(securityGroupList)}
                         </FormikMultiSelect>
-                        <FormikTextField className={classes.field} label="WebACL" name={`deployment.loadBalancers.${i}.webAcl`} />
-                        <FormControlLabel disabled={componenetMap(i)["stickySession"]} control={<FormikCheckbox name={`deployment.loadBalancers.${i}.stickiness`} />} label="Sticky Session" />
-                        <FormControlLabel disabled={componenetMap(i)["tls"]} control={<FormikCheckbox name={`deployment.loadBalancers.${i}.tls-1-1`} />} label="TLS1.1(Deprecated)" />
-                    </>)}
+                        <FormikTextField className={classes.field} label="WebACL"
+                                         name={`deployment.loadBalancers.${i}.webAcl`}/>
+                        <FormControlLabel disabled={componentMap(i)["stickySession"]}
+                                          control={<FormikCheckbox name={`deployment.loadBalancers.${i}.stickiness`}/>}
+                                          label="Sticky Session"/>
+                        <FormControlLabel disabled={componentMap(i)["tls"]}
+                                          control={<FormikCheckbox name={`deployment.loadBalancers.${i}.tls-1-1`}/>}
+                                          label="TLS1.1(Deprecated)"/>
+                    </>}
                 </FormikCardList>
             </Grid>
         </NotConfigured>

src/models/Manifest.ts

@@ -162,7 +162,8 @@ export const addDeployment = (manifest: any) => {
             custom_metrics: [],
             minReplicas: 2,
             maxReplicas: 2
-        }
+        },
+        isDeployed: false,
     })
 }
 
@@ -351,7 +352,7 @@ export const addElasticCache = (manifest: any) => {
 export const addDeploymentStrategy = (manifest: any) => {
     manifest  = setIn(manifest, path.deploymentController, defaultDeploymentController)
     return setIn(manifest, path.deploymentStrategy, defaultDeploymentStrategy)
-    
+
 }
 
 const removeDeploymentStrategyHelper = (manifest: any) => {
@@ -385,7 +386,8 @@ export const newLoadBalancer = () => {
         idleTimeout: 60,
         type: 'sharedAlb',
         name: '',
-        extraSecurityGroups: []
+        extraSecurityGroups: [],
+        isDeployed: false,
     }
 }