enh(libs): upgrade front libraries + improve dynamic import

package.json

@@ -7,57 +7,58 @@
     "build:dev": "webpack --mode development"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.5.5",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-arrow-functions": "^7.2.0",
-    "@babel/plugin-transform-regenerator": "^7.3.4",
+    "@babel/plugin-transform-regenerator": "^7.4.5",
     "@babel/plugin-transform-shorthand-properties": "^7.2.0",
-    "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/polyfill": "^7.4.4",
+    "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
-    "clean-webpack-plugin": "^2.0.1",
-    "css-loader": "^2.1.0",
-    "file-loader": "^3.0.1",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.1.0",
+    "file-loader": "^4.1.0",
     "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.9.3",
+    "mini-css-extract-plugin": "^0.8.0",
+    "node-sass": "^4.12.0",
     "postcss-loader": "^3.0.0",
     "postcss-safe-parser": "^4.0.1",
-    "resolve-url-loader": "^3.0.1",
+    "resolve-url-loader": "^3.1.0",
     "sass-loader": "^7.1.0",
-    "terser-webpack-plugin": "^1.2.3",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.30.0",
-    "webpack-cli": "^3.0.8"
+    "terser-webpack-plugin": "^1.3.0",
+    "url-loader": "^2.1.0",
+    "webpack": "^4.36.1",
+    "webpack-cli": "^3.3.6"
   },
   "dependencies": {
-    "@centreon/react-components": "19.4.0-alpha.126",
-    "axios": "^0.18.0",
+    "@centreon/react-components": "19.4.0-alpha.139",
+    "axios": "^0.19.0",
     "classnames": "^2.2.6",
-    "dom-serializer": "^0.1.0",
-    "install": "^0.12.2",
+    "connected-react-router": "^6.5.2",
+    "dom-serializer": "^0.1.1",
+    "install": "^0.13.0",
     "loaders.css": "^0.1.2",
-    "moment-timezone": "^0.5.25",
+    "moment-timezone": "^0.5.26",
     "numeral": "^2.0.6",
     "query-string": "^5.1.1",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
-    "react-full-screen": "^0.2.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-full-screen": "^0.2.4",
     "react-fullscreen-crossbrowser": "^1.0.9",
-    "react-helmet": "^5.2.0",
-    "react-redux": "^5.0.7",
+    "react-helmet": "^5.2.1",
+    "react-redux": "^7.1.0",
     "react-redux-i18n": "^1.9.3",
-    "react-router-dom": "^4.2.2",
-    "react-router-redux": "^5.0.0-alpha.8",
-    "react-scripts": "2.0.3",
-    "react-select": "^2.0.0",
-    "redux": "^4.0.0",
+    "react-router-dom": "^5.0.1",
+    "react-scripts": "3.0.1",
+    "react-select": "^3.0.4",
+    "redux": "^4.0.4",
     "redux-batched-actions": "^0.4.1",
-    "redux-form": "^7.4.2",
+    "redux-form": "^8.2.4",
     "redux-logger": "^3.0.6",
-    "redux-saga": "^0.16.2",
+    "redux-saga": "^1.0.5",
     "redux-thunk": "^2.3.0",
-    "systemjs": "^3.1.6",
+    "reselect": "^4.0.0",
+    "systemjs": "^4.1.0",
     "systemjs-plugin-css": "^0.1.37"
   },
   "jest": {

webpack.config.js

@@ -1,5 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
@@ -21,6 +21,9 @@ module.exports = {
     library: '[name]',
     umdNamedDefine: true,
   },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
   optimization: {
     minimizer: [
       new TerserPlugin({
@@ -79,7 +82,7 @@ module.exports = {
     rules: [
       { parser: { system: false } },
       {
-        test: /\.js$/,
+        test: /\.jsx?$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
@@ -95,9 +98,10 @@ module.exports = {
           {
             loader: "css-loader",
             options: {
-              modules: true,
-              localIdentName: "[local]__[hash:base64:5]",
-              sourceMap: true
+              modules: {
+                localIdentName: "[local]__[hash:base64:5]",
+              },
+              sourceMap: true,
             }
           },
           {

www/front_src/src/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import Header from "./components/header";
 import { connect } from 'react-redux';
-import { ConnectedRouter } from "react-router-redux";
+import { ConnectedRouter } from 'connected-react-router';
 import { history } from "./store";
 
 import NavigationComponent from "./components/navigation";

www/front_src/src/helpers/dynamicImport/global.js

@@ -0,0 +1,92 @@
+/*
+ * SystemJS global script loading support
+ * Extra for the s.js build only
+ * (Included by default in system.js build)
+ */
+(function (global) {
+
+  const systemJSPrototype = System.constructor.prototype;
+
+  // safari unpredictably lists some new globals first or second in object order
+  let firstGlobalProp, secondGlobalProp, lastGlobalProp;
+  function getGlobalProp () {
+    let cnt = 0;
+    let lastProp;
+    for (let p in global) {
+      // in firefox, new page is loaded before the iframe is totally unmounted
+      // then, we need to avoid to compare global object with iframes
+      if (!global.hasOwnProperty(p) || (!isNaN(p) && p < global.frames.length)) {
+        continue;
+      }
+      if (cnt === 0 && p !== firstGlobalProp || cnt === 1 && p !== secondGlobalProp) {
+        return p;
+      }
+      cnt++;
+      lastProp = p;
+    }
+    if (lastProp !== lastGlobalProp) {
+      return lastProp;
+    }
+  }
+
+  function noteGlobalProps () {
+    // alternatively Object.keys(global).pop()
+    // but this may be faster (pending benchmarks)
+    firstGlobalProp = secondGlobalProp = undefined;
+    for (let p in global) {
+      // in firefox, new page is loaded before the iframe is totally unmounted
+      // then, we need to avoid to compare global object with iframes
+      if (!global.hasOwnProperty(p) || (!isNaN(p) && p < global.frames.length)) {
+        continue;
+      }
+      if (!firstGlobalProp) {
+        firstGlobalProp = p;
+      } else if (!secondGlobalProp) {
+        secondGlobalProp = p;
+      }
+      lastGlobalProp = p;
+    }
+    return lastGlobalProp;
+  }
+
+  const impt = systemJSPrototype.import;
+  systemJSPrototype.import = function (id, parentUrl) {
+    noteGlobalProps();
+    return impt.call(this, id, parentUrl);
+  };
+
+  const emptyInstantiation = [[], function () { return {} }];
+
+  const getRegister = systemJSPrototype.getRegister;
+  systemJSPrototype.getRegister = function () {
+    const lastRegister = getRegister.call(this);
+    if (lastRegister) {
+      return lastRegister;
+    }
+
+    // no registration -> attempt a global detection as difference from snapshot
+    // when multiple globals, we take the global value to be the last defined new global object property
+    // for performance, this will not support multi-version / global collisions as previous SystemJS versions did
+    // note in Edge, deleting and re-adding a global does not change its ordering
+    const globalProp = getGlobalProp();
+    if (!globalProp) {
+      return emptyInstantiation;
+    }
+
+    let globalExport;
+    try {
+      globalExport = global[globalProp];
+    } catch (e) {
+      return emptyInstantiation;
+    }
+
+    return [[], function (_export) {
+      return {
+        execute: function () {
+          _export({ default: globalExport, __useDefault: true });
+        }
+      };
+    }];
+  };
+
+})(typeof self !== 'undefined' ? self : global);

www/front_src/src/helpers/dynamicImport.js → www/front_src/src/helpers/dynamicImport/index.js

@@ -1,4 +1,6 @@
-import '../../../../node_modules/systemjs/dist/system.js'; // IIFE format so it's imported on window
+import '../../../../../node_modules/systemjs/dist/s.js'; // IIFE format so it's imported on window
+import './global'; // override extra bundle of systemjs to manage firefox issue
+import '../../../../../node_modules/systemjs/dist/extras/use-default.js'; // avoid to check module.default.default
 import systemCss from 'systemjs-plugin-css'; // used to import css in <head>
 
 // this function allows to import dynamically js and css using systemjs
@@ -24,11 +26,7 @@ export function dynamicImport(basename, parameters) {
         return resolve(window[vector]);
       } else {
         const module = await(window.System.import(basename + parameters.js));
-        if (module.default && typeof(module.default) === 'object') { // named umd export
-          window[vector] = module.default;
-        } else { // unnamed umd export or systemjs export
-          window[vector] = module;
-        }
+        window[vector] = module;
         return resolve(window[vector]);
       }
     } catch (error) {

www/front_src/src/redux/reducers/index.js

@@ -1,4 +1,5 @@
 import { combineReducers } from "redux";
+import { connectRouter } from 'connected-react-router';
 import { reducer as formReducer } from "redux-form";
 import { i18nReducer } from 'react-redux-i18n';
 
@@ -9,7 +10,8 @@ import axiosReducer from "./axiosReducer";
 import externalComponentsReducer from "./externalComponentsReducer";
 import tooltipReducer from './tooltipReducer';
 
-export default combineReducers({
+export default (history) => combineReducers({
+  router: connectRouter(history),
   form: formReducer,
   pollerForm: pollerWizardReducer,
   i18n: i18nReducer,

www/front_src/src/redux/reducers/navigationReducer.js

@@ -46,12 +46,9 @@ const navigationReducer = (state = initialState, action) => {
       };
     // navigated to another URL
     case "@@router/LOCATION_CHANGE":
-        let event = new CustomEvent('react.href.update', {
-          detail: {
-            href: window.location.href
-          }
-        });
-        window.dispatchEvent(event);
+      const event = document.createEvent('CustomEvent');
+      event.initCustomEvent('react.href.update', false, false, { href: window.location.href });
+      window.dispatchEvent(event);
       return state;
     default:
       return state;

www/front_src/src/store/index.js

@@ -1,7 +1,7 @@
 import { createStore, applyMiddleware, compose } from "redux";
-import { routerMiddleware } from "react-router-redux";
+import { routerMiddleware } from 'connected-react-router';
 import { batchDispatchMiddleware } from 'redux-batched-actions';
-import reducers from "../redux/reducers";
+import createRootReducer from "../redux/reducers";
 import thunk from "redux-thunk";
 import createSagaMiddleware from "redux-saga";
 import sagas from "../redux/sagas";
@@ -16,7 +16,7 @@ const createAppStore = (options, initialState = {}) => {
   const middlewares = [routerMiddleware(history), thunk, sagaMiddleware, batchDispatchMiddleware];
 
   const store = createStore(
-    reducers,
+    createRootReducer(history),
     initialState,
     compose(
       applyMiddleware(...middlewares),