Environment Sync, Dev to Test

CONTRIBUTING.md

@@ -8,7 +8,7 @@ Before developing you'll need to install:
  * And [Yarn](https://yarnpkg.com)
 
 ### OS Support
-A large percentage of front-end tooling is `Mac OSX` centered. The tooling for Curiosity is no exception, and is also `Mac OSX` focused.
+A large percentage of front-end tooling is `Mac OSX` centered, the tooling for Curiosity falls into this category.
 
 While some aspects of the tooling have been expanded for Linux there may still be issues. It is encouraged that OS tooling
 changes are contributed back while maintaining existing `Mac OSX` functionality.

README.md

@@ -3,7 +3,7 @@
 [![codecov](https://codecov.io/gh/RedHatInsights/curiosity-frontend/branch/master/graph/badge.svg)](https://codecov.io/gh/RedHatInsights/curiosity-frontend)
 [![License](https://img.shields.io/github/license/RedHatInsights/curiosity-frontend.svg)](https://github.com/RedHatInsights/curiosity-frontend/blob/master/LICENSE)
 
-A web user interface for subscription reporting, based on [Patternfly <img src="https://www.patternfly.org/assets/img/logo.svg" height="30" />](https://www.patternfly.org/)
+A web user interface for subscription reporting, based on [Patternfly](https://www.patternfly.org/)
 
 ## Requirements
 Before developing for Curiosity Frontend, the basic requirements:

package.json

@@ -76,29 +76,30 @@
     "test:local": "react-scripts test --env=jsdom --roots=./src"
   },
   "dependencies": {
-    "@patternfly/patternfly": "4.16.7",
-    "@patternfly/react-charts": "6.5.4",
-    "@patternfly/react-core": "4.23.1",
-    "@patternfly/react-icons": "4.4.2",
-    "@patternfly/react-styles": "4.4.2",
-    "@patternfly/react-tokens": "4.5.2",
-    "@redhat-cloud-services/frontend-components": "2.1.3",
+    "@patternfly/patternfly": "4.23.3",
+    "@patternfly/react-charts": "6.6.0",
+    "@patternfly/react-core": "4.32.1",
+    "@patternfly/react-icons": "4.5.0",
+    "@patternfly/react-styles": "4.5.0",
+    "@patternfly/react-table": "4.12.1",
+    "@patternfly/react-tokens": "4.6.0",
+    "@redhat-cloud-services/frontend-components": "2.3.1",
     "@redhat-cloud-services/frontend-components-notifications": "2.1.1",
     "@redhat-cloud-services/frontend-components-utilities": "2.1.0",
     "axios": "^0.19.2",
-    "c3": "^0.7.15",
+    "c3": "^0.7.18",
     "classnames": "^2.2.6",
-    "i18next": "^19.4.5",
+    "i18next": "^19.6.2",
     "i18next-xhr-backend": "^3.2.2",
     "js-cookie": "^2.2.1",
     "locale-code": "^2.0.2",
-    "lodash": "^4.17.15",
-    "moment": "^2.26.0",
+    "lodash": "^4.17.19",
+    "moment": "^2.27.0",
     "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-i18next": "^11.5.0",
+    "react-i18next": "^11.7.0",
     "react-redux": "^7.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
@@ -108,32 +109,32 @@
     "redux-promise-middleware": "^6.1.2",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
-    "victory": "^34.3.12",
-    "victory-core": "^34.3.12",
-    "victory-legend": "^34.3.12"
+    "victory": "^35.0.5",
+    "victory-core": "^35.0.5",
+    "victory-legend": "^35.0.5"
   },
   "devDependencies": {
     "apidoc-mock": "^3.0.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.5.0",
-    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-jest": "^23.13.2",
-    "eslint-plugin-jsdoc": "^27.0.5",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^23.18.0",
+    "eslint-plugin-jsdoc": "^29.2.0",
     "eslint-plugin-json": "^2.1.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.4",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "express": "^4.17.1",
     "glob": "^7.1.6",
     "moxios": "^0.4.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.5",
     "redux-mock-store": "^1.5.4",
-    "standard-version": "^8.0.0",
+    "standard-version": "^8.0.2",
     "swagger-ui-express": "^4.1.4",
     "yamljs": "^0.3.0"
   },

public/locales/en-US.json

@@ -41,6 +41,12 @@
     "thresholdSocketsLegendTooltip_OpenShift": "Maximum capacity, as CPU sockets, based on total {{product}} subscriptions in this account.",
     "tooltipSummary": "Your subscription data facets. With one level of column and row headers."
   },
+  "curiosity-inventory": {
+    "tableAriaLabel": "Subscription Watch systems inventory table.",
+    "tableSummary": "A generated table with one level of column headers.",
+    "tableEmptyInventoryTitle": "No results found",
+    "tableEmptyInventoryMessage": "No results match the filter criteria. Remove filters or clear all filters to show results."
+  },
   "curiosity-toolbar": {
     "slaCategory": "SLA",
     "slaNone": "No SLA",

src/common/__tests__/__snapshots__/helpers.test.js.snap

@@ -23,6 +23,7 @@ Object {
   "UI_WINDOW_ID": "curiosity",
   "browserExpose": [Function],
   "generateId": [Function],
+  "isDate": [Function],
   "isPromise": [Function],
   "lorem": "ipsum",
   "noop": [Function],
@@ -54,6 +55,7 @@ Object {
   "UI_WINDOW_ID": "curiosity",
   "browserExpose": [Function],
   "generateId": [Function],
+  "isDate": [Function],
   "isPromise": [Function],
   "lorem": "ipsum",
   "noop": [Function],
@@ -85,6 +87,7 @@ Object {
   "UI_WINDOW_ID": "curiosity",
   "browserExpose": [Function],
   "generateId": [Function],
+  "isDate": [Function],
   "isPromise": [Function],
   "noop": [Function],
   "noopPromise": Promise {},

src/common/__tests__/helpers.test.js

@@ -10,8 +10,16 @@ describe('Helpers', () => {
     expect(helpers.generateId('lorem')).toBe('lorem-');
   });
 
+  it('should determine a date', () => {
+    expect(helpers.isDate(new Date('broken'))).toBe(true);
+    expect(helpers.isDate(Date)).toBe(false);
+    expect(helpers.isDate(1)).toBe(false);
+    expect(helpers.isDate('lorem')).toBe(false);
+  });
+
   it('should determine a promise', () => {
     expect(helpers.isPromise(Promise.resolve())).toBe(true);
+    expect(helpers.isPromise(async () => {})).toBe(true);
     expect(helpers.isPromise(() => 'lorem')).toBe(false);
   });
 

src/common/helpers.js

@@ -7,14 +7,21 @@
 const generateId = prefix =>
   `${prefix || 'generatedid'}-${(process.env.REACT_APP_ENV !== 'test' && Math.ceil(1e5 * Math.random())) || ''}`;
 
-// ToDo: expand to include "async" check in scenarios where async/await are utilized.
 /**
- * Check if "is a Promise".
+ * Check if "is a Date"
+ *
+ * @param {Date|*} date
+ * @returns {boolean}
+ */
+const isDate = date => Object.prototype.toString.call(date) === '[object Date]';
+
+/**
+ * Check if "is a Promise", "Promise like".
  *
  * @param {Promise|*} obj
  * @returns {boolean}
  */
-const isPromise = obj => Object.prototype.toString.call(obj) === '[object Promise]';
+const isPromise = obj => /^\[object (Promise|Async|AsyncFunction)]/.test(Object.prototype.toString.call(obj));
 
 /**
  * An empty function.
@@ -210,6 +217,7 @@ const browserExpose = (obj = {}, options) => {
 const helpers = {
   browserExpose,
   generateId,
+  isDate,
   isPromise,
   noop,
   noopPromise,

src/components/c3GraphCard/c3GraphCardHelpers.js

@@ -105,13 +105,13 @@ const yAxisTickFormat = ({ tick, locale }) =>
  * @param {string} options.granularity
  * @param {string} options.productShortLabel
  * @returns {{configuration: {padding: {top: number, left: number, bottom: number, right: number},
- *     data: {types: {}, names: {}, columns: [], x: string, groups: [[]], colors: {}},
- *     legend: {show: boolean}, grid: {y: {show: boolean}}, tooltip: {format: {title: (function(*): string),
- *     value: (function(*, *, *=, *): *)}, order: (function(*, *): number)}, unloadBeforeLoad: boolean,
- *     spline: {interpolation: {type: string}}, axis: {x: {padding: number,
- *     tick: {format: (function(*=): string)}, type: string}, y: {padding: {bottom: number},
- *     default: number[], min: number, tick: {show: boolean, outer: boolean,
- *     format: (function(*): string)}}}, point: {show: boolean}}, hiddenDataFacets: []}}
+ *     data: {types: {}, names: {}, columns: Array, x: string, groups: Array, colors: {}},
+ *     legend: {show: boolean}, grid: {y: {show: boolean}}, tooltip: {format: {title: Function,
+ *     value: Function}, order: Function}, unloadBeforeLoad: boolean,
+ *     spline: {interpolation: {type: string}}, axis: {x: {padding: number, tick: {format: Function},
+ *     type: string}, y: {padding: {bottom: number}, default: number, min: number,
+ *     tick: {show: boolean, outer: boolean, format: Function}}}, point: {show: boolean}},
+ *     hiddenDataFacets: Array}}
  */
 const c3Config = ({ data = [], granularity, productShortLabel }) => {
   const hiddenDataFacets = [];

src/components/c3GraphCard/c3GraphCardLegendItem.js

@@ -133,13 +133,27 @@ class C3GraphCardLegendItem extends React.Component {
       </Button>
     );
 
+    /**
+     * FixMe: PF Tooltip has breaking changes not called out in changelog.md for PF React-core?
+     * Unclear which changelog this is called out in. Had to open the PF React-core component
+     * and the associated PR to determine when breaking changes were activated. v4.30.0
+     *   - https://github.com/patternfly/patternfly-react/pull/4491/files
+     *
+     * Breaking changes:
+     * 1. enableFlip prop is more sensitive, and/or not overridden by declaring "position"
+     *    - enableFlip possibly causes unintended behavior on smaller screen sizes when "distance" prop
+     *      is set to "0"
+     * 2. unit test snapshots updated, causing CI to fail
+     * 3. removing props, deprecating them, having them "[not do anything]"
+     */
     if (tooltipContent) {
       return (
         <Tooltip
           key={`curiosity-tooltip-${chartId}`}
           content={tooltipContent}
           position={TooltipPosition.top}
-          distance={0}
+          enableFlip={false}
+          distance={5}
           entryDelay={100}
           exitDelay={0}
         >

src/components/c3GraphCard/tests/__snapshots__/c3GraphCardLegendItem.test.js.snap

@@ -95,40 +95,17 @@ exports[`C3GraphCardLegendItem Component should render a non-connected component
 
 exports[`C3GraphCardLegendItem Component should render a tooltip with button: tooltip 1`] = `
 <Tooltip
-  appendTo={[Function]}
-  aria="describedby"
-  boundary="window"
-  className=""
   content={
     <div>
       lorem ipsum
     </div>
   }
-  distance={0}
-  enableFlip={true}
+  distance={5}
+  enableFlip={false}
   entryDelay={100}
   exitDelay={0}
-  flipBehavior={
-    Array [
-      "top",
-      "right",
-      "bottom",
-      "left",
-      "top",
-      "right",
-      "bottom",
-    ]
-  }
-  id=""
-  isAppLauncher={false}
-  isContentLeftAligned={false}
-  isVisible={false}
   key="curiosity-tooltip-lorem"
-  maxWidth="18.75rem"
   position="top"
-  tippyProps={Object {}}
-  trigger="mouseenter focus"
-  zIndex={9999}
 >
   <Button
     component="a"

src/components/chartArea/__tests__/__snapshots__/chartArea.test.js.snap

@@ -313,12 +313,12 @@ exports[`ChartArea Component should allow tick formatting: x tick format 1`] = `
       </g>
       <g>
         <g
-          clip-path="url(#victory-clip-4)"
+          clip-path="url(#victory-clip-2)"
           style="height:100%;width:100%;user-select:none"
         >
           <defs>
             <clipPath
-              id="victory-clip-4"
+              id="victory-clip-2"
             >
               <rect
                 height="175"
@@ -665,12 +665,12 @@ exports[`ChartArea Component should allow tick formatting: y tick format 1`] = `
       </g>
       <g>
         <g
-          clip-path="url(#victory-clip-2)"
+          clip-path="url(#victory-clip-1)"
           style="height:100%;width:100%;user-select:none"
         >
           <defs>
             <clipPath
-              id="victory-clip-2"
+              id="victory-clip-1"
             >
               <rect
                 height="175"