@redhat-cloud-services/frontend-components-config 4.4.0-beta.2 → 4.5.1

package/README.md

@@ -20,7 +20,8 @@
         - [Using provided services](#Using-provided-services)
         - [Writing services](#Writing-services)
         - [Customizing default services](#Customizing-default-services)
-
+  - [fec node scripts](#fec-node-scripts)
+  - [include PF css modules in your bundle](#include-PF-css-modules-in-your-bundle)
 
 ## Webpack 5
 
@@ -303,3 +304,123 @@ 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.4.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
+```
+
+# include PF css modules in your bundle
+
+From version >= 4.5.0 the common config has been setup in a way, that PF styles will no longer be included in webpack build output.
+This decision has been made to remove multiple versions of PF styling from the platform and performance improvement. Patternfly styles are now hoste by chrome.
+If for some reason(bugs) you want to include PF CSS in your bundle, please use the following config:
+
+```js
+const config = require('@redhat-cloud-services/frontend-components-config');
+
+const { config: webpackConfig, plugins } = config({
+  rootFolder: resolve(__dirname, '../'),
+  bundlePfModules: true,
+  ...
+});
+
+```

package/bin/fec.js

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
-const federate = require('@redhat-cloud-services/frontend-components-config-utilities/serve-federated');
+const static = 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('federate', 'Serve federated modules', (yargs) => {
+.command('static', 'Serve webpack output without the webpack server', (yargs) => {
     yargs.positional('config', {
         type: 'string',
         alias: 'c',
@@ -23,7 +23,7 @@ const argv = yargs
 .argv;
 
 const scripts = {
-    federate
+    static
 };
 
 const args = [ argv, cwd ];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redhat-cloud-services/frontend-components-config",
-    "version": "4.4.0-beta.2",
+    "version": "4.5.1",
     "description": "Config plugins and settings for RedHat Cloud Services project.",
     "main": "index.js",
     "bin": {
@@ -20,7 +20,7 @@
     },
     "homepage": "https://github.com/RedHatInsights/frontend-components/tree/master/packages/config#readme",
     "dependencies": {
-        "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.0-beta.0",
+        "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.4",
         "assert": "^2.0.0",
         "babel-loader": "^8.2.2",
         "browserify-zlib": "^0.2.0",

package/src/config.js

@@ -2,6 +2,7 @@
 const path = require('path');
 const proxy = require('@redhat-cloud-services/frontend-components-config-utilities/proxy');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const searchIgnoredStyles = require('@redhat-cloud-services/frontend-components-config-utilities/search-ignored-styles');
 
 module.exports = ({
     port,
@@ -31,7 +32,8 @@ module.exports = ({
     useCloud,
     target,
     registry,
-    client = {}
+    client = {},
+    bundlePfModules = false
 } = {}) => {
     const filenameMask = `js/[name]${useFileHash ? '.[chunkhash]' : ''}.js`;
     if (betaEnv) {
@@ -143,9 +145,7 @@ module.exports = ({
         resolve: {
             extensions: [ '.ts', '.tsx', '.mjs', '.js', '.scss' ],
             alias: {
-                customReact: 'react',
-                PFReactCore: '@patternfly/react-core',
-                PFReactTable: '@patternfly/react-table'
+                ...(bundlePfModules ? {} : searchIgnoredStyles(rootFolder))
             },
             fallback: {
                 path: require.resolve('path-browserify'),

package/src/config.test.js

@@ -4,7 +4,9 @@
     appEntry,
     rootFolder,
     https*/
-import configBuilder from './config';
+import config from './config';
+
+const configBuilder = (c) => config({ rootFolder: '', ...c });
 
 describe('should create dummy config with no options', () => {
     const {
@@ -13,7 +15,7 @@ describe('should create dummy config with no options', () => {
         entry,
         output,
         devServer
-    } = configBuilder();
+    } = config({ rootFolder: '' });
 
     const { mode: prodMode } = configBuilder({ mode: 'production' });
     test('mode', () => {