refactor(config): sw-690 rhel, satellite, openshift inventory (#1002)

* config, rhel, openshift, satellite, inventory ids
* locale, inventory strings
* productView, allow updated hosts inventory
* rhsmConstants, add missing sort types
* rhsmTransformers, pass original props, number of guests

public/locales/en-US.json

@@ -171,6 +171,8 @@
     "tableSkeletonAriaLabel": "Loading",
     "label_has_infinite_quantity_cores": "Unlimited cores",
     "label_has_infinite_quantity_sockets": "Unlimited sockets",
+    "label_number_of_guests_one": "<0>{{count}} guest</0>",
+    "label_number_of_guests_other": "<0>{{count}} guests</0>",
     "label_numberOfGuests_one": "<0>{{count}} guest</0>",
     "label_numberOfGuests_other": "<0>{{count}} guests</0>",
     "label_subscription_type": "{{context}}",
@@ -194,14 +196,17 @@
     "header_cores_OpenShift-metrics": "Cores",
     "header_cores_OpenShift-dedicated-metrics": "Cores",
     "header_Cores": "vCPU hours",
+    "header_core_hours": "Core hours",
     "header_coreHours": "Core hours",
     "header_displayName": "Name",
     "header_display_name": "Name",
     "header_guestsDisplayName": "Guest name",
     "header_hardwareType": "Type",
     "header_instanceHours": "Instance hours",
+    "header_instance_hours": "Instance hours",
     "header_Instance-hours": "Instance hours",
     "header_measurementType": "Type",
+    "header_measurement_type": "Type",
     "header_inventoryId": "UUID",
     "header_sockets": "Subscribed sockets",
     "header_sockets_OpenShift Container Platform": "Sockets",

src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap

@@ -517,14 +517,6 @@ exports[`I18n Component should generate a predictable locale key output snapshot
         "key": "curiosity-inventory.label",
         "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', count: numberOfGuests.value }, [ <PfLabel color="blue" /> ])",
       },
-      {
-        "key": "curiosity-inventory.header",
-        "match": "translate('curiosity-inventory.header', { context: ['sockets', 'OpenShift Container Platform'] })",
-      },
-      {
-        "key": "curiosity-inventory.header",
-        "match": "translate('curiosity-inventory.header', { context: ['cores', 'OpenShift Container Platform'] })",
-      },
       {
         "key": "curiosity-inventory.header",
         "match": "translate('curiosity-inventory.header', { context: ['subscriptions', uom?.value] })",
@@ -544,7 +536,7 @@ exports[`I18n Component should generate a predictable locale key output snapshot
       },
       {
         "key": "curiosity-inventory.label",
-        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', count: numberOfGuests.value }, [ <PfLabel color="blue" /> ])",
+        "match": "translate( 'curiosity-inventory.label', { context: INVENTORY_TYPES.NUMBER_OF_GUESTS, count: numberOfGuests.value }, [<PfLabel color="blue" />] )",
       },
     ],
   },
@@ -603,11 +595,11 @@ exports[`I18n Component should generate a predictable locale key output snapshot
       },
       {
         "key": "curiosity-inventory.measurementType",
-        "match": "translate('curiosity-inventory.measurementType', { context: measurementType.value })",
+        "match": "translate('curiosity-inventory.measurementType', { context: measurementType?.value })",
       },
       {
         "key": "curiosity-inventory.cloudProvider",
-        "match": "translate('curiosity-inventory.cloudProvider', { context: cloudProvider.value })",
+        "match": "translate('curiosity-inventory.cloudProvider', { context: cloudProvider?.value })",
       },
       {
         "key": "curiosity-inventory.header",
@@ -714,11 +706,11 @@ exports[`I18n Component should generate a predictable locale key output snapshot
       },
       {
         "key": "curiosity-inventory.measurementType",
-        "match": "translate('curiosity-inventory.measurementType', { context: measurementType.value })",
+        "match": "translate('curiosity-inventory.measurementType', { context: measurementType?.value })",
       },
       {
         "key": "curiosity-inventory.cloudProvider",
-        "match": "translate('curiosity-inventory.cloudProvider', { context: cloudProvider.value })",
+        "match": "translate('curiosity-inventory.cloudProvider', { context: cloudProvider?.value })",
       },
     ],
   },

src/components/inventoryCard/__tests__/__snapshots__/inventoryCardContext.test.js.snap

@@ -57,6 +57,39 @@ exports[`InventoryCardContext should handle a store response with useGetInstance
 }
 `;
 
+exports[`InventoryCardContext should handle an onColumnSort event for hosts: onColumnSort event, dispatch hosts 1`] = `
+[
+  [
+    [
+      {
+        "dir": "desc",
+        "type": "SET_QUERY_RHSM_HOSTS_INVENTORY_dir",
+        "viewId": "lorem",
+      },
+      {
+        "sort": "loremIpsumColumnOne",
+        "type": "SET_QUERY_RHSM_HOSTS_INVENTORY_sort",
+        "viewId": "lorem",
+      },
+    ],
+  ],
+  [
+    [
+      {
+        "dir": "asc",
+        "type": "SET_QUERY_RHSM_HOSTS_INVENTORY_dir",
+        "viewId": "lorem",
+      },
+      {
+        "sort": "loremIpsumColumnOne",
+        "type": "SET_QUERY_RHSM_HOSTS_INVENTORY_sort",
+        "viewId": "lorem",
+      },
+    ],
+  ],
+]
+`;
+
 exports[`InventoryCardContext should handle an onColumnSort event: onColumnSort event, dispatch 1`] = `
 [
   [
@@ -203,6 +236,7 @@ exports[`InventoryCardContext should return specific properties: specific proper
 {
   "useGetHostsInventory": [Function],
   "useGetInstancesInventory": [Function],
+  "useOnColumnSortHosts": [Function],
   "useOnColumnSortInstances": [Function],
   "useOnPageInstances": [Function],
 }

src/components/inventoryCard/__tests__/inventoryCardContext.test.js

@@ -3,6 +3,7 @@ import {
   useGetHostsInventory,
   useGetInstancesInventory,
   useOnPageInstances,
+  useOnColumnSortHosts,
   useOnColumnSortInstances
 } from '../inventoryCardContext';
 import {
@@ -205,6 +206,21 @@ describe('InventoryCardContext', () => {
     mockDispatch.mockClear();
   });
 
+  it('should handle an onColumnSort event for hosts', () => {
+    const mockDispatch = jest.fn();
+    const onColumnSort = useOnColumnSortHosts({
+      sortColumns: { LOREM_IPSUM_COLUMN_ONE: 'loremIpsumColumnOne' },
+      useDispatch: () => mockDispatch,
+      useProduct: () => ({ productId: 'lorem' })
+    });
+
+    onColumnSort(null, { direction: SORT_DIRECTION_TYPES.DESCENDING, id: 'loremIpsumColumnOne' });
+    onColumnSort(null, { direction: SORT_DIRECTION_TYPES.ASCENDING, id: 'loremIpsumColumnOne' });
+
+    expect(mockDispatch.mock.calls).toMatchSnapshot('onColumnSort event, dispatch hosts');
+    mockDispatch.mockClear();
+  });
+
   it('should handle an onColumnSort event', () => {
     const mockDispatch = jest.fn();
     const onColumnSort = useOnColumnSortInstances({

src/components/inventoryCard/inventoryCardContext.js

@@ -4,6 +4,7 @@ import { SortByDirection } from '@patternfly/react-table';
 import { reduxActions, reduxTypes, storeHooks } from '../../redux';
 import { useProduct, useProductInventoryHostsQuery } from '../productView/productViewContext';
 import {
+  RHSM_API_QUERY_INVENTORY_HOSTS_SORT_TYPES as HOSTS_SORT_TYPES,
   RHSM_API_QUERY_INVENTORY_SORT_DIRECTION_TYPES as SORT_DIRECTION_TYPES,
   RHSM_API_QUERY_INVENTORY_SORT_TYPES as SORT_TYPES,
   RHSM_API_QUERY_SET_TYPES
@@ -132,6 +133,68 @@ const useOnPageInstances = ({
   };
 };
 
+/**
+ * An onColumnSort callback for hosts inventory.
+ *
+ * @param {object} options
+ * @param {object} options.sortColumns
+ * @param {Function} options.useDispatch
+ * @param {Function} options.useProduct
+ * @returns {Function}
+ */
+const useOnColumnSortHosts = ({
+  sortColumns = HOSTS_SORT_TYPES,
+  useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch,
+  useProduct: useAliasProduct = useProduct
+} = {}) => {
+  const { productId } = useAliasProduct();
+  const dispatch = useAliasDispatch();
+
+  /**
+   * On event update state for hosts inventory.
+   *
+   * @event onColumnSort
+   * @param {*} _data
+   * @param {object} params
+   * @param {string} params.direction
+   * @param {string} params.id
+   * @returns {void}
+   */
+  return (_data, { direction, id }) => {
+    const updatedSortColumn = Object.values(sortColumns).find(value => value === id || _camelCase(value) === id);
+    let updatedDirection;
+
+    if (!updatedSortColumn) {
+      if (helpers.DEV_MODE || helpers.REVIEW_MODE) {
+        console.warn(`Sorting can only be performed on select fields, confirm field ${id} is allowed.`);
+      }
+      return;
+    }
+
+    switch (direction) {
+      case SortByDirection.desc:
+        updatedDirection = SORT_DIRECTION_TYPES.DESCENDING;
+        break;
+      default:
+        updatedDirection = SORT_DIRECTION_TYPES.ASCENDING;
+        break;
+    }
+
+    dispatch([
+      {
+        type: reduxTypes.query.SET_QUERY_RHSM_HOSTS_INVENTORY_TYPES[RHSM_API_QUERY_SET_TYPES.DIRECTION],
+        viewId: productId,
+        [RHSM_API_QUERY_SET_TYPES.DIRECTION]: updatedDirection
+      },
+      {
+        type: reduxTypes.query.SET_QUERY_RHSM_HOSTS_INVENTORY_TYPES[RHSM_API_QUERY_SET_TYPES.SORT],
+        viewId: productId,
+        [RHSM_API_QUERY_SET_TYPES.SORT]: updatedSortColumn
+      }
+    ]);
+  };
+};
+
 /**
  * An onColumnSort callback for instances inventory.
  *
@@ -198,6 +261,7 @@ const context = {
   useGetHostsInventory,
   useGetInstancesInventory,
   useOnPageInstances,
+  useOnColumnSortHosts,
   useOnColumnSortInstances
 };
 
@@ -207,5 +271,6 @@ export {
   useGetHostsInventory,
   useGetInstancesInventory,
   useOnPageInstances,
+  useOnColumnSortHosts,
   useOnColumnSortInstances
 };

src/components/inventoryCard/inventoryCardHosts.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useGetHostsInventory } from './inventoryCardContext';
+import { useGetHostsInventory, useOnColumnSortHosts } from './inventoryCardContext';
 import InventoryCard from './inventoryCard';
 import { helpers } from '../../common';
 
@@ -10,28 +10,31 @@ import { helpers } from '../../common';
  * @param {object} props
  * @param {boolean} props.isDisabled
  * @param {Function} props.useGetInventory
+ * @param {Function} props.useOnColumnSort
  * @returns {React.ReactNode}
  */
 const InventoryCardHosts = ({ ...props }) => <InventoryCard {...props} />;
 
 /**
  * Prop types.
  *
- * @type {{isDisabled: boolean, useGetInventory: Function}}
+ * @type {{isDisabled: boolean, useGetInventory: Function, useOnColumnSort: Function}}
  */
 InventoryCardHosts.propTypes = {
   isDisabled: PropTypes.bool,
-  useGetInventory: PropTypes.func
+  useGetInventory: PropTypes.func,
+  useOnColumnSort: PropTypes.func
 };
 
 /**
  * Default props.
  *
- * @type {{isDisabled: boolean, useGetInventory: Function}}
+ * @type {{isDisabled: boolean, useGetInventory: Function, useOnColumnSort: Function}}
  */
 InventoryCardHosts.defaultProps = {
   isDisabled: helpers.UI_DISABLED_TABLE_HOSTS,
-  useGetInventory: useGetHostsInventory
+  useGetInventory: useGetHostsInventory,
+  useOnColumnSort: useOnColumnSortHosts
 };
 
 export { InventoryCardHosts as default, InventoryCardHosts };

src/components/productView/__tests__/__snapshots__/productViewContext.test.js.snap

@@ -63,21 +63,20 @@ exports[`ProductViewContext should apply a hook for retrieving product context:
   "initialInventoryFilters": [
     {
       "cell": [Function],
-      "id": "displayName",
+      "id": "display_name",
       "isSortable": true,
     },
     {
       "cellWidth": 15,
-      "header": [Function],
       "id": "cores",
       "isOptional": true,
       "isSortable": true,
       "isWrappable": true,
     },
     {
       "cell": [Function],
-      "cellWidth": 25,
-      "id": "lastSeen",
+      "cellWidth": 20,
+      "id": "last_seen",
       "isSortable": true,
       "isWrappable": true,
     },
@@ -197,21 +196,20 @@ exports[`ProductViewContext should apply a hook for retrieving product context:
   "initialInventoryFilters": [
     {
       "cell": [Function],
-      "id": "displayName",
+      "id": "display_name",
       "isSortable": true,
     },
     {
       "cellWidth": 15,
-      "header": [Function],
       "id": "sockets",
       "isOptional": true,
       "isSortable": true,
       "isWrappable": true,
     },
     {
       "cell": [Function],
-      "cellWidth": 25,
-      "id": "lastSeen",
+      "cellWidth": 20,
+      "id": "last_seen",
       "isSortable": true,
       "isWrappable": true,
     },

src/components/productView/productView.js

@@ -111,7 +111,7 @@ const ProductView = ({ t, toolbarGraph, toolbarGraphDescription, useRouteDetail:
               (!initialInventoryFilters && !initialSubscriptionsInventoryFilters) || helpers.UI_DISABLED_TABLE
             }
           >
-            {!helpers.UI_DISABLED_TABLE_HOSTS && productDisplay !== DISPLAY_TYPES.HOURLY && initialInventoryFilters && (
+            {!helpers.UI_DISABLED_TABLE_HOSTS && productDisplay === DISPLAY_TYPES.LEGACY && initialInventoryFilters && (
               <InventoryTab
                 key={`inventory_deprecated-hosts_${productId}`}
                 title={t('curiosity-inventory.tabHosts', { context: [productId] })}
@@ -128,10 +128,8 @@ const ProductView = ({ t, toolbarGraph, toolbarGraphDescription, useRouteDetail:
               </InventoryTab>
             )}
             {!helpers.UI_DISABLED_TABLE_HOSTS &&
-              productDisplay !== DISPLAY_TYPES.DUAL_AXES &&
               productDisplay !== DISPLAY_TYPES.LEGACY &&
               productDisplay !== DISPLAY_TYPES.HOURLY &&
-              productDisplay !== DISPLAY_TYPES.PARTIAL &&
               initialInventoryFilters && (
                 <InventoryTab
                   key={`inventory_hosts_${productId}`}