DEV satellite variants, reset archs and variants on clear

RedHatInsights · Dec 2, 2022 · c80b644 · c80b644
1 parent 7f07840
commit c80b644
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 43 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -287,6 +287,9 @@
     "label_usage_Disaster Recovery": "Disaster Recovery",
     "label_usage_Production": "Production",
     "label_usage_unspecified": "Unspecified",
+    "label_variant_": "",
+    "label_variant_Satellite Capsule": "Satellite Capsule",
+    "label_variant_Satellite Server": "Satellite Server",
     "placeholder": "Select",
     "placeholder_billing_provider": "Select purchased through",
     "placeholder_granularity": "Select date range",

diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js
@@ -78,7 +78,6 @@ const Toolbar = ({
    */
   const setSelectedOptions = ({ value } = {}) => {
     const categoryValue = toolbarFieldQueries?.[value];
-    console.log('>>>', [value, categoryValue]);
     return (categoryValue && [t('curiosity-toolbar.label', { context: [value, categoryValue] })]) || [];
   };
 

diff --git a/src/components/toolbar/toolbarContext.js b/src/components/toolbar/toolbarContext.js
@@ -7,6 +7,7 @@ import { useOnSelect as useArchitectureOnSelect } from './toolbarFieldArchitectu
 import { useOnSelect as useBillingProviderOnSelect } from './toolbarFieldBillingProvider';
 import { useOnSelect as useSlaOnSelect } from './toolbarFieldSla';
 import { useOnSelect as useUsageOnSelect } from './toolbarFieldUsage';
+import { useOnSelect as useVariantOnSelect } from './toolbarFieldVariant';
 import { SelectPosition } from '../form/select';
 import { helpers } from '../../common/helpers';
 
@@ -18,18 +19,21 @@ import { helpers } from '../../common/helpers';
  * @param {Function} options.useBillingProviderOnSelect
  * @param {Function} options.useSlaOnSelect
  * @param {Function} options.useUsageOnSelect
+ * @param {Function} options.useVariantOnSelect
  * @returns {Function}
  */
 const useToolbarFieldClear = ({
   useArchitectureOnSelect: useAliasArchitectureOnSelect = useArchitectureOnSelect,
   useBillingProviderOnSelect: useAliasBillingProviderOnSelect = useBillingProviderOnSelect,
   useSlaOnSelect: useAliasSlaOnSelect = useSlaOnSelect,
-  useUsageOnSelect: useAliasUsageOnSelect = useUsageOnSelect
+  useUsageOnSelect: useAliasUsageOnSelect = useUsageOnSelect,
+  useVariantOnSelect: useAliasVariantOnSelect = useVariantOnSelect
 } = {}) => {
   const architectureOnSelect = useAliasArchitectureOnSelect();
   const billingOnSelect = useAliasBillingProviderOnSelect();
   const slaOnSelect = useAliasSlaOnSelect();
   const usageOnSelect = useAliasUsageOnSelect();
+  const variantOnSelect = useAliasVariantOnSelect();
 
   return field => {
     switch (field) {
@@ -45,6 +49,9 @@ const useToolbarFieldClear = ({
       case RHSM_API_QUERY_SET_TYPES.USAGE:
         usageOnSelect();
         break;
+      case RHSM_API_QUERY_SET_TYPES.VARIANT:
+        variantOnSelect();
+        break;
       default:
         break;
     }
@@ -61,6 +68,7 @@ const useToolbarFieldClear = ({
  * @param {Function} options.useBillingProviderOnSelect
  * @param {Function} options.useSlaOnSelect
  * @param {Function} options.useUsageOnSelect
+ * @param {Function} options.useVariantOnSelect
  * @returns {Function}
  */
 const useToolbarFieldClearAll = ({
@@ -69,19 +77,22 @@ const useToolbarFieldClearAll = ({
   useSelectCategoryOnSelect: useAliasSelectCategoryOnSelect = useSelectCategoryOnSelect,
   useBillingProviderOnSelect: useAliasBillingProviderOnSelect = useBillingProviderOnSelect,
   useSlaOnSelect: useAliasSlaOnSelect = useSlaOnSelect,
-  useUsageOnSelect: useAliasUsageOnSelect = useUsageOnSelect
+  useUsageOnSelect: useAliasUsageOnSelect = useUsageOnSelect,
+  useVariantOnSelect: useAliasVariantOnSelect = useVariantOnSelect
 } = {}) => {
   const {
     [RHSM_API_QUERY_SET_TYPES.ARCHITECTURE]: architecture,
     [RHSM_API_QUERY_SET_TYPES.BILLING_PROVIDER]: billingProvider,
     [RHSM_API_QUERY_SET_TYPES.SLA]: sla,
-    [RHSM_API_QUERY_SET_TYPES.USAGE]: usage
+    [RHSM_API_QUERY_SET_TYPES.USAGE]: usage,
+    [RHSM_API_QUERY_SET_TYPES.VARIANT]: variant
   } = useAliasProductQuery();
   const architectureOnSelect = useAliasArchitectureOnSelect();
   const billingOnSelect = useAliasBillingProviderOnSelect();
   const slaOnSelect = useAliasSlaOnSelect();
   const usageOnSelect = useAliasUsageOnSelect();
   const selectCategoryOnSelect = useAliasSelectCategoryOnSelect();
+  const variantOnSelect = useAliasVariantOnSelect();
 
   return hardFilterReset => {
     if (typeof architecture === 'string') {
@@ -100,6 +111,10 @@ const useToolbarFieldClearAll = ({
       usageOnSelect();
     }
 
+    if (typeof variant === 'string') {
+      variantOnSelect();
+    }
+
     if (hardFilterReset) {
       selectCategoryOnSelect();
     }

diff --git a/src/components/toolbar/toolbarFieldArchitecture.js b/src/components/toolbar/toolbarFieldArchitecture.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useHistory } from '../../hooks/useRouter';
-import { useProduct } from '../productView/productViewContext';
+import { useProduct, useProductToolbarQuery } from '../productView/productViewContext';
 import { reduxTypes, storeHooks } from '../../redux';
 import { RHSM_API_QUERY_SET_TYPES } from '../../services/rhsm/rhsmConstants';
 import { Select, SelectPosition } from '../form/select';
@@ -38,19 +37,15 @@ const useToolbarFieldOptions = ({ useProduct: useAliasProduct = useProduct } = {
  *
  * @param {object} options
  * @param {Function} options.useDispatch
- * @param {Function} options.useHistory
  * @param {Function} options.useProduct
  * @returns {Function}
  */
 const useOnSelect = ({
   useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch,
-  useHistory: useAliasHistory = useHistory,
   useProduct: useAliasProduct = useProduct
 } = {}) => {
   const { viewId } = useAliasProduct();
   const dispatch = useAliasDispatch();
-  const history = useAliasHistory({ isSetAppNav: true });
-  console.log('>>>', history);
 
   return ({ value = null } = {}) => {
     dispatch([
@@ -65,8 +60,6 @@ const useOnSelect = ({
         value
       }
     ]);
-
-    // history.push(value);
   };
 };
 
@@ -79,7 +72,7 @@ const useOnSelect = ({
  * @param {string} props.position
  * @param {Function} props.t
  * @param {Function} props.useOnSelect
- * @param {Function} props.useProduct
+ * @param {Function} props.useProductToolbarQuery
  * @param {Function} props.useToolbarFieldOptions
  * @returns {Node}
  */
@@ -88,10 +81,10 @@ const ToolbarFieldArchitecture = ({
   position,
   t,
   useOnSelect: useAliasOnSelect,
-  useProduct: useAliasProduct,
+  useProductToolbarQuery: useAliasProductToolbarQuery,
   useToolbarFieldOptions: useAliasToolbarFieldOptions
 }) => {
-  const { productId: updatedValue } = useAliasProduct();
+  const { [RHSM_API_QUERY_SET_TYPES.ARCHITECTURE]: updatedValue } = useAliasProductToolbarQuery();
   const onSelect = useAliasOnSelect();
   const options = useAliasToolbarFieldOptions();
   const updatedOptions = options.map(option => ({ ...option, selected: option.value === updatedValue }));
@@ -112,30 +105,30 @@ const ToolbarFieldArchitecture = ({
 /**
  * Prop types.
  *
- * @type {{useOnSelect: Function, useProduct: Function, t: Function, isFilter: boolean, position: string,
- *     useToolbarFieldOptions: Function}}
+ * @type {{useOnSelect: Function, t: Function, useProductToolbarQuery: Function, isFilter: boolean,
+ *     position: string, useToolbarFieldOptions: Function}}
  */
 ToolbarFieldArchitecture.propTypes = {
   isFilter: PropTypes.bool,
   position: PropTypes.string,
   t: PropTypes.func,
   useOnSelect: PropTypes.func,
-  useProduct: PropTypes.func,
+  useProductToolbarQuery: PropTypes.func,
   useToolbarFieldOptions: PropTypes.func
 };
 
 /**
  * Default props.
  *
- * @type {{useOnSelect: Function, useProduct: Function, t: translate, isFilter: boolean, position: string,
- *     useToolbarFieldOptions: Function}}
+ * @type {{useOnSelect: Function, t: translate, useProductToolbarQuery: Function, isFilter: boolean,
+ *     position: string, useToolbarFieldOptions: Function}}
  */
 ToolbarFieldArchitecture.defaultProps = {
   isFilter: false,
   position: SelectPosition.left,
   t: translate,
   useOnSelect,
-  useProduct,
+  useProductToolbarQuery,
   useToolbarFieldOptions
 };
 

diff --git a/src/components/toolbar/toolbarFieldSelectCategory.js b/src/components/toolbar/toolbarFieldSelectCategory.js
@@ -7,16 +7,17 @@ import { useProduct, useProductToolbarConfig } from '../productView/productViewC
 import { Select } from '../form/select';
 import { RHSM_API_QUERY_SET_TYPES } from '../../services/rhsm/rhsmConstants';
 import { translate } from '../i18n/i18n';
-import { ToolbarFieldGranularity, toolbarFieldOptions as granularityOptions } from './toolbarFieldGranularity';
-import { ToolbarFieldRangedMonthly, toolbarFieldOptions as rangedMonthlyOptions } from './toolbarFieldRangedMonthly';
+import { ToolbarFieldArchitecture } from './toolbarFieldArchitecture';
 import {
   ToolbarFieldBillingProvider,
   toolbarFieldOptions as billingProviderOptions
 } from './toolbarFieldBillingProvider';
+import { ToolbarFieldGranularity, toolbarFieldOptions as granularityOptions } from './toolbarFieldGranularity';
+import { ToolbarFieldRangedMonthly, toolbarFieldOptions as rangedMonthlyOptions } from './toolbarFieldRangedMonthly';
 import { ToolbarFieldSla, toolbarFieldOptions as slaOptions } from './toolbarFieldSla';
 import { ToolbarFieldUom, toolbarFieldOptions as uomOptions } from './toolbarFieldUom';
 import { ToolbarFieldUsage, toolbarFieldOptions as usageOptions } from './toolbarFieldUsage';
-import { ToolbarFieldArchitecture } from './toolbarFieldArchitecture';
+import { ToolbarFieldVariant } from './toolbarFieldVariant';
 
 /**
  * Select field options. Use function instead of arrow func to help with component
@@ -79,6 +80,15 @@ const toolbarFieldOptions = [
     options: usageOptions,
     isClearable: true
   },
+  {
+    title: translate('curiosity-toolbar.label', { context: ['category', RHSM_API_QUERY_SET_TYPES.VARIANT] }),
+    value: RHSM_API_QUERY_SET_TYPES.VARIANT,
+    component: function Variant(props) {
+      return <ToolbarFieldVariant key="selectCategory_variant" {...props} />;
+    },
+    options: [],
+    isClearable: true
+  },
   {
     title: translate('curiosity-toolbar.label', { context: ['category', RHSM_API_QUERY_SET_TYPES.ARCHITECTURE] }),
     value: RHSM_API_QUERY_SET_TYPES.ARCHITECTURE,

diff --git a/src/components/toolbar/toolbarFieldVariant.js b/src/components/toolbar/toolbarFieldVariant.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useHistory } from '../../hooks/useRouter';
-import { useProduct } from '../productView/productViewContext';
+import { useProduct, useProductToolbarQuery } from '../productView/productViewContext';
 import { reduxTypes, storeHooks } from '../../redux';
 import { RHSM_API_QUERY_SET_TYPES } from '../../services/rhsm/rhsmConstants';
 import { Select, SelectPosition } from '../form/select';
@@ -21,7 +20,9 @@ const useToolbarFieldOptions = ({ useProduct: useAliasProduct = useProduct } = {
   if (Array.isArray(productVariants)) {
     options.push(
       ...productVariants.map(type => ({
-        title: translate('curiosity-toolbar.label', { context: ['variant', (type === '' && 'unspecified') || type] }),
+        title: translate('curiosity-toolbar.label', {
+          context: ['variant', (type === '' && 'unspecified') || type]
+        }),
         value: type,
         selected: false
       }))
@@ -32,23 +33,19 @@ const useToolbarFieldOptions = ({ useProduct: useAliasProduct = useProduct } = {
 };
 
 /**
- * On select update sla.
+ * On select update.
  *
  * @param {object} options
  * @param {Function} options.useDispatch
- * @param {Function} options.useHistory
  * @param {Function} options.useProduct
  * @returns {Function}
  */
 const useOnSelect = ({
   useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch,
-  useHistory: useAliasHistory = useHistory,
   useProduct: useAliasProduct = useProduct
 } = {}) => {
   const { viewId } = useAliasProduct();
   const dispatch = useAliasDispatch();
-  const history = useAliasHistory({ isSetAppNav: true });
-  console.log('>>>', history);
 
   return ({ value = null } = {}) => {
     dispatch([
@@ -63,8 +60,6 @@ const useOnSelect = ({
         value
       }
     ]);
-
-    // history.push(value);
   };
 };
 
@@ -77,7 +72,7 @@ const useOnSelect = ({
  * @param {string} props.position
  * @param {Function} props.t
  * @param {Function} props.useOnSelect
- * @param {Function} props.useProduct
+ * @param {Function} props.useProductToolbarQuery
  * @param {Function} props.useToolbarFieldOptions
  * @returns {Node}
  */
@@ -86,10 +81,10 @@ const ToolbarFieldVariant = ({
   position,
   t,
   useOnSelect: useAliasOnSelect,
-  useProduct: useAliasProduct,
+  useProductToolbarQuery: useAliasProductToolbarQuery,
   useToolbarFieldOptions: useAliasToolbarFieldOptions
 }) => {
-  const { productId: updatedValue } = useAliasProduct();
+  const { [RHSM_API_QUERY_SET_TYPES.VARIANT]: updatedValue } = useAliasProductToolbarQuery();
   const onSelect = useAliasOnSelect();
   const options = useAliasToolbarFieldOptions();
   const updatedOptions = options.map(option => ({ ...option, selected: option.value === updatedValue }));
@@ -110,30 +105,30 @@ const ToolbarFieldVariant = ({
 /**
  * Prop types.
  *
- * @type {{useOnSelect: Function, useProduct: Function, t: Function, isFilter: boolean, position: string,
- *     useToolbarFieldOptions: Function}}
+ * @type {{useOnSelect: Function, t: Function, useProductToolbarQuery: Function, isFilter: boolean,
+ *     position: string, useToolbarFieldOptions: Function}}
  */
 ToolbarFieldVariant.propTypes = {
   isFilter: PropTypes.bool,
   position: PropTypes.string,
   t: PropTypes.func,
   useOnSelect: PropTypes.func,
-  useProduct: PropTypes.func,
+  useProductToolbarQuery: PropTypes.func,
   useToolbarFieldOptions: PropTypes.func
 };
 
 /**
  * Default props.
  *
- * @type {{useOnSelect: Function, useProduct: Function, t: translate, isFilter: boolean, position: string,
- *     useToolbarFieldOptions: Function}}
+ * @type {{useOnSelect: Function, t: translate, useProductToolbarQuery: Function, isFilter: boolean,
+ *     position: string, useToolbarFieldOptions: Function}}
  */
 ToolbarFieldVariant.defaultProps = {
   isFilter: false,
   position: SelectPosition.left,
   t: translate,
   useOnSelect,
-  useProduct,
+  useProductToolbarQuery,
   useToolbarFieldOptions
 };
 

diff --git a/src/config/product.satellite.js b/src/config/product.satellite.js
@@ -219,6 +219,9 @@ const config = {
     {
       id: RHSM_API_QUERY_SET_TYPES.USAGE,
       selected: true
+    },
+    {
+      id: RHSM_API_QUERY_SET_TYPES.VARIANT
     }
   ],
   initialSecondaryToolbarFilters: [