NPM package updates

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"
   },

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"

src/components/form/__tests__/__snapshots__/select.test.js.snap

@@ -10,9 +10,9 @@ exports[`Select Component should allow a alternate array and object options: key
   <button
     aria-expanded="false"
     aria-haspopup="listbox"
-    aria-labelledby=" pf-toggle-id-11"
+    aria-labelledby=" pf-select-toggle-id-11"
     class="pf-c-select__toggle"
-    id="pf-toggle-id-11"
+    id="pf-select-toggle-id-11"
     type="button"
   >
     <div
@@ -56,9 +56,9 @@ exports[`Select Component should allow a alternate array and object options: str
   <button
     aria-expanded="false"
     aria-haspopup="listbox"
-    aria-labelledby=" pf-toggle-id-8"
+    aria-labelledby=" pf-select-toggle-id-8"
     class="pf-c-select__toggle"
-    id="pf-toggle-id-8"
+    id="pf-select-toggle-id-8"
     type="button"
   >
     <div
@@ -101,9 +101,9 @@ exports[`Select Component should allow selected options to match value or title:
 >
   <button
     aria-expanded="false"
-    aria-labelledby=" pf-toggle-id-14"
+    aria-labelledby=" pf-select-toggle-id-14"
     class="pf-c-select__toggle"
-    id="pf-toggle-id-14"
+    id="pf-select-toggle-id-14"
     type="button"
   >
     <div
@@ -156,9 +156,9 @@ exports[`Select Component should render a basic component: basic dropdown 1`] =
   <button
     aria-expanded="false"
     aria-haspopup="listbox"
-    aria-labelledby=" pf-toggle-id-2"
+    aria-labelledby=" pf-select-toggle-id-2"
     class="pf-c-select__toggle"
-    id="pf-toggle-id-2"
+    id="pf-select-toggle-id-2"
     type="button"
   >
     <div
@@ -201,9 +201,9 @@ exports[`Select Component should render a checkbox select: checkbox select 1`] =
 >
   <button
     aria-expanded="false"
-    aria-labelledby=" pf-toggle-id-5"
+    aria-labelledby=" pf-select-toggle-id-5"
     class="pf-c-select__toggle"
-    id="pf-toggle-id-5"
+    id="pf-select-toggle-id-5"
     type="button"
   >
     <div
@@ -312,11 +312,11 @@ exports[`Select Component should render a expanded select: expanded 1`] = `
       >
         <SelectToggle
           aria-label="Options menu"
-          aria-labelledby=" pf-toggle-id-29"
+          aria-labelledby=" pf-select-toggle-id-29"
           className=""
           handleTypeaheadKeys={[Function]}
           hasClearButton={false}
-          id="pf-toggle-id-29"
+          id="pf-select-toggle-id-29"
           isActive={false}
           isDisabled={false}
           isOpen={true}
@@ -400,9 +400,9 @@ exports[`Select Component should render a expanded select: expanded 1`] = `
                 <button
                   aria-expanded="true"
                   aria-haspopup="listbox"
-                  aria-labelledby=" pf-toggle-id-29"
+                  aria-labelledby=" pf-select-toggle-id-29"
                   class="pf-c-select__toggle"
-                  id="pf-toggle-id-29"
+                  id="pf-select-toggle-id-29"
                   type="button"
                 >
                   <div
@@ -503,10 +503,10 @@ exports[`Select Component should render a expanded select: expanded 1`] = `
           <button
             aria-expanded={true}
             aria-haspopup="listbox"
-            aria-labelledby=" pf-toggle-id-29"
+            aria-labelledby=" pf-select-toggle-id-29"
             className="pf-c-select__toggle"
             disabled={false}
-            id="pf-toggle-id-29"
+            id="pf-select-toggle-id-29"
             onClick={[Function]}
             onKeyDown={[Function]}
             type="button"