Add Husky and ESLint

facade-app/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "ignorePatterns": ["**/*.css"],
+  "plugins": ["react", "@typescript-eslint", "jest"],
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": 0
+  }
+}

facade-app/.husky/pre-commit

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+cd facade-app
+echo "Husky: pre-commit"
+npm run pretty
+# TODO: enable lint
+# npm run lint
+npm test

facade-app/package.json

@@ -11,6 +11,7 @@
     "@types/node": "^12.20.13",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
+    "lint-staged": "^13.0.3",
     "prettier": "^2.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -22,15 +23,12 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --watchAll=false",
     "eject": "react-scripts eject",
-    "pretty": "prettier --write \"./**/*.{js,jsx,tsx,css}\""
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "pretty": "prettier --write \"./**/*.{js,jsx,tsx,css}\"",
+    "lint": "eslint \"./**/*.{js,jsx,tsx,css}\"",
+    "lint:fix": "npm run lint -- --fix",
+    "prepare": "cd .. && husky install facade-app/.husky"
   },
   "browserslist": {
     "production": [
@@ -46,13 +44,20 @@
   },
   "jest": {
     "collectCoverageFrom": [
-        "<rootDir>/src/**/*.{js,ts,jsx,tsx}",
-        "!<rootDir>/src/test/**",
-        "!<rootDir>/src/interface/*",
-        "!<rootDir>/src/react-app-env.d.ts"
+      "<rootDir>/src/**/*.{js,ts,jsx,tsx}",
+      "!<rootDir>/src/test/**",
+      "!<rootDir>/src/interface/*",
+      "!<rootDir>/src/react-app-env.d.ts"
     ]
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.32.0",
+    "@typescript-eslint/parser": "^5.32.0",
+    "eslint": "^7.11.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^26.8.0",
+    "eslint-plugin-react": "^7.30.1",
+    "husky": "^8.0.1",
     "ts-node": "^10.7.0"
   }
 }

facade-app/public/GlobalUtility.js

@@ -1,3 +1,7 @@
+// Can't find these function being called anywhere what is this?
+// FIXME: Remove this when resolved
+// eslint-disable-file @typescript-eslint/no-unused-vars
+
 function getCurrentVulnerabilityDetails() {
   return Object.assign({}, window.globalUtilityState);
 }

facade-app/src/App.tsx

@@ -22,19 +22,19 @@ export default class App extends React.Component {
   };
 
   _getResourcesInformationsForLevel(levelInformationRes: any) {
-    let resourceInformationHtml = {
+    const resourceInformationHtml = {
       isAbsolute:
         levelInformationRes["resourceInformation"]["htmlResource"][
           "isAbsolute"
         ],
       uri: levelInformationRes["resourceInformation"]["htmlResource"]["uri"],
     };
 
-    let staticResourceInformation = [];
-    for (let staticResourceInformationIndexRes in levelInformationRes[
+    const staticResourceInformation = [];
+    for (const staticResourceInformationIndexRes in levelInformationRes[
       "levels"
     ]) {
-      let staticResourceInformationRes =
+      const staticResourceInformationRes =
         levelInformationRes["levels"][staticResourceInformationIndexRes];
       staticResourceInformation.push({
         isAbsolute: staticResourceInformationRes["isAbsolute"],
@@ -49,11 +49,11 @@ export default class App extends React.Component {
   }
 
   _getHintsForLevel(levelInformationRes: any) {
-    let hints = [];
-    for (let hintIndexRes in levelInformationRes["hints"]) {
-      let hintRes = levelInformationRes["hints"][hintIndexRes];
-      let vulnerabilityTypes = [];
-      for (let vulnerabilityTypeIndexRes in hintRes["vulnerabilityTypes"]) {
+    const hints = [];
+    for (const hintIndexRes in levelInformationRes["hints"]) {
+      const hintRes = levelInformationRes["hints"][hintIndexRes];
+      const vulnerabilityTypes = [];
+      for (const vulnerabilityTypeIndexRes in hintRes["vulnerabilityTypes"]) {
         vulnerabilityTypes.push({
           identifierType:
             hintRes["vulnerabilityTypes"][vulnerabilityTypeIndexRes][
@@ -63,7 +63,7 @@ export default class App extends React.Component {
             hintRes["vulnerabilityTypes"][vulnerabilityTypeIndexRes]["value"],
         });
       }
-      let hint = {
+      const hint = {
         description: hintRes[hintIndexRes],
         vulnerabilityTypes: vulnerabilityTypes,
       };
@@ -73,8 +73,8 @@ export default class App extends React.Component {
   }
 
   _getVulnerabilityTypesForLevel(vulnerabilityDefinitionsRes: any) {
-    let vulnerabilityTypes = [];
-    for (let vulnerabilityTypeIndexRes in vulnerabilityDefinitionsRes[
+    const vulnerabilityTypes = [];
+    for (const vulnerabilityTypeIndexRes in vulnerabilityDefinitionsRes[
       "vulnerabilityTypes"
     ]) {
       vulnerabilityTypes.push({
@@ -95,21 +95,21 @@ export default class App extends React.Component {
     vulnerabilityDefinitionsRes: any,
     vulnerabilityDefinitionIndexRes: string
   ) {
-    let levels = [];
-    for (let vulnerabilityLevelIndexRes in vulnerabilityDefinitionsRes[
+    const levels = [];
+    for (const vulnerabilityLevelIndexRes in vulnerabilityDefinitionsRes[
       vulnerabilityDefinitionIndexRes
     ]["levels"]) {
-      let levelInformationRes =
+      const levelInformationRes =
         vulnerabilityDefinitionsRes[vulnerabilityDefinitionIndexRes]["levels"][
           vulnerabilityLevelIndexRes
         ];
       //Hint population
-      let hints = this._getHintsForLevel(levelInformationRes);
+      const hints = this._getHintsForLevel(levelInformationRes);
       // Resource population
-      let resourceInformations =
+      const resourceInformations =
         this._getResourcesInformationsForLevel(levelInformationRes);
 
-      let levelInformation = {
+      const levelInformation = {
         levelIdentifier: levelInformationRes["levelIdentifier"],
         variant: levelInformationRes["variant"],
         hints: hints,
@@ -130,20 +130,21 @@ export default class App extends React.Component {
       if (!vulnerabilityDefinitionResponse.data) {
         return;
       }
-      let applicationsDataRes = vulnerabilityDefinitionResponse.data;
-      let applicationDataArray = [];
-      for (let vulnerableAppRes in applicationsDataRes) {
-        let vulnerabilityDefinitionsRes = applicationsDataRes[vulnerableAppRes];
-        let vulnerabilityDefinitions = [];
-        for (let vulnerabilityDefinitionIndexRes in vulnerabilityDefinitionsRes) {
-          let levels = this._populateLevelsForVulnerability(
+      const applicationsDataRes = vulnerabilityDefinitionResponse.data;
+      const applicationDataArray = [];
+      for (const vulnerableAppRes in applicationsDataRes) {
+        const vulnerabilityDefinitionsRes =
+          applicationsDataRes[vulnerableAppRes];
+        const vulnerabilityDefinitions = [];
+        for (const vulnerabilityDefinitionIndexRes in vulnerabilityDefinitionsRes) {
+          const levels = this._populateLevelsForVulnerability(
             vulnerabilityDefinitionsRes,
             vulnerabilityDefinitionIndexRes
           );
-          let vulnerabilityTypes = this._getVulnerabilityTypesForLevel(
+          const vulnerabilityTypes = this._getVulnerabilityTypesForLevel(
             vulnerabilityDefinitionIndexRes
           );
-          let vulnerabilityDefinition = {
+          const vulnerabilityDefinition = {
             name: vulnerabilityDefinitionsRes["name"],
             id: vulnerabilityDefinitionsRes["id"],
             description: vulnerabilityDefinitionsRes["description"],

facade-app/src/Components/Content.tsx

@@ -9,12 +9,12 @@ import {
 import { VulnerabilityDefinitionResponse } from "../interface/GeneralContracts";
 import { HomePage } from "./HomePage";
 import AboutUs from "./AboutUs";
-import { Props } from "../interface/Props";
+import { GlobalStateProps } from "../interface/GlobalStateProps";
 
-export class Content extends React.Component<Props> {
+export class Content extends React.Component<GlobalStateProps> {
   selectedLevel?: LevelInformation;
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: GlobalStateProps) {
     if (
       prevProps.globalState.activeLevel !==
         this.props.globalState.activeLevel ||
@@ -99,7 +99,10 @@ export class Content extends React.Component<Props> {
                   defaultExpanded={true}
                 >
                   <div className="VulnerableApp-Facade-Content">
-                    <div id="__vuln_description__" data-testid={"VULNERABILITY_CONTENT_DESCRIPTION"}/>
+                    <div
+                      id="__vuln_description__"
+                      data-testid={"VULNERABILITY_CONTENT_DESCRIPTION"}
+                    />
                   </div>
                 </RSuitePanel>
               </div>
@@ -113,7 +116,10 @@ export class Content extends React.Component<Props> {
                   className="VulnerableApp-Facade-Content-Practice-Vulnerability-Header"
                 >
                   <div className="VulnerableApp-Facade-Content">
-                    <div id="__content__" data-testid={"VULNERABILITY_MAIN_CONTENT"}/>
+                    <div
+                      id="__content__"
+                      data-testid={"VULNERABILITY_MAIN_CONTENT"}
+                    />
                   </div>
                 </RSuitePanel>
                 {this.selectedLevel &&
@@ -138,6 +144,7 @@ export class Content extends React.Component<Props> {
                   >
                     <ol data-testid={"VULNERABILITY_HINTS"}>
                       {this.selectedLevel.hints.map((hint) => {
+                        // TODO: add key prop
                         return <li>{hint.description}</li>;
                       })}
                     </ol>

facade-app/src/Components/Footer.tsx

@@ -9,7 +9,7 @@ interface IFooter extends FooterProps {
   copyRightYear: number;
 }
 
-export default class Footer extends React.Component<IFooter, {}> {
+export default class Footer extends React.Component<IFooter> {
   render() {
     const { copyRightYear } = this.props;
     return (

facade-app/src/Components/Header.tsx

@@ -8,9 +8,9 @@ import {
   Icon as RSuiteIcon,
   Dropdown as RSuiteDropDown,
 } from "rsuite";
-import { Props } from "../interface/Props";
+import { GlobalStateProps } from "../interface/GlobalStateProps";
 
-export default class Header extends React.Component<Props, {}> {
+export default class Header extends React.Component<GlobalStateProps> {
   render() {
     const { globalState, setGlobalState } = this.props;
     return (

facade-app/src/Components/HomePage.tsx

@@ -8,7 +8,10 @@ export class HomePage extends React.Component {
         header="Welcome to Owasp VulnerableApp-Facade"
         className="VulnerableApp-Facade-HomePage-Content-Header"
       >
-        <div className="VulnerableApp-Facade-HomePage-Content" data-testid={"HOME_PAGE_CONTENT_CONTAINER"}>
+        <div
+          className="VulnerableApp-Facade-HomePage-Content"
+          data-testid={"HOME_PAGE_CONTENT_CONTAINER"}
+        >
           As we are seeing a lot of technological enhancements in the industry
           from past few years, these technical enhancements are solving one or
           the other problem however, with that they also bring few different

facade-app/src/Components/LeftNav.tsx

@@ -5,11 +5,11 @@ import {
   Nav as RSuiteNav,
   Icon as RSuiteIcon,
 } from "rsuite";
-import { Props } from "../interface/Props";
+import { GlobalStateProps } from "../interface/GlobalStateProps";
 import { LevelInformation, VulnerabilityDefinition } from "../interface/State";
 
-export default class LeftNav extends React.Component<Props, {}> {
-  constructor(props: Props) {
+export default class LeftNav extends React.Component<GlobalStateProps> {
+  constructor(props: GlobalStateProps) {
     super(props);
     this._handleVulnerabilityLevelSelect =
       this._handleVulnerabilityLevelSelect.bind(this);
@@ -69,38 +69,37 @@ export default class LeftNav extends React.Component<Props, {}> {
         className="VulnerableApp-Facade-LeftNav-Vulnerability-Level"
         data-testid={applicationName + "." + vulnerabilityName}
       >
-        {levels.map((vulnerabilityLevel) => (
-          <RSuiteDropdown.Item
-            eventKey={
-              applicationName +
-              "." +
-              vulnerabilityName +
-              "." +
-              vulnerabilityLevel.levelIdentifier
-            }
-            icon={
-              vulnerabilityLevel.variant === "SECURE" ? (
-                <RSuiteIcon icon="lock" />
-              ) : (
-                <RSuiteIcon icon="unlock" />
-              )
-            }
-            onSelect={() =>
-              this._handleVulnerabilityLevelSelect(
-                applicationName,
-                vulnerabilityName,
-                vulnerabilityLevel.levelIdentifier
-              )
-            }
-            data-testid={applicationName +
-                "." +
-                vulnerabilityName +
-                "." +
-                vulnerabilityLevel.levelIdentifier}
-          >
-            {vulnerabilityLevel.levelIdentifier}
-          </RSuiteDropdown.Item>
-        ))}
+        {levels.map((vulnerabilityLevel) => {
+          const itemKey =
+            applicationName +
+            "." +
+            vulnerabilityName +
+            "." +
+            vulnerabilityLevel.levelIdentifier;
+          return (
+            <RSuiteDropdown.Item
+              key={itemKey}
+              eventKey={itemKey}
+              icon={
+                vulnerabilityLevel.variant === "SECURE" ? (
+                  <RSuiteIcon icon="lock" />
+                ) : (
+                  <RSuiteIcon icon="unlock" />
+                )
+              }
+              onSelect={() =>
+                this._handleVulnerabilityLevelSelect(
+                  applicationName,
+                  vulnerabilityName,
+                  vulnerabilityLevel.levelIdentifier
+                )
+              }
+              data-testid={itemKey}
+            >
+              {vulnerabilityLevel.levelIdentifier}
+            </RSuiteDropdown.Item>
+          );
+        })}
       </RSuiteDropdown>
     );
   }
@@ -144,8 +143,8 @@ export default class LeftNav extends React.Component<Props, {}> {
       return (
         <div data-testid={"LEFT_NAV_CONTAINER"}>
           {applicationData.map((applicationData) => {
-            let applicationName = applicationData.applicationName;
-            let vulnerabilityDefinitions =
+            const applicationName = applicationData.applicationName;
+            const vulnerabilityDefinitions =
               applicationData.vulnerabilityDefinitions;
             return this._getApplicationVulnerabilities(
               applicationName,