Environment Sync, Dev to Test

.codecov.yml

@@ -1,12 +1,12 @@
 coverage:
   precision: 2
   round: down
-  range: "55...95"
+  range: 80..100
 
   status:
     project:
       default:
-        target: "65%"
+        target: "80%"
     patch:
       default: off
     changes:

README.md

@@ -7,7 +7,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 10+ and NPM](https://nodejs.org/)
+ * Your system needs to be running [NodeJS version 12+ and NPM](https://nodejs.org/)
  * [Docker](https://docs.docker.com/engine/installation/)
  * And [Yarn 1.20+](https://yarnpkg.com) for dependency and script management.
 

package.json

@@ -13,7 +13,7 @@
     "url": "https://github.com/RedHatInsights/curiosity-frontend/issues"
   },
   "engines": {
-    "node": ">=10.0.0"
+    "node": ">=12.0.0"
   },
   "insights": {
     "appname": "subscriptions"
@@ -22,10 +22,10 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "branches": 65,
-        "functions": 65,
-        "lines": 65,
-        "statements": 65
+        "branches": 80,
+        "functions": 80,
+        "lines": 90,
+        "statements": 90
       }
     },
     "collectCoverageFrom": [
@@ -83,7 +83,7 @@
     "@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": "2.3.11",
     "@redhat-cloud-services/frontend-components-notifications": "2.1.1",
     "@redhat-cloud-services/frontend-components-utilities": "2.1.0",
     "axios": "^0.19.2",

public/locales/en-US.json

@@ -42,19 +42,27 @@
     "tooltipSummary": "Your subscription data facets. With one level of column and row headers."
   },
   "curiosity-inventory": {
-    "tableAriaLabel": "Subscription Watch systems inventory table.",
+    "tableAriaLabel": "{{appName}} 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.",
     "tableSkeletonAriaLabel": "Loading"
   },
   "curiosity-toolbar": {
+    "category": "Filter by",
+    "categoryPlaceholder": "Filter by",
     "slaCategory": "SLA",
     "slaNone": "No SLA",
     "slaPlaceholder": "Filter by SLA",
     "slaPremium": "Premium",
     "slaSelfSupport": "Self-Support",
-    "slaStandard": "Standard"
+    "slaStandard": "Standard",
+    "usageCategory": "Usage",
+    "usagePlaceholder": "Filter by usage",
+    "usageDevelopment": "Development/Test",
+    "usageDisaster": "Disaster Recovery",
+    "usageProduction": "Production",
+    "usageUnspecified": "Unspecified"
   },
   "curiosity-optin": {
     "buttonActivate": "Activate {{appName}}",
@@ -79,7 +87,11 @@
     "tourDescription": "We'll walk you through each step, and include insight into how Red Hat collects and uses subscription data."
   },
   "curiosity-view": {
-    "openshift": "Red Hat OpenShift",
-    "rhel": "Red Hat Enterprise Linux"
+    "title": "{{appName}}",
+    "subtitle": "Monitor your usage based on your subscription terms. <0>Learn more about {{appName}} reporting</0>",
+    "title_OpenShift": "Red Hat OpenShift",
+    "subtitle_OpenShift": "Monitor your Red Hat OpenShift usage by socket or core usage, based on your subscription terms. <0>Learn more about {{appName}} reporting</0>",
+    "title_RHEL": "Red Hat Enterprise Linux",
+    "subtitle_RHEL": "Monitor your Red Hat Enterprise Linux usage by physical, virtual, and public cloud sockets. <0>Learn more about {{appName}} reporting</0>"
   }
 }

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

@@ -67,23 +67,26 @@ exports[`Authentication Component should render a non-connected component error:
     <PageLayout>
       <PageHeader
         key=".0"
+        t={[Function]}
+        viewId={null}
       >
         <PageHeader>
           <section
             className="pf-l-page-header pf-c-page-header pf-l-page__main-section pf-c-page__main-section pf-m-light"
             widget-type="InsightsPageHeader"
           >
             <PageHeaderTitle
+              className="pf-u-mb-sm"
               title="Subscription Watch"
             >
               <Title
-                className=""
+                className="pf-u-mb-sm"
                 headingLevel="h1"
                 size="2xl"
                 widget-type="InsightsPageHeaderTitle"
               >
                 <h1
-                  className="pf-c-title pf-m-2xl"
+                  className="pf-c-title pf-m-2xl pf-u-mb-sm"
                   widget-type="InsightsPageHeaderTitle"
                 >
 

src/components/authentication/authentication.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { BinocularsIcon, LockIcon } from '@patternfly/react-icons';
-import { connectRouterTranslate, reduxActions, reduxSelectors } from '../../redux';
+import { connectRouter, reduxActions, reduxSelectors } from '../../redux';
 import { rhsmApiTypes } from '../../types';
 import { helpers } from '../../common';
 import { Redirect, routerHelpers, routerTypes } from '../router/router';
 import MessageView from '../messageView/messageView';
+import { translate } from '../i18n/i18n';
 
 /**
  * An authentication pass-through component.
@@ -82,9 +83,8 @@ class Authentication extends Component {
 /**
  * Prop types.
  *
- * @type {{authorizeUser: Function, onNavigation: Function, setAppName: Function, navigation: Array,
- *     t: Function, children: Node, initializeChrome: Function, session: object, history: object,
- *     setNavigation: Function}}
+ * @type {{authorizeUser: Function, onNavigation: Function, setAppName: Function, t: Function,
+ *     children: Node, initializeChrome: Function, session: object, history: object}}
  */
 Authentication.propTypes = {
   authorizeUser: PropTypes.func,
@@ -110,9 +110,9 @@ Authentication.propTypes = {
 /**
  * Default props.
  *
- * @type {{authorizeUser: Function, onNavigation: Function, setAppName: Function, navigation: Array,
- *     t: Function, initializeChrome: Function, session: {authorized: boolean, pending: boolean,
- *     errorMessage: string, error: boolean, status: null}, setNavigation: Function}}
+ * @type {{authorizeUser: Function, onNavigation: Function, setAppName: Function, t: translate,
+ *     initializeChrome: Function, session: {authorized: boolean, errorCodes: Array, pending: boolean,
+ *     errorMessage: string, error: boolean, status: null}}}
  */
 Authentication.defaultProps = {
   authorizeUser: helpers.noop,
@@ -127,7 +127,7 @@ Authentication.defaultProps = {
     pending: false,
     status: null
   },
-  t: helpers.noopTranslate
+  t: translate
 };
 
 /**
@@ -150,6 +150,6 @@ const mapDispatchToProps = dispatch => ({
  */
 const makeMapStateToProps = reduxSelectors.user.makeUserSession();
 
-const ConnectedAuthentication = connectRouterTranslate(makeMapStateToProps, mapDispatchToProps)(Authentication);
+const ConnectedAuthentication = connectRouter(makeMapStateToProps, mapDispatchToProps)(Authentication);
 
 export { ConnectedAuthentication as default, ConnectedAuthentication, Authentication };

src/components/c3GraphCard/c3GraphCard.js

@@ -4,13 +4,14 @@ import { Card, CardTitle, CardHeader, CardActions, CardBody } from '@patternfly/
 import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/components/cjs/Skeleton';
 import _isEqual from 'lodash/isEqual';
 import { Select } from '../form/select';
-import { connectTranslate, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';
+import { connect, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';
 import { helpers, dateHelpers } from '../../common';
 import { rhsmApiTypes, RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes';
 import { c3GraphCardHelpers } from './c3GraphCardHelpers';
 import { C3GraphCardLegendItem } from './c3GraphCardLegendItem';
 import { graphCardTypes } from '../graphCard/graphCardTypes';
 import { C3Chart } from '../c3Chart/c3Chart';
+import { translate } from '../i18n/i18n';
 
 /**
  * A chart/graph card.
@@ -27,9 +28,9 @@ class C3GraphCard extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { graphQuery, productId } = this.props;
+    const { query, productId } = this.props;
 
-    if (productId !== prevProps.productId || !_isEqual(graphQuery, prevProps.graphQuery)) {
+    if (productId !== prevProps.productId || !_isEqual(query, prevProps.query)) {
       this.onUpdateGraphData();
     }
   }
@@ -40,18 +41,18 @@ class C3GraphCard extends React.Component {
    * @event onUpdateGraphData
    */
   onUpdateGraphData = () => {
-    const { getGraphReportsCapacity, graphQuery, isDisabled, productId } = this.props;
-    const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const { getGraphReportsCapacity, query, isDisabled, productId } = this.props;
+    const graphGranularity = query && query[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
 
     if (!isDisabled && graphGranularity && productId) {
       const { startDate, endDate } = dateHelpers.getRangedDateTime(graphGranularity);
-      const query = {
+      const graphQuery = {
         [rhsmApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(),
         [rhsmApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString(),
-        ...graphQuery
+        ...query
       };
 
-      getGraphReportsCapacity(productId, query);
+      getGraphReportsCapacity(productId, graphQuery);
     }
   };
 
@@ -66,7 +67,7 @@ class C3GraphCard extends React.Component {
     const { viewId } = this.props;
 
     store.dispatch({
-      type: reduxTypes.rhsm.SET_GRAPH_GRANULARITY_RHSM,
+      type: reduxTypes.query.SET_QUERY_GRANULARITY_RHSM,
       viewId,
       [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: value
     });
@@ -120,9 +121,9 @@ class C3GraphCard extends React.Component {
    * @returns {Node}
    */
   renderChart() {
-    const { filterGraphData, graphData, graphQuery, selectOptionsType, productId, productShortLabel } = this.props;
+    const { filterGraphData, graphData, query, selectOptionsType, productId, productShortLabel } = this.props;
 
-    const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const graphGranularity = query && query[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
     const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType);
     const updatedGranularity = graphGranularity || selected;
 
@@ -170,14 +171,14 @@ class C3GraphCard extends React.Component {
    * @returns {Node}
    */
   render() {
-    const { cardTitle, children, error, graphQuery, isDisabled, selectOptionsType, pending, t } = this.props;
+    const { cardTitle, children, error, query, isDisabled, selectOptionsType, pending, t } = this.props;
 
     if (isDisabled) {
       return null;
     }
 
     const { options } = graphCardTypes.getGranularityOptions(selectOptionsType);
-    const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const graphGranularity = query && query[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
 
     return (
       <Card className="curiosity-usage-graph fadein">
@@ -215,7 +216,7 @@ class C3GraphCard extends React.Component {
 /**
  * Prop types.
  *
- * @type {{productId: string, pending: boolean, error: boolean, graphQuery: object, cardTitle: string,
+ * @type {{productId: string, pending: boolean, error: boolean, query: object, cardTitle: string,
  *     filterGraphData: Array, getGraphReportsCapacity: Function, productShortLabel: string, selectOptionsType: string,
  *     viewId: string, t: Function, children: Node, graphData: object, isDisabled: boolean}}
  */
@@ -231,7 +232,7 @@ C3GraphCard.propTypes = {
   ),
   getGraphReportsCapacity: PropTypes.func,
   graphData: PropTypes.object,
-  graphQuery: PropTypes.shape({
+  query: PropTypes.shape({
     [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired
   }).isRequired,
   isDisabled: PropTypes.bool,
@@ -247,7 +248,7 @@ C3GraphCard.propTypes = {
  * Default props.
  *
  * @type {{getGraphReportsCapacity: Function, productShortLabel: string, selectOptionsType: string,
- *     viewId: string, t: Function, children: null, pending: boolean, graphData: object,
+ *     viewId: string, t: translate, children: null, pending: boolean, graphData: object,
  *     isDisabled: boolean, error: boolean, cardTitle: null, filterGraphData: Array}}
  */
 C3GraphCard.defaultProps = {
@@ -260,7 +261,7 @@ C3GraphCard.defaultProps = {
   isDisabled: helpers.UI_DISABLED_GRAPH,
   pending: false,
   selectOptionsType: 'default',
-  t: helpers.noopTranslate,
+  t: translate,
   productShortLabel: '',
   viewId: 'graphCard'
 };
@@ -282,6 +283,6 @@ const mapDispatchToProps = dispatch => ({
   getGraphReportsCapacity: (id, query) => dispatch(reduxActions.rhsm.getGraphReportsCapacity(id, query))
 });
 
-const ConnectedGraphCard = connectTranslate(makeMapStateToProps, mapDispatchToProps)(C3GraphCard);
+const ConnectedGraphCard = connect(makeMapStateToProps, mapDispatchToProps)(C3GraphCard);
 
 export { ConnectedGraphCard as default, ConnectedGraphCard, C3GraphCard };

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

@@ -109,6 +109,7 @@ exports[`C3GraphCard Component should render a non-connected component: non-conn
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -134,6 +135,7 @@ exports[`C3GraphCard Component should render a non-connected component: non-conn
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
+        toggleIcon={null}
         variant="single"
       />
     </CardActions>
@@ -195,6 +197,7 @@ exports[`C3GraphCard Component should render multiple states: fulfilled 1`] = `
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -220,6 +223,7 @@ exports[`C3GraphCard Component should render multiple states: fulfilled 1`] = `
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
+        toggleIcon={null}
         variant="single"
       />
     </CardActions>
@@ -343,6 +347,7 @@ exports[`C3GraphCard Component should render multiple states: pending 1`] = `
         className=""
         id="generatedid-"
         isDisabled={false}
+        isToggleText={true}
         name={null}
         onSelect={[Function]}
         options={
@@ -368,6 +373,7 @@ exports[`C3GraphCard Component should render multiple states: pending 1`] = `
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
         selectedOptions="daily"
+        toggleIcon={null}
         variant="single"
       />
     </CardActions>