[stable] Update build

.gitignore

@@ -1,5 +1,6 @@
 build/
 node_modules/
+public/
 
 #emacs
 *[#]*[#]
@@ -31,6 +32,7 @@ cypress/screenshots
 .cache
 .webpack-cache
 .cypress-cache
+.sass-cache
 
 #swc
 .swc

config/chunk-mapper.js

@@ -1,36 +1,64 @@
-/* global require, module */
-const { resolve } = require('path');
-const { writeFileSync, mkdirSync } = require('fs');
-
+const hotChunkRegex = RegExp('\\.hot-update\\.js$');
 class ChunkMapper {
-  config = {};
   constructor(options) {
-    this.options = options || {};
+    const { _unstableHotReload, ...rest } = options;
+    this.config = {};
+    this.options = rest || {};
+    this._unstableHotReload = _unstableHotReload;
   }
 
   apply(compiler) {
     compiler.hooks.emit.tap('ChunkMapper', (compilation) => {
-      const prefix = this.options.prefix || RegExp('^/.*/$').test(compiler.options.output.publicPath) ? compiler.options.output.publicPath : '/';
-      compilation.chunks.forEach(({ id, files, runtime }) => {
+      const prefix = this.options.prefix || (RegExp('^/.*/$').test(compiler.options.output.publicPath) ? compiler.options.output.publicPath : '/');
+      if (this._unstableHotReload) {
         const modules = Array.isArray(this.options.modules) ? this.options.modules : [this.options.modules];
-        if (modules.find((oneEntry) => RegExp(`${oneEntry}$`).test(runtime))) {
-          this.config[runtime] = {
-            ...(this.config[runtime] || {}),
-            ...(id === runtime
-              ? { entry: Array.from(files).map((item) => `${prefix}${item}`) }
-              : {
-                  modules: [
-                    ...((this.config[runtime] && this.config[runtime].modules) || []),
-                    ...Array.from(files).map((item) => `${prefix}${item}`),
-                  ],
-                }),
+        // TODO: Investigate if it is possible we could use the same script for normal builds
+        const hotEntries = Array.from(compilation.chunks)
+          .filter(({ name, runtime }) => !!modules.find((moduleName) => moduleName === name) || name === runtime)
+          .map(({ files }) =>
+            Array.from(files)
+              .filter((file) => !hotChunkRegex.test(file))
+              .map((file) => `${prefix}${file}`)
+          )
+          .flat();
+
+        modules.forEach((name) => {
+          this.config = {
+            [name]: {
+              entry: hotEntries,
+            },
           };
-        }
-      });
+        });
+      } else {
+        compilation.chunks.forEach(({ name, files, runtime }) => {
+          const modules = Array.isArray(this.options.modules) ? this.options.modules : [this.options.modules];
+          if (modules.find((oneEntry) => RegExp(`${oneEntry}$`).test(runtime))) {
+            this.config[runtime] = {
+              ...(this.config[runtime] || {}),
+              ...(name === runtime
+                ? {
+                    entry: Array.from(files)
+                      .map((item) => `${prefix}${item}`)
+                      .filter((file, _index, array) => {
+                        if (array.find((item) => !hotChunkRegex.test(item))) {
+                          return !hotChunkRegex.test(file);
+                        }
+
+                        return true;
+                      }),
+                  }
+                : {
+                    modules: [...(this.config[runtime].modules || []), ...Array.from(files).map((item) => `${prefix}${item}`)],
+                  }),
+            };
+          }
+        });
+      }
 
-      const outputPath = this.options.output || compiler.options.output.path;
-      mkdirSync(resolve(outputPath), { recursive: true });
-      writeFileSync(`${resolve(outputPath, 'fed-mods.json')}`, JSON.stringify(this.config, null, 4));
+      compilation.assets['fed-mods.json'] = {
+        source: () => JSON.stringify(this.config, null, 4),
+        size: () => JSON.stringify(this.config, null, 4).length,
+      };
     });
   }
 }

config/get-dynamic-modules.js

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const glob = require('glob');
+const fs = require('fs');
+
+const getDynamicModules = (root) => {
+  if (!root) {
+    throw new Error('Provide a directory of your node_modules to find dynamic modules');
+  }
+
+  const package = fs.readFileSync(path.resolve(root, 'package.json'), { encoding: 'utf-8' });
+  const packageJSON = JSON.parse(package);
+  const coreVersion = packageJSON.dependencies['@patternfly/react-core'];
+  const iconsVersion = packageJSON.dependencies['@patternfly/react-icons'];
+
+  const componentsGlob = path.resolve(root, 'node_modules/@patternfly/react-core/dist/dynamic/*/**/package.json');
+  const iconsGlob = path.resolve(root, 'node_modules/@patternfly/react-icons/dist/dynamic/*/**/package.json');
+
+  const files = [
+    { requiredVersion: coreVersion, files: glob.sync(componentsGlob) },
+    { requiredVersion: iconsVersion, files: glob.sync(iconsGlob) },
+  ];
+  const modules = files
+    .map(({ files, requiredVersion }) =>
+      files.reduce((acc, curr) => {
+        const moduleName = curr
+          .replace(/\/package.json$/, '')
+          .split('/node_modules/')
+          .pop();
+        return {
+          ...acc,
+          [moduleName]: {
+            version: requiredVersion,
+          },
+        };
+      }, {})
+    )
+    .reduce(
+      (acc, curr) => ({
+        ...acc,
+        ...curr,
+      }),
+      {}
+    );
+
+  return modules;
+};
+
+module.exports = getDynamicModules;

config/webpack.config.js

@@ -10,10 +10,13 @@ const proxy = require('@redhat-cloud-services/frontend-components-config-utiliti
 const imageNullLoader = require('./image-null-loader');
 
 // call default generator then pair different variations of uri with each base
-const myGenerator = asGenerator((item, ...rest) => {
+const PFGenerator = asGenerator((item, ...rest) => {
   const defaultTuples = [...defaultJoinGenerator(item, ...rest)];
   if (item.uri.includes('./assets')) {
     return defaultTuples.map(([base]) => {
+      if (base.includes('pf-4-styles')) {
+        return [base, path.relative(base, path.resolve(__dirname, '../node_modules/pf-4-styles', item.uri))];
+      }
       if (base.includes('@patternfly/patternfly')) {
         return [base, path.relative(base, path.resolve(__dirname, '../node_modules/@patternfly/patternfly', item.uri))];
       }
@@ -22,8 +25,9 @@ const myGenerator = asGenerator((item, ...rest) => {
   return defaultTuples;
 });
 
+const publicPath = process.env.BETA === 'true' ? '/beta/apps/chrome/js/' : '/apps/chrome/js/';
 const commonConfig = ({ dev }) => {
-  const publicPath = process.env.BETA === 'true' ? '/beta/apps/chrome/js/' : '/apps/chrome/js/';
+  /** @type { import("webpack").Configuration } */
   return {
     entry: dev
       ? // HMR request react, react-dom and react-refresh/runtime to be in the same chunk
@@ -35,10 +39,10 @@ const commonConfig = ({ dev }) => {
     output: {
       path: path.resolve(__dirname, '../build/js'),
       // the HMR needs dynamic entry filename to remove name conflicts
-      filename: dev ? '[name].js' : 'chrome-root.[fullhash].js',
+      filename: dev ? '[name].js' : 'chrome-root.[contenthash].js',
       hashFunction: 'xxhash64',
       publicPath,
-      chunkFilename: dev ? '[name].js' : '[name].[fullhash].js',
+      chunkFilename: dev ? '[name].js' : '[name].[contenthash].js',
     },
     ...(dev
       ? {
@@ -112,7 +116,7 @@ const commonConfig = ({ dev }) => {
             {
               loader: 'resolve-url-loader',
               options: {
-                join: createJoinFunction('myJoinFn', createJoinImplementation(myGenerator)),
+                join: createJoinFunction('myJoinFn', createJoinImplementation(PFGenerator)),
               },
             },
             {
@@ -183,12 +187,68 @@ const commonConfig = ({ dev }) => {
   };
 };
 
+// PF node module asset compilation config, no need to compile PF assets more than once during a run
+/** @type { import("webpack").Configuration } */
+const pfConfig = {
+  entry: {
+    'pf4-v4': path.resolve(__dirname, '../src/sass/pf-4-assets.scss'),
+    'pf4-v5': path.resolve(__dirname, '../src/sass/pf-5-assets.scss'),
+  },
+  output: {
+    path: path.resolve(__dirname, '../build/js/pf'),
+    // the HMR needs dynamic entry filename to remove name conflicts
+    filename: '[name].js',
+    publicPath: `auto`,
+  },
+  plugins: [new MiniCssExtractPlugin()],
+  stats: {
+    errorDetails: true,
+  },
+  cache: {
+    type: 'filesystem',
+    buildDependencies: {
+      config: [__filename],
+    },
+    cacheDirectory: path.resolve(__dirname, '../.sass-cache'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.s?[ac]ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'resolve-url-loader',
+            options: {
+              join: createJoinFunction('myJoinFn', createJoinImplementation(PFGenerator)),
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                outputStyle: 'compressed',
+              },
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
+        type: 'asset/resource',
+      },
+    ],
+  },
+};
+
 module.exports = function (env) {
   const dev = process.env.DEV_SERVER;
   const config = commonConfig({ dev, publicPath: env.publicPath });
   if (env.analyze === 'true') {
     config.plugins.push(new BundleAnalyzerPlugin());
   }
 
-  return config;
+  return [pfConfig, config];
 };

config/webpack.cy.config.js

@@ -6,10 +6,13 @@ const { ModuleFederationPlugin } = require('webpack').container;
 const searchIgnoredStyles = require('@redhat-cloud-services/frontend-components-config-utilities/search-ignored-styles');
 
 // call default generator then pair different variations of uri with each base
-const myGenerator = asGenerator((item, ...rest) => {
+const PFGenerator = asGenerator((item, ...rest) => {
   const defaultTuples = [...defaultJoinGenerator(item, ...rest)];
   if (item.uri.includes('./assets')) {
     return defaultTuples.map(([base]) => {
+      if (base.includes('pf-4-styles')) {
+        return [base, path.relative(base, path.resolve(__dirname, '../node_modules/pf-4-styles', item.uri))];
+      }
       if (base.includes('@patternfly/patternfly')) {
         return [base, path.relative(base, path.resolve(__dirname, '../node_modules/@patternfly/patternfly', item.uri))];
       }
@@ -18,7 +21,8 @@ const myGenerator = asGenerator((item, ...rest) => {
   return defaultTuples;
 });
 
-module.exports = {
+/** @type { import("webpack").Configuration } */
+const JSConfig = {
   module: {
     rules: [
       {
@@ -44,7 +48,7 @@ module.exports = {
           {
             loader: 'resolve-url-loader',
             options: {
-              join: createJoinFunction('myJoinFn', createJoinImplementation(myGenerator)),
+              join: createJoinFunction('myJoinFn', createJoinImplementation(PFGenerator)),
             },
           },
           {
@@ -84,7 +88,7 @@ module.exports = {
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: '[name].[fullhash].css',
+      filename: '[name].[contenthash].css',
     }),
     new ModuleFederationPlugin({
       name: 'chrome',
@@ -102,3 +106,5 @@ module.exports = {
     }),
   ],
 };
+
+module.exports = JSConfig;

config/webpack.plugins.js

@@ -8,11 +8,12 @@ const { ProvidePlugin } = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const getDynamicModules = require('./get-dynamic-modules');
 
 const deps = require('../package.json').dependencies;
 
 const plugins = (dev = false, beta = false) => {
-  const ChunkMapper = new (require('@redhat-cloud-services/frontend-components-config-utilities/chunk-mapper'))({
+  const ChunkMapper = new (require('./chunk-mapper'))({
     modules: 'chrome',
     _unstableHotReload: dev,
   });
@@ -26,11 +27,12 @@ const plugins = (dev = false, beta = false) => {
         ]
       : []),
     new MiniCssExtractPlugin({
-      filename: dev ? '[name].css' : '[name].[fullhash].css',
+      filename: dev ? '[name].css' : '[name].[contenthash].css',
+      ignoreOrder: true,
     }),
     new ModuleFederationPlugin({
       name: 'chrome',
-      filename: dev ? 'chrome.js' : 'chrome.[fullhash].js',
+      filename: dev ? 'chrome.js' : 'chrome.[contenthash].js',
       exposes: {
         './DownloadButton': resolve(__dirname, '../src/pdf/DownloadButton.tsx'),
         './LandingNavFavorites': resolve(__dirname, '../src/components/FavoriteServices/LandingNavFavorites.tsx'),
@@ -42,21 +44,25 @@ const plugins = (dev = false, beta = false) => {
         { 'react-router-dom': { singleton: true, requiredVersion: deps['react-router-dom'] } },
         { 'react-redux': { requiredVersion: deps['react-redux'] } },
         { '@openshift/dynamic-plugin-sdk': { singleton: true, requiredVersion: deps['@openshift/dynamic-plugin-sdk'] } },
-        { '@patternfly/react-core': { requiredVersion: deps['@patternfly/react-core'] } },
         { '@patternfly/quickstarts': { singleton: true, requiredVersion: deps['@patternfly/quickstarts'] } },
         { '@redhat-cloud-services/chrome': { singleton: true, requiredVersion: deps['@redhat-cloud-services/chrome'] } },
         { '@scalprum/react-core': { singleton: true, requiredVersion: deps['@scalprum/react-core'] } },
         { '@unleash/proxy-client-react': { singleton: true, requiredVersion: deps['@unleash/proxy-client-react'] } },
+        getDynamicModules(process.cwd()),
       ],
     }),
     ChunkMapper,
     new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, '../src/index.html'),
+      template: path.resolve(__dirname, '../src/index.ejs'),
       inject: 'body',
       minify: false,
       filename: dev ? 'index.html' : '../index.html',
       // FIXME: Change to /preview on May
       base: beta ? '/beta/' : '/',
+      templateParameters: {
+        pf4styles: `/${beta ? 'beta/' : ''}apps/chrome/js/pf/pf4-v4.css`,
+        pf5styles: `/${beta ? 'beta/' : ''}apps/chrome/js/pf/pf4-v5.css`,
+      },
     }),
     new HtmlWebpackPlugin({
       title: 'Authenticating - Hybrid Cloud Console',

cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx

@@ -22,7 +22,7 @@
 
   it('should close all services dropdown in link matches current pathname', () => {
     function checkMenuClosed() {
-      cy.get('.pf-c-menu-toggle__text').click();
+      cy.get('.pf-v5-c-menu-toggle__text').click();
       cy.contains('Browse all services').should('exist');
       cy.contains('Favorites').click();
       cy.contains('Test section').click();
@@ -45,7 +45,7 @@
       },
     ]);
     cy.window().then((win) => {
       (win as any).foo = {
         init: () => undefined,
         get: () => () => ({
           default: () => <div>Foo</div>,