fix(build): sw-460 dev standalone local run (RedHatInsights#957)

* build, revert mock keycloak changes RedHatInsights#954 * build, apply CRA updates for standalone run * routerHelpers, redirect, convert path func
cdcabrera · Jul 27, 2022 · dc5756d · dc5756d
1 parent 9fec20c
commit dc5756d
Show file tree

Hide file tree

Showing 19 changed files with 3,063 additions and 145 deletions.
diff --git a/.env b/.env
@@ -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

diff --git a/.env.development b/.env.development
@@ -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
diff --git a/config/spandx.config.js b/config/spandx.config.js
@@ -5,9 +5,6 @@
  */
 const setDevRoutes = () => ({
   routes: {
-    '/auth': {
-      host: `http://localhost:5000`
-    },
     '/api/rhsm-subscriptions': {
       host: `http://localhost:5000`
     }

diff --git a/jest.config.js b/jest.config.js
@@ -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',

diff --git a/package.json b/package.json
@@ -49,8 +49,20 @@
       }
     ]
   },
+  "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 -w ./src/services/platform",
+    "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",
@@ -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",
@@ -162,6 +177,7 @@
     "npm-check-updates": "^16.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
+    "react-scripts": "^5.0.1",
     "redux-mock-store": "^1.5.4",
     "standard-version": "^9.5.0",
     "swagger-ui-express": "^4.5.0",

diff --git a/public/index.html b/public/index.html
@@ -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>
diff --git a/src/app.js b/src/app.js
@@ -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>

diff --git a/src/common/__tests__/__snapshots__/helpers.test.js.snap b/src/common/__tests__/__snapshots__/helpers.test.js.snap
@@ -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,

diff --git a/src/common/helpers.js b/src/common/helpers.js
@@ -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,

diff --git a/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap b/src/components/router/__tests__/__snapshots__/routerHelpers.test.js.snap
@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`RouterHelpers should apply a simple pathJoin helper: double forward slash 1`] = `"//hello/world/lorem/ipsum/dolor"`;
+
+exports[`RouterHelpers should apply a simple pathJoin helper: forward slashes everywhere 1`] = `"//hello/world/lorem/ipsum/dolor"`;
+
+exports[`RouterHelpers should apply a simple pathJoin helper: single forward slash 1`] = `"/hello/world/lorem/ipsum/dolor/"`;
+
+exports[`RouterHelpers should apply a simple pathJoin helper: triple forward slash 1`] = `"//hello/world/lorem/ipsum/dolor"`;
+
 exports[`RouterHelpers should handle location search and hash passthrough values: NO search and hash 1`] = `
 Object {
   "routeHref": "/rhel",
@@ -161,6 +169,7 @@ Object {
   "getRouteConfig": [Function],
   "getRouteConfigByPath": [Function],
   "importView": [Function],
+  "pathJoin": [Function],
   "platformLandingRedirect": "/",
   "platformModalRedirect": "/?not_entitled=subscriptions",
   "productGroups": Object {

diff --git a/src/components/router/__tests__/routerHelpers.test.js b/src/components/router/__tests__/routerHelpers.test.js
@@ -4,7 +4,8 @@ import {
   dynamicBasePath,
   getErrorRoute,
   getRouteConfig,
-  getRouteConfigByPath
+  getRouteConfigByPath,
+  pathJoin
 } from '../routerHelpers';
 import { routes } from '../../../config/routes';
 
@@ -107,6 +108,15 @@ describe('RouterHelpers', () => {
     ).toMatchSnapshot('insights, beta app lorem route name base path');
   });
 
+  it('should apply a simple pathJoin helper', () => {
+    expect(pathJoin('/hello', 'world', 'lorem/', 'ipsum', '/dolor/')).toMatchSnapshot('single forward slash');
+    expect(pathJoin('//hello', '/world', '/lorem/', 'ipsum', '/dolor')).toMatchSnapshot('double forward slash');
+    expect(pathJoin('///hello', '/world', '//lorem/', 'ipsum', '//dolor')).toMatchSnapshot('triple forward slash');
+    expect(pathJoin('/////hello', '///world////', '///////lorem///', 'ipsum', '///dolor')).toMatchSnapshot(
+      'forward slashes everywhere'
+    );
+  });
+
   it('should return an error route', () => {
     expect(getErrorRoute).toMatchSnapshot('error route');
   });

diff --git a/src/components/router/redirect.js b/src/components/router/redirect.js
@@ -1,8 +1,7 @@
-import path from 'path';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Router } from './router';
-import { routerHelpers } from './routerHelpers';
+import { pathJoin, routerHelpers } from './routerHelpers';
 import { helpers } from '../../common';
 /**
  * A routing redirect.
@@ -22,7 +21,7 @@ const Redirect = ({ isForced, route, routes, url }) => {
    */
   const forceNavigation = () => {
     const { hash = '', search = '' } = window.location;
-    const forcePath = url || (route && `${path.join(baseName, route)}${search}${hash}`);
+    const forcePath = url || (route && `${pathJoin(baseName, route)}${search}${hash}`);
 
     window.location.replace(forcePath);
   };

diff --git a/src/components/router/routerHelpers.js b/src/components/router/routerHelpers.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import path from 'path';
 import { helpers } from '../../common/helpers';
 import { routesConfig } from '../../config';
 
@@ -15,14 +14,14 @@ const appName = helpers.UI_NAME;
  *
  * @returns {Array}
  */
-const platformLandingRedirect = path.join(helpers.UI_DEPLOY_PATH_PREFIX, '/');
+const platformLandingRedirect = `${helpers.UI_DEPLOY_PATH_PREFIX || ''}/`;
 
 /**
  * Return a string that describes a platform redirect.
  *
  * @returns {Array}
  */
-const platformModalRedirect = path.join(helpers.UI_DEPLOY_PATH_PREFIX, '/?not_entitled=subscriptions');
+const platformModalRedirect = `${helpers.UI_DEPLOY_PATH_PREFIX || ''}/?not_entitled=subscriptions`;
 
 /**
  * Return an assumed route baseName directory based on existing app name.
@@ -62,6 +61,28 @@ const dynamicBasePath = ({ pathName = window.location.pathname, appName: applica
  */
 const basePath = (helpers.TEST_MODE && '/') || dynamicBasePath();
 
+/**
+ * Basic path join, minor emulation for path.join.
+ *
+ * @param {object} paths
+ * @returns {string}
+ */
+const pathJoin = (...paths) => {
+  let updatedPath = Array.from(paths);
+  const hasLead = /^\/\//.test(updatedPath[0]);
+  updatedPath = updatedPath
+    .join('/')
+    .replace(/(\/\/)+/g, '~')
+    .replace(/~/g, '/')
+    .replace(/\/\//g, '/');
+
+  if (hasLead) {
+    updatedPath = `/${updatedPath}`;
+  }
+
+  return updatedPath;
+};
+
 /**
  * Generate product groups for applying query filter resets.
  *
@@ -254,6 +275,7 @@ const routerHelpers = {
   getRouteConfig,
   getRouteConfigByPath,
   importView,
+  pathJoin,
   platformLandingRedirect,
   platformModalRedirect,
   productGroups,
@@ -275,6 +297,7 @@ export {
   getRouteConfig,
   getRouteConfigByPath,
   importView,
+  pathJoin,
   platformLandingRedirect,
   platformModalRedirect,
   productGroups,

diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,29 @@
+/**
+ * Used for standalone local run only.
+ */
+import './styles/standalone.scss';
+import '@patternfly/react-core/dist/styles/base.css';
+import('./bootstrap');
+
+window.insights = {
+  chrome: {
+    appNavClick: (...args) => console.log(`Emulated appNavClick: ${JSON.stringify(args)}`),
+    auth: {
+      getUser: () =>
+        new Promise(resolve => {
+          resolve({
+            identity: {
+              account_number: '0',
+              type: 'User'
+            }
+          });
+        })
+    },
+    getUserPermissions: () => [],
+    hideGlobalFilter: Function.prototype,
+    identifyApp: Function.prototype,
+    init: Function.prototype,
+    isBeta: Function.prototype,
+    on: Function.prototype
+  }
+};
diff --git a/src/services/platform/platformServices.js b/src/services/platform/platformServices.js
@@ -9,23 +9,6 @@ import {
   PLATFORM_API_RESPONSE_USER_PERMISSION_TYPES as USER_PERMISSION_TYPES
 } from './platformConstants';
 
-/**
- * @api {get} /auth/realms/redhat-external/protocol/openid-connect/3p-cookies/step1.html
- * @apiDescription Mock keycloak bypass
- *
- * @apiSuccessExample {html} Success-Response:
- *     HTTP/1.1 200 OK
- *     <!DOCTYPE html>
- *     <html>
- *       <body>
- *         <script>
- *           document.cookie = "KEYCLOAK_3P_COOKIE_SAMESITE=; expires=Thu, 01 Jan 1970 00:00:00 GMT; secure"
- *           document.cookie = "KEYCLOAK_3P_COOKIE=; expires=Thu, 01 Jan 1970 00:00:00 GMT"
- *           window.parent.postMessage("supported", "*")
- *         </script>
- *       </body>
- *     </html>
- */
 /**
  * Basic user authentication.
  *

diff --git a/src/styles/standalone.scss b/src/styles/standalone.scss
@@ -0,0 +1,23 @@
+.mock-header {
+  min-height: 4.25rem;
+  background-color: var(--pf-global--BackgroundColor--dark-100);
+}
+
+section.pf-l-page-header {
+  margin: 1.25rem;
+}
+
+.pf-c-page__main-section.curiosity  {
+  background-color: var(--pf-global--BackgroundColor--light-300);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
diff --git a/tests/__snapshots__/code.test.js.snap b/tests/__snapshots__/code.test.js.snap
@@ -6,6 +6,7 @@ Array [
   "components/inventoryCard/inventoryCardHelpers.js:83:          console.warn(\`Warning: Filter \\"\${id}\\" not found in \\"table row\\" response data.\`, cellData);",
   "components/inventoryCard/inventoryList.deprecated.js:62:        console.warn(\`Sorting can only be performed on select fields, confirm field \${id} is allowed.\`);",
   "components/inventoryCardSubscriptions/inventoryCardSubscriptionsContext.js:127:        console.warn(\`Sorting can only be performed on select fields, confirm field \${id} is allowed.\`);",
+  "index.js:10:    appNavClick: (...args) => console.log(\`Emulated appNavClick: \${JSON.stringify(args)}\`),",
   "redux/common/reduxHelpers.js:282:    console.error(\`Error: Property \${prop} does not exist within the passed state.\`, state);",
   "redux/common/reduxHelpers.js:286:    console.warn(\`Warning: Property \${prop} does not exist within the passed initialState.\`, initialState);",
   "services/common/helpers.js:95:    console.error(",