@redhat-cloud-services/frontend-components-config 4.5.12 → 4.6.0

package/bin/fec.js

@@ -3,6 +3,9 @@ const { execSync } = require('child_process');
 const static = require('@redhat-cloud-services/frontend-components-config-utilities/serve-federated');
 const yargs = require('yargs');
 
+const devScript = require('../src/scripts/dev-script');
+const { logError } = require('../src/scripts/common')
+
 function patchHosts() {
     const command = `
     for host in prod.foo.redhat.com stage.foo.redhat.com qa.foo.redhat.com ci.foo.redhat.com
@@ -15,7 +18,11 @@ do
     fi
 done
 `
-    execSync(command)
+    try {
+        execSync(command)    
+    } catch (error) {
+        logError('Unable to patch /etc/hosts! Please to run the script as sudo.')
+    }
 }
 
 const cwd = process.cwd();
@@ -35,12 +42,19 @@ const argv = yargs
     });
 })
 .command('patch-etc-hosts', 'You may have to run this as \'sudo\'. Setup your etc/hosts allow development hosts in your browser')
+.command('dev', 'Start development server', (yargs) => {
+    yargs.positional('webpack-config', {
+        type: 'string',
+        describe: 'Path to webpack config',
+    })
+})
 .help()
 .argv;
 
 const scripts = {
     static,
-    'patch-etc-hosts': patchHosts
+    'patch-etc-hosts': patchHosts,
+    dev: devScript
 };
 
 const args = [ argv, cwd ];

package/index.js

@@ -33,7 +33,13 @@ module.exports = (configurations) => {
   configurations.isProd = configurations.isProd || process.env.NODE_ENV === 'production';
   const isProd = configurations.isProd;
   const { insights } = require(`${configurations.rootFolder}/package.json`);
-  const gitBranch = process.env.TRAVIS_BRANCH || process.env.BRANCH || gitRevisionPlugin.branch();
+  let gitBranch;
+  try {
+    gitBranch = process.env.TRAVIS_BRANCH || process.env.BRANCH || gitRevisionPlugin.branch();
+  } catch (error) {
+    console.log('[fec] no git branch detected, using main for webpack "main" config.');
+    gitBranch = 'main';
+  }
   const appDeployment = configurations.deployment || (isProd && betaBranches.includes(gitBranch) ? 'beta/apps' : 'apps');
 
   const publicPath = `/${appDeployment}/${insights.appname}/`;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redhat-cloud-services/frontend-components-config",
-    "version": "4.5.12",
+    "version": "4.6.0",
     "description": "Config plugins and settings for RedHat Cloud Services project.",
     "main": "index.js",
     "bin": {
@@ -22,12 +22,15 @@
     "dependencies": {
         "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.9",
         "assert": "^2.0.0",
+        "axios": "^0.25.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",
+        "chalk": "^5.0.0",
+        "express": "^4.17.2",
         "git-revision-webpack-plugin": "^3.0.6",
         "glob": "^7.0.0",
         "html-replace-webpack-plugin": "^2.6.0",
@@ -35,8 +38,10 @@
         "https-proxy-agent": "^5.0.0",
         "http-server": "^13.0.2",
         "mini-css-extract-plugin": "^1.6.0",
+        "inquirer": "^8.2.0",
         "js-yaml": "^4.0.0",
         "jws": "^4.0.0",
+        "lodash": "^4.17.21",
         "path-browserify": "^1.0.1",
         "process": "^0.11.10",
         "sass": "^1.34.1",

package/src/scripts/common.js

@@ -0,0 +1,7 @@
+const chalk = require('chalk');
+
+function logError(message) {
+  console.log(chalk.blue('[fec]') + chalk.red(' ERROR: ') + message);
+}
+
+module.exports.logError = logError;

package/src/scripts/csc-interceptor-server.js

@@ -0,0 +1,70 @@
+const path = require('path');
+const express = require('express');
+const axios = require('axios');
+const jsVarName = require('@redhat-cloud-services/frontend-components-config-utilities/jsVarName');
+const fs = require('fs');
+const jsyaml = require('js-yaml');
+
+const cwd = process.cwd();
+const pgk = require(path.resolve(cwd, './package.json'));
+
+const appname = jsVarName(pgk.insights.appname);
+const moduleName = jsVarName(appname);
+
+const frontendDeployConfig = jsyaml.load(fs.readFileSync(path.resolve(cwd, './deploy/frontend.yaml')));
+const frontendSpec = frontendDeployConfig.objects[0];
+const navItems = frontendSpec.spec.navItems;
+const fecModules = frontendSpec.spec.module;
+const bundles = Array.from(
+  new Set(
+    fecModules.modules
+      .map(({ routes }) => routes)
+      .flat()
+      .map(({ pathname }) => pathname.split('/')[1])
+  )
+);
+
+const app = express();
+const port = 9999;
+
+const BASE_URL = 'https://raw.githubusercontent.com/RedHatInsights/cloud-services-config/ci-beta/';
+
+function getRequestBundle(requestUrl) {
+  const bundle = requestUrl.split('/').pop().split('-').shift();
+  return bundle === 'rhel' ? 'insights' : bundle;
+}
+
+app.get('*', async (req, res, next) => {
+  let requestUrl = `${BASE_URL}${req.url.replace(/(\/beta)?\/config/gm, '')}`;
+  if (requestUrl.includes('insights-navigation.json')) {
+    requestUrl = requestUrl.replace('insights-navigation.json', 'rhel-navigation.json');
+  }
+  try {
+    const schema = await axios.get(requestUrl);
+    if (req.url.includes('-navigation.json') && bundles.some((bundle) => req.url.includes(bundle))) {
+      const requestBundle = getRequestBundle(requestUrl);
+      /** handle nav json */
+      const payload = schema.data;
+      payload.navItems = [...payload.navItems, ...navItems.filter(({ href }) => href.includes(requestBundle))];
+      res.json(payload);
+      res.end();
+      return;
+    } else if (req.url.includes('fed-modules.json')) {
+      /** handle fed-modules */
+      const payload = schema.data;
+      payload[moduleName] = fecModules;
+      res.json(payload);
+      res.end();
+      return;
+    }
+    res.json(schema.data);
+    res.end();
+  } catch (error) {
+    console.log(error);
+    next(error);
+  }
+});
+
+app.listen(port, () => {
+  console.log('csc-intercept-server is running on port ' + port);
+});

package/src/scripts/dev-script.js

@@ -0,0 +1,102 @@
+/* eslint-disable no-console */
+const inquirer = require('inquirer');
+const { resolve } = require('path');
+const { statSync } = require('fs');
+const { spawn } = require('child_process');
+const { logError } = require('./common');
+
+async function setEnv(cwd) {
+  return inquirer
+    .prompt([
+      {
+        type: 'list',
+        name: 'clouddotEnv',
+        message: 'Which platform environment you want to use?',
+        choices: ['stage', 'prod', { value: 'qa', name: 'qa (deprecated)' }, { value: 'ci', name: 'ci (deprecated)' }],
+      },
+      {
+        type: 'list',
+        name: 'uiEnv',
+        message: 'Which Chrome environment you want to use?',
+        choices: ['beta', 'stable'],
+      },
+    ])
+    .then((answers) => {
+      const { uiEnv, clouddotEnv } = answers;
+      process.env.BETA = uiEnv === 'beta' ? 'true' : 'false';
+      process.env.CLOUDOT_ENV = clouddotEnv ? clouddotEnv : 'stage';
+      process.env.FEC_ROOT_DIR = cwd;
+    });
+}
+
+function getWebpackConfigPath(path, cwd) {
+  let configPath;
+  try {
+    configPath = resolve(cwd, path);
+    statSync(configPath);
+    let config = require(configPath);
+    if (typeof config === 'function') {
+      config = config(process.env);
+    }
+    return configPath;
+  } catch (error) {
+    if (configPath) {
+      logError(`Unable to open webpack config at: "${configPath}"`);
+    } else {
+      logError(error);
+      throw 'FEC binary failed';
+    }
+  }
+}
+
+function validateFECConfig(cwd) {
+  const configPath = resolve(cwd, './fec.config.js');
+  try {
+    statSync(configPath);
+  } catch (error) {
+    logError(`Unable to locate "fec.config.js" at ${configPath}`);
+    throw 'fec.config.js validation failed, file does not exist';
+  }
+
+  const config = require(configPath);
+  if (!config.appUrl) {
+    logError('Missing config "appUrl" in fec.config.js');
+    throw 'fec.config.js validation failed, missing "appUrl" config';
+  }
+  process.env.FEC_CONFIG_PATH = configPath;
+}
+
+async function devScript(argv, cwd) {
+  try {
+    validateFECConfig(cwd);
+
+    const fecConfig = require(process.env.FEC_CONFIG_PATH);
+    const processArgs = [];
+    let configPath;
+    if (typeof argv.webpackConfig !== 'undefined') {
+      configPath = getWebpackConfigPath(argv.webpackConfig, cwd);
+    } else {
+      configPath = resolve(__dirname, './dev.webpack.config.js');
+    }
+    processArgs.push(`node_modules/.bin/webpack serve -c ${configPath}`);
+    await setEnv(cwd);
+    spawn('node', processArgs, {
+      stdio: [process.stdout, process.stdout, process.stdout],
+      cwd,
+      shell: true,
+    });
+    if (fecConfig.interceptChromeConfig === true) {
+      const interceptorServerPath = resolve(__dirname, './csc-interceptor-server.js');
+      const interceptorServerArgs = [interceptorServerPath];
+      spawn('node', interceptorServerArgs, {
+        stdio: [process.stdout, process.stdout, process.stdout],
+        cwd,
+        shell: true,
+      });
+    }
+  } catch (error) {
+    process.exit(1);
+  }
+}
+
+module.exports = devScript;

package/src/scripts/dev.webpack.config.js

@@ -0,0 +1,62 @@
+const config = require('@redhat-cloud-services/frontend-components-config');
+const commonPlugins = require('./webpack.plugins.js');
+const fecConfig = require(process.env.FEC_CONFIG_PATH);
+
+const isBeta = process.env.BETA === 'true';
+
+function parseRegexpURL(url) {
+  return new RegExp(`${isBeta ? '/beta' : ''}${url.toString()}`);
+}
+
+function createAppUrl(appUrl) {
+  if (Array.isArray(appUrl)) {
+    return appUrl.map((url) => {
+      if (typeof url === 'object') {
+        return parseRegexpURL(url);
+      } else if (typeof url === 'string') {
+        return `${isBeta ? '/beta' : ''}${url}`;
+      } else {
+        throw `Invalid appURL format! Expected string or regexp, got ${typeof url}. Check your fec.config.js:appUrl.`;
+      }
+    });
+  } else if (typeof appUrl === 'object') {
+    return parseRegexpURL(appUrl);
+  } else if (typeof appUrl === 'string') {
+    return `${isBeta ? '/beta' : ''}${appUrl}`;
+  } else {
+    throw `Invalid appURL format! Expected string or regexp, got ${typeof appUrl}. Check your fec.config.js:appUrl.`;
+  }
+}
+
+const appUrl = createAppUrl(fecConfig.appUrl);
+
+const { plugins: externalPlugins, interceptChromeConfig, routes, ...externalConfig } = fecConfig;
+
+const internalProxyRoutes = {
+  ...routes,
+  ...(interceptChromeConfig === true
+    ? {
+        '/beta/config': {
+          host: 'http://localhost:9999',
+        },
+        '/config': {
+          host: 'http://localhost:9999',
+        },
+      }
+    : {}),
+};
+
+const { config: webpackConfig, plugins } = config({
+  ...externalConfig,
+  routes: internalProxyRoutes,
+  appUrl,
+  deployment: isBeta ? 'beta/apps' : 'apps',
+  env: `${process.env.CLOUDOT_ENV}-${isBeta === 'true' ? 'beta' : 'stable'}`,
+  rootFolder: process.env.FEC_ROOT_DIR || process.cwd(),
+});
+plugins.push(...commonPlugins, ...externalPlugins);
+
+module.exports = {
+  ...webpackConfig,
+  plugins,
+};

package/src/scripts/empty.js

@@ -0,0 +1,2 @@
+// Used as an empty module to save bundle size
+module.exports = {};

package/src/scripts/prod.webpack.config.js

@@ -0,0 +1,19 @@
+const config = require('@redhat-cloud-services/frontend-components-config');
+const commonPlugins = require('./webpack.plugins');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+const { config: webpackConfig, plugins } = config({
+  rootFolder: process.env.FEC_ROOT_DIR || process.cwd(),
+  ...(process.env.BETA === 'true' && { deployment: 'beta/apps' }),
+});
+plugins.push(...commonPlugins);
+
+module.exports = (env) => {
+  if (env && env.analyze === 'true') {
+    plugins.push(new BundleAnalyzerPlugin());
+  }
+  return {
+    ...webpackConfig,
+    plugins,
+  };
+};

package/src/scripts/webpack.plugins.js

@@ -0,0 +1,14 @@
+const webpack = require('webpack');
+const { resolve } = require('path');
+const fedModulePlugin = require('@redhat-cloud-services/frontend-components-config/federated-modules');
+
+const rootDir = process.env.FEC_ROOT_DIR || process.cwd();
+
+const plugins = [fedModulePlugin({ root: rootDir })];
+
+// Save 20kb of bundle size in prod
+if (process.env.NODE_ENV === 'production') {
+  plugins.push(new webpack.NormalModuleReplacementPlugin(/redux-logger/, resolve(__dirname, './empty.js')));
+}
+
+module.exports = plugins;