INFRA-3971 | Harinder | Updating validation and adding fields for AWS Custom resource types

src/components/just-in-time-access/JustInTimeAccessPage.tsx

@@ -66,18 +66,28 @@ const JustInTimeAccessPage = () => {
 
   const resourceTypeList = ['DB', 'KUBERNETES', 'AWS', 'AWS-CUSTOM', 'GOCD'];
   let resourceActionList = Array<string>();
-  const k8sResourceActionList = ['read', 'write', 'admin'];
-  const dbResourceActionList = ['read', 'write', 'master', 'manager'];
-  const awsResourceActionList = ['App-Developers', 'App-Admin', 'App-Owner'];
-  const awsCustomResourceActionList = ['S3', 'DYNAMODB', 'RDS', 'DOCDB', 'ELASTICACHE', 'CUSTOM'];
-  const gocdResourceActionList = ['deploy-prod', 'prod-resource', 'hotfix'];
+  let awsCustomResourceTypeList = Array<string>();
+  const KUBERNETES_ACTION_LIST = ['read', 'write', 'admin'];
+  const DB_ACTION_LIST = ['read', 'write', 'master', 'manager'];
+  const AWS_ACTION_LIST = ['App-Developers', 'App-Admin', 'App-Owner'];
+  const AWS_CUSTOM_RESOURCE_TYPE = ['S3', 'DYNAMODB', 'RDS', 'DOCDB', 'ELASTICACHE'];
+  const GOCD_ACTION_LIST = ['deploy-prod', 'prod-resource', 'hotfix'];
   const resourceActionMap = {
-    KUBERNETES: k8sResourceActionList,
-    DB: dbResourceActionList,
-    AWS: awsResourceActionList,
-    'AWS-CUSTOM': awsCustomResourceActionList,
-    GOCD: gocdResourceActionList,
+    KUBERNETES: KUBERNETES_ACTION_LIST,
+    DB: DB_ACTION_LIST,
+    AWS: AWS_ACTION_LIST,
+    'AWS-CUSTOM': ['read'],
+    GOCD: GOCD_ACTION_LIST,
   };
+  const customResourceActionListMap = {
+    S3: ['read', 'write'],
+    DYNAMODB: ['read'],
+    RDS: ['read', 'write'],
+    DOCDB: ['read', 'write'],
+    ELASTICACHE: ['read'],
+    // CUSTOM: ['read', 'write', 'custom'],
+  };
+
   const teamList = useSelector((state: RootState) => state.initial.teamList);
 
   const fetchAllVerticals = () => {
@@ -105,12 +115,32 @@ const JustInTimeAccessPage = () => {
     fetchAllEnvironments();
   }, []);
 
-  const DropDownList: React.FC<DropDownListProps> = ({ label, fieldName, list }) => {
+  const isResourceTypeAWSCustom = () => {
+    const { values }: { values: any } = useFormikContext();
+    console.log('values', values);
+    console.log('values', getIn(values, 'resourceType'));
+    if (getIn(values, 'resourceType') === 'AWS-CUSTOM') {
+      console.log('values', values['resourceType']);
+      return getIn(values, 'resourceType') === 'AWS-CUSTOM';
+    }
+    return false;
+  };
+
+  // const getCustomResourceActionList = () => {
+  //   const { values }: { values: any } = useFormikContext();
+  //   return customResourceActionListMap[getIn(values, 'awsResourceType')];
+  // }
+
+  const DropDownList: React.FC<DropDownListProps> = ({ label, fieldName, list, style }) => {
     const classes = useStyles();
     const { values }: { values: any } = useFormikContext();
     const resourceTypeField = 'resourceType';
 
     if (typeof getIn(values, resourceTypeField) !== undefined && values[resourceTypeField] !== '') {
+      if (values[resourceTypeField] === 'AWS-CUSTOM') {
+        resourceActionList = customResourceActionListMap[values['awsResourceType']];
+        awsCustomResourceTypeList = AWS_CUSTOM_RESOURCE_TYPE;
+      }
       resourceActionList = resourceActionMap[values[resourceTypeField]];
     }
 
@@ -124,7 +154,7 @@ const JustInTimeAccessPage = () => {
           getOptionLabel={(option: string) => (_.isString(option) ? option : '')}
           options={list}
           autoSelect
-          className={classes.field}
+          className={style}
         />
       </FormControl>
     );
@@ -140,7 +170,7 @@ const JustInTimeAccessPage = () => {
               enableReinitialize
               initialValues={jit}
               validateOnChange={true}
-              // validationSchema={justInTimeAccessValidationSchema}
+              validationSchema={justInTimeAccessValidationSchema}
               onSubmit={values => {
                 values.grantAt = new Date(values.grantAt).getTime();
                 submitJustInTimeAccessRequest(values);
@@ -159,26 +189,44 @@ const JustInTimeAccessPage = () => {
                         label="Resource Owning Team"
                         fieldName="team"
                         list={teamList.map((team: any) => team.name)}
+                        style={classes.field}
                       />
                       <DropDownList
                         label="Vertical"
                         fieldName="vertical"
                         list={verticalList.filter((vertical: string) => vertical !== 'ALL')}
+                        style={classes.field}
                       />
                       <DropDownList
                         label="Environment"
                         fieldName="environment"
                         list={environmentList}
+                        style={classes.field}
                       />
                       <DropDownList
                         label="Resource Type"
                         fieldName="resourceType"
                         list={resourceTypeList}
+                        style={classes.field}
+                      />
+                      <DropDownList
+                        label="AWS Resource Type"
+                        fieldName="awsResourceType"
+                        list={awsCustomResourceTypeList}
+                        style={classes.field}
                       />
                       <DropDownList
                         label="Resource Action"
                         fieldName="resourceAction"
                         list={resourceActionList}
+                        style={classes.field}
+                      />
+                      <FormikTextField
+                        multiline
+                        label="AWS Resource Names"
+                        className={classes.field}
+                        name="awsResourceNames"
+                        id="awsResourceNames"
                       />
                       <FormikTextField
                         multiline

src/components/just-in-time-access/JustInTimeAccessValidation.tsx

@@ -1,28 +1,15 @@
 import * as yup from 'yup';
 
 export const justInTimeAccessValidationSchema = yup.object({
-  endpoints: yup.string().required('is Required'),
-  routeRegex: yup
-    .string()
+  team: yup.string().required('is Required'),
+  vertical: yup.string().required('is Required'),
+  environment: yup.string().required('is Required'),
+  resourceType: yup.string().required('is Required'),
+  resourceAction: yup.string().required('is Required'),
+  justification: yup.string().required('is Required'),
+  grantWindow: yup
+    .number()
     .required('is Required')
-    .test('test', '* is not accepted as valid regex, use .* instead', value => {
-      return value !== '*';
-    }),
-  methods: yup.array().min(1).required('is Required'),
-  validTill: yup
-    .string()
-    .test(
-      'test',
-      'Select a time greater than the current time,also, time selected should not be more than 30 days',
-      value => {
-        const validTillDays = 30;
-        return (
-          value !== undefined &&
-          Date.parse(value) - Date.now() <= validTillDays * 24 * 60 * 60 * 1000 &&
-          Date.parse(value) - Date.now() > 0
-        );
-      },
-    )
-    .default(undefined),
-  description: yup.string().required('is Required'),
+    .positive('should be positive')
+    .integer('should be integer'),
 });

src/components/just-in-time-access/structs.tsx

@@ -2,6 +2,7 @@ export interface DropDownListProps {
   label: string;
   fieldName: string;
   list: any[];
+  style: string;
 }
 
 export type JitRequest = {
@@ -9,9 +10,9 @@ export type JitRequest = {
   vertical: string;
   environment: string;
   resourceType: string;
+  resourceAction: string;
   awsResourceType: string;
   awsResourceNames: Array<string>;
-  resourceAction: string;
   justification: string;
   grantWindow: number;
   grantAt: number;

src/components/just-in-time-access/styles.tsx

@@ -6,6 +6,10 @@ export const useStyles = makeStyles(theme => ({
     marginLeft: theme.spacing(2),
     marginBottom: theme.spacing(2),
   },
+  formContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
   buttonContainer: {
     display: 'flex',
     justifyContent: 'center',
@@ -23,7 +27,7 @@ export const useStyles = makeStyles(theme => ({
     marginTop: 60,
   },
   bigCard: {
-    width: 350,
+    width: 400,
     height: 800,
     border: '5px solid #E8E8E8',
     padding: 5,
@@ -48,9 +52,18 @@ export const useStyles = makeStyles(theme => ({
   },
   field: {
     marginTop: 20,
-    width: 300,
+    width: 350,
     padding: 5,
   },
+  leftField: {
+    marginTop: 20,
+    width: 170,
+    marginRight: 10,
+  },
+  rightField: {
+    marginTop: 20,
+    width: 170,
+  },
   gridRow: {
     width: 1600,
     display: 'flex',