feat(appMessagesSelectors): issues/502 cloud meter messaging (#503)

* build, dotenv flag for recommendations link * locale, cloud meter related banner message strings * appMessagesSelectors, apply tally cloud meter data, mismatch * bannerMessages, cloud meter mismatch message * graphCardSelectors, expose cloud meter flags * helpers, ui link for recommendations * rhsmApiTypes, cloud meter data and mismatch flags * rhsmServices, mock update for cloud meter data
RedHatInsights · Nov 12, 2020 · 3db6705 · 3db6705
1 parent 483fb43
commit 3db6705
Show file tree

Hide file tree

Showing 15 changed files with 644 additions and 31 deletions.
diff --git a/.env b/.env
@@ -8,6 +8,7 @@ PUBLIC_URL=${UI_DEPLOY_PATH_PREFIX}/apps/subscriptions/
 
 REACT_APP_UI_LINK_CONTACT_US=https://access.redhat.com/account-team
 REACT_APP_UI_LINK_LEARN_MORE=https://access.redhat.com/documentation/en-us/subscription_central/2020-10/html/getting_started_with_subscription_watch/con-how-does-subscriptionwatch-show-data_assembly-opening-subscriptionwatch-ctxt/
+REACT_APP_UI_LINK_REPORT_ACCURACY_RECOMMENDATIONS=
 
 REACT_APP_UI_DISABLED=false
 REACT_APP_UI_DISABLED_TOOLBAR=false

diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -3,6 +3,11 @@
     "pending": "Authenticating...",
     "maintenanceCopy": "We are currently undergoing scheduled maintenance and will be back shortly. Thank you for your patience."
   },
+  "curiosity-banner": {
+    "dataMismatchTitle": "Improve reporting accuracy",
+    "dataMismatchMessage": "Action required in order to improve {{appName}} reporting.",
+    "dataMismatchMessage_cloudigradeMismatch": "<0>View recommmend actions</0> to take in order to improve {{appName}} reporting."
+  },
   "curiosity-graph": {
     "cardHeading": "CPU usage",
     "coresHeading": "CPU core usage",

diff --git a/src/common/__tests__/__snapshots__/helpers.test.js.snap b/src/common/__tests__/__snapshots__/helpers.test.js.snap
@@ -16,6 +16,7 @@ Object {
   "UI_DISPLAY_START_NAME": "Subscription Watch",
   "UI_LINK_CONTACT_US": "https://access.redhat.com/account-team",
   "UI_LINK_LEARN_MORE": "https://access.redhat.com/documentation/en-us/subscription_central/2020-10/html/getting_started_with_subscription_watch/con-how-does-subscriptionwatch-show-data_assembly-opening-subscriptionwatch-ctxt/",
+  "UI_LINK_REPORT_ACCURACY_RECOMMENDATIONS": "",
   "UI_LOCALE_DEFAULT": "en-US",
   "UI_LOCALE_DEFAULT_DESC": "English",
   "UI_LOGGER_ID": "curiosity",
@@ -50,6 +51,7 @@ Object {
   "UI_DISPLAY_START_NAME": "Subscription Watch",
   "UI_LINK_CONTACT_US": "https://access.redhat.com/account-team",
   "UI_LINK_LEARN_MORE": "https://access.redhat.com/documentation/en-us/subscription_central/2020-10/html/getting_started_with_subscription_watch/con-how-does-subscriptionwatch-show-data_assembly-opening-subscriptionwatch-ctxt/",
+  "UI_LINK_REPORT_ACCURACY_RECOMMENDATIONS": "",
   "UI_LOCALE_DEFAULT": "en-US",
   "UI_LOCALE_DEFAULT_DESC": "English",
   "UI_LOGGER_ID": "curiosity",
@@ -84,6 +86,7 @@ Object {
   "UI_DISPLAY_START_NAME": "Subscription Watch",
   "UI_LINK_CONTACT_US": "https://access.redhat.com/account-team",
   "UI_LINK_LEARN_MORE": "https://access.redhat.com/documentation/en-us/subscription_central/2020-10/html/getting_started_with_subscription_watch/con-how-does-subscriptionwatch-show-data_assembly-opening-subscriptionwatch-ctxt/",
+  "UI_LINK_REPORT_ACCURACY_RECOMMENDATIONS": "",
   "UI_LOCALE_DEFAULT": "en-US",
   "UI_LOCALE_DEFAULT_DESC": "English",
   "UI_LOGGER_ID": "curiosity",

diff --git a/src/common/helpers.js b/src/common/helpers.js
@@ -161,6 +161,13 @@ const UI_LINK_CONTACT_US = process.env.REACT_APP_UI_LINK_CONTACT_US;
  */
 const UI_LINK_LEARN_MORE = process.env.REACT_APP_UI_LINK_LEARN_MORE;
 
+/**
+ * A url, or uri, for "recommend actions"
+ *
+ * @type {string}
+ */
+const UI_LINK_REPORT_ACCURACY_RECOMMENDATIONS = process.env.REACT_APP_UI_LINK_REPORT_ACCURACY_RECOMMENDATIONS;
+
 /**
  * UI locale default.
  *
@@ -252,6 +259,7 @@ const helpers = {
   UI_DISPLAY_START_NAME,
   UI_LINK_CONTACT_US,
   UI_LINK_LEARN_MORE,
+  UI_LINK_REPORT_ACCURACY_RECOMMENDATIONS,
   UI_LOCALE_DEFAULT,
   UI_LOCALE_DEFAULT_DESC,
   UI_LOGGER_ID,

diff --git a/src/components/bannerMessages/bannerMessages.js b/src/components/bannerMessages/bannerMessages.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, AlertActionCloseButton, AlertVariant } from '@patternfly/react-core';
+import { Alert, AlertActionCloseButton, AlertVariant, Button } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { connect, reduxSelectors } from '../../redux';
+import { translate } from '../i18n/i18n';
+import { helpers } from '../../common';
 
 /**
  * Render banner messages.
@@ -86,7 +89,30 @@ BannerMessages.propTypes = {
  * @type {{messages: Array}}
  */
 BannerMessages.defaultProps = {
-  messages: []
+  messages: [
+    {
+      id: 'cloudigradeMismatch',
+      title: translate('curiosity-banner.dataMismatchTitle'),
+      message: translate(
+        'curiosity-banner.dataMismatchMessage',
+        {
+          context: helpers.UI_LINK_REPORT_ACCURACY_RECOMMENDATIONS !== '' && 'cloudigradeMismatch',
+          appName: helpers.UI_DISPLAY_NAME
+        },
+        [
+          <Button
+            isInline
+            component="a"
+            variant="link"
+            icon={<ExternalLinkAltIcon />}
+            iconPosition="right"
+            target="_blank"
+            href={helpers.UI_LINK_REPORT_ACCURACY_RECOMMENDATIONS}
+          />
+        ]
+      )
+    }
+  ]
 };
 
 /**

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -26,6 +26,19 @@ Array [
       },
     ],
   },
+  Object {
+    "file": "./src/components/bannerMessages/bannerMessages.js",
+    "keys": Array [
+      Object {
+        "key": "curiosity-banner.dataMismatchTitle",
+        "match": "translate('curiosity-banner.dataMismatchTitle')",
+      },
+      Object {
+        "key": "curiosity-banner.dataMismatchMessage",
+        "match": "translate( 'curiosity-banner.dataMismatchMessage', { context: helpers.UI_LINK_REPORT_ACCURACY_RECOMMENDATIONS !== '' && 'cloudigradeMismatch', appName: helpers.UI_DISPLAY_NAME }, [ <Button isInline component=\\"a\\" variant=\\"link\\" icon={<ExternalLinkAltIcon />} iconPosition=\\"right\\" target=\\"_blank\\" href={helpers.UI_LINK_REPORT_ACCURACY_RECOMMENDATIONS} /> ] )",
+      },
+    ],
+  },
   Object {
     "file": "./src/components/c3GraphCard/c3GraphCard.js",
     "keys": Array [

diff --git a/src/redux/selectors/__tests__/__snapshots__/appMessagesSelectors.test.js.snap b/src/redux/selectors/__tests__/__snapshots__/appMessagesSelectors.test.js.snap
@@ -1,14 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`AppMessagesSelectors should map a fulfilled product ID response to an aggregated output: fulfilled 1`] = `
+Object {
+  "appMessages": Object {
+    "cloudigradeMismatch": true,
+  },
+}
+`;
+
 exports[`AppMessagesSelectors should pass minimal data on a product ID without a product ID provided: no product id error 1`] = `
 Object {
-  "appMessages": Object {},
+  "appMessages": Object {
+    "cloudigradeMismatch": false,
+  },
 }
 `;
 
 exports[`AppMessagesSelectors should pass minimal data on missing a reducer response: missing reducer error 1`] = `
 Object {
-  "appMessages": Object {},
+  "appMessages": Object {
+    "cloudigradeMismatch": false,
+  },
+}
+`;
+
+exports[`AppMessagesSelectors should populate data from the in memory cache: cached data: cache used and pending 1`] = `
+Object {
+  "appMessages": Object {
+    "cloudigradeMismatch": true,
+  },
+}
+`;
+
+exports[`AppMessagesSelectors should populate data from the in memory cache: cached data: initial fulfilled 1`] = `
+Object {
+  "appMessages": Object {
+    "cloudigradeMismatch": true,
+  },
+}
+`;
+
+exports[`AppMessagesSelectors should populate data from the in memory cache: cached data: update and fulfilled 1`] = `
+Object {
+  "appMessages": Object {
+    "cloudigradeMismatch": true,
+  },
+}
+`;
+
+exports[`AppMessagesSelectors should populate data on a product ID when the api response is missing expected properties: data populated, missing properties 1`] = `
+Object {
+  "appMessages": Object {
+    "cloudigradeMismatch": false,
+  },
 }
 `;