RedHatInsights · cdcabrera · Aug 1, 2022 · Jul 5, 2022 · Jul 6, 2022 · Jul 27, 2022
@@ -11,6 +11,7 @@ REACT_APP_UI_LINK_LEARN_MORE=https://access.redhat.com/documentation/en-us/subsc
 REACT_APP_UI_LINK_REPORT_ACCURACY_RECOMMENDATIONS=https://access.redhat.com/solutions/subscription-watch-mismatch
 
 REACT_APP_UI_DISABLED=false
+REACT_APP_UI_DISABLED_NOTIFICATIONS=false
 REACT_APP_UI_DISABLED_TOOLBAR=false
 REACT_APP_UI_DISABLED_GRAPH=false
 REACT_APP_UI_DISABLED_TABLE=false

@@ -2,3 +2,14 @@ DEV_PORT=3000
 DEV_BRANCH=stage-stable
 
 REACT_APP_ENV=development
+REACT_APP_UI_DISABLED_NOTIFICATIONS=true
+
+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/
+REACT_APP_SERVICES_RHSM_TALLY=http://localhost:5000/api/rhsm-subscriptions/v1/tally/products/{0}/{1}
+REACT_APP_SERVICES_RHSM_CAPACITY=http://localhost:5000/api/rhsm-subscriptions/v1/capacity/products/
+REACT_APP_SERVICES_RHSM_INVENTORY=http://localhost:5000/api/rhsm-subscriptions/v1/hosts/products/
+REACT_APP_SERVICES_RHSM_INVENTORY_GUESTS=http://localhost:5000/api/rhsm-subscriptions/v1/hosts/{0}/guests
+REACT_APP_SERVICES_RHSM_INVENTORY_INSTANCES=http://localhost:5000/api/rhsm-subscriptions/v1/instances/products/
+REACT_APP_SERVICES_RHSM_INVENTORY_SUBSCRIPTIONS=http://localhost:5000/api/rhsm-subscriptions/v1/subscriptions/products/
+REACT_APP_SERVICES_RHSM_OPTIN=http://localhost:5000/api/rhsm-subscriptions/v1/opt-in
@@ -95,6 +95,7 @@
         ]
       }
     ],
+    "jsdoc/no-undefined-types": [1, { "definedTypes": ["html"] }],
     "jsdoc/require-param-description": 0,
     "jsdoc/require-property-description": 0,
     "jsdoc/require-returns-description": 0,

@@ -5,6 +5,7 @@ Contributing encompasses repository specific requirements and the global [Insigh
 Before developing you'll need to install:
  * [NodeJS and NPM](https://nodejs.org/)
  * [Docker](https://docs.docker.com/engine/install/)
+   * Alternatively, you can try [Podman](https://github.com/containers/podman). [Homebrew](https://brew.sh/) can be used for the install `$ brew install podman`
  * And [Yarn](https://yarnpkg.com)
 
 ### OS Support
@@ -365,7 +366,7 @@ If you're having trouble getting an accurate code coverage report, or it's faili
 1. Start developing...
 
 ### Local Run Development Workflow
-1. Confirm you've installed all recommended tooling
+1. Confirm you've installed all recommended tooling, and it's running (Docker or alternative)
 1. Confirm the repository name has no blank spaces in it. If it does replace that blank with a dash or underscore, Docker has issues with unescaped parameter strings.
 1. Confirm you've installed resources through yarn
 1. Create a local dotenv file called `.env.local` and add the following contents

@@ -9,6 +9,7 @@ A web user interface for subscription reporting, based on [Patternfly](https://w
 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/install/)
+   * Alternatively, you can try [Podman](https://github.com/containers/podman).
  * 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)
@@ -29,9 +30,11 @@ For in-depth tooling install guidance see the [contribution guidelines](./CONTRI
 ### Serving Content
 This is the default context for running a local UI against mock styling.
 
-  ```
-  $ yarn start
-  ```
+  1. Start up Docker or equivalent tooling
+  2. Run
+     ```
+     $ yarn start
+     ```
 
 For in-depth local run guidance review the [contribution guidelines](./CONTRIBUTING.md#Serving%20Content) 
 

@@ -23,6 +23,7 @@
     "ibmpower",
     "ibmz",
     "ipsum",
+    "keycloak",
     "labelledby",
     "lorem",
     "minheight",
@@ -48,6 +49,7 @@
     "rhel",
     "rhosak",
     "rhsm",
+    "samesite",
     "select's",
     "spandx",
     "timeseries",

@@ -3,6 +3,8 @@ const path = require('path');
 module.exports = {
   process(src, filename) {
     const assetFilename = JSON.stringify(path.basename(filename));
-    return `module.exports = ${assetFilename};`;
+    return {
+      code: `module.exports = ${assetFilename};`
+    };
   }
 };
@@ -1,6 +1,8 @@
 module.exports = {
   process() {
-    return 'module.exports = {};';
+    return {
+      code: 'module.exports = {};'
+    };
   },
   getCacheKey() {
     return 'cssTransform';

@@ -6,6 +6,7 @@ module.exports = {
     '!src/app.js',
     '!src/bootstrap.js',
     '!src/entry.js',
+    '!src/index.js',
     '!src/components/**/index.js',
     '!src/common/index.js',
     '!src/redux/index.js',

@@ -49,12 +49,24 @@
       }
     ]
   },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "scripts": {
     "api:dev": "mock -p 5000 -w ./src/services -w ./src/services/rhsm",
     "api:docs": "node ./scripts/openapi.docs.js",
     "api:proxy-hosts": "bash ./scripts/proxy.api.sh",
     "build": "run-s -l build:pre build:js build:post test:integration",
-    "build:deps": "bash ./scripts/dependencies.sh --doctor -u --doctorInstall \"yarn\" --doctorTest \"yarn test:deps\" --reject \"@patternfly/*, @redhat-cloud-services/frontend*, victory*\"",
+    "build:deps": "bash ./scripts/dependencies.sh --doctor -u --doctorInstall \"yarn\" --doctorTest \"yarn test:deps\" --reject \"@patternfly/*, @redhat-cloud-services/frontend*, react-router, victory*\"",
     "build:deps-core": "bash ./scripts/dependencies.sh --doctor -u --doctorInstall \"yarn\" --doctorTest \"yarn test:deps\" --filter \"@patternfly/*, @redhat-cloud-services/frontend*, victory*\"",
     "build:ephemeral": "run-s -l build:pre build:js build:post test:integration-ephemeral",
     "build:js": "export NODE_ENV=production; webpack --config config/webpack.prod.config.js",
@@ -64,10 +76,13 @@
     "dev:chrome": "bash ./scripts/dev.chrome.sh -b prod-stable",
     "release": "standard-version",
     "release:rc": "standard-version --prerelease rc --dry-run",
-    "start": "run-p -l api:dev start:js",
+    "start": "run-p -l api:dev start:standalone",
+    "start:deprecated": "run-p -l api:dev start:js",
     "start:js": "export NODE_ENV=development; webpack serve --config config/webpack.dev.config.js",
     "start:js-proxy": "export NODE_ENV=development; webpack serve --config config/webpack.proxy.config.js",
+    "start:rs": "react-scripts start",
     "start:proxy": "run-s -l api:proxy-hosts start:js-proxy",
+    "start:standalone": "export NODE_ENV=development; run-s start:rs",
     "test": "export NODE_ENV=test; run-s test:spell* test:lint test:ci",
     "test:ci": "export CI=true; jest ./src --coverage",
     "test:ci-ephemeral": "export CI=true; TZ=UTC jest ./src --coverage --no-cache",
@@ -78,92 +93,94 @@
     "test:integration": "jest ./tests",
     "test:integration-ephemeral": "TZ=UTC jest ./tests --no-cache --testPathIgnorePatterns ./tests/dist.test.js",
     "test:integration-dev": "jest --roots=./tests --watch",
-    "test:lint": "eslint --ext=json --ext=js --ext=jsx src",
+    "test:lint": "eslint --ext=json --ext=js --ext=jsx ./src",
     "test:spell-support": "cspell ./README.md ./config/README.md ./CONTRIBUTING.md --config ./config/cspell.config.json",
     "test:spell": "cspell './public/locales/**/en*json' './src/**/*.js' --config ./config/cspell.config.json",
     "test:local": "jest --roots=./src --watch",
     "verify": "run-s test:ephemeral build:ephemeral"
   },
   "dependencies": {
     "@joi/date": "^2.1.0",
-    "@patternfly/patternfly": "4.192.1",
-    "@patternfly/react-charts": "6.51.19",
-    "@patternfly/react-core": "4.198.19",
-    "@patternfly/react-icons": "4.49.19",
-    "@patternfly/react-styles": "4.48.19",
-    "@patternfly/react-table": "4.67.19",
-    "@patternfly/react-tokens": "4.50.19",
-    "@redhat-cloud-services/frontend-components": "3.8.12",
-    "@redhat-cloud-services/frontend-components-notifications": "3.2.5",
-    "@redhat-cloud-services/frontend-components-utilities": "3.2.16",
+    "@patternfly/patternfly": "4.202.1",
+    "@patternfly/react-charts": "6.77.1",
+    "@patternfly/react-core": "4.224.1",
+    "@patternfly/react-icons": "4.75.1",
+    "@patternfly/react-styles": "4.74.1",
+    "@patternfly/react-table": "4.93.1",
+    "@patternfly/react-tokens": "4.76.1",
+    "@redhat-cloud-services/frontend-components": "3.9.8",
+    "@redhat-cloud-services/frontend-components-notifications": "3.2.9",
+    "@redhat-cloud-services/frontend-components-utilities": "3.2.23",
     "axios": "^0.26.1",
     "classnames": "^2.3.1",
-    "i18next": "^21.6.16",
-    "i18next-xhr-backend": "^3.2.2",
+    "i18next": "^21.8.14",
+    "i18next-http-backend": "^1.4.1",
     "joi": "^17.6.0",
     "js-cookie": "^3.0.1",
     "locale-code": "^2.0.2",
     "lodash": "^4.17.21",
-    "lru-cache": "^7.9.0",
+    "lru-cache": "^7.13.1",
     "moment": "^2.29.1",
     "numbro": "^2.3.6",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.16.7",
     "react-redux": "^7.2.6",
-    "react-router": "5.3.1",
+    "react-router": "5.3.3",
     "react-router-dom": "5.3.0",
-    "react-use": "^17.3.2",
+    "react-use": "^17.4.0",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "redux-promise-middleware": "^6.1.2",
     "redux-thunk": "^2.4.1",
-    "reselect": "^4.1.5",
-    "victory": "36.3.1",
-    "victory-create-container": "36.3.1"
+    "reselect": "^4.1.6",
+    "victory": "36.5.3",
+    "victory-create-container": "36.5.3"
   },
   "devDependencies": {
-    "@babel/core": "7.17.10",
-    "@babel/eslint-parser": "^7.17.0",
-    "@redhat-cloud-services/frontend-components-config": "4.6.11",
+    "@babel/core": "7.18.9",
+    "@babel/eslint-parser": "^7.18.9",
+    "@redhat-cloud-services/frontend-components-config": "4.6.18",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "apidoc-mock": "^4.0.3",
-    "babel-jest": "^28.0.3",
+    "babel-jest": "^28.1.3",
     "babel-preset-react-app": "^10.0.1",
-    "copy-webpack-plugin": "^10.2.4",
-    "cspell": "^5.20.0",
-    "dotenv": "^16.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "cspell": "^6.4.2",
+    "dotenv": "^16.0.1",
     "dotenv-expand": "^8.0.3",
-    "dotenv-webpack": "^7.1.0",
+    "dotenv-webpack": "^8.0.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "8.14.0",
+    "eslint": "8.20.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^26.1.5",
-    "eslint-plugin-jsdoc": "^39.2.9",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.6.0",
+    "eslint-plugin-jsdoc": "^39.3.3",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-webpack-plugin": "^3.1.1",
+    "eslint-webpack-plugin": "^3.2.0",
     "express": "^4.18.1",
-    "glob": "^8.0.1",
-    "jest": "27.5.1",
-    "jest-resolve": "28.0.3",
-    "jest-watch-typeahead": "1.1.0",
+    "glob": "^8.0.3",
+    "jest": "28.1.3",
+    "jest-environment-jsdom": "28.1.3",
+    "jest-resolve": "28.1.3",
+    "jest-watch-typeahead": "2.0.0",
     "moxios": "^0.4.0",
-    "npm-check-updates": "^12.5.11",
+    "npm-check-updates": "^16.0.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
+    "react-scripts": "^5.0.1",
     "redux-mock-store": "^1.5.4",
-    "standard-version": "^9.3.2",
-    "swagger-ui-express": "^4.3.0",
+    "standard-version": "^9.5.0",
+    "swagger-ui-express": "^4.5.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "yamljs": "^0.3.0"
   }

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="%REACT_APP_CONFIG_SERVICE_LOCALES_DEFAULT_LNG%">
+  <head>
+    <meta charset="utf-8" />
+    <title>Standalone Curiosity</title>
+  </head>
+  <body>
+    <header class="mock-header"></header>
+    <div id="root"></div>
+  </body>
+</html>
@@ -8,6 +8,10 @@
   YELLOW="\e[33m"
   NOCOLOR="\e[39m"
 
+  echo "Reset existing build dependencies..."
+  rm -rf -- ./node_modules
+  yarn install
+
   echo "Confirm and update build dependencies..."
 
   DEPS_UPDATE=$(ncu "$@");

@@ -6,7 +6,12 @@ import { reduxActions, storeHooks } from './redux';
 import { I18n } from './components/i18n/i18n';
 import { Router } from './components/router';
 import Authentication from './components/authentication/authentication';
+import { helpers } from './common';
 
+/**
+ * ToDo: Investigate replacing NotificationsPortal
+ * NotificationsPortal takes down the entire app when the parent Redux store is unavailable.
+ */
 /**
  * Application
  *
@@ -19,14 +24,19 @@ import Authentication from './components/authentication/authentication';
 const App = ({ getLocale, useDispatch: useAliasDispatch, useSelector: useAliasSelector }) => {
   const dispatch = useAliasDispatch();
   const { value: locale } = useAliasSelector(({ user }) => user?.locale?.data, {});
+  let platformNotifications = null;
 
   useMount(() => {
     dispatch(getLocale());
   });
 
+  if (!helpers.UI_DISABLED_NOTIFICATIONS) {
+    platformNotifications = <NotificationsPortal />;
+  }
+
   return (
     <I18n locale={locale || null}>
-      <NotificationsPortal />
+      {platformNotifications}
       <Authentication>
         <Router />
       </Authentication>

@@ -15,6 +15,7 @@ Object {
   "UI_DEPLOY_PATH_PREFIX": "",
   "UI_DISABLED": false,
   "UI_DISABLED_GRAPH": false,
+  "UI_DISABLED_NOTIFICATIONS": false,
   "UI_DISABLED_TABLE": false,
   "UI_DISABLED_TABLE_HOSTS": false,
   "UI_DISABLED_TABLE_INSTANCES": false,
@@ -56,6 +57,7 @@ Object {
   "UI_DEPLOY_PATH_PREFIX": "",
   "UI_DISABLED": false,
   "UI_DISABLED_GRAPH": false,
+  "UI_DISABLED_NOTIFICATIONS": false,
   "UI_DISABLED_TABLE": false,
   "UI_DISABLED_TABLE_HOSTS": false,
   "UI_DISABLED_TABLE_INSTANCES": false,
@@ -109,6 +111,7 @@ Object {
   "UI_DEPLOY_PATH_PREFIX": "",
   "UI_DISABLED": false,
   "UI_DISABLED_GRAPH": false,
+  "UI_DISABLED_NOTIFICATIONS": false,
   "UI_DISABLED_TABLE": false,
   "UI_DISABLED_TABLE_HOSTS": false,
   "UI_DISABLED_TABLE_INSTANCES": false,

@@ -159,6 +159,14 @@ const UI_DISABLED = process.env.REACT_APP_UI_DISABLED === 'true';
  */
 const UI_DISABLED_GRAPH = process.env.REACT_APP_UI_DISABLED_GRAPH === 'true';
 
+/**
+ * Disable platform notifications.
+ * See dotenv config files for activation.
+ *
+ * @type {boolean}
+ */
+const UI_DISABLED_NOTIFICATIONS = process.env.REACT_APP_UI_DISABLED_NOTIFICATIONS === 'true';
+
 /**
  * Disable the inventory/table aspect of the UI.
  * See dotenv config files for activation.
@@ -337,6 +345,7 @@ const helpers = {
   UI_DEPLOY_PATH_PREFIX,
   UI_DISABLED,
   UI_DISABLED_GRAPH,
+  UI_DISABLED_NOTIFICATIONS,
   UI_DISABLED_TABLE,
   UI_DISABLED_TABLE_HOSTS,
   UI_DISABLED_TABLE_INSTANCES,