Migrate centreon web to use centreon-ui's components (target: master) (…

…#8207) * Migrate centreon web to use centreon-ui's components * Rename ui components imports * Change test for url loader to point to centreon-ui
centreon · Jan 7, 2020 · 3583096 · 3583096
1 parent 059964f
commit 3583096
Show file tree

Hide file tree

Showing 8 changed files with 2,388 additions and 3,511 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,25 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-react'],
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          esmodules: false,
+        },
+      },
+    ],
+  ],
+  plugins: [
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-transform-arrow-functions',
+    '@babel/plugin-transform-destructuring',
+    '@babel/plugin-transform-function-name',
+    '@babel/plugin-transform-parameters',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-transform-classes',
+    '@babel/plugin-transform-shorthand-properties',
+    '@babel/plugin-transform-regenerator',
+  ],
+  sourceType: 'unambiguous',
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@babel/plugin-transform-arrow-functions": "^7.2.0",
     "@babel/plugin-transform-regenerator": "^7.4.5",
     "@babel/plugin-transform-shorthand-properties": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
     "@babel/polyfill": "^7.4.4",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
@@ -26,6 +27,7 @@
     "@testing-library/react": "^8.0.6",
     "babel-eslint": "^10.0.2",
     "babel-jest": "^24.8.0",
+    "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.1.0",
     "eslint": "^5.16.0",
@@ -60,7 +62,7 @@
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
-    "@centreon/react-components": "^19.10.1",
+    "@centreon/ui": "centreon/centreon-ui",
     "@emotion/core": "^10.0.14",
     "@emotion/styled": "^10.0.14",
     "axios": "^0.19.0",

diff --git a/webpack.config.js b/webpack.config.js
@@ -8,12 +8,9 @@ const path = require('path');
 
 module.exports = {
   context: __dirname,
-  entry: [
-    "@babel/polyfill",
-    "./www/front_src/src/index.js"
-  ],
+  entry: ['@babel/polyfill', './www/front_src/src/index.js'],
   output: {
-    path: path.resolve(__dirname + '/www'),
+    path: path.resolve(`${__dirname}/www`),
     publicPath: './',
     filename: 'static/js/[name].[hash:8].js',
     chunkFilename: 'static/js/[name].[hash:8].chunk.js',
@@ -23,6 +20,9 @@ module.exports = {
   },
   resolve: {
     extensions: ['.js', '.jsx'],
+    alias: {
+      '@centreon/ui': '@centreon/ui/src',
+    },
   },
   optimization: {
     minimizer: [
@@ -83,26 +83,26 @@ module.exports = {
       { parser: { system: false } },
       {
         test: /\.jsx?$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            babelrc: true
-          },
-        }
+        include: [
+          path.resolve('./www/front_src/src'),
+          /@centreon\/ui/,
+          /centreon-ui\/src/,
+          path.resolve('./node_modules/@centreon/ui/src'),
+        ],
+        use: [{ loader: 'babel-loader' }],
       },
       {
         test: /\.(c|sa|sc)ss$/,
         use: [
           MiniCssExtractPlugin.loader,
           {
-            loader: "css-loader",
+            loader: 'css-loader',
             options: {
               modules: {
-                localIdentName: "[local]__[hash:base64:5]",
+                localIdentName: '[local]__[hash:base64:5]',
               },
               sourceMap: true,
-            }
+            },
           },
           {
             loader: 'resolve-url-loader',
@@ -113,42 +113,48 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              sourceMap: true
-            }
+              sourceMap: true,
+            },
           },
         ],
       },
       {
         test: /fonts\/.+\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [{
+        use: [
+          {
             loader: 'file-loader',
             options: {
               name: '[name].[ext]',
               outputPath: './static/fonts/',
-              publicPath: '../../static/fonts/'
-            }
-        }]
+              publicPath: '../../static/fonts/',
+            },
+          },
+        ],
       },
       {
-        test: /@centreon\/react\-components\/lib\/.+\.(bmp|png|jpg|jpeg|gif|svg)$/,
-        use: [{
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            name: 'static/img/[name].[hash:8].[ext]',
+        test: /@centreon\/ui\/lib\/.+\.(bmp|png|jpg|jpeg|gif|svg)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+              name: 'static/img/[name].[hash:8].[ext]',
+            },
           },
-        }]
+        ],
       },
       {
         test: /img\/.+\.(bmp|png|jpg|jpeg|gif|svg)$/,
-        use: [{
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            name: 'static/img/[name].[hash:8].[ext]',
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+              name: 'static/img/[name].[hash:8].[ext]',
+            },
           },
-        }]
+        ],
       },
-    ]
+    ],
   },
 };
diff --git a/www/front_src/src/components/breadcrumbWrapper/index.jsx b/www/front_src/src/components/breadcrumbWrapper/index.jsx
@@ -1,25 +1,29 @@
-import React, { useMemo } from 'react';
-import { connect } from "react-redux";
+import React, { useMemo, useCallback } from 'react';
+import { connect } from 'react-redux';
+import { Breadcrumb } from '@centreon/ui';
 import breadcrumbsSelector from '../../redux/selectors/navigation/breadcrumbs';
-import { Breadcrumb } from '@centreon/react-components';
 
 function BreadcrumbWrapper({ breadcrumbs, path, children, ...others }) {
-
-  const getBreadcrumbPath = (breadcrumbs, path) => {
+  const getBreadcrumbPath = useCallback((breadcrumbs, path) => {
     if (breadcrumbs[path]) {
       return breadcrumbs[path];
-    } else if (path.includes('/')) {
-      const shorterPath = path.split('/').slice(0, -1).join('/');
+    }
+    if (path.includes('/')) {
+      const shorterPath = path
+        .split('/')
+        .slice(0, -1)
+        .join('/');
       return getBreadcrumbPath(breadcrumbs, shorterPath);
     }
 
     return [];
-  };
+  });
 
-  const breadcrumbPath = useMemo(
-    () => getBreadcrumbPath(breadcrumbs, path),
-    [breadcrumbs, path]
-  );
+  const breadcrumbPath = useMemo(() => getBreadcrumbPath(breadcrumbs, path), [
+    breadcrumbs,
+    getBreadcrumbPath,
+    path,
+  ]);
 
   return (
     <>

diff --git a/www/front_src/src/components/navigation/index.js b/www/front_src/src/components/navigation/index.js
@@ -4,11 +4,11 @@
 /* eslint-disable no-shadow */
 
 import React, { Component } from 'react';
-import { Sidebar } from '@centreon/react-components';
+import { Sidebar } from '@centreon/ui';
 import { connect } from 'react-redux';
 import { menuSelector } from '../../redux/selectors/navigation/menu';
 import { reactRoutesSelector } from '../../redux/selectors/navigation/reactRoutes';
-import { fetchNavigationData } from "../../redux/actions/navigationActions";
+import { fetchNavigationData } from '../../redux/actions/navigationActions';
 
 class Navigation extends Component {
   componentDidMount = () => {
@@ -20,10 +20,7 @@ class Navigation extends Component {
     const { navigationData, reactRoutes } = this.props;
 
     return (
-      <Sidebar
-        navigationData={navigationData}
-        reactRoutes={reactRoutes}
-      />
+      <Sidebar navigationData={navigationData} reactRoutes={reactRoutes} />
     );
   }
 }
@@ -44,7 +41,4 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Navigation);
+export default connect(mapStateToProps, mapDispatchToProps)(Navigation);