src: Adapt to insights-chrome 2.0

config/dev.webpack.config.js

@@ -1,13 +1,24 @@
-
 const { resolve } = require('path');
 const config = require('@redhat-cloud-services/frontend-components-config');
 const { config: webpackConfig, plugins } = config({
     rootFolder: resolve(__dirname, '../'),
     debug: true,
-    https: false,
     port: 8002,
+    useFileHash: false,
+    skipChrome2: true,
 });
 
+plugins.push(
+    require('@redhat-cloud-services/frontend-components-config/federated-modules')({
+        root: resolve(__dirname, '../'),
+        useFileHash: false,
+        moduleName: 'image_builder',
+        exposes: {
+            './RootApp': resolve(__dirname, '../src/AppEntry.js'),
+        },
+    })
+);
+
 module.exports = {
     ...webpackConfig,
     plugins

config/prod.webpack.config.js

@@ -1,10 +1,20 @@
-
 const { resolve } = require('path');
 const config = require('@redhat-cloud-services/frontend-components-config');
 const { config: webpackConfig, plugins } = config({
-    rootFolder: resolve(__dirname, '../')
+    rootFolder: resolve(__dirname, '../'),
+    skipChrome2: false,
 });
 
+plugins.push(
+    require('@redhat-cloud-services/frontend-components-config/federated-modules')({
+        root: resolve(__dirname, '../'),
+        moduleName: 'image_builder',
+        exposes: {
+            './RootApp': resolve(__dirname, '../src/AppEntry.js'),
+        },
+    })
+);
+
 module.exports = {
     ...webpackConfig,
     plugins

config/test.webpack.config.js

@@ -1,10 +1,26 @@
-
 const { resolve } = require('path');
 const config = require('@redhat-cloud-services/frontend-components-config');
 const { config: webpackConfig, plugins } = config({
-    rootFolder: resolve(__dirname, '../')
+    rootFolder: resolve(__dirname, '../'),
+    debug: true,
+    port: 8002,
+    useFileHash: false,
+    skipChrome2: false,
 });
 
+console.log('CONFIG', config);
+
+plugins.push(
+    require('@redhat-cloud-services/frontend-components-config/federated-modules')({
+        root: resolve(__dirname, '../'),
+        useFileHash: false,
+        moduleName: 'image_builder',
+        exposes: {
+            './RootApp': resolve(__dirname, '../src/AppEntry.js'),
+        },
+    })
+);
+
 module.exports = {
     ...webpackConfig,
     plugins

package.json

@@ -7,9 +7,9 @@
     "@patternfly/patternfly": "4.102.2",
     "@patternfly/react-core": "4.115.2",
     "@patternfly/react-table": "4.26.7",
-    "@redhat-cloud-services/frontend-components": "2.5.10",
+    "@redhat-cloud-services/frontend-components": "3.0.3",
     "@redhat-cloud-services/frontend-components-notifications": "3.1.0",
-    "@redhat-cloud-services/frontend-components-utilities": "2.2.9",
+    "@redhat-cloud-services/frontend-components-utilities": "3.1.2",
     "classnames": "2.3.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -43,7 +43,7 @@
     "@babel/preset-env": "7.8.7",
     "@babel/preset-flow": "7.8.3",
     "@babel/preset-react": "7.8.3",
-    "@redhat-cloud-services/frontend-components-config": "2.1.9",
+    "@redhat-cloud-services/frontend-components-config": "4.0.28",
     "@testing-library/react": "11.0.4",
     "@testing-library/jest-dom": "5.10.1",
     "@testing-library/user-event": "12.2.2",
@@ -52,7 +52,7 @@
     "babel-jest": "26.1.0",
     "babel-plugin-dual-import": "1.2.1",
     "babel-plugin-lodash": "3.3.4",
-    "css-loader": "3.4.2",
+    "css-loader": "5.2.4",
     "eslint": "6.8.0",
     "eslint-config-prettier": "6.10.0",
     "eslint-loader": "3.0.3",
@@ -67,9 +67,9 @@
     "stylelint": "13.1.0",
     "stylelint-config-recommended-scss": "4.2.0",
     "stylelint-scss": "3.14.2",
-    "webpack": "4.41.6",
-    "webpack-bundle-analyzer": "3.6.0",
-    "webpack-cli": "3.3.11"
+    "webpack": "5.33.2",
+    "webpack-bundle-analyzer": "4.4.0",
+    "webpack-cli": "4.6.0"
   },
   "scripts": {
     "build": "webpack --config config/prod.webpack.config.js",
@@ -78,9 +78,9 @@
     "lint:js:fix": "eslint config src --fix",
     "lint:sass": "stylelint 'src/**/*.scss' --config .stylelintrc.json",
     "nightly": "npm run travis:verify",
-    "prod": "NODE_ENV=production webpack-dev-server --config config/dev.webpack.config.js",
+    "prod": "NODE_ENV=production webpack serve --config config/dev.webpack.config.js",
     "server:ctr": "node src/server/generateServerKey.js",
-    "start": "NODE_ENV=development webpack-dev-server --config config/dev.webpack.config.js",
+    "start": "NODE_ENV=development webpack serve --config config/dev.webpack.config.js",
     "test": "jest --verbose",
     "test:single": "jest --verbose -w 1",
     "travis:build": "NODE_ENV=production webpack --config config/prod.webpack.config.js",

profiles/local-frontend-and-api-with-identity.js

@@ -4,7 +4,7 @@ const cookie = require('cookie');
 const fs = require('fs');
 const base64 = require('base-64');
 
-const SECTION = 'apps';
+const SECTION = 'insights';
 const APP_ID = 'image-builder';
 const FRONTEND_PORT = 8002;
 const API_PORT = 8086;
@@ -113,6 +113,8 @@ routes[`/apps/${APP_ID}`]            = { host: `http://localhost:${FRONTEND_PORT
 routes[`/api/${APP_ID}`]             = { host: `http://localhost:${API_PORT}` };
 routes['/apps/chrome']               = { host: PORTAL_BACKEND_MARKER };
 routes['/apps/beta/chrome']          = { host: PORTAL_BACKEND_MARKER };
+routes[`/beta/config`]            =    { host: `http://localhost:8889` };
+routes[`/config`]                 =    { host: `http://localhost:8889` };
 
 module.exports = {
     bs: {

profiles/local-frontend-and-api.js

@@ -1,6 +1,6 @@
 /*global module*/
 
-const SECTION = 'apps';
+const SECTION = 'insights';
 const APP_ID = 'image-builder';
 const FRONTEND_PORT = 8002;
 const API_PORT = 8086;

profiles/local-frontend.js

@@ -1,6 +1,6 @@
 /*global module*/
 
-const SECTION = 'apps';
+const SECTION = 'insights';
 const APP_ID = 'image-builder';
 const FRONTEND_PORT = 8002;
 const routes = {};

src/App.scss

@@ -1,3 +1,3 @@
 // Importing Global Variables
-@import "~@redhat-cloud-services/frontend-components-utilities/files/Utilities/_all";
+@import "~@redhat-cloud-services/frontend-components-utilities/styles/_all";
 @import "~@redhat-cloud-services/frontend-components/index.css";

src/AppEntry.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { init } from './store';
+import App from './App';
+
+import { getBaseName } from '@redhat-cloud-services/frontend-components-utilities/helpers';
+// import getBaseName from './Utilities/getBaseName';
+
+const ImageBuilder = ({ logger }) => (
+    <Provider store={ init({}, logger).getStore() }>
+        <Router basename={ getBaseName(window.location.pathname) }>
+            <App />
+        </Router>
+    </Provider>
+);
+
+ImageBuilder.propTypes = {
+    logger: PropTypes.any
+};
+
+export default ImageBuilder;

src/Components/CreateImageWizard/CreateImageWizard.js

@@ -293,6 +293,7 @@ class CreateImageWizard extends Component {
         return (
             <React.Fragment>
                 <Wizard
+                    className="image-builder"
                     title={ 'Create image' }
                     description={ <>
                         Create a RHEL image and push it to cloud providers.

src/Routes.js

@@ -19,8 +19,8 @@ InsightsRoute.propTypes = {
 export const Routes = () => {
     return (
         <Switch>
-            <InsightsRoute exact path='/landing' component={ LandingPage } rootClass='landingpage' />
-            <InsightsRoute exact path='/imagewizard' component={ CreateImageWizard } rootClass='imagewizard' />
+            <InsightsRoute exact path='/landing' component={ LandingPage } />
+            <InsightsRoute exact path='/imagewizard' component={ CreateImageWizard } />
             <Redirect to='/landing' />
         </Switch>
     );

src/Utilities.scss

@@ -1,3 +0,0 @@
-// Sass Imports
-
-@import "~@redhat-cloud-services/frontend-components-utilities/files/Utilities/_all";

src/bootstrap-dev.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import logger from 'redux-logger';
+import ImageBuilder from './AppEntry';
+
+ReactDOM.render(<ImageBuilder logger={ logger } />, document.getElementById('root'));

src/bootstrap.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ImageBuilder from './AppEntry';
+
+ReactDOM.render(<ImageBuilder />, document.getElementById('root'));

src/entry-dev.js

@@ -1,18 +1 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import { init } from './store';
-import App from './App';
-import logger from 'redux-logger';
-import getBaseName from './Utilities/getBaseName';
-
-ReactDOM.render(
-    <Provider store={ init({}, logger).getStore() }>
-        <Router basename={ getBaseName(window.location.pathname) }>
-            <App />
-        </Router>
-    </Provider>,
-
-    document.getElementById('root')
-);
+import('./bootstrap-dev');

src/entry.js

@@ -1,17 +1 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import { init } from './store';
-import App from './App';
-import getBaseName from './Utilities/getBaseName';
-
-ReactDOM.render(
-    <Provider store={ init().getStore() }>
-        <Router basename={ getBaseName(window.location.pathname) }>
-            <App />
-        </Router>
-    </Provider>,
-
-    document.getElementById('root')
-);
+import('./bootstrap');

src/store/index.js

@@ -1,4 +1,4 @@
-import ReducerRegistry from '@redhat-cloud-services/frontend-components-utilities/files/ReducerRegistry';
+import { ReducerRegistry } from '@redhat-cloud-services/frontend-components-utilities/ReducerRegistry';
 import promiseMiddleware from 'redux-promise-middleware';
 import thunk from 'redux-thunk';
 import { notificationsReducer } from '@redhat-cloud-services/frontend-components-notifications/redux';