style(ui): Reformat Frontend codebase using eslint-config-centreon (#…

…7726)

.eslintrc.js

@@ -1,22 +1 @@
-module.exports = {
-  env: {
-    browser: true,
-    es6: true,
-  },
-  extends: ['airbnb', 'plugin:prettier/recommended'],
-  globals: {
-    Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
-  },
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 2018,
-    sourceType: 'module',
-  },
-  plugins: ['react'],
-  rules: {
-    'prettier/prettier': 'error',
-  },
-};
+module.exports = require('@centreon/eslint-config-centreon');

package.json

@@ -6,7 +6,7 @@
     "build": "webpack --mode production",
     "build:dev": "webpack --mode development --config ./webpack.config.dev.js",
     "start:dev": "npm run build:dev -- --watch",
-    "eslint": "npx eslint www/front_src/src/**/*.js",
+    "eslint": "eslint ./www/front_src --ext .js,.jsx",
     "eslint:fix": "npm run eslint -- --fix"
   },
   "devDependencies": {
@@ -18,12 +18,14 @@
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
+    "@centreon/eslint-config-centreon": "^1.1.0",
     "clean-webpack-plugin": "^2.0.1",
     "css-loader": "^2.1.0",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^4.3.0",
     "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-jest": "^22.13.6",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.13.0",

www/front_src/src/App.js

@@ -1,88 +1,94 @@
-import React, { Component } from "react";
-import Header from "./components/header";
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/sort-comp */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-filename-extension */
+
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { ConnectedRouter } from "react-router-redux";
-import { history } from "./store";
-
-import NavigationComponent from "./components/navigation";
-import Tooltip from "./components/tooltip";
-import Footer from "./components/footer";
+import { ConnectedRouter } from 'react-router-redux';
 import Fullscreen from 'react-fullscreen-crossbrowser';
-import MainRouter from './components/mainRouter';
 import queryString from 'query-string';
+import { batchActions } from 'redux-batched-actions';
+import { StylesProvider } from '@material-ui/styles';
+import Header from './components/header';
+import { history } from './store';
+
+import NavigationComponent from './components/navigation';
+import Tooltip from './components/tooltip';
+import Footer from './components/footer';
+import MainRouter from './components/mainRouter';
 import axios from './axios';
 
-import { batchActions } from "redux-batched-actions";
-import { fetchAclRoutes } from "./redux/actions/navigationActions";
-import { fetchExternalComponents } from "./redux/actions/externalComponentsActions";
+import { fetchAclRoutes } from './redux/actions/navigationActions';
+import { fetchExternalComponents } from './redux/actions/externalComponentsActions';
 
 import styles from './App.scss';
 import footerStyles from './components/footer/footer.scss';
 import contentStyles from './styles/partials/_content.scss';
 
-import { StylesProvider } from '@material-ui/styles';
-
 class App extends Component {
-
   state = {
-    isFullscreenEnabled: false
-  }
+    isFullscreenEnabled: false,
+  };
 
-  keepAliveTimeout = null
+  keepAliveTimeout = null;
 
   // check in arguments if min=1
   getMinArgument = () => {
-    const { search } = history.location
-    const parsedArguments = queryString.parse(search)
+    const { search } = history.location;
+    const parsedArguments = queryString.parse(search);
 
-    return (parsedArguments.min === "1")
-  }
+    return parsedArguments.min === '1';
+  };
 
   // enable fullscreen
   goFull = () => {
     // set fullscreen url parameters
     // this will be used to init iframe src
-    window['fullscreenSearch'] = window.location.search
-    window['fullscreenHash'] = window.location.hash
+    window.fullscreenSearch = window.location.search;
+    window.fullscreenHash = window.location.hash;
 
     // enable fullscreen after 200ms
     setTimeout(() => {
       this.setState({ isFullscreenEnabled: true });
-    }, 200)
-  }
+    }, 200);
+  };
 
   // disable fullscreen
   removeFullscreenParams = () => {
-    if (history.location.pathname == '/main.php') {
+    if (history.location.pathname === '/main.php') {
       history.push({
         pathname: '/main.php',
-        search: window['fullscreenSearch'],
-        hash: window['fullscreenHash']
-      })
+        search: window.fullscreenSearch,
+        hash: window.fullscreenHash,
+      });
     }
 
     // remove fullscreen parameters to keep normal routing
-    delete window['fullscreenSearch'];
-    delete window['fullscreenHash'];
-  }
+    delete window.fullscreenSearch;
+    delete window.fullscreenHash;
+  };
 
   // keep alive (redirect to login page if session is expired)
   keepAlive = () => {
     this.keepAliveTimeout = setTimeout(() => {
-      axios("internal.php?object=centreon_keepalive&action=keepAlive")
+      axios('internal.php?object=centreon_keepalive&action=keepAlive')
         .get()
         .then(() => this.keepAlive())
-        .catch(error => {
-          if (error.response.status == 401) {
+        .catch((error) => {
+          if (error.response.status === 401) {
             // redirect to login page
-            window.location.href = 'index.php?disconnect=1'
+            window.location.href = 'index.php?disconnect=1';
           } else {
             // keepalive must be done cause it may failed due to temporary unavailability
             this.keepAlive();
           }
-        })
-    }, 15000)
-  }
+        });
+    }, 15000);
+  };
 
   componentDidMount() {
     const { fetchAclRoutesAndExternalComponents } = this.props;
@@ -100,45 +106,53 @@ class App extends Component {
     return (
       <StylesProvider injectFirst>
         <ConnectedRouter history={history}>
-          <div className={styles["wrapper"]}>
-            {!min && // do not display menu if min=1
-              <NavigationComponent/>
+          <div className={styles.wrapper}>
+            {!min && <NavigationComponent /> // do not display menu if min=1
             }
-            <Tooltip/>
-            <div id="content" className={contentStyles['content']}>
-              {!min && // do not display header if min=1
-                <Header/>
+            <Tooltip />
+            <div id="content" className={contentStyles.content}>
+              {!min && <Header /> // do not display header if min=1
               }
-              <div id="fullscreen-wrapper" className={contentStyles['fullscreen-wrapper']}>
+              <div
+                id="fullscreen-wrapper"
+                className={contentStyles['fullscreen-wrapper']}
+              >
                 <Fullscreen
                   enabled={this.state.isFullscreenEnabled}
                   onClose={this.removeFullscreenParams}
-                  onChange={isFullscreenEnabled => this.setState({isFullscreenEnabled})}
+                  onChange={(isFullscreenEnabled) =>
+                    this.setState({ isFullscreenEnabled })
+                  }
                 >
-                  <div className={styles["main-content"]}>
+                  <div className={styles['main-content']}>
                     <MainRouter />
                   </div>
                 </Fullscreen>
               </div>
-              {!min && // do not display footer if min=1
-                <Footer/>
+              {!min && <Footer /> // do not display footer if min=1
               }
             </div>
-            <span className={footerStyles["full-screen"]} onClick={this.goFull} />
+            <span
+              className={footerStyles['full-screen']}
+              onClick={this.goFull}
+            />
           </div>
         </ConnectedRouter>
       </StylesProvider>
     );
   }
 }
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch) => {
   return {
     fetchAclRoutesAndExternalComponents: () => {
       // batch actions to avoid useless multiple rendering
       dispatch(batchActions([fetchAclRoutes(), fetchExternalComponents()]));
-    }
+    },
   };
 };
 
-export default connect(null, mapDispatchToProps)(App);
+export default connect(
+  null,
+  mapDispatchToProps,
+)(App);