feat(bannerMessages): issues/502 cloud meter messaging

[cdcabrera]

What's included

• feat(bannerMessages): issues/502 cloud meter messaging

  • build, dotenv flag for recommendations link
  • locale, cloud meter related banner message strings
  • styling, banner messages spacing
  • appMessagesSelectors, apply tally cloud meter data, mismatch
  • bannerMessages, display banner messages
  • graphCardSelectors, expose cloud meter flags
  • rhelView, openshiftView, apply bannerMessages display
  • rhsmApiTypes, cloud meter data and mismatch flags
  • rhsmServices, mock update for cloud meter data
• feat(pageMessages): issues/502 section for messaging

  • pageLayout, allow pageMessages
  • pageMessages, messaging display
  • pageToolbar, alignment with pageMessages

Notes

@jlprevatt @ntkathole @bclarhk @rblackbu

• The strings used for messaging are pre-approved, it is expected they be updated once CCS provides confirmation,
• The link still needs to be created for docs, until it is the fallback message will display
• Behavior
  • The banner message area is applied to all products and ONLY displays if the has_cloudigrade_mismatch flag is true on any one data point within the Tally API endpoint
  • The banner may not initially display dependent on if the has_cloudigrade_mismatch flag is false across all data points on a "granularity". Subsequent granularity selections may fire the banner and display it
  • Once the banner is on REGARDLESS of whether a granularity DOES HAVE or DOES NOT HAVE the has_cloudigrade_mismatch flag, the banner will stay on.
    • Not implementing this behavior caused the banner to activate ON and OFF repeatedly when switch granularity
  • The banners have the ability to be "closed"... this is a temporary internal state and the banner will be reactivated when a user switches Products or architectures and the has_cloudigrade_mismatch flag is true

How to test

Proxy run check

1. update the NPM packages with $ yarn
2. make sure Docker is running, plus on network, then
3. $ yarn start:proxy
4. log in with an account that has mismatched data from Cloud Meter, confirm the messaging displays

Example

With link

Without the link

Behavior

Includes closing the banner

Updates issue/story

#502

[cdcabrera]

It was also noted there may be some iterative changes

• making the Cloud Meter mismatch banner ONLY display using the most recent day/last 2 days. Unclear whether this would help reset the banner if the end user was able to correct their setup
• making the banner message remember it has been closed. multiple options/levels of remembering
  • at the Redux state level where it resets on product changes, but attempts to maintain being closed across architecture navigation
  • at a localStorage, sessionStorage level... sessionStorage resetting if the user closes the browser tab
  • at a cookie level, possibly set an expiration, resetting when a user resets their cookies

[codecov-io]

Codecov Report

Merging #503 (5ac7361) into ci (840e21a) will increase coverage by 0.13%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##               ci     #503      +/-   ##
==========================================
+ Coverage   93.13%   93.27%   +0.13%     
==========================================
  Files          70       73       +3     
  Lines        2301     2348      +47     
  Branches      780      792      +12     
==========================================
+ Hits         2143     2190      +47     
  Misses        139      139              
  Partials       19       19              

Impacted Files	Coverage Δ
src/components/openshiftView/openshiftView.js	92.75% <ø> (ø)
src/components/rhelView/rhelView.js	89.13% <ø> (ø)
src/redux/selectors/graphCardSelectors.js	98.21% <ø> (ø)
src/services/rhsmServices.js	100.00% <ø> (ø)
src/types/rhsmApiTypes.js	100.00% <ø> (ø)
src/common/helpers.js	100.00% <100.00%> (ø)
src/components/bannerMessages/bannerMessages.js	100.00% <100.00%> (ø)
src/components/pageLayout/pageLayout.js	100.00% <100.00%> (ø)
src/components/pageLayout/pageMessages.js	100.00% <100.00%> (ø)
src/components/pageLayout/pageToolbar.js	100.00% <100.00%> (ø)
... and 4 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 840e21a...5ac7361. Read the comment docs.

[ntkathole]

Found blocker issue with backend https://issues.redhat.com/browse/ENT-3275 .. will verify this once it is resolved.