From 430b309879459c6238c325dbd755d3995ed1e708 Mon Sep 17 00:00:00 2001
From: ANIL SINGLA <anil.singla@wipro.com>
Date: Wed, 10 Jan 2024 17:03:26 +0530
Subject: [PATCH] cleanups, indetations and adding key properties and item
 properties (#518)

---
 .../AssessmentAnalytics/index.tsx             | 162 ++++++---
 .../AssessmentReport/index.tsx                | 127 ++++---
 src/pages/BesVersionHistory/index.tsx         | 339 ++++++++++--------
 src/routes.tsx                                |   1 +
 4 files changed, 380 insertions(+), 249 deletions(-)

diff --git a/src/pages/BesVersionHistory/AssessmentAnalytics/index.tsx b/src/pages/BesVersionHistory/AssessmentAnalytics/index.tsx
index 5b4f8f2e..4e8158b7 100644
--- a/src/pages/BesVersionHistory/AssessmentAnalytics/index.tsx
+++ b/src/pages/BesVersionHistory/AssessmentAnalytics/index.tsx
@@ -75,15 +75,15 @@ const FetchCritical = ({ cqRiskData, sqRiskData }: any) => {
         tmpres = sqrisk.map(function(issue:any, innerindex:number){
           if(issue.severity === "BLOCKER" || issue.severity === "CRITICAL"){
             foundCrtical = true;
-            let keyval1: string = "sqriskdata" + {innerindex};
-            let keyval2: string = "innersqriskdata" + {innerindex};
-            let keyval3: string = "sq" + {innerindex};
             return(<>
-              <MKTypography key={keyval1} variant="h6" color="inherit" style={{fontSize:"calc(0.3rem + 0.5vw)"}}>
+              <MKTypography key={`SQRISKDATATYPO1${index}${innerindex}`} 
+                            variant="h6" 
+                            color="inherit" 
+                            style={{fontSize:"calc(0.3rem + 0.5vw)"}}>
                                {issue.rule} : 
-                               <MKTypography key={keyval2} variant="body1" color="inherit" style={{fontSize:"calc(0.3rem + 0.5vw)"}}>
-                                  {issue.message}
-                               </MKTypography>
+                <MKTypography key={`SQRISKDATATYPO2${index}${innerindex}`} variant="body1" color="inherit" style={{fontSize:"calc(0.3rem + 0.5vw)"}}>
+                  {issue.message}
+                </MKTypography>
               </MKTypography>  
               </>)
           }else{
@@ -104,8 +104,16 @@ const FetchCritical = ({ cqRiskData, sqRiskData }: any) => {
         foundCrtical = true;
         return ( 
           <>
-            <MKTypography variant="h6" color="inherit" style={{fontSize:"calc(0.3rem + 0.5vw)"}}>
-                          {vul.rule.name} : <Link to={vul.html_url} style={{fontSize:"calc(0.2rem + 0.4vw)"}}>{vul.rule.name}</Link>
+            <MKTypography key={`CQRISKDATATYPO1${index}`} 
+                          variant="h6" 
+                          color="inherit" 
+                          style={{fontSize:"calc(0.3rem + 0.5vw)"}}>
+              {vul.rule.name} : 
+              <Link key={`CQRISKDATALINK1${index}`} 
+                    to={vul.html_url} 
+                    style={{fontSize:"calc(0.2rem + 0.4vw)"}}>
+                {vul.rule.name}
+              </Link>
             </MKTypography>    
           </>
         )
@@ -124,20 +132,26 @@ const FetchCritical = ({ cqRiskData, sqRiskData }: any) => {
       return(<><Grid>{sqres}</Grid></>)
     }else{
       return(<>
-         <MKTypography variant="h6" color="inherit" style={{fontSize:"calc(0.3rem + 0.5vw)", 
-                                                          justifyContent: "center",
-                                                          display: "flex"
-                                                          }}>
+         <MKTypography  key="CQNODATA"
+                        variant="h6" 
+                        color="inherit" 
+                        style={{fontSize:"calc(0.3rem + 0.5vw)", 
+                                justifyContent: "center",
+                                display: "flex"
+                              }}>
             No Data Available
         </MKTypography>
       </>)
     }   
   }else{
     return(<>
-      <MKTypography variant="h6" color="inherit" style={{fontSize:"calc(0.3rem + 0.5vw)",
-                                                         justifyContent: "center",
-                                                         display: "flex"
-                                                          }}>
+      <MKTypography key="NOCRITICALVUL" 
+                    variant="h6" 
+                    color="inherit" 
+                    style={{fontSize:"calc(0.3rem + 0.5vw)",
+                            justifyContent: "center",
+                            display: "flex"
+                          }}>
          No critical issues found
       </MKTypography>  
     </>)
@@ -194,8 +208,13 @@ const FetchData = ({version, name, report, versionDetails, masterData}: any) =>
     if(severityData.length !== 0){
     return (
       <>
-        <Grid item xs={6} md={6} lg={6}>
-          <MKBox mb={6}>
+        <Grid key="RISKPOSTUREGRID1"
+              item 
+              xs={6} 
+              md={6} 
+              lg={6}>
+          <MKBox key="RISKPOSTUREMKBOX1"
+                 mb={6}>
                 <SeverityLevels
                   chartColors={[
                     "#FFBB33",
@@ -211,16 +230,28 @@ const FetchData = ({version, name, report, versionDetails, masterData}: any) =>
     );
     }else{
       return(
-      <Grid item xs={6} md={6} lg={6}>
-          <MKBox mb={6}>
-              <Card  style={{height: "70%", width: "200%"}}>
-                  <MKBox>
-                    <MKBox pt={1} pb={1} px={1} > 
-                    <StyledChartWrapper dir="ltr" >
-                       <MKTypography variant="h6" color="inherit" style={{fontSize:"calc(0.3rem + 0.5vw)",
-                                                                          justifyContent: "center",
-                                                                          display: "flex"
-                                                                         }}>
+      <Grid key="RISKPOSTUREGRID2"
+            item 
+            xs={6} 
+            md={6} 
+            lg={6}>
+          <MKBox key="RISKPOSTUREMKBOX2"
+                  mb={6}>
+              <Card  key="RISKPOSTURECARD1"
+                     style={{height: "70%", width: "200%"}}>
+                  <MKBox key="RISKPOSTUREMKBOX3">
+                    <MKBox key="RISKPOSTUREMKBOX4"
+                           pt={1} 
+                           pb={1} 
+                           px={1} > 
+                    <StyledChartWrapper key="RISKPOSTURESC1" dir="ltr" >
+                       <MKTypography key="RISKPOSTURETYPO2" 
+                                     variant="h6" 
+                                     color="inherit" 
+                                     style={{fontSize:"calc(0.3rem + 0.5vw)",
+                                             justifyContent: "center",
+                                             display: "flex"
+                                           }}>
                            No Data Available
                         </MKTypography>
                     </StyledChartWrapper>  
@@ -234,11 +265,25 @@ const FetchData = ({version, name, report, versionDetails, masterData}: any) =>
    }else if(report === "Critical Issues"){
     return (
     <>
-    <Grid item xs={12} md={12} lg={12} style={{height: "100%"}}>
-      <MKBox mb={6} style={{height: "100%"}}>
-        <Card  style={{height: "100%", width: "100%"}} sx={{ overflowY: "scroll"}}>
-          <MKBox style={{height: "100%"}}>
-              <MKBox pt={1} pb={1} px={1} style={{height: "100%" }}> 
+    <Grid key="CIGRID1"
+          item 
+          xs={12} 
+          md={12} 
+          lg={12} 
+          style={{height: "100%"}}>
+      <MKBox key="CIMKBOX1"
+             mb={6} 
+             style={{height: "100%"}}>
+        <Card key="CICARD1" 
+              style={{height: "100%", width: "100%"}} 
+              sx={{ overflowY: "scroll"}}>
+          <MKBox key="CIMKBOX2" 
+                 style={{height: "100%"}}>
+              <MKBox key="CIMKBOX3"
+                     pt={1} 
+                     pb={1} 
+                     px={1} 
+                     style={{height: "100%" }}> 
                  <FetchCritical
                     cqRiskData={cqRiskData}
                     sqRiskData={sqRiskData}
@@ -253,8 +298,13 @@ const FetchData = ({version, name, report, versionDetails, masterData}: any) =>
    }else if(report === "Vulnerability History"){
     return (
       <>
-          <Grid item xs={12} md={12} lg={12}>
-            <MKBox mb={6}>
+          <Grid key="VHGRID1"
+                item 
+                xs={12} 
+                md={12} 
+                lg={12}>
+            <MKBox key="VHMKBOX1"
+                   mb={6}>
               <VulHistory
                   vuldata={vulHistoryData}
               />  
@@ -271,20 +321,20 @@ const GetHeadings = ({ receivedValue }: any) => {
   //const [fieldInfo, setfieldInfo]: any = React.useState({});
     if(receivedValue === "Risk Posture"){
        return(<> {" "} Risk Posture
-                  <Icon title="Percentage of low, high, critical issues found" sx={{fontSize: 'calc(0.3rem + 0.4vw) !important'}}>
+                  <Icon key="RISKPICON" title="Percentage of low, high, critical issues found" sx={{fontSize: 'calc(0.3rem + 0.4vw) !important'}}>
                     info
                   </Icon>
               </>);
     }else if(receivedValue === "Critical Issues"){
       return(<> {" "} Top Vulnerabilities
-                <Icon title="Top vulnerabilities found." sx={{fontSize: 'calc(0.3rem + 0.4vw) !important'}}>
+                <Icon key="CIICON" title="Top vulnerabilities found." sx={{fontSize: 'calc(0.3rem + 0.4vw) !important'}}>
                   info
                 </Icon>
               </>);
       
     }else if(receivedValue === "Vulnerability History"){
       return(<> {" "} CVE History
-                <Icon title="Year wise graph of vulnerabilities found" sx={{fontSize: 'calc(0.3rem + 0.4vw) !important'}}>
+                <Icon key="VHICON" title="Year wise graph of vulnerabilities found" sx={{fontSize: 'calc(0.3rem + 0.4vw) !important'}}>
                   info
                 </Icon>
               </>);
@@ -301,19 +351,37 @@ function AssessmentAnalytics({ title, name, version, versionDetails, masterData,
     "Vulnerability History"
   ];
   return (
-    <Card sx={{ height: "100%" }} >
-      <Grid container p={2} justifyContent="space-between" >
+    <Card key="AAMAINCARD" 
+          sx={{ height: "100%" }} >
+      <Grid key="AAMAINGRID"
+            container 
+            p={2} 
+            justifyContent="space-between" >
         {report.map((value, index) => {
             return (
               <>
-              <Grid alignItems="center" p={1} xs={4} justifyContent="center" style={{ borderRadius: 10, height: "370px", fontSize: "calc(0.5rem + 0.5vw)"}} >
-                <Grid style={{display: "flex", 
+              <Grid item
+                    key={`AAMAINMAPGRID1${index}`} 
+                    alignItems="center" 
+                    p={1} 
+                    xs={4} 
+                    justifyContent="center" 
+                    style={{ borderRadius: 10, 
+                             height: "370px", 
+                             fontSize: "calc(0.5rem + 0.5vw)"}} >
+                <Grid key={`AAMAINMAPGRID2${index}`}
+                      style={{display: "flex", 
                       justifyContent: "center"}}>
-                <GetHeadings receivedValue={value}>
-                </GetHeadings>
+                  <GetHeadings receivedValue={value}>
+                  </GetHeadings>
                 </Grid>  
-                <Grid style={{height: "92%"}}>
-                  <FetchData version={version} name={name} report={value} versionDetails={versionDetails} masterData={masterData}/>
+                <Grid key={`AAMAINMAPGRID3${index}`}
+                      style={{height: "92%"}}>
+                  <FetchData version={version} 
+                             name={name} 
+                             report={value} 
+                             versionDetails={versionDetails} 
+                             masterData={masterData}/>
                 </Grid>
               </Grid>
               </>
diff --git a/src/pages/BesVersionHistory/AssessmentReport/index.tsx b/src/pages/BesVersionHistory/AssessmentReport/index.tsx
index 4f787a06..be435ef9 100644
--- a/src/pages/BesVersionHistory/AssessmentReport/index.tsx
+++ b/src/pages/BesVersionHistory/AssessmentReport/index.tsx
@@ -116,7 +116,7 @@ const FetchCS = ({ data }: any) => {
                       <b key="BOLDCS5">Age </b>: {data.created_since} months
                   </MKTypography>
                 </Grid>
-                <Grid key={`GridCS2`}>
+                <Grid key={`GridCS22`}>
                   <MKTypography variant="body1"
                                 key={`MKTypoCS2`} 
                                 color="inherit" 
@@ -196,7 +196,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                           marginLeft: "1.5rem"}}>
               <Grid container
                     key={`GRIDSASTCQ2`}>
-                  <Grid xs={6}
+                  <Grid item
+                        xs={6}
                         key={`GRIDSASTCQ3`}>
                     <MKTypography variant="body1"
                                 key={`MKTYPOSASTCQ1`} 
@@ -207,7 +208,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                       <b key="BOLDCQ1">Critical : </b>{critical}
                     </MKTypography>
                   </Grid>
-                  <Grid key={`GRIDSASTCQ4`}
+                  <Grid item
+                        key={`GRIDSASTCQ4`}
                         xs={6}>
                     <MKTypography variant="body1"
                                   key={`MKTypoSASTCQ2`} 
@@ -221,7 +223,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                 </Grid>
                 <Grid key={`GRIDSASTCQ5`}
                       container>
-                  <Grid key={`GRIDSASTCQ6`}
+                  <Grid item
+                        key={`GRIDSASTCQ6`}
                         xs={6}>
                     <MKTypography variant="body1"
                                   key={`MKTypoSASTCQ3`} 
@@ -232,8 +235,9 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                       <b key="BOLDCQ3">Medium : </b>{medium}
                     </MKTypography>
                   </Grid>
-                  <Grid key={`GRIDSASTCQ7`}
-                         xs={6}>
+                  <Grid item
+                        key={`GRIDSASTCQ7`}
+                        xs={6}>
                     <MKTypography key={`MKTypoSASTCQ4`}
                                   variant="body1" 
                                   color="inherit" 
@@ -273,7 +277,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                           marginLeft: "1.5rem"}}>
               <Grid key={`GRIDSASTSQ2`}
                     container>
-                  <Grid key={`GRIDSASTSQ3`}
+                  <Grid item
+                        key={`GRIDSASTSQ3`}
                         xs={6}>
                     <MKTypography variant="body1" 
                                   color="inherit" 
@@ -284,7 +289,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                       <b key="BOLDSQ1"> Critical : </b> {sqblocker}
                     </MKTypography>
                   </Grid>
-                  <Grid key={`GRIDSASTSQ4`}
+                  <Grid item
+                        key={`GRIDSASTSQ4`}
                         xs={6}>
                     <MKTypography variant="body1"
                                   key={`MKTypoSASTSQ2`} 
@@ -298,7 +304,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                 </Grid>
                 <Grid key={`GRIDSASTSQ5}`}
                       container>
-                  <Grid key={`GRIDSASTSQ6`}
+                  <Grid item
+                        key={`GRIDSASTSQ6`}
                         xs={6}>
                     <MKTypography variant="body1"
                                   key={`MKTypoSASTSQ3`} 
@@ -309,7 +316,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                       <b key="BOLDSQ3">Medium : </b> {sqmajor}
                     </MKTypography>
                   </Grid>
-                  <Grid key={`GRIDSASTSQ7`}
+                  <Grid item
+                        key={`GRIDSASTSQ7`}
                         xs={6}>
                     <MKTypography variant="body1"
                                   key={`MKTypoSASTSQ4`}
@@ -365,12 +373,14 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                 style={{minWidth: "calc(10rem + 5vw)"}}>
            <Grid  key={`GRIDSASTCQSQ2`}
                   container>
-              <Grid key={`GRIDSASTCQSQ3`}
+              <Grid item
+                    key={`GRIDSASTCQSQ3`}
                     xs={6}>
                 <Grid key={`GRIDSASTCQSQ4`}>
                   <Grid key={`GRIDSASTCQSQ5`}
                         container >
-                      <Grid key={`GRIDSASTCQSQ6`} 
+                      <Grid item
+                            key={`GRIDSASTCQSQ6`} 
                             xs={12} 
                             style={{justifyContent: "center", 
                                     display: "flex"}}>
@@ -381,7 +391,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                             <b key="BOLDCQSQ1">Critical </b>: {cqcritical}
                         </MKTypography>
                       </Grid>
-                      <Grid key={`GRIDSASTCQSQ7`} 
+                      <Grid item
+                            key={`GRIDSASTCQSQ7`} 
                             xs={12} 
                             style={{justifyContent: "center", 
                                     display: "flex"}}>
@@ -392,7 +403,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                              <b key="BOLDCQSQ2">High </b>: {cqhigh}
                          </MKTypography>
                       </Grid>
-                      <Grid key={`GRIDSASTCQSQ8`}
+                      <Grid item
+                            key={`GRIDSASTCQSQ8`}
                             xs={12} 
                             style={{justifyContent: "center", 
                                     display: "flex"}}>
@@ -403,7 +415,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                             <b key="BOLDCQSQ3">Medium </b>: {cqmedium}
                           </MKTypography>
                       </Grid>
-                      <Grid key={`GRIDSASTCQSQ9`}
+                      <Grid item
+                            key={`GRIDSASTCQSQ9`}
                             xs={12} 
                             style={{justifyContent: "center", 
                                     display: "flex"}}>
@@ -417,12 +430,14 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                   </Grid>
                 </Grid>
               </Grid>
-              <Grid key={`GRIDSASTCQSQ10`}
+              <Grid item
+                    key={`GRIDSASTCQSQ10`}
                     xs={6}>
                   <Grid key={`GRIDSASTCQSQ11`}>
                     <Grid key={`GRIDSASTCQSQ12`}
                           container>
-                      <Grid key={`GRIDSASTCQSQ13`}
+                      <Grid item
+                            key={`GRIDSASTCQSQ13`}
                             xs={12} 
                             style={{justifyContent: "center", 
                                     display: "flex"}}>
@@ -433,7 +448,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                              <b key="BOLDCQSQ5">Critical </b> : {sqblocker}
                          </MKTypography>
                       </Grid>
-                      <Grid key={`GRIDSASTCQSQ14`}
+                      <Grid item
+                            key={`GRIDSASTCQSQ14`}
                             xs={12} 
                             style={{justifyContent: "center", 
                                     display: "flex"}}>
@@ -444,7 +460,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                              <b key="BOLDCQSQ6">High</b> : {sqcritical}
                           </MKTypography>
                       </Grid>
-                      <Grid key={`GRIDSASTCQSQ15`}
+                      <Grid item
+                            key={`GRIDSASTCQSQ15`}
                             xs={12} 
                             style={{justifyContent: "center", 
                                     display: "flex"}}>
@@ -455,7 +472,8 @@ const FetchSAST = ({ cqData, sqData }: any) => {
                              <b key="BOLDCQSQ7">Medium</b> : {sqmajor}
                           </MKTypography>
                       </Grid>
-                      <Grid key={`GRIDSASTCQSQ16`}
+                      <Grid item
+                            key={`GRIDSASTCQSQ16`}
                             xs={12} 
                             style={{justifyContent: "center", 
                                     display: "flex"}}>
@@ -505,7 +523,8 @@ const FetchLicense = ({ data, uniq_lic, itemData }: any) => {
                 style={{minWidth: "200px"}}>
               <Grid key={`GRIDL2`}
                     container>
-                <Grid key={`GRIDL3`}
+                <Grid item
+                      key={`GRIDL3`}
                       xs={12}>
                 <MKTypography variant="body1"
                               key={`MKTypoL1`} 
@@ -518,7 +537,8 @@ const FetchLicense = ({ data, uniq_lic, itemData }: any) => {
                     <b key="BOLDL2">Project License </b>: {project_lcesnse}
                   </MKTypography>
                 </Grid>
-                <Grid key={`GRIDL4`}
+                <Grid item
+                      key={`GRIDL4`}
                       xs={12}>
                   <MKTypography variant="body1"
                                 key={`MKTypoL2`} 
@@ -531,7 +551,8 @@ const FetchLicense = ({ data, uniq_lic, itemData }: any) => {
                     <b key="BOLDL3">No. of Non License Files </b>: {non_lic_files}
                   </MKTypography>
                 </Grid>
-                <Grid key={`GRIDL5`}
+                <Grid item
+                      key={`GRIDL5`}
                       xs={12}>
                   <MKTypography variant="body1"
                                 key={`MKTypoL3`} 
@@ -581,7 +602,8 @@ const FetchSBOM = ({ data, masterData }: any) => {
 
   dis = tracked.map(function( td: string, index: number){
     return(<>
-              <Grid key={`GRIDSBOM${index}`}
+              <Grid item
+                    key={`GRIDSBOM${index}`}
                     xs={12}>
                 <MKTypography variant="body1"
                               key={`MKTypoSBOM${index}`} 
@@ -727,14 +749,15 @@ const GetAssessmentData = ({ version, name, report, itemData, masterData }: any)
                                        JSON.stringify(Object.values(sonarqubeData).length) === "0")) { 
        
     return (<>
-              <Typography variant="h6" 
+              <Typography variant="h6"
+                          key="SASCQTMAINHEADING" 
                           color="inherit" 
                           style={{fontSize: "calc(0.6rem + 0.5vw)",
                                   display: "flex", 
                                   justifyContent: "center"}}>
                   {codeQlData.length}
               </Typography>
-                <MKBox >
+                <MKBox key="MKBOXSASTCQMAINBODY">
                  <FetchSAST 
                      cqData={codeQlData}
                      sqData={sonarqubeData}
@@ -746,14 +769,15 @@ const GetAssessmentData = ({ version, name, report, itemData, masterData }: any)
                                              JSON.stringify(Object.values(codeQlData).length) === "0")) { 
       
     return (<>
-              <Typography variant="h6" 
+              <Typography variant="h6"
+                          key="SASSQTMAINHEADING"
                           color="inherit" 
                           style={{fontSize: "calc(0.6rem + 0.5vw)",
                                   display: "flex", 
                                   justifyContent: "center"}}>
                   {Object.values(sonarqubeData).length}
               </Typography>
-                <MKBox >
+                <MKBox key="MKBOXSASTSQMAINBODY">
                  <FetchSAST 
                      cqData={codeQlData}
                      sqData={sonarqubeData}
@@ -769,9 +793,15 @@ const GetAssessmentData = ({ version, name, report, itemData, masterData }: any)
     const sonarlength: number = Object.values(sonarqubeData).length;
     return(
       <>
-          <Grid container xs={12}>
-             <Grid xs={6}>
-                <Typography variant="h6" 
+          <Grid item
+                key="GRIDSASTCQSQMAIN1"
+                container 
+                xs={12}>
+             <Grid  item
+                    key="GRIDSASTCQSQMAIN2"
+                    xs={6}>
+                <Typography variant="h6"
+                            key="TYPOSASTCQSQMAIN1" 
                             color="inherit" 
                             style={{fontSize: "calc(0.6rem + 0.5vw)",
                                   justifyContent: "center",
@@ -779,8 +809,11 @@ const GetAssessmentData = ({ version, name, report, itemData, masterData }: any)
                   {codeqllength}
                 </Typography>
              </Grid>
-             <Grid xs={6}>
-                <Typography variant="h6" 
+             <Grid  item
+                    key="GRIDSASTCQSQMAIN3"
+                    xs={6}>
+                <Typography variant="h6"
+                            key="TYPOSASTCQSQMAIN2" 
                             color="inherit" 
                             style={{fontSize: "calc(0.6rem + 0.5vw)", 
                                   justifyContent: "center",
@@ -789,9 +822,10 @@ const GetAssessmentData = ({ version, name, report, itemData, masterData }: any)
                 </Typography>
              </Grid>
           </Grid>
-          <Grid container>
+          <Grid key="GRIDSASTCQSQMAIN4"
+                container>
             <Grid>
-              <MKBox >
+              <MKBox key="MKBOXSASTCQSQMAIN1">
                  <FetchSAST 
                      cqData={codeqldetails}
                      sqData={sonardetails}
@@ -824,17 +858,20 @@ const GetAssessmentData = ({ version, name, report, itemData, masterData }: any)
     }
     return( 
             <>
-              <Typography variant="h6" 
+              <Typography variant="h6"
+                          key="TYPOLICMAIN1" 
                           color="inherit" 
                           style={{fontSize: "calc(0.6rem + 0.5vw)"}}>
-                <Link to={myObject} 
+                <Link to={myObject}
+                      key="LINKLICMAIN1" 
                       style={{ fontSize: "calc(0.6rem + 0.5vw)",
                       display: "flex", 
                       justifyContent: "center"}}>
                   {uniqueLicenses.length}
                 </Link>
               </Typography>
-              <Grid style={{height: "100px",
+              <Grid key="GRIDLICMAIN1"
+                    style={{height: "100px",
                             borderRadius: "3px"
                             }} 
                             >
@@ -852,22 +889,25 @@ const GetAssessmentData = ({ version, name, report, itemData, masterData }: any)
 
   if (report === "Dependencies" && jsonDataLength !== 0) {
     return (<>
-             <Typography variant="h6" 
+             <Typography variant="h6"
+                         key="TYPOSBOMMAIN1" 
                          color="inherit" 
                          style={{fontSize: "calc(0.6rem + 0.5vw)"
                                }}> 
                 <Link to={myObject}
+                      key="LINKSBOMMAIN1"
                       style={{ fontSize: "calc(0.6rem + 0.5vw)",
                       display: "flex", 
                       justifyContent: "center"}}>
                   {jsonData.packages.length}
                 </Link> 
              </Typography>
-             <Grid style={{height: "100px",
-                           borderRadius: "3px"
+             <Grid  key="GRIDSBOMMAIN1"
+                    style={{height: "100px",
+                            borderRadius: "3px"
                           }} 
                           sx={{ overflowY: "scroll"}}>
-                <MKBox>
+                <MKBox key="MKBOXSBOMMAIN1">
                   <FetchSBOM 
                      data={jsonData.packages}
                      masterData={masterData}
@@ -879,7 +919,8 @@ const GetAssessmentData = ({ version, name, report, itemData, masterData }: any)
   }
   
   return (
-    <Typography variant="h6" 
+    <Typography variant="h6"
+                key="TYPOSBOMMAINBLANK1" 
                 color="inherit" 
                 style={{fontSize: "calc(0.6rem + 0.5vw)", display: "flex", 
                 justifyContent: "center"}}>
diff --git a/src/pages/BesVersionHistory/index.tsx b/src/pages/BesVersionHistory/index.tsx
index 2bf1b774..a6db6bcf 100644
--- a/src/pages/BesVersionHistory/index.tsx
+++ b/src/pages/BesVersionHistory/index.tsx
@@ -126,8 +126,12 @@ function BesVersionHistory() {
   return (
     <>
       <DefaultNavbar routes={routes} />
-      <MKBox pt={11} sx={{ mx: { xs: 2, lg: 3 } }}>
-        {data.map((item: any) => {
+      <MKBox key="TOPMKBOX"
+             pt={11} 
+             sx={{ mx: { xs: 2, 
+                         lg: 3 } 
+                }}>
+        {data.map((item: any, index: number) => {
           if (`:${item.name}` === besName) {
             let definedScore: string = "0";
             if(item.hasOwnProperty('score'))
@@ -138,71 +142,75 @@ function BesVersionHistory() {
             
             return (
               <>
-              <Card style={{marginTop: "-1.5rem"}}>
-                <Grid  
+              <Card key={`TOPCARD${index}`} 
+                    style={{marginTop: "-1.5rem"}}>
+                <Grid   key={`TOPGRID1${index}`}
                         container 
                         spacing={1} 
                         pl={4} 
                         style={{height: "5rem"}}>
-                  <Grid item 
+                  <Grid   key={`TOPGRID2${index}`}
+                          item 
                           xs={6} 
                           justifyContent="flex-start">
-                    <Grid  
-                        container 
-                        style={{height: "2.3rem"}}>
-                      <Grid item 
-                          xs={4} 
-                          justifyContent="flex-start">
-                        <MKBox  
-                             display="flex"  
-                             py={1} 
-                             pr={2}>
+                    <Grid  key={`TOPGRID3${index}`}
+                           container 
+                           style={{height: "2.3rem"}}>
+                      <Grid key={`TOPGRID4${index}`}
+                            item 
+                            xs={4} 
+                            justifyContent="flex-start">
+                        <MKBox  key={`TOPMKBOX1${index}`}
+                                display="flex"  
+                                py={1} 
+                                pr={2}>
                         <MKTypography
-                          variant="h6"
-                          fontWeight="bold"
-                          textTransform="capitalize"
-                          style={{fontSize: "calc(0.4rem + 0.5vw)"}}        
-                        >
+                                      key={`TOPTYPO1${index}`}
+                                      variant="h6"
+                                      fontWeight="bold"
+                                      textTransform="capitalize"
+                                      style={{fontSize: "calc(0.4rem + 0.5vw)"}}        
+                                      >
                           Project Name: &nbsp;
                         </MKTypography>
-                        <MKTypography
-                          variant="h6"
-                          fontWeight="regular"
-                          color="text"
-                          style={{fontSize: "calc(0.4rem + 0.5vw)"}}
-                        >
+                        <MKTypography  key={`TOPTYPO2${index}`}
+                                       variant="h6"
+                                       fontWeight="regular"
+                                       color="text"
+                                       style={{fontSize: "calc(0.4rem + 0.5vw)"}}
+                                      >
                           {item.name}
                         </MKTypography>
                       </MKBox>
                     </Grid>
-                    <Grid item 
+                    <Grid key={`TOPGRID5${index}`}
+                          item 
                           xs={4} 
                           justifyContent="flex-start">    
-                      <MKBox  
+                      <MKBox key={`TOPMKBOX2${index}`} 
                              display="flex" 
                              py={1} 
                              pr={2}>
-                        <MKTypography
-                          variant="h6"
-                          fontWeight="bold"
-                          textTransform="capitalize"
-                          style={{fontSize: "calc(0.4rem + 0.5vw)"}}
-                        >
+                        <MKTypography  key={`TOPTYPO3${index}`}                        
+                                       variant="h6"
+                                       fontWeight="bold"
+                                       textTransform="capitalize"
+                                       style={{fontSize: "calc(0.4rem + 0.5vw)"}}
+                                      >
                           Version: &nbsp;
                         </MKTypography>
 
-                        <Select
-                          key={"test1"}
-                          className={classes.select}
-                          value={selectedOption}
-                          onChange={handleOptionChange}
-                          style={{fontSize: "calc(0.4rem + 0.5vw)", 
-                                  height: '1.2rem', 
-                                  }}
-                        >
+                        <Select key={`TOPSELECT1${index}`}
+                                className={classes.select}
+                                value={selectedOption}
+                                onChange={handleOptionChange}
+                                style={{fontSize: "calc(0.4rem + 0.5vw)", 
+                                        height: '1.2rem', 
+                                      }}
+                                >
                           {
-                            versionSummary.map((option: any, index: any) => (
-                              <MenuItem key={index} value={option.version}>
+                            versionSummary.map((option: any, index1: any) => (
+                              <MenuItem key={`TOPMENUITEM${index}${index1}`} value={option.version}>
                                 {option.version} 
                               </MenuItem>
                             ))
@@ -210,136 +218,145 @@ function BesVersionHistory() {
                         </Select>
                       </MKBox>
                     </Grid>
-                    <Grid item 
+                    <Grid   key={`TOPGRID6${index}`}
+                            item 
                             xs={4} 
                             justifyContent="flex-start">
-                        <MKBox k 
-                              display="flex"
-                              py={1}
-                              pr={2}>
-                          <MKTypography
-                            variant="h6"
-                            fontWeight="bold"
-                            textTransform="capitalize"
-                            style={{fontSize: "calc(0.3rem + 0.5vw)"}}
-                          >
+                        <MKBox key={`TOPMKBOX3${index}`}
+                               display="flex"
+                               py={1}
+                               pr={2}>
+                          <MKTypography key={`TOPTYPO4${index}`}
+                                        variant="h6"
+                                        fontWeight="bold"
+                                        textTransform="capitalize"
+                                        style={{fontSize: "calc(0.3rem + 0.5vw)"}}
+                                        >
                             Score: &nbsp;
                           </MKTypography>
-                          <MKTypography
-                            variant="h6"
-                            fontWeight="regular"
-                            color="text"
-                            style={{fontSize: "calc(0.3rem + 0.5vw)"}}
-                          >
+                          <MKTypography key={`TOPTYPO5${index}`}
+                                        variant="h6"
+                                        fontWeight="regular"
+                                        color="text"
+                                        style={{fontSize: "calc(0.3rem + 0.5vw)"}}
+                                      >
                             {definedScore}
                           </MKTypography>
                         </MKBox>
                       </Grid>
                     </Grid>
-                    <Grid  
-                        container 
-                        style={{height: "2.3rem"}}>
-                      <Grid item 
-                          xs={4} 
-                          justifyContent="flex-start">
-                        <MKBox  
-                           display="flex">
-                      <MKTypography
-                            variant="h6"
-                            fontWeight="bold"
-                            textTransform="capitalize"
-                            style={{fontSize: "calc(0.3rem + 0.5vw)"}}
-                          >
+                    <Grid  key={`TOPGRID7${index}`}
+                           container 
+                           style={{height: "2.3rem"}}>
+                      <Grid key={`TOPGRID8${index}`}
+                            item 
+                            xs={4} 
+                            justifyContent="flex-start">
+                        <MKBox  key={`TOPMKBOX4${index}`}
+                                display="flex">
+                      <MKTypography key={`TOPTYPO7${index}`}
+                                    variant="h6"
+                                    fontWeight="bold"
+                                    textTransform="capitalize"
+                                    style={{fontSize: "calc(0.3rem + 0.5vw)"}}
+                                  >
                             BeS Tracking Id: &nbsp;
-                          </MKTypography>
-                          <MKTypography
-                            variant="h6"
-                            fontWeight="regular"
-                            color="text"
-                            style={{fontSize: "calc(0.3rem + 0.5vw)"}}
-                          >
+                      </MKTypography>
+                      <MKTypography key={`TOPTYPO8${index}`}
+                                    variant="h6"
+                                    fontWeight="regular"
+                                    color="text"
+                                    style={{fontSize: "calc(0.3rem + 0.5vw)"}}
+                                  >
                             {item.id}
-                          </MKTypography>
-                        </MKBox>
-                    </Grid>
-                    <Grid item 
-                          xs={4} 
-                          justifyContent="flex-start">    
-                      <MKBox  display="flex">
-                          <MKTypography
-                            variant="h6"
-                            fontWeight="bold"
-                            textTransform="capitalize"
-                            style={{fontSize: "calc(0.3rem + 0.5vw)"}}
-                          >
+                      </MKTypography>
+                    </MKBox>
+                  </Grid>
+                  <Grid key={`TOPGRID9${index}`}
+                        item 
+                        xs={4} 
+                        justifyContent="flex-start">    
+                    <MKBox  key={`TOPMKBOX5${index}`}
+                            display="flex">
+                      <MKTypography key={`TOPTYPO9${index}`}
+                                    variant="h6"
+                                    fontWeight="bold"
+                                    textTransform="capitalize"
+                                    style={{fontSize: "calc(0.3rem + 0.5vw)"}}
+                                  >
                             BeS Tech Stack: &nbsp;
-                          </MKTypography>
-                          <MKTypography
-                            variant="h6"
-                            fontWeight="regular"
-                            color="text"
-                            style={{fontSize: "calc(0.3rem + 0.5vw)"}}
-                          >
+                      </MKTypography>
+                      <MKTypography key={`TOPTYPO10${index}`}
+                                    variant="h6"
+                                    fontWeight="regular"
+                                    color="text"
+                                    style={{fontSize: "calc(0.3rem + 0.5vw)"}}
+                                  >
                             {item.bes_technology_stack}
-                          </MKTypography>
-                        </MKBox>
-                    </Grid>
-                    <Grid item 
-                            xs={4} 
-                            justifyContent="flex-start">
-                        <MKBox display="flex" >
-                          <MKTypography
-                            variant="h6"
-                            fontWeight="bold"
-                            textTransform="capitalize"
-                            style={{fontSize: "calc(0.3rem + 0.5vw)"}}
-                          >
+                      </MKTypography>
+                    </MKBox>
+                  </Grid>
+                  <Grid key={`TOPGRID10${index}`}
+                        item 
+                        xs={4} 
+                        justifyContent="flex-start">
+                    <MKBox key={`TOPMKBOX6${index}`}
+                            display="flex" >
+                      <MKTypography key={`TOPTYPO11${index}`}
+                                    variant="h6"
+                                    fontWeight="bold"
+                                    textTransform="capitalize"
+                                    style={{fontSize: "calc(0.3rem + 0.5vw)"}}
+                                  >
                             BeS Environment: &nbsp;
-                          </MKTypography>
-                          <MKTypography
-                            variant="h6"
-                            fontWeight="regular"
-                            color="text"
-                            style={{fontSize: "calc(0.3rem + 0.5vw)"}}
-                          > 
-                          <Link to={envpath}>{item.name}</Link>
-                          
+                      </MKTypography>
+                      <MKTypography key={`TOPTYPO12${index}`}
+                                    variant="h6"
+                                    fontWeight="regular"
+                                    color="text"
+                                    style={{fontSize: "calc(0.3rem + 0.5vw)"}}
+                                  > 
+                          <Link key={`TOPLINK1${index}`}
+                                to={envpath}>
+                            {item.name}
+                          </Link>
                           </MKTypography>
                         </MKBox>
                       </Grid>
                     </Grid>
                   </Grid>
-                  <Grid item 
-                          xs={6} 
-                          justifyContent="flex-start">
-                    <Grid  
+                  <Grid key={`TOPGRID11${index}`}
+                        item 
+                        xs={6} 
+                        justifyContent="flex-start">
+                    <Grid key={`TOPGRID12${index}`}  
                         container 
                         spacing={1} 
                         pl={4} 
-                        style={{height: "3.3rem"}}> 
-                    
-                    <Grid item 
-                          xs={12} 
-                          justifyContent="flex-start">
-                      <MKBox  
-                             display="flex" 
-                             py={1} 
-                             pr={2} 
-                             pl={4}>
-                        <MKTypography
-                          variant="h6"
-                          fontWeight="bold"
-                          textTransform="capitalize"
-                          style={{fontSize: "calc(0.4rem + 0.5vw)"}}
-                        >
+                        style={{height: "3.3rem"}}>
+                      <Grid key={`TOPTGRID13${index}`}
+                            item 
+                            xs={12} 
+                            justifyContent="flex-start">
+                        <MKBox key={`TOPMKBOX7${index}`}  
+                               display="flex" 
+                               py={1} 
+                               pr={2} 
+                               pl={4}>
+                          <MKTypography key={`TOPTYPO13${index}`}
+                                        variant="h6"
+                                        fontWeight="bold"
+                                        textTransform="capitalize"
+                                        style={{fontSize: "calc(0.4rem + 0.5vw)"}}
+                                      >
                           Description: &nbsp;
                         </MKTypography>
-                        <MKTypography
-                          variant="h6"
-                          fontWeight="regular"
-                          color="text"
-                          style={{fontSize: "calc(0.4rem + 0.5vw)"}}
-                        >
+                        <MKTypography key={`TOPTYPO14${index}`}
+                                      variant="h6"
+                                      fontWeight="regular"
+                                      color="text"
+                                      style={{fontSize: "calc(0.4rem + 0.5vw)"}}
+                                    >
                           {item.description}
                         </MKTypography>
                       </MKBox>
@@ -348,12 +365,14 @@ function BesVersionHistory() {
                 </Grid>
               </Grid>
             </Card>
-            <Card style={{marginTop: "0.3rem"}}>
-                    <Grid  
+            <Card key={`TOPCARD2${index}`}
+                  style={{marginTop: "0.3rem"}}>
+                    <Grid key={`TOPGRID14${index}`} 
                           container 
                           spacing={1} 
                           p={2}>
-                      <Grid item 
+                      <Grid key={`TOPGRID15${index}`}
+                            item 
                             xs={12} 
                             justifyContent="flex-start">
                         <AssessmentReport
@@ -366,12 +385,14 @@ function BesVersionHistory() {
                       </Grid>
                     </Grid>
             </Card>
-                
-            <MKBox style={{marginTop: "-0.5rem"}}>
-                <Grid container 
+            <MKBox key={`TOPMKBOX7${index}`}
+                   style={{marginTop: "-0.5rem"}}>
+                <Grid key={`TOPGRID16${index}`}
+                      container 
                       spacing={3} 
                       pt={3} >
-                  <Grid item 
+                  <Grid key={`TOPGRID17${index}`}
+                        item 
                         xs={12} 
                         md={12} 
                         lg={12}
@@ -395,4 +416,4 @@ function BesVersionHistory() {
 );
 }
 
-export default BesVersionHistory;
+export default BesVersionHistory;
\ No newline at end of file
diff --git a/src/routes.tsx b/src/routes.tsx
index ec9ed9a1..ae127145 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -31,6 +31,7 @@ const routes = [
   },
   {
     name: "github",
+    key: "github",
     icon: <GitHubIcon />,
     href: "https://github.com/Be-Secure/BeSLighthouse"
   }