fix(toolbar): issues/377 openshiftView, remove usage filter (#378)

* graphCard,c3GraphCard, switch redux granularity type * locale, i18n, switch toolbar strings to context * openshiftView, rhelView, apply filters for toolbar * redux, queryTypes, viewReducer, granularity, sla, usage types * toolbar, convert to config based filter display * toolbarTypes, use context for locale strings
RedHatInsights · Aug 24, 2020 · 1a12310 · 1a12310
1 parent f6fc39f
commit 1a12310
Show file tree

Hide file tree

Showing 18 changed files with 427 additions and 223 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -50,15 +50,15 @@
   },
   "curiosity-toolbar": {
     "category": "Filter by",
-    "categoryPlaceholder": "Filter by",
-    "slaCategory": "SLA",
+    "placeholder": "Filter by",
+    "category_sla": "SLA",
+    "placeholder_sla": "Filter by SLA",
+    "category_usage": "Usage",
+    "placeholder_usage": "Filter by usage",
     "slaNone": "No SLA",
-    "slaPlaceholder": "Filter by SLA",
     "slaPremium": "Premium",
     "slaSelfSupport": "Self-Support",
     "slaStandard": "Standard",
-    "usageCategory": "Usage",
-    "usagePlaceholder": "Filter by usage",
     "usageDevelopment": "Development/Test",
     "usageDisaster": "Disaster Recovery",
     "usageProduction": "Production",

diff --git a/src/components/c3GraphCard/c3GraphCard.js b/src/components/c3GraphCard/c3GraphCard.js
@@ -67,7 +67,7 @@ class C3GraphCard extends React.Component {
     const { viewId } = this.props;
 
     store.dispatch({
-      type: reduxTypes.query.SET_QUERY_GRANULARITY_RHSM,
+      type: reduxTypes.query.SET_QUERY_RHSM_TYPES[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY],
       viewId,
       [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: value
     });

diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
@@ -67,7 +67,7 @@ class GraphCard extends React.Component {
     const { viewId } = this.props;
 
     store.dispatch({
-      type: reduxTypes.query.SET_QUERY_GRANULARITY_RHSM,
+      type: reduxTypes.query.SET_QUERY_RHSM_TYPES[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY],
       viewId,
       [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: value
     });

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -332,35 +332,23 @@ Array [
     "keys": Array [
       Object {
         "key": "curiosity-toolbar.category",
-        "match": "t('curiosity-toolbar.category')",
-      },
-      Object {
-        "key": "curiosity-toolbar.categoryPlaceholder",
-        "match": "t('curiosity-toolbar.categoryPlaceholder')",
-      },
-      Object {
-        "key": "curiosity-toolbar.slaCategory",
-        "match": "t('curiosity-toolbar.slaCategory')",
-      },
-      Object {
-        "key": "curiosity-toolbar.slaCategory",
-        "match": "t('curiosity-toolbar.slaCategory')",
+        "match": "t('curiosity-toolbar.category', { context: field })",
       },
       Object {
-        "key": "curiosity-toolbar.slaPlaceholder",
-        "match": "t('curiosity-toolbar.slaPlaceholder')",
+        "key": "curiosity-toolbar.category",
+        "match": "t('curiosity-toolbar.category', { context: field })",
       },
       Object {
-        "key": "curiosity-toolbar.usageCategory",
-        "match": "t('curiosity-toolbar.usageCategory')",
+        "key": "curiosity-toolbar.placeholder",
+        "match": "t('curiosity-toolbar.placeholder', { context: field })",
       },
       Object {
-        "key": "curiosity-toolbar.usageCategory",
-        "match": "t('curiosity-toolbar.usageCategory')",
+        "key": "curiosity-toolbar.category",
+        "match": "t('curiosity-toolbar.category')",
       },
       Object {
-        "key": "curiosity-toolbar.usagePlaceholder",
-        "match": "t('curiosity-toolbar.usagePlaceholder')",
+        "key": "curiosity-toolbar.placeholder",
+        "match": "t('curiosity-toolbar.placeholder')",
       },
     ],
   },
@@ -400,12 +388,12 @@ Array [
         "match": "translate('curiosity-toolbar.usageUnspecified')",
       },
       Object {
-        "key": "curiosity-toolbar.slaCategory",
-        "match": "translate('curiosity-toolbar.slaCategory')",
+        "key": "curiosity-toolbar.category",
+        "match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_SLA })",
       },
       Object {
-        "key": "curiosity-toolbar.usageCategory",
-        "match": "translate('curiosity-toolbar.usageCategory')",
+        "key": "curiosity-toolbar.category",
+        "match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_USAGE })",
       },
     ],
   },

diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
@@ -10,6 +10,13 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
+      filterOptions={
+        Array [
+          Object {
+            "id": "sla",
+          },
+        ]
+      }
       query={
         Object {
           "granularity": "daily",
@@ -84,6 +91,13 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
+      filterOptions={
+        Array [
+          Object {
+            "id": "sla",
+          },
+        ]
+      }
       query={
         Object {
           "granularity": "daily",
@@ -158,6 +172,13 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
+      filterOptions={
+        Array [
+          Object {
+            "id": "sla",
+          },
+        ]
+      }
       query={
         Object {
           "granularity": "daily",

diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
@@ -74,7 +74,7 @@ class OpenshiftView extends React.Component {
    */
   render() {
     const { filters } = this.state;
-    const { query, location, routeDetail, t, viewId } = this.props;
+    const { query, initialToolbarFilters, location, routeDetail, t, viewId } = this.props;
     const isC3 = location?.parsedSearch?.c3 === '';
 
     return (
@@ -83,7 +83,7 @@ class OpenshiftView extends React.Component {
           {t(`curiosity-view.title`, { appName: helpers.UI_DISPLAY_NAME, context: viewId })}
         </PageHeader>
         <PageToolbar>
-          <Toolbar query={query} viewId={viewId} />
+          <Toolbar filterOptions={initialToolbarFilters} query={query} viewId={viewId} />
         </PageToolbar>
         <PageSection>
           {(isC3 && (
@@ -120,15 +120,16 @@ class OpenshiftView extends React.Component {
 /**
  * Prop types.
  *
- * @type {{initialFilters: Array, initialOption: string, viewId: string, t: Function, query: object,
- *     routeDetail: object, location: object}}
+ * @type {{initialFilters: Array, initialOption: string, initialToolbarFilters: Array, viewId: string,
+ *     t: Function, query: object, routeDetail: object, location: object}}
  */
 OpenshiftView.propTypes = {
   query: PropTypes.shape({
     [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)])
   }),
   initialOption: PropTypes.oneOf(['cores', 'sockets']),
   initialFilters: PropTypes.array,
+  initialToolbarFilters: PropTypes.array,
   location: PropTypes.shape({
     parsedSearch: PropTypes.objectOf(PropTypes.string)
   }).isRequired,
@@ -146,7 +147,8 @@ OpenshiftView.propTypes = {
 /**
  * Default props.
  *
- * @type {{initialFilters: Array, initialOption: string, viewId: string, t: translate, query: object}}
+ * @type {{initialFilters: Array, initialOption: string, initialToolbarFilters: Array, viewId: string,
+ *     t: translate, query: object}}
  */
 OpenshiftView.defaultProps = {
   query: {
@@ -164,6 +166,11 @@ OpenshiftView.defaultProps = {
     { id: 'thresholdSockets' },
     { id: 'thresholdCores' }
   ],
+  initialToolbarFilters: [
+    {
+      id: rhsmApiTypes.RHSM_API_QUERY_SLA
+    }
+  ],
   t: translate,
   viewId: 'OpenShift'
 };

diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
@@ -10,6 +10,17 @@ exports[`RhelView Component should display an alternate graph on query-string up
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
+      filterOptions={
+        Array [
+          Object {
+            "id": "sla",
+          },
+          Object {
+            "id": "usage",
+            "selected": true,
+          },
+        ]
+      }
       query={
         Object {
           "granularity": "daily",
@@ -70,6 +81,17 @@ exports[`RhelView Component should have a fallback title: title 1`] = `
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
+      filterOptions={
+        Array [
+          Object {
+            "id": "sla",
+          },
+          Object {
+            "id": "usage",
+            "selected": true,
+          },
+        ]
+      }
       query={
         Object {
           "granularity": "daily",
@@ -130,6 +152,17 @@ exports[`RhelView Component should render a non-connected component: non-connect
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
+      filterOptions={
+        Array [
+          Object {
+            "id": "sla",
+          },
+          Object {
+            "id": "usage",
+            "selected": true,
+          },
+        ]
+      }
       query={
         Object {
           "granularity": "daily",

diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js
@@ -31,7 +31,7 @@ class RhelView extends React.Component {
    * @returns {Node}
    */
   render() {
-    const { query, initialFilters, location, routeDetail, t, viewId } = this.props;
+    const { query, initialFilters, initialToolbarFilters, location, routeDetail, t, viewId } = this.props;
     const isC3 = location?.parsedSearch?.c3 === '';
 
     return (
@@ -40,7 +40,7 @@ class RhelView extends React.Component {
           {t(`curiosity-view.title`, { appName: helpers.UI_DISPLAY_NAME, context: viewId })}
         </PageHeader>
         <PageToolbar>
-          <Toolbar query={query} viewId={viewId} />
+          <Toolbar filterOptions={initialToolbarFilters} query={query} viewId={viewId} />
         </PageToolbar>
         <PageSection>
           {(isC3 && (
@@ -73,14 +73,15 @@ class RhelView extends React.Component {
 /**
  * Prop types.
  *
- * @type {{initialFilters: Array, viewId: string, t: Function, query: object, routeDetail: object,
- *     location: object}}
+ * @type {{initialFilters: Array, initialToolbarFilters: Array, viewId: string, t: Function, query: object,
+ *     routeDetail: object, location: object}}
  */
 RhelView.propTypes = {
   query: PropTypes.shape({
     [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)])
   }),
   initialFilters: PropTypes.array,
+  initialToolbarFilters: PropTypes.array,
   location: PropTypes.shape({
     parsedSearch: PropTypes.objectOf(PropTypes.string)
   }).isRequired,
@@ -98,7 +99,7 @@ RhelView.propTypes = {
 /**
  * Default props.
  *
- * @type {{initialFilters: Array, viewId: string, t: translate, query: object}}
+ * @type {{initialFilters: Array, initialToolbarFilters: Array, viewId: string, t: translate, query: object}}
  */
 RhelView.defaultProps = {
   query: {
@@ -125,6 +126,15 @@ RhelView.defaultProps = {
     },
     { id: 'thresholdSockets' }
   ],
+  initialToolbarFilters: [
+    {
+      id: rhsmApiTypes.RHSM_API_QUERY_SLA
+    },
+    {
+      id: rhsmApiTypes.RHSM_API_QUERY_USAGE,
+      selected: true
+    }
+  ],
   t: translate,
   viewId: 'RHEL'
 };