Draft v0.1.14

.env

@@ -2,7 +2,7 @@ REACT_APP_UI_VERSION=$npm_package_version
 REACT_APP_UI_NAME=subscriptions
 REACT_APP_UI_DISPLAY_NAME=Subscription Watch
 REACT_APP_UI_DISPLAY_CONFIG_NAME=Subscription Watch
-REACT_APP_UI_DISPLAY_START_NAME=Subscription watch
+REACT_APP_UI_DISPLAY_START_NAME=Subscription Watch
 REACT_APP_UI_DEPLOY_PATH_PREFIX=${UI_DEPLOY_PATH_PREFIX}
 PUBLIC_URL=${UI_DEPLOY_PATH_PREFIX}/apps/subscriptions/
 
@@ -27,3 +27,4 @@ REACT_APP_INCLUDE_CONTENT_BODY=<esi:include src="${UI_DEPLOY_PATH_PREFIX}/apps/c
 REACT_APP_SERVICES_RHSM_VERSION=/api/rhsm-subscriptions/v1/version
 REACT_APP_SERVICES_RHSM_REPORT=/api/rhsm-subscriptions/v1/tally/products/
 REACT_APP_SERVICES_RHSM_CAPACITY=/api/rhsm-subscriptions/v1/capacity/products/
+REACT_APP_SERVICES_RHSM_OPTIN=/api/rhsm-subscriptions/v1/opt-in

.env.development

@@ -10,3 +10,4 @@ REACT_APP_CONFIG_SERVICE_LOCALES_PATH=./locales/{{lng}}.json
 REACT_APP_SERVICES_RHSM_VERSION=http://localhost:5000/api/rhsm-subscriptions/v1/version
 REACT_APP_SERVICES_RHSM_REPORT=http://localhost:5000/api/rhsm-subscriptions/v1/tally/products/
 REACT_APP_SERVICES_RHSM_CAPACITY=http://localhost:5000/api/rhsm-subscriptions/v1/capacity/products/
+REACT_APP_SERVICES_RHSM_OPTIN=http://localhost:5000/api/rhsm-subscriptions/v1/opt-in

.env.proxy

@@ -14,3 +14,4 @@ REACT_APP_CONFIG_SERVICE_LOCALES_PATH=/locales/{{lng}}.json
 REACT_APP_SERVICES_RHSM_VERSION=/api/rhsm-subscriptions/v1/version
 REACT_APP_SERVICES_RHSM_REPORT=/api/rhsm-subscriptions/v1/tally/products/
 REACT_APP_SERVICES_RHSM_CAPACITY=/api/rhsm-subscriptions/v1/capacity/products/
+REACT_APP_SERVICES_RHSM_OPTIN=/api/rhsm-subscriptions/v1/opt-in

.eslintrc

@@ -85,7 +85,9 @@
     "prettier/prettier": [
       "error",
       {
+        "arrowParens": "avoid",
         "singleQuote": true,
+        "trailingComma": "none",
         "printWidth": 120
       }
     ],
@@ -98,6 +100,12 @@
     "react/state-in-constructor": [ 1, "never" ],
     "space-before-function-paren": 0,
     "jsx-a11y/anchor-is-valid": 1,
+    "jsx-a11y/label-has-associated-control": [ 2, {
+      "labelComponents": ["CustomInputLabel"],
+      "labelAttributes": ["label"],
+      "controlComponents": ["CustomInput"],
+      "depth": 3
+    }],
     "jsx-a11y/label-has-for": [ 2, {
       "components": [ "Label" ],
       "required": {

CONTRIBUTING.md

@@ -100,9 +100,9 @@ Specific uses:
 This project makes use of reserved CSS class prefixes used by external resources. 
 > Updating elements with these classes should be done with the knowledge "you are affecting an external resource in a potentially unanticipated way".
 
-1. Prefix `uiux-`
+1. Prefix `uxui-`
 
-   CSS classes with the prefix `uiux-` are used by external resources to identify elements for use in 3rd party tooling. Changes to the class name or element should be broadcast towards our UI/UX team members. 
+   CSS classes with the prefix `uxui-` are used by external resources to identify elements for use in 3rd party tooling. Changes to the class name or element should be broadcast towards our UI/UX team members. 
 
 ### Reserved QE testing attributes
 This project makes use of reserved DOM attributes used by the QE team.
@@ -140,24 +140,33 @@ The name of the window value can be found under the dotenv file `.env`
    REACT_APP_UI_LOGGER_ID=curiosity
    ```
 
-#### Debugging the Graph Display
-You can apply a date override during local development by adding a `.env.local` (dotenv) file with the following line, in the repository root directory
+#### Debugging local development
+You can apply overrides during local development by adding a `.env.local` (dotenv) file in the repository root directory.
+
+Once you have made the dotenv file and/or changes, like the below "debug" flags, restart the project and the flags should be active.
+
+*Any changes you make to the `.env.local` file should be ignored with `.gitignore`.*
+
+##### Graph display
+You can apply a date override during **local development** (using `$ yarn start`) by adding the following line to your `.env.local` file.
    ```
    REACT_APP_DEBUG_DEFAULT_DATETIME=20190630
    ```
 
-*Any changes you make to the `.env.local` file should be ignored with `.gitignore`.*
+##### Admin role
+You can access the administrator role experience during **local development** (using `$ yarn start`) by adding the following line to your `.env.local` file.
+   ```
+   REACT_APP_DEBUG_ORG_ADMIN=true
+   ```
+
+Combining this flag with [manipulating the http status on the API/service mocks](https://github.com/cdcabrera/apidoc-mock#more-examples-and-custom-responses) can be an effective emulation.
 
-#### Debugging Redux
-This project makes use of React & Redux. To enable Redux console logging, within the repository root directory, add a `.env.local` (dotenv) file with the follow line
+##### Debugging Redux
+This project makes use of React & Redux. To enable Redux browser console logging add the following line to your `.env.local` file.
   ```
   REACT_APP_DEBUG_MIDDLEWARE=true
   ```
 
-Once you've made the change, restart the project and console browser logging should appear.
-
-*Any changes you make to the `.env.local` file should be ignored with `.gitignore`.*
-
 #### Unit Testing
 To run the unit tests with a watch during development you'll need to open an additional terminal instance, then run
   ```

package.json

@@ -76,33 +76,33 @@
     "test:local": "react-scripts test --env=jsdom --roots=./src"
   },
   "dependencies": {
-    "@patternfly/patternfly": "2.65.3",
-    "@patternfly/react-charts": "5.3.5",
-    "@patternfly/react-core": "3.140.11",
-    "@patternfly/react-icons": "3.15.3",
-    "@patternfly/react-styles": "3.7.4",
-    "@patternfly/react-tokens": "2.8.4",
-    "@redhat-cloud-services/frontend-components": "1.0.8",
-    "@redhat-cloud-services/frontend-components-notifications": "1.0.1",
+    "@patternfly/patternfly": "2.71.3",
+    "@patternfly/react-charts": "5.3.18",
+    "@patternfly/react-core": "3.153.3",
+    "@patternfly/react-icons": "3.15.15",
+    "@patternfly/react-styles": "3.7.12",
+    "@patternfly/react-tokens": "2.8.12",
+    "@redhat-cloud-services/frontend-components": "1.0.12",
+    "@redhat-cloud-services/frontend-components-notifications": "1.0.2",
     "@redhat-cloud-services/frontend-components-utilities": "1.0.0",
     "axios": "^0.19.2",
     "classnames": "^2.2.6",
-    "i18next": "^19.3.2",
+    "i18next": "^19.3.4",
     "i18next-xhr-backend": "^3.2.2",
     "js-cookie": "^2.2.1",
     "locale-code": "^2.0.2",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "node-sass": "^4.13.1",
-    "numbro": "^2.1.2",
+    "numbro": "^2.2.0",
     "prop-types": "^15.7.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-i18next": "^11.3.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-i18next": "^11.3.4",
     "react-redux": "^7.2.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
+    "react-scripts": "3.4.1",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-promise-middleware": "^6.1.2",
@@ -118,23 +118,23 @@
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
     "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jest": "^23.8.2",
-    "eslint-plugin-jsdoc": "^22.0.1",
+    "eslint-plugin-jsdoc": "^22.1.0",
     "eslint-plugin-json": "^2.1.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
     "express": "^4.17.1",
     "gettext-extractor": "^3.5.2",
     "moxios": "^0.4.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
     "redux-mock-store": "^1.5.4",
     "standard-version": "^7.1.0",
-    "swagger-ui-express": "^4.1.3",
+    "swagger-ui-express": "^4.1.4",
     "yamljs": "^0.3.0"
   },
   "resolutions": {

public/locales/en-US.json

@@ -1,8 +1,8 @@
 {
   "curiosity-auth": {
     "pending": "Authenticating...",
-    "authorizedTitle": "Unauthorized",
-    "authorizedCopy": "You do not have permission to access reporting. Contact your administrator."
+    "authorizedTitle": "You do not have access to {{appName}}.",
+    "authorizedCopy": "Contact your organization administrator(s) for more information."
   },
   "curiosity-graph": {
     "cardHeading": "CPU usage",
@@ -32,6 +32,29 @@
     "slaSelfSupport": "Self-Support",
     "slaStandard": "Standard"
   },
+  "curiosity-optin": {
+    "buttonActivate": "Activate {{appName}}",
+    "buttonIsActive": "{{appName}} active",
+    "buttonTour": "Take a tour",
+    "cardTitle": "Welcome to {{appName}}",
+    "cardDescription": "{{appName}} enables you to understand your total subscription usage and capacity across your hybrid infrastructure over time.",
+    "cardSeeTitle": "Know your account-wide usage at a glance",
+    "cardSeeDescription": "See unified reporting of subscription usage information across your physical, virtual, on-premise, and cloud infrastructure.",
+    "cardReportTitle": "Prepare for capacity events",
+    "cardReportDescription": "Enhance your ability to consume, track, report, and reconcile your Red Hat subscriptions.",
+    "cardFilterTitle": "Isolate specific usage",
+    "cardFilterDescription": "View your inventory by critical indicators like Service Level Agreement (SLA) and architecture.",
+    "cardIsActiveDescription": "Data can take up to 24 hours to be processed and will appear on this page when ready",
+    "cardIsErrorDescription": "An opt-in error has occurred. <0>Contact us</0> for more information",
+    "cardContactAdminDescription": "You must be an organization administrator with the org-admin role to view {{appName}}.",
+    "notificationsErrorTitle": "{{appName}} opt-in failed",
+    "notificationsErrorDescription": "Contact us for more information",
+    "notificationsSuccessTitle": "{{appName}} activated",
+    "notificationsSuccessDescription": "It could take up to 24 hours for data to appear",
+    "tourTitle": "Ready to get started?",
+    "tourTitleImageAlt": "Ready to get started example graph.",
+    "tourDescription": "We'll walk you through each step and help you understand how Red Hat collects and uses subscription data."
+  },
   "curiosity-tour": {
     "emptyStateIconAlt": "{{appName}} logo",
     "emptyStateTitle": "{{appName}} is an early access beta",
@@ -41,5 +64,9 @@
     "emptyStateButton": "Take a tour",
     "emptyStateLinkLearnMore": "Learn more",
     "emptyStateLinkContactUs": "Contact us"
+  },
+  "curiosity-view": {
+    "openshift": "Red Hat OpenShift",
+    "rhel": "Red Hat Enterprise Linux"
   }
 }

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

@@ -13,7 +13,7 @@ Object {
   "UI_DISABLED_TOOLBAR": false,
   "UI_DISPLAY_CONFIG_NAME": "Subscription Watch",
   "UI_DISPLAY_NAME": "Subscription Watch",
-  "UI_DISPLAY_START_NAME": "Subscription watch",
+  "UI_DISPLAY_START_NAME": "Subscription Watch",
   "UI_LOGGER_ID": "curiosity",
   "UI_NAME": "subscriptions",
   "UI_PATH": "/",

src/common/helpers.js

@@ -35,10 +35,12 @@ const noopPromise = Promise.resolve({});
  * Associated with the i18n package, and typically used as a default prop.
  *
  * @param {string} key
- * @param {string} value
+ * @param {string|object} value
+ * @param {Array} components
  * @returns {string}
  */
-const noopTranslate = (key, value) => `t(${key}${(value && `, ${value}`) || ''})`;
+const noopTranslate = (key, value, components) =>
+  `t(${key}${(value && `, ${value}`) || ''}${(components && `, ${components}`) || ''})`;
 
 /**
  * Is dev mode active.