feat(toolbarFieldBillingProvider): ent-4689 select, services (#893)

* locale, placeholder, category strings * productViewContext, add secondaryFilters for toolbar config * toolbar, secondaryFields, mod for consuming option component * toolbarContext, hook for applying secondary fields * toolbarFieldBillingProvider, select component * toolbarFieldSelectCategory, toolbarFieldOptions add provider * redux, viewReducer, queryTypes, add billing provider query * services, rhsmConstants, billing provider adds
RedHatInsights · May 25, 2022 · 94095c0 · 94095c0
1 parent a972740
commit 94095c0
Show file tree

Hide file tree

Showing 30 changed files with 1,008 additions and 620 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -122,6 +122,7 @@
     "hardwareType_physical": "Physical",
     "hardwareType_virtualized": "Virtual",
     "header": "{{context}}",
+    "header_Billing-provider": "Purchased through",
     "header_cores": "Subscribed cores",
     "header_cores_OpenShift Container Platform": "Cores",
     "header_cores_OpenShift-metrics": "Cores",
@@ -152,6 +153,12 @@
     "header_Transfer-gibibytes": "Data transfer",
     "header_tooltip_Storage-gibibytes": "Measurements in binary gigabyte hours",
     "header_tooltip_Transfer-gibibytes": "Measurements in binary gigabytes",
+    "measurement_Billing-provider": "{{context}}",
+    "measurement_Billing-provider_aws": "AWS",
+    "measurement_Billing-provider_azure": "Azure",
+    "measurement_Billing-provider_gcp": "GCP",
+    "measurement_Billing-provider_oracle": "Oracle",
+    "measurement_Billing-provider_red hat": "Red Hat",
     "measurement_Instance-hours": "{{total}} hours",
     "measurement_Storage-gibibytes": "{{total}} GB hours",
     "measurement_Transfer-gibibytes": "{{total}} GB",
@@ -168,6 +175,7 @@
   },
   "curiosity-toolbar": {
     "category": "Filter by",
+    "category_billing_provider": "Purchased through",
     "category_granularity": "Granularity",
     "category_rangedMonthly": "Monthly",
     "category_sla": "SLA",
@@ -176,18 +184,26 @@
     "clearFilters": "Reset filters",
     "button_displayName": "Search button for name",
     "placeholder": "Select",
+    "placeholder_billing_provider": "Select purchased through",
     "placeholder_granularity": "Select date range",
     "placeholder_rangedMonthly": "Select a month",
     "placeholder_sla": "Select SLA",
     "placeholder_uom": "Select unit",
     "placeholder_usage": "Select usage",
     "placeholder_filter": "Filter by",
+    "placeholder_filter_billing_provider": "Filter by purchased through",
     "placeholder_filter_displayName": "Filter by name",
     "placeholder_filter_granularity": "Filter by date",
     "placeholder_filter_rangedMonthly": "Filter by month",
     "placeholder_filter_sla": "Filter by SLA",
     "placeholder_filter_uom": "Filter by unit",
     "placeholder_filter_usage": "Filter by usage",
+    "billing_provider": "None",
+    "billing_provider_aws": "Amazon Web Services",
+    "billing_provider_azure": "Microsoft Azure",
+    "billing_provider_gcp": "Google Cloud Platform",
+    "billing_provider_oracle": "Oracle Cloud Infrastructure",
+    "billing_provider_red hat": "Red Hat Marketplace",
     "granularity_Daily": "Daily",
     "granularity_Weekly": "Weekly",
     "granularity_Monthly": "Monthly",

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -397,6 +397,23 @@ Array [
       },
     ],
   },
+  Object {
+    "file": "./src/components/toolbar/toolbarFieldBillingProvider.js",
+    "keys": Array [
+      Object {
+        "key": "curiosity-toolbar.billing_provider",
+        "match": "translate('curiosity-toolbar.billing_provider', { context: (type === '' && 'none')",
+      },
+      Object {
+        "key": "",
+        "match": "t(\`curiosity-toolbar.placeholder\${(isFilter && '_filter')",
+      },
+      Object {
+        "key": "",
+        "match": "t(\`curiosity-toolbar.placeholder\${(isFilter && '_filter')",
+      },
+    ],
+  },
   Object {
     "file": "./src/components/toolbar/toolbarFieldDisplayName.js",
     "keys": Array [
@@ -455,6 +472,10 @@ Array [
         "key": "curiosity-toolbar.category",
         "match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_TYPES.UOM })",
       },
+      Object {
+        "key": "curiosity-toolbar.category",
+        "match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_TYPES.BILLING_PROVIDER })",
+      },
       Object {
         "key": "curiosity-toolbar.category",
         "match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_TYPES.SLA })",

diff --git a/src/components/inventoryCard/__tests__/__snapshots__/inventoryCardContext.test.js.snap b/src/components/inventoryCard/__tests__/__snapshots__/inventoryCardContext.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`InventoryCardContext should expect specific sort properties: sort properties 1`] = `
 Object {
+  "BILLING_PROVIDER": "Billing-provider",
   "CORES": "Cores",
   "CORE_SECONDS": "Core-seconds",
   "INSTANCE_HOURS": "Instance-hours",

diff --git a/src/components/productView/__tests__/__snapshots__/productView.test.js.snap b/src/components/productView/__tests__/__snapshots__/productView.test.js.snap
@@ -51,6 +51,7 @@ exports[`ProductView Component should allow custom inventory displays via config
           useToolbarFieldClear={[Function]}
           useToolbarFieldClearAll={[Function]}
           useToolbarFieldQueries={[Function]}
+          useToolbarSecondaryFields={[Function]}
         />
       </PageToolbar>
       <PageSection
@@ -201,6 +202,7 @@ exports[`ProductView Component should allow custom product views via props: cust
           useToolbarFieldClear={[Function]}
           useToolbarFieldClearAll={[Function]}
           useToolbarFieldQueries={[Function]}
+          useToolbarSecondaryFields={[Function]}
         />
       </PageToolbar>
       <PageSection
@@ -336,6 +338,7 @@ exports[`ProductView Component should allow custom product views via props: cust
           useToolbarFieldClear={[Function]}
           useToolbarFieldClearAll={[Function]}
           useToolbarFieldQueries={[Function]}
+          useToolbarSecondaryFields={[Function]}
         />
       </PageToolbar>
       <PageSection
@@ -419,6 +422,7 @@ exports[`ProductView Component should render a basic component: basic 1`] = `
           useToolbarFieldClear={[Function]}
           useToolbarFieldClearAll={[Function]}
           useToolbarFieldQueries={[Function]}
+          useToolbarSecondaryFields={[Function]}
         />
       </PageToolbar>
       <PageSection

diff --git a/src/components/productView/__tests__/__snapshots__/productViewContext.test.js.snap b/src/components/productView/__tests__/__snapshots__/productViewContext.test.js.snap
@@ -368,6 +368,11 @@ Object {
       "ipsum": "dolor",
     },
   ],
+  "secondaryFilters": Array [
+    Object {
+      "hello": "world",
+    },
+  ],
   "settings": Object {
     "ipsum": "dolor",
   },

diff --git a/...components/productView/__tests__/__snapshots__/productViewOpenShiftContainer.test.js.snap b/...components/productView/__tests__/__snapshots__/productViewOpenShiftContainer.test.js.snap
@@ -170,6 +170,7 @@ exports[`ProductViewOpenShiftContainer Component should render a basic component
           useToolbarFieldClear={[Function]}
           useToolbarFieldClearAll={[Function]}
           useToolbarFieldQueries={[Function]}
+          useToolbarSecondaryFields={[Function]}
         />
       </PageToolbar>
       <PageSection
@@ -425,6 +426,7 @@ exports[`ProductViewOpenShiftContainer Component should render a basic component
           useToolbarFieldClear={[Function]}
           useToolbarFieldClearAll={[Function]}
           useToolbarFieldQueries={[Function]}
+          useToolbarSecondaryFields={[Function]}
         />
       </PageToolbar>
       <PageSection

diff --git a/src/components/productView/__tests__/productViewContext.test.js b/src/components/productView/__tests__/productViewContext.test.js
@@ -130,6 +130,7 @@ describe('ProductViewContext', () => {
         sit: 'amet'
       },
       initialToolbarFilters: [{ ipsum: 'dolor' }],
+      initialSecondaryToolbarFilters: [{ hello: 'world' }],
       initialToolbarSettings: {
         ipsum: 'dolor'
       }

diff --git a/src/components/productView/productViewContext.js b/src/components/productView/productViewContext.js
@@ -295,9 +295,14 @@ const useProductInventorySubscriptionsConfig = ({
  * @returns {{settings: object, filters: Array}}
  */
 const useProductToolbarConfig = ({ useProductContext: useAliasProductContext = useProductContext } = {}) => {
-  const { initialToolbarFilters, initialToolbarSettings = {} } = useAliasProductContext();
+  const {
+    initialToolbarFilters,
+    initialToolbarSettings = {},
+    initialSecondaryToolbarFilters
+  } = useAliasProductContext();
   return {
     filters: initialToolbarFilters,
+    secondaryFilters: initialSecondaryToolbarFilters,
     settings: initialToolbarSettings
   };
 };