feat(CODE): ADDON-59062 resolved js linter failures

.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
         __non_webpack_require__: 'readonly',
     },
     rules: {
-        indent: 'off'
+        'prettier/prettier': 2,
+        indent: 'off',
     }
 };

package.json

@@ -54,6 +54,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",
     "eslint": "^8.28.0",
+    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-import": "^2.26.0",

src/main/webapp/components/BaseFormView.jsx

@@ -715,13 +715,13 @@ class BaseFormView extends PureComponent {
         }
 
         /*
-        * Custom logic to handle the dropdown's reset value by clicking "X" button.
-        * DO NOT CHANGE: value of targetValue to null or any other value. Keep it as blank string only.
-        * Reason: We are sending a blank string value in the API, and this validation is inside the saveData().
-        */
+         * Custom logic to handle the dropdown's reset value by clicking "X" button.
+         * DO NOT CHANGE: value of targetValue to null or any other value. Keep it as blank string only.
+         * Reason: We are sending a blank string value in the API, and this validation is inside the saveData().
+         */
 
-        const target_value = targetValue === 'RESET_DROPDOWN_VALUE' ? '' : targetValue;
-        changes[field] = { value: { $set: target_value } };
+        const updatedTargetValue = targetValue === 'RESET_DROPDOWN_VALUE' ? '' : targetValue;
+        changes[field] = { value: { $set: updatedTargetValue } };
 
         const newFields = update(this.state, { data: changes });
         const tempState = this.clearAllErrorMsg(newFields);

src/main/webapp/components/ControlWrapper.jsx

@@ -28,7 +28,6 @@ const ControlGroupWrapper = styled(ControlGroup).attrs((props) => ({
 `;
 
 class ControlWrapper extends React.PureComponent {
-
     static isString = (str) => !!(typeof str === 'string' || str instanceof String);
 
     constructor(props) {

src/main/webapp/components/CustomControl.jsx

@@ -6,7 +6,6 @@ import { getUnifiedConfigs } from '../util/util';
 import { getBuildDirPath } from '../util/script';
 
 class CustomControl extends Component {
-
     static loadCustomControl = (module, type, appName) =>
         new Promise((resolve) => {
             if (type === 'external') {
@@ -22,7 +21,7 @@ class CustomControl extends Component {
                 });
             }
         });
-        
+
     constructor(props) {
         super(props);
         this.state = {

src/main/webapp/context/TableContext.jsx

@@ -15,7 +15,7 @@ export function TableContextProvider({ children }) {
 
     return (
         <TableContext.Provider
-        // eslint-disable-next-line react/jsx-no-constructed-context-values
+            // eslint-disable-next-line react/jsx-no-constructed-context-values
             value={{
                 rowData,
                 setRowData,

src/main/webapp/util/script.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-
+import yaml from 'js-yaml';
 // NOTE: if bundle script is put some dir instead of js/build, this function will broken.
 export function getBuildDirPath() {
     const scripts = document.getElementsByTagName('script');
@@ -21,7 +21,6 @@ function loadJSONFile() {
 }
 
 function loadYAMLFile() {
-    const yaml = require('js-yaml');
     return axios
         .get(`${getBuildDirPath()}/globalConfig.yaml`)
         .then((res) => (typeof res.data === 'object' ? res.data : yaml.load(res.data)));