@redhat-cloud-services/frontend-components-config 4.3.9 → 4.4.0

package/README.md

@@ -20,6 +20,7 @@
         - [Using provided services](#Using-provided-services)
         - [Writing services](#Writing-services)
         - [Customizing default services](#Customizing-default-services)
+  - [fec node scripts](#fec-node-scripts)
 
 
 ## Webpack 5
@@ -303,3 +304,106 @@ const { config: webpackConfig, plugins } = config({
   standalone: defaultServices
 });
 ```
+
+# fec node scripts
+
+Executable nodejs scripts available after installing RedHat Cloud Services frontend components - webpack config
+
+## Usage
+
+Use binary in your `package.json` scripts section:
+```js
+{
+  "scripts": {
+    "script-name": "fec <script-name> [options]"
+  }
+}
+```
+
+## Static
+
+A script that will run webpack build and serve webpack output through `http-serve` server. **This is not supposed to replace webpack dev server!**
+
+This script was added due to circular dependency issues when proxying remote containers to another application.
+A remote containers can fail to initialize, which makes local development is impossible.
+
+### Inventory example
+
+This example will describe a scenario, when we proxy the inventory remote container (for example the inventory table), to compliance UI for local development purposes.
+
+### In inventory UI repository changes
+
+```diff
+diff --git a/package.json b/package.json
+index f7513bb..d8c9008 100644
+--- a/package.json
++++ b/package.json
+@@ -69,7 +69,7 @@
+     "@babel/preset-env": "^7.15.6",
+     "@babel/preset-react": "^7.14.5",
+     "@babel/runtime": "^7.15.4",
+-    "@redhat-cloud-services/frontend-components-config": "^4.3.9",
++    "@redhat-cloud-services/frontend-components-config": "^4.5.0",
+     "@testing-library/react": "^12.1.0",
+     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
+     "abortcontroller-polyfill": "^1.7.3",
+@@ -103,6 +103,7 @@
+     "prod": "NODE_ENV=production webpack serve --config config/dev.webpack.config.js",
+     "server:ctr": "node src/server/generateServerKey.js",
+     "start": "NODE_ENV=development webpack serve --config config/dev.webpack.config.js",
++    "start:federated": "fec static --config config/dev.webpack.config.js",
+     "start:proxy": "PROXY=true NODE_ENV=development webpack serve --config config/dev.webpack.config.js",
+     "travis:build": "NODE_ENV=production webpack --config config/prod.webpack.config.js",
+     "travis:verify": "npm-run-all travis:build lint test",
+diff --git a/src/components/InventoryTable/NoSystemsTable.js b/src/components/InventoryTable/NoSystemsTable.js
+index 75de937..4fc60ab 100644
+--- a/src/components/InventoryTable/NoSystemsTable.js
++++ b/src/components/InventoryTable/NoSystemsTable.js
+@@ -10,7 +10,7 @@ const NoSystemsTable = () => (
+         <Bullseye>
+             <EmptyState variant={ EmptyStateVariant.full }>
+                 <Title headingLevel="h5" size="lg">
+-                    No matching systems found
++                    Local change
+                 </Title>
+                 <EmptyStateBody>
+                     This filter criteria matches no systems. <br /> Try changing your filter settings.
+
+```
+
+### Compliance frontend setup
+
+Note: The `routesPath` was removed because it has higher priority than `routes` config. The proxy config could have also changed in `../config/spandx.config.js` file.
+
+```diff
+diff --git a/config/dev.webpack.config.js b/config/dev.webpack.config.js
+index 73eb14c..31f6554 100644
+--- a/config/dev.webpack.config.js
++++ b/config/dev.webpack.config.js
+@@ -32,10 +32,15 @@ const webpackProxy = {
+     proxyVerbose: true,
+     useCloud: (process.env?.USE_CLOUD === 'true'),
+     ...useLocalChrome(),
+-    routesPath: process.env.ROUTES_PATH || resolve(__dirname, '../config/spandx.config.js'),
+     routes: {
+         // Additional routes to the spandx config
+         // '/beta/config': { host: 'http://localhost:8003' }, // for local CSC config
++        '/apps/inventory': {
++            host: "http://localhost:8003"
++        },
++        '/beta/apps/inventory': {
++            host: "http://localhost:8003"
++        }
+     },
+ };
+
+```
+
+### Run servers
+
+```bash
+# in the inventory frontend
+BETA=true npm run start:federated
+# in compliance frontend
+BETA=true npm run start:proxy
+```

package/bin/fec.js

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+
+const federate = require('@redhat-cloud-services/frontend-components-config-utilities/serve-federated');
+const yargs = require('yargs');
+
+const cwd = process.cwd();
+
+const argv = yargs
+.usage('Usage: $0 <command> [options]')
+.command('static', 'Serve webpack output without the webpack server', (yargs) => {
+    yargs.positional('config', {
+        type: 'string',
+        alias: 'c',
+        describe: 'Path to webpack config'
+    }).positional('port', {
+        type: 'number',
+        alias: 'p',
+        describe: 'Asset server port',
+        default: 8003
+    });
+})
+.help()
+.argv;
+
+const scripts = {
+    federate
+};
+
+const args = [ argv, cwd ];
+
+function run() {
+    if (!argv._.length || argv._.length === 0) {
+        console.error('Script name name must be specified. Run fec --help for more information.');
+        process.exit(1);
+    }
+
+    scripts[argv._[0]](...args);
+}
+
+run();

package/package.json

@@ -1,8 +1,11 @@
 {
     "name": "@redhat-cloud-services/frontend-components-config",
-    "version": "4.3.9",
+    "version": "4.4.0",
     "description": "Config plugins and settings for RedHat Cloud Services project.",
     "main": "index.js",
+    "bin": {
+        "fec": "bin/fec.js"
+    },
     "publishConfig": {
         "access": "public"
     },
@@ -17,18 +20,20 @@
     },
     "homepage": "https://github.com/RedHatInsights/frontend-components/tree/master/packages/config#readme",
     "dependencies": {
-        "@redhat-cloud-services/frontend-components-config-utilities": "^1.4.16",
+        "@redhat-cloud-services/frontend-components-config-utilities": "^1.4.17",
         "assert": "^2.0.0",
         "babel-loader": "^8.2.2",
         "browserify-zlib": "^0.2.0",
         "buffer": "^6.0.3",
         "clean-webpack-plugin": "^3.0.0",
         "css-loader": "^5.2.6",
+        "concurrently": "^6.3.0",
         "git-revision-webpack-plugin": "^3.0.6",
         "glob": "^7.0.0",
         "html-replace-webpack-plugin": "^2.6.0",
         "html-webpack-plugin": "^5.3.1",
         "https-proxy-agent": "^5.0.0",
+        "http-server": "^13.0.2",
         "mini-css-extract-plugin": "^1.6.0",
         "js-yaml": "^4.0.0",
         "jws": "^4.0.0",
@@ -44,6 +49,7 @@
         "webpack": "^5.55.1",
         "webpack-cli": "^4.8.0",
         "webpack-dev-server": "^4.3.0",
-        "write-file-webpack-plugin": "^4.5.1"
+        "write-file-webpack-plugin": "^4.5.1",
+        "yargs": "^17.2.1"
     }
 }