build(dev,proxy,prod): ent-3643 chrome local run, proxy, build

* babel, moved to independent config from package
* build, empty module, plugins for html, dotenv replace
* cspell, ouia keyword added
* docs, local run descriptions, debugging updated
* dotenv, locale path, port, build branch
* eslint, json extensions are now required
* jest, adjust coverage based on fed mod file adds
* public, index.html apply esi instead of dotenv params
* scripts, remove original dev chrome, clean up post, proxy
* spandx, proxy routing clean up
* src, fed module file adds, component dev checks removed
* tests, integration-like tests updated
* webpack, dev, proxy, prod configs

.env.development

@@ -1,11 +1,11 @@
-REACT_APP_ENV=development
-PUBLIC_URL=/
+DEV_PORT=3000
+DEV_BRANCH=prod-stable
 
-REACT_APP_INCLUDE_CONTENT_HEADER=<!-- esi:include placeholder -->
-REACT_APP_INCLUDE_CONTENT_BODY=<div id="root"></div>
+REACT_APP_ENV=development
+REACT_APP_UI_DEPLOY_PATH_PREFIX=/beta
 
-REACT_APP_CONFIG_SERVICE_LOCALES=./locales/locales.json
-REACT_APP_CONFIG_SERVICE_LOCALES_PATH=./locales/{{lng}}.json
+REACT_APP_CONFIG_SERVICE_LOCALES=/locales/locales.json
+REACT_APP_CONFIG_SERVICE_LOCALES_PATH=/locales/{{lng}}.json
 
 REACT_APP_SERVICES_RHSM_VERSION=http://localhost:5000/api/rhsm-subscriptions/v1/version
 REACT_APP_SERVICES_RHSM_REPORT=http://localhost:5000/api/rhsm-subscriptions/v1/tally/products/

.env.production

@@ -1,5 +1,3 @@
-GENERATE_SOURCEMAP=true
-
 REACT_APP_ENV=production
 REACT_APP_UI_VERSION=${UI_VERSION}
 

.env.proxy

@@ -1,20 +1,7 @@
-HTTPS=true
-BROWSER=none
-PORT=5001
-UI_DEPLOY_PATH_PREFIX=/beta
+DEV_PORT=443
+DEV_BRANCH=ci-stable
 
 REACT_APP_ENV=review
 
-REACT_APP_INCLUDE_CONTENT_HEADER='<esi:include src="${UI_DEPLOY_PATH_PREFIX}/apps/chrome/snippets/head.html" />'
-REACT_APP_INCLUDE_CONTENT_BODY='<esi:include src="${UI_DEPLOY_PATH_PREFIX}/apps/chrome/snippets/body.html" />'
-
 REACT_APP_CONFIG_SERVICE_LOCALES=/locales/locales.json
 REACT_APP_CONFIG_SERVICE_LOCALES_PATH=/locales/{{lng}}.json
-
-REACT_APP_SERVICES_RHSM_VERSION=/api/rhsm-subscriptions/v1/version
-REACT_APP_SERVICES_RHSM_REPORT=/api/rhsm-subscriptions/v1/tally/products/
-REACT_APP_SERVICES_RHSM_CAPACITY=/api/rhsm-subscriptions/v1/capacity/products/
-REACT_APP_SERVICES_RHSM_INVENTORY=/api/rhsm-subscriptions/v1/hosts/products/
-REACT_APP_SERVICES_RHSM_INVENTORY_GUESTS=/api/rhsm-subscriptions/v1/hosts/{0}/guests
-REACT_APP_SERVICES_RHSM_INVENTORY_SUBSCRIPTIONS=/api/rhsm-subscriptions/v1/subscriptions/products/
-REACT_APP_SERVICES_RHSM_OPTIN=/api/rhsm-subscriptions/v1/opt-in

.eslintrc

@@ -59,7 +59,7 @@
     "import/extensions": [
       "error",
       {
-        "json": "never"
+        "json": "always"
       }
     ],
     "import/first": 0,

CONTRIBUTING.md

@@ -4,7 +4,7 @@ Contributing encompasses repository specific requirements and the global [Insigh
 ## Install
 Before developing you'll need to install:
  * [NodeJS and NPM](https://nodejs.org/)
- * [Docker](https://docs.docker.com/engine/installation/)
+ * [Docker](https://docs.docker.com/engine/install/)
  * And [Yarn](https://yarnpkg.com)
 
 ### OS Support
@@ -25,7 +25,7 @@ Setting Docker up on a Mac? Install the appropriate package and you should be go
 
 ### Docker & Linux
 Setting Docker up on a Linux machine can include an additional convenience step. If you're having to prefix "sudo" in front of your Docker commands you can try these steps.
-  * [Docker postinstall documentation](https://docs.docker.com/install/linux/linux-postinstall/)
+  * [Docker postinstall documentation](https://docs.docker.com/engine/install/linux-postinstall/)
 
 ### Yarn
 Once you've installed NodeJS you can use NPM to perform the [Yarn](https://yarnpkg.com) install
@@ -83,7 +83,7 @@ Curiosity makes use of the branches `master`, `stage`, `qa`, and `ci`.
 #### Branching and Pull Request Workflow
 It is required that all work is handled through GitHub's fork and pull workflow. 
 
-**Working directly on the master repository is highly discouraged since a form of Continuous Integration is implemented and dependent on branch structure.**
+**Working directly on the main repository is highly discouraged. Continuous Integration is dependent on branch structure.**
 
 1. General development PRs should almost always be opened against the `ci` branch.
 1. It is preferred that PRs to `qa` originate from `ci`, but testing related fixes and general PRs opened against `qa` are allowed.
@@ -111,29 +111,35 @@ It is required that all work is handled through GitHub's fork and pull workflow.
 To serve content you'll need to have Docker, Node, and Yarn installed.
 
 Serving content comes in 3 variations
-- `$ yarn start`, Styled local run, without the Insights proxy. 
-  
-  The cons to this are a lack of chroming aspects such as functional login and left navigation.
-- `$ yarn start:proxy`, Styled local run WITH the Insights proxy. 
-   
-  This requires access in order to be used, and you may be asked for your credentials during initial repository setup. The credentials are used to modify your `hosts` for local run.
-- `$ yarn start:standalone`, No Insights styling, just the straight GUI. 
-  
-  Useful for confirming issues between the Insights parent app vs Curiosity Frontend.
+- `$ yarn start`, Styled local run, without the Insights proxy, using a mock server.
+  - You'll be presented with a login, you can attempt to login with user `admin` password `admin` as the credentials.
+    However, the up-to-date credentials are maintained here, [RH Cloud Services Config standalone](https://github.com/RedHatInsights/frontend-components/tree/master/packages/config#standalone)
+  - By default `local` run uses the `prod-stable` branch of the [Insights chroming repo](https://github.com/RedHatInsights/insights-chrome) (see the repo for additional branches). You can run a branch of your choice by either running the terminal command
+     ```
+      $ export DEV_BRANCH=ci-beta; yarn start
+     ```
+    or by placing the parameter in a `.env.local` dotenv file in the root directory of the project (you can use .env.development and .env.proxy as examples)
+     ```
+      DEV_BRANCH=ci-beta
+     ```
+  - Terminal messaging should indicate the path at which the app can be opened, you may need to scroll up.
+
+- `$ yarn start:proxy`, Styled local using the Insights proxy.
+  - This requires access in order to be used. In addition, you may be asked for your credentials during initial repository setup. The credentials are used to modify your `hosts` for local run.
+  - By default `proxy` run uses the `ci-stable` branch of the [Insights chroming repo](https://github.com/RedHatInsights/insights-chrome) (see the repo for additional branches). You can run a branch of your choice by either running the terminal command
+     ```
+      $ export DEV_BRANCH=ci-beta; yarn start:proxy
+     ```
+    or by placing the parameter in a `.env.local` dotenv file in the root directory of the project (you can use .env.development and .env.proxy as examples)
+     ```
+      DEV_BRANCH=ci-beta
+     ```
+  - Terminal messaging should indicate the path at which the app can be opened, you may need to scroll up.
 
 ### Proxy failing to run?
 Occasionally the proxy setup will attempt to connect, acknowledge that it's connected, but then fail to load the GUI.
 Things to try:
 
-#### It's the Port, maybe?
-The API requires a secure origin header within its AJAX/XHR calls.
-1. Stop the build
-1. Confirm within `package.json` that the NPM scripts
-   - `$ yarn api:proxy` has a port parameter setting of `443`
-   - `$ yarn api:proxy` has the `domain` or `-d` parameter setup like `...proxy.api.sh -d "https://ci.foo.redhat.com/beta/subscriptions/"...` 
-1. Run the build again, `$ yarn start:proxy`
-1. Confirm you browser is pointed at `https://ci.foo.redhat.com/...`
-
 #### It's Docker?
 1. Stop the build
 1. Restart Docker
@@ -144,8 +150,14 @@ The API requires a secure origin header within its AJAX/XHR calls.
 1. Confirm you're logged in, connect if necessary
 1. Run the build again, `$ yarn start:proxy`
 
+#### You forgot to unset an exported parameter
+1. Determine if you recently ran any command that used `$ export DEV_[something]; yarn [some-command]`.
+1. Stop the build
+2. Unset that `exported` value by running `$ unset DEV_[something]`
+1. Run the build again, `$ yarn start:proxy`
+
 #### It's still failing, and now I'm frustrated!
-You can take the easy way out and just run, `$ yarn start`, it'll be styled and use mock data but you'll have enough access to continue development. 
+You can take the easy way out and just run, `$ yarn start`, it'll be styled and use mock data, but you'll have enough access to continue development. 
 
 ## Build
 ### dotenv files
@@ -177,21 +189,29 @@ This project makes use of reserved DOM attributes used by the QE team.
 
 ### Reserved Files
 #### Spandx Config
-The configuration file(s) within this directory are utilized primarily during the `$ yarn start:proxy` local development run.
+##### Current setup
+A low level Spandx config is being used within the [proxy config](./config/webpack.proxy.config.js) local run. It follows the same guidelines as the original Spandx config, but is now
+integrated with dotenv parameters.
 
-This file(s) has multiple team and build dependencies. **Before relocating/moving this file(s) the appropriate teams should be informed.**
+This proxy route file still has multiple team and build dependencies. **Before relocating/moving this file(s) the appropriate teams should be informed.**
 - Development team
 - QE team
 
-There is a related integration test snapshot(s), `./tests/platform.test.js` that will need to be updated if this file(s) is updated.
+There is a related integration test snapshot(s) of this proxy route file, `./tests/platform.test.js` that may need updating if the file is altered.
 
 ## Testing
 To test content you'll need to have Node and Yarn installed.
 
+### Analyzing build output
+You may want to confirm what exactly gets output from the build, run the build with `analyze`
+   ```
+   $ export DEV_ANALYZE=true; yarn build
+   ```
+
 ### Code Coverage Requirements
 Updates that drop coverage below the current threshold will need to have their coverage expanded accordingly before being merged. 
 
-Settings for the Jest aspect of code coverage can be found in [package.json](./package.json). Settings for the CI reporting level of code coverage
+Settings for the Jest aspect of code coverage can be found in [jest.config.js](./jest.config.js). Settings for the CI reporting level of code coverage
 can be found in [.codecov.yml](./.codecov.yml).
 
 ### Debugging and Testing
@@ -222,16 +242,12 @@ Once you have made the dotenv file and/or changes, like the below "debug" flags,
 
 
 ##### Local CSS/Styling display vs Environments
-The default context for starting the local development run with 
+The default context for starting local development runs with the command
    ```
    $ yarn start
    ```
-Comes with a caveat, it uses the [Platform Chrome](https://github.com/RedHatInsights/insights-chrome) CI/master branch as its basis. What
-this means is that potential styling changes will affect it, or not depending on recent updates. If styling is looking odd/off, or you
-simply want to use the production styling update the NPM script branch parameter, line 63. Simply change `master` to something like `prod-stable`.
-   ```
-   "dev:chrome": "sh ./scripts/dev.chrome.sh -b master"
-   ```
+
+This default comes with a caveat, it uses mock API data.
 
 ##### Graph display
 You can apply a date override during **local development** (using `$ yarn start`) by adding the following line to your `.env.local` file.
@@ -254,7 +270,7 @@ You can access different levels of user permissions during **local development**
    REACT_APP_DEBUG_PERMISSION_APP_TWO=inventory:*:*
    ```
 
-As additional resource and operation checks are implemented these values can be altered accordingly.
+As additional resource and operation checks are implemented these values should be altered accordingly.
 
 Combining these flags with [manipulating the http status on the API/service mocks](https://github.com/cdcabrera/apidoc-mock#more-examples-and-custom-responses) can be an effective emulation.
 

README.md

@@ -8,7 +8,7 @@ A web user interface for subscription reporting, based on [Patternfly](https://w
 ## Requirements
 Before developing for Curiosity Frontend, the basic requirements:
  * Your system needs to be running [NodeJS version 14+ and NPM](https://nodejs.org/)
- * [Docker](https://docs.docker.com/engine/installation/)
+ * [Docker](https://docs.docker.com/engine/install/)
  * And [Yarn 1.22+](https://yarnpkg.com) for dependency and script management.
 
 For in-depth tooling install guidance see the [contribution guidelines](./CONTRIBUTING.md#Install)

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['react-app']
+};

config/README.md

@@ -6,9 +6,12 @@ Build support scripts.
 The cspell config file(s) contain spelling configuration and include project specific terms.
 
 ## Spandx config
-The Spandx config file(s) has multiple team and build dependencies. **Before relocating/moving this file(s) the appropriate teams should be informed.**
+The Spandx config file has multiple team and build dependencies. **Before relocating/moving this file the appropriate teams should be informed.**
 
 [See CONTRIBUTING.md for up-to-date information](../CONTRIBUTING.md#spandx-config)
 
 ## Testing
 Jest configuration setup and transform scripts.
+
+## Webpack
+Webpack for local development and proxy run, and build output.

config/build.dotenv.js

@@ -1,6 +1,48 @@
 const path = require('path');
 const dotenv = require('dotenv');
 const dotenvExpand = require('dotenv-expand');
+const Dotenv = require('dotenv-webpack');
+
+/**
+ * Setup a webpack dotenv plugin config.
+ *
+ * @param {string} filePath
+ * @returns {*}
+ */
+const setupWebpackDotenvFile = filePath => {
+  const settings = {
+    systemvars: true,
+    silent: true
+  };
+
+  if (filePath) {
+    settings.path = filePath;
+  }
+
+  return new Dotenv(settings);
+};
+
+/**
+ * Setup multiple webpack dotenv file parameters.
+ *
+ * @param {object} params
+ * @param {string} params.directory
+ * @param {string} params.env
+ * @returns {Array}
+ */
+const setupWebpackDotenvFilesForEnv = ({ directory, env } = {}) => {
+  const dotenvWebpackSettings = [];
+
+  if (env) {
+    dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, `.env.${env}.local`)));
+    dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, `.env.${env}`)));
+  }
+
+  dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, '.env.local')));
+  dotenvWebpackSettings.push(setupWebpackDotenvFile(path.resolve(directory, '.env')));
+
+  return dotenvWebpackSettings;
+};
 
 /**
  * Setup, and access, a dotenv file and the related set of parameters.
@@ -21,6 +63,7 @@ const setupDotenvFile = filePath => {
  * @param {string} params.relativePath
  * @param {string} params.dotenvNamePrefix
  * @param {boolean} params.setBuildDefaults
+ * @returns {object}
  */
 const setupDotenvFilesForEnv = ({
   env,
@@ -37,14 +80,18 @@ const setupDotenvFilesForEnv = ({
   setupDotenvFile(path.resolve(relativePath, '.env'));
 
   if (setBuildDefaults) {
-    const STATIC_DIR = process.env[`${dotenvNamePrefix}_STATIC_DIR`] || 'public';
-    const PUBLIC_PATH = process.env[`${dotenvNamePrefix}_PUBLIC_PATH`] || '/';
-    const SRC_DIR = path.resolve(relativePath, process.env[`${dotenvNamePrefix}_SRC_DIR`] || 'src');
+    const DEV_MODE = process.env[`${dotenvNamePrefix}_DEV_MODE`] || undefined;
     const DIST_DIR = path.resolve(relativePath, process.env[`${dotenvNamePrefix}_DIST_DIR`] || 'dist');
     const HOST = process.env[`${dotenvNamePrefix}_HOST`] || 'localhost';
-    const PORT = process.env[`${dotenvNamePrefix}_PORT`] || '3000';
-    const DEV_MODE = process.env[`${dotenvNamePrefix}_DEV_MODE`] || undefined;
     const OUTPUT_ONLY = process.env[`_${dotenvNamePrefix}_OUTPUT_ONLY`] === 'true';
+    const PORT = process.env[`${dotenvNamePrefix}_PORT`] || '3000';
+    const PUBLIC_PATH = process.env[`${dotenvNamePrefix}_PUBLIC_PATH`] || '/';
+    const SRC_DIR = path.resolve(relativePath, process.env[`${dotenvNamePrefix}_SRC_DIR`] || 'src');
+    const STATIC_DIR = path.resolve(relativePath, process.env[`${dotenvNamePrefix}_STATIC_DIR`] || 'public');
+
+    if (!process.env.NODE_ENV) {
+      process.env.NODE_ENV = env;
+    }
 
     process.env[`_${dotenvNamePrefix}_ENV`] = process.env.NODE_ENV;
     process.env[`_${dotenvNamePrefix}_STATIC_DIR`] = STATIC_DIR;
@@ -57,6 +104,8 @@ const setupDotenvFilesForEnv = ({
     process.env[`_${dotenvNamePrefix}_OUTPUT_ONLY`] = OUTPUT_ONLY;
     process.env[`_${dotenvNamePrefix}_DEV_MODE`] = DEV_MODE;
   }
+
+  return process.env;
 };
 
-module.exports = { setupDotenvFilesForEnv };
+module.exports = { setupDotenvFilesForEnv, setupWebpackDotenvFilesForEnv };

config/build.empty.js

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

config/build.plugins.js

@@ -0,0 +1,46 @@
+const { join, resolve } = require('path');
+const webpack = require('webpack');
+const CopyPlugin = require('copy-webpack-plugin');
+const fedModulePlugin = require('@redhat-cloud-services/frontend-components-config/federated-modules');
+const { setupWebpackDotenvFilesForEnv } = require('./build.dotenv');
+
+const setHtmlPlugin = () => ({
+  title: process.env.REACT_APP_UI_DISPLAY_NAME,
+  template: join(process.env._BUILD_STATIC_DIR, 'index.html')
+});
+
+const setReplacePlugin = () => [
+  {
+    pattern: /%([A-Z_]+)%/g,
+    replacement: (match, $1) => process.env?.[$1] || match
+  }
+];
+
+const setCommonPlugins = () => {
+  const { NODE_ENV } = process.env;
+  const DIST_DIR = process.env._BUILD_DIST_DIR;
+  const DOTENV_ENV = process.env.REACT_APP_ENV;
+  const RELATIVE_DIRNAME = process.env._BUILD_RELATIVE_DIRNAME;
+  const STATIC_DIR = process.env._BUILD_STATIC_DIR;
+
+  const plugins = [
+    ...setupWebpackDotenvFilesForEnv({ directory: RELATIVE_DIRNAME, env: DOTENV_ENV }),
+    new CopyPlugin({
+      patterns: [{ from: join(STATIC_DIR, 'locales'), to: join(DIST_DIR, 'locales'), noErrorOnMissing: true }]
+    }),
+    fedModulePlugin({ root: RELATIVE_DIRNAME })
+  ];
+
+  // Save 20kb of bundle size in prod
+  if (NODE_ENV === 'production') {
+    plugins.push(new webpack.NormalModuleReplacementPlugin(/redux-logger/, resolve(__dirname, './build.empty.js')));
+  }
+
+  return plugins;
+};
+
+module.exports = {
+  setCommonPlugins,
+  setHtmlPlugin,
+  setReplacePlugin
+};

config/cspell.config.json

@@ -33,6 +33,7 @@
     "openapi",
     "openshift",
     "optin",
+    "ouia",
     "patternfly",
     "pendo",
     "perpage",