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

.eslintrc.js

@@ -1,49 +1,13 @@
 module.exports = {
     parser: '@babel/eslint-parser',
-    extends: ['eslint-config-airbnb', 'eslint-config-airbnb/hooks', 'prettier'],
+    extends: ['@splunk/eslint-config/browser', 'prettier'],
     plugins: ['prettier'],
     globals: {
         __DEV__: true,
         window: true,
         __non_webpack_require__: 'readonly',
     },
-    env: {
-        browser: true,
-    },
     rules: {
-        'import/extensions': 'off',
-        'import/no-extraneous-dependencies': 'off',
-        'import/no-unresolved': 'off',
-        'import/no-webpack-loader-syntax': 'off',
-        'import/prefer-default-export': 'off',
-
-        'react/jsx-indent': ['error', 4],
-        'react/jsx-indent-props': ['error', 4],
-
-        'prettier/prettier': 2,
-        indent: 'off',
-
-        // Good idea, but very challenging to use in the real world - too many false positives / boilerplate
-        'react/destructuring-assignment': 'off',
-
-        // Should be enabled by projects using babel-plugin-transform-react-remove-prop-types
-        'react/forbid-foreign-prop-types': 'off',
-
-        // These rules support custom components ('a' is always checked) and 'Link' is
-        // added by default. However, this conflicts with @splunk/react-icons/Link and with
-        // @splunk/react-ui/Link (which doesn't always render 'a' elements).
-        'jsx-a11y/anchor-is-valid': ['error', { components: [] }],
-        'jsx-a11y/anchor-has-content': ['error', { components: [] }],
-
-        // Disabled for historic reasons - should be revisited
-        'react/forbid-prop-types': 'off',
-        'react/require-default-props': 'off',
-
-        // Disabled while eslint-config-airbnb's configuration of it isn't finalized
-        // (they have a TODO to switch this from "property assignment" to "static public field"
-        'react/static-property-placement': 'off',
-
-        // This rule is incompatible with our ...otherProps recommendation
-        'react/jsx-props-no-spreading': 'off',
-    },
+        indent: 'off'
+    }
 };

package.json

@@ -7,7 +7,8 @@
     "build": "cross-env NODE_ENV=production webpack --bail",
     "format": "git ls-files | grep -E \"\\.(jsx?|css)$\" | xargs prettier --write",
     "format:verify": "git ls-files | grep -E \"\\.(jsx?|css)$\" | xargs prettier --list-different",
-    "eslint": "eslint src --ext \".js, .jsx\"",
+    "eslint": "eslint src --ext \".js,.jsx\"",
+    "eslint:ci": "yarn run eslint -f junit -o test-reports/lint-results.xml",
     "eslint:fix": "eslint src --ext \".js, .jsx\" --fix",
     "link:app": "ln -s $PWD/dist/package $SPLUNK_HOME/etc/apps/my-splunk-app",
     "lint": "yarn run eslint && yarn run stylelint",
@@ -53,7 +54,6 @@
     "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

@@ -404,6 +404,7 @@ class BaseFormView extends PureComponent {
         }
     };
 
+    // eslint-disable-next-line react/no-unused-class-component-methods
     handleSubmit = () => {
         this.clearErrorMsg();
         this.props.handleFormSubmit(/* isSubmitting */ true, /* closeEntity */ false);
@@ -729,7 +730,7 @@ class BaseFormView extends PureComponent {
         if (this.hookDeferred) {
             this.hookDeferred.then(() => {
                 if (typeof this.hook.onChange === 'function') {
-                    this.hook.onChange(field, target_value, tempState);
+                    this.hook.onChange(field, updatedTargetValue, tempState);
                 }
             });
         }
@@ -753,6 +754,7 @@ class BaseFormView extends PureComponent {
     };
 
     // Set error in perticular field
+    // eslint-disable-next-line react/no-unused-class-component-methods
     setErrorField = (field) => {
         this.setState((previousState) =>
             update(previousState, { data: { [field]: { error: { $set: true } } } })
@@ -967,7 +969,8 @@ class BaseFormView extends PureComponent {
     /*
      * This function will resolve the promise once the provided timeout occurs
      */
-    timeout = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+    // eslint-disable-next-line class-methods-use-this
+    timeout = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); // eslint-disable-line no-promise-executor-return
 
     renderGroupElements = () => {
         let el = null;

src/main/webapp/components/ControlWrapper.jsx

@@ -28,15 +28,16 @@ const ControlGroupWrapper = styled(ControlGroup).attrs((props) => ({
 `;
 
 class ControlWrapper extends React.PureComponent {
+
+    static isString = (str) => !!(typeof str === 'string' || str instanceof String);
+
     constructor(props) {
         super(props);
-        this.controlType = this.isString(props.entity.type)
+        this.controlType = ControlWrapper.isString(props.entity.type)
             ? CONTROL_TYPE_MAP[props.entity.type]
             : null;
     }
 
-    isString = (str) => !!(typeof str === 'string' || str instanceof String);
-
     render() {
         const { field, type, label, tooltip, help, encrypted = false } = this.props.entity;
         const { handleChange, addCustomValidator, utilCustomFunctions } = this.props.utilityFuncts;

src/main/webapp/components/CustomControl.jsx

@@ -6,6 +6,23 @@ 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') {
+                import(/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${module}.js`).then(
+                    (external) => {
+                        const Control = external.default;
+                        resolve(Control);
+                    }
+                );
+            } else {
+                __non_webpack_require__([`app/${appName}/js/build/custom/${module}`], (Control) => {
+                    resolve(Control);
+                });
+            }
+        });
+
     constructor(props) {
         super(props);
         this.state = {
@@ -18,7 +35,7 @@ class CustomControl extends Component {
         const globalConfig = getUnifiedConfigs();
         const appName = globalConfig.meta.name;
 
-        this.loadCustomControl(
+        CustomControl.loadCustomControl(
             this.props.controlOptions.src,
             this.props.controlOptions.type,
             appName
@@ -47,22 +64,6 @@ class CustomControl extends Component {
         return false;
     }
 
-    loadCustomControl = (module, type, appName) =>
-        new Promise((resolve) => {
-            if (type === 'external') {
-                import(/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${module}.js`).then(
-                    (external) => {
-                        const Control = external.default;
-                        resolve(Control);
-                    }
-                );
-            } else {
-                __non_webpack_require__([`app/${appName}/js/build/custom/${module}`], (Control) => {
-                    resolve(Control);
-                });
-            }
-        });
-
     setValue = (newValue) => {
         this.props.handleChange(this.props.field, newValue);
     };

src/main/webapp/components/ErrorBoundary.jsx

@@ -10,19 +10,18 @@ import errorCodes from '../constants/errorCodes';
 class ErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { errorCode: null, error: null, errorInfo: null };
+        this.state = { errorCode: null, error: null };
     }
 
     static getDerivedStateFromError(error) {
         // Update state so the next render will show the fallback UI.
         return { errorCode: error.uccErrorCode };
     }
 
-    componentDidCatch(error, errorInfo) {
+    componentDidCatch(error) {
         // Catch errors in any components below and re-render with error message
         this.setState({
             error,
-            errorInfo,
         });
         // You can also log error messages to an error reporting service here
     }
@@ -31,7 +30,7 @@ class ErrorBoundary extends React.Component {
         if (this.state.error) {
             // Error path
             return (
-                <div align="center" style={{ marginTop: '10%' }}>
+                <div style={{ marginTop: '10%' }}>
                     <Card style={{ boxShadow: '10px 10px 5px #aaaaaa' }}>
                         <Card.Header>
                             <Heading style={{ textAlign: 'center' }} level={2}>

src/main/webapp/components/MultiInputComponent.jsx

@@ -108,7 +108,7 @@ function MultiInputComponent(props) {
             placeholder={effectivePlaceholder}
             disabled={effectiveDisabled}
             allowNewValues={createSearchChoice}
-            onChange={handleChange}
+            onChange={handleChange} // eslint-disable-line react/jsx-no-bind
             inline
         >
             {options && options.length > 0 && options}

src/main/webapp/components/SingleInputComponent.jsx

@@ -123,48 +123,44 @@ function SingleInputComponent(props) {
     // hideClearBtn=true only passed for OAuth else its undefined
     const effectiveIsClearable = effectiveDisabled ? false : !hideClearBtn;
 
-    return (
+    return createSearchChoice ? (
+        <StyledDiv className="dropdownBox">
+            <ComboBox
+                value={props.value === null ? '' : props.value}
+                name={field}
+                error={error}
+                placeholder={effectivePlaceholder}
+                disabled={effectiveDisabled}
+                onChange={handleChange} // eslint-disable-line react/jsx-no-bind
+                inline
+            >
+                {options && options.length > 0 && options}
+            </ComboBox>
+        </StyledDiv>
+    ) : (
         <>
-            {createSearchChoice ? (
-                <StyledDiv className="dropdownBox">
-                    <ComboBox
-                        value={props.value === null ? '' : props.value}
-                        name={field}
-                        error={error}
-                        placeholder={effectivePlaceholder}
-                        disabled={effectiveDisabled}
-                        onChange={handleChange}
-                        inline
-                    >
-                        {options && options.length > 0 && options}
-                    </ComboBox>
-                </StyledDiv>
-            ) : (
-                <>
-                    <SelectWrapper
-                        className="dropdownBox"
-                        data-test-loading={loading}
-                        value={props.value}
-                        name={field}
-                        error={error}
-                        placeholder={effectivePlaceholder}
-                        disabled={effectiveDisabled}
-                        onChange={handleChange}
-                        filter={!disableSearch}
-                        inline
-                    >
-                        {options && options.length > 0 && options}
-                    </SelectWrapper>
-                    {effectiveIsClearable ? (
-                        <Button
-                            data-test="clear"
-                            appearance="secondary"
-                            icon={<Clear />}
-                            onClick={() => restProps.handleChange(field, 'RESET_DROPDOWN_VALUE')}
-                        />
-                    ) : null}
-                </>
-            )}
+            <SelectWrapper
+                className="dropdownBox"
+                data-test-loading={loading}
+                value={props.value}
+                name={field}
+                error={error}
+                placeholder={effectivePlaceholder}
+                disabled={effectiveDisabled}
+                onChange={handleChange} // eslint-disable-line react/jsx-no-bind
+                filter={!disableSearch}
+                inline
+            >
+                {options && options.length > 0 && options}
+            </SelectWrapper>
+            {effectiveIsClearable ? (
+                <Button
+                    data-test="clear"
+                    appearance="secondary"
+                    icon={<Clear />}
+                    onClick={() => restProps.handleChange(field, 'RESET_DROPDOWN_VALUE')}
+                />
+            ) : null}
         </>
     );
 }

src/main/webapp/components/table/CustomTable.jsx

@@ -144,10 +144,10 @@ function CustomTable({
         if (entityModal.open) {
             let label;
             if (page === 'inputs') {
-                const { services } = unifiedConfigs.pages?.inputs;
+                const { services } = unifiedConfigs.pages.inputs;
                 label = services.find((x) => x.name === entityModal.serviceName)?.title;
-            } else {
-                const { tabs } = unifiedConfigs.pages?.configuration;
+            } else if (page === 'configuration') {
+                const { tabs } = unifiedConfigs.pages.configuration;
                 label = tabs.find((x) => x.name === entityModal.serviceName)?.title;
             }
             return (

src/main/webapp/components/table/TableFilter.jsx

@@ -6,34 +6,6 @@ import TableContext from '../../context/TableContext';
 function TableFilter(props) {
     const { searchText } = useContext(TableContext);
 
-    // We need to remove this function later
-    const debounce = (func, wait) => {
-        let timeout;
-
-        // This is the function that is returned and will be executed many times
-        // We spread (...args) to capture any number of parameters we want to pass
-        return function executedFunction(...args) {
-            // The callback function to be executed after
-            // the debounce time has elapsed
-            const later = () => {
-                // null timeout to indicate the debounce ended
-                timeout = null;
-
-                // Execute the callback
-                func(...args);
-            };
-            // This will reset the waiting every function execution.
-            // This is the step that prevents the function from
-            // being executed because it will never reach the
-            // inside of the previous setTimeout
-            clearTimeout(timeout);
-
-            // Restart the debounce waiting period.
-            // setTimeout returns a truthy value
-            timeout = setTimeout(later, wait);
-        };
-    };
-
     return (
         <Text
             appearance="search"

src/main/webapp/components/table/TableHeader.jsx

@@ -117,6 +117,7 @@ TableHeader.propTypes = {
     page: PropTypes.string,
     services: PropTypes.array,
     totalElement: PropTypes.number,
+    isOuterTable: PropTypes.bool,
     handleRequestModalOpen: PropTypes.func,
 };
 

src/main/webapp/components/table/TableWrapper.jsx

@@ -218,18 +218,18 @@ function TableWrapper({ page, serviceName, handleRequestModalOpen, handleOpenPag
             arr = arr.filter((v) => v.serviceName === serviceName);
         }
 
-        const _sortKey = isCustomMapping ? 'serviceTitle' : sortKey;
+        const updatedSortKey = isCustomMapping ? 'serviceTitle' : sortKey;
 
         // Sort the array based on the sort value
         const sortedArr = arr.sort((rowA, rowB) => {
             if (sortDir === 'asc') {
-                const rowAValue = rowA[_sortKey] === undefined ? '' : rowA[_sortKey];
-                const rowBValue = rowB[_sortKey] === undefined ? '' : rowB[_sortKey];
+                const rowAValue = rowA[updatedSortKey] === undefined ? '' : rowA[updatedSortKey];
+                const rowBValue = rowB[updatedSortKey] === undefined ? '' : rowB[updatedSortKey];
                 return rowAValue > rowBValue ? 1 : -1;
             }
             if (sortDir === 'desc') {
-                const rowAValue = rowA[_sortKey] === undefined ? '' : rowA[_sortKey];
-                const rowBValue = rowB[_sortKey] === undefined ? '' : rowB[_sortKey];
+                const rowAValue = rowA[updatedSortKey] === undefined ? '' : rowA[updatedSortKey];
+                const rowBValue = rowB[updatedSortKey] === undefined ? '' : rowB[updatedSortKey];
                 return rowBValue > rowAValue ? 1 : -1;
             }
             return 0;