feat(inventoryCardHosts): sw-223 deprecated move (#999)

* inventoryCardContext, useGetHostsInventory hook * inventoryCardHosts, move from deprecated prep * productView, allow partial product types * redux, inventoryListSelectors, redundancy * rhsmServices, types, schema, transformer for hosts
RedHatInsights · Dec 5, 2022 · fc0d361 · fc0d361
1 parent 28fe569
commit fc0d361
Show file tree

Hide file tree

Showing 22 changed files with 603 additions and 77 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -118,6 +118,7 @@
   },
   "curiosity-inventory": {
     "cardHeading": "Current systems",
+    "tabHeading": "Inventory tabs",
     "tabSubHeading": "Tab {{count}}",
     "tabHosts": "Current systems",
     "tabHosts_OpenShift-dedicated-metrics": "Current instances",

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -288,6 +288,10 @@ exports[`I18n Component should generate a predictable locale key output snapshot
         "key": "curiosity-inventory.tabHosts",
         "match": "t('curiosity-inventory.tabHosts', { context: [productId] })",
       },
+      {
+        "key": "curiosity-inventory.tabHosts",
+        "match": "t('curiosity-inventory.tabHosts', { context: [productId] })",
+      },
       {
         "key": "curiosity-inventory.tabInstances",
         "match": "t('curiosity-inventory.tabInstances', { context: [productId] })",
@@ -781,10 +785,6 @@ exports[`I18n Component should have locale keys that exist in the default langua
     "file": "./src/components/inventoryCard/inventoryList.deprecated.js",
     "key": "curiosity-inventory.tab",
   },
-  {
-    "file": "./src/components/inventoryTabs/inventoryTabs.js",
-    "key": "curiosity-inventory.tabHeading",
-  },
   {
     "file": "./src/components/toolbar/toolbarFieldGranularity.js",
     "key": "curiosity-toolbar.granularity",

diff --git a/src/components/inventoryCard/__tests__/__snapshots__/inventoryCardContext.test.js.snap b/src/components/inventoryCard/__tests__/__snapshots__/inventoryCardContext.test.js.snap
@@ -15,6 +15,27 @@ exports[`InventoryCardContext should expect specific sort properties: sort prope
 }
 `;
 
+exports[`InventoryCardContext should handle a store response with useGetHostsInventory: store response 1`] = `
+{
+  "data": [
+    {
+      "data": [
+        {
+          "lorem": "ipsum",
+        },
+        {
+          "dolor": "sit",
+        },
+      ],
+      "meta": {},
+    },
+  ],
+  "error": false,
+  "fulfilled": true,
+  "pending": false,
+}
+`;
+
 exports[`InventoryCardContext should handle a store response with useGetInstancesInventory: store response 1`] = `
 {
   "data": [
@@ -88,6 +109,51 @@ exports[`InventoryCardContext should handle an onPage event: onPage event, dispa
 ]
 `;
 
+exports[`InventoryCardContext should handle variations in hosts inventory API responses: inventory, cancelled 1`] = `
+{
+  "data": {},
+  "error": undefined,
+  "fulfilled": undefined,
+  "pending": true,
+}
+`;
+
+exports[`InventoryCardContext should handle variations in hosts inventory API responses: inventory, disabled 1`] = `
+{
+  "data": {},
+  "error": undefined,
+  "fulfilled": undefined,
+  "pending": false,
+}
+`;
+
+exports[`InventoryCardContext should handle variations in hosts inventory API responses: inventory, error 1`] = `
+{
+  "data": {},
+  "error": true,
+  "fulfilled": undefined,
+  "pending": false,
+}
+`;
+
+exports[`InventoryCardContext should handle variations in hosts inventory API responses: inventory, fulfilled 1`] = `
+{
+  "data": {},
+  "error": undefined,
+  "fulfilled": true,
+  "pending": false,
+}
+`;
+
+exports[`InventoryCardContext should handle variations in hosts inventory API responses: inventory, pending 1`] = `
+{
+  "data": {},
+  "error": undefined,
+  "fulfilled": undefined,
+  "pending": true,
+}
+`;
+
 exports[`InventoryCardContext should handle variations in instances inventory API responses: inventory, cancelled 1`] = `
 {
   "data": {},
@@ -135,6 +201,7 @@ exports[`InventoryCardContext should handle variations in instances inventory AP
 
 exports[`InventoryCardContext should return specific properties: specific properties 1`] = `
 {
+  "useGetHostsInventory": [Function],
   "useGetInstancesInventory": [Function],
   "useOnColumnSortInstances": [Function],
   "useOnPageInstances": [Function],

diff --git a/src/components/inventoryCard/__tests__/__snapshots__/inventoryCardHosts.test.js.snap b/src/components/inventoryCard/__tests__/__snapshots__/inventoryCardHosts.test.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InventoryCardHosts Component should render a basic component: basic render 1`] = `
+<InventoryCard
+  cardActions={
+    <CardHeaderMain>
+      <ToolbarFieldDisplayName
+        t={[Function]}
+        useDispatch={[Function]}
+        useProduct={[Function]}
+        useProductInventoryHostsQuery={[Function]}
+      />
+    </CardHeaderMain>
+  }
+  isDisabled={false}
+  perPageDefault={10}
+  t={[Function]}
+  useGetInventory={[Function]}
+  useOnColumnSort={[Function]}
+  useOnPage={[Function]}
+  useProductInventoryConfig={[Function]}
+  useProductInventoryQuery={[Function]}
+  useSession={[Function]}
+/>
+`;
diff --git a/src/components/inventoryCard/__tests__/inventoryCard.test.js b/src/components/inventoryCard/__tests__/inventoryCard.test.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import Table from '../../table/table';
 import { InventoryCard } from '../inventoryCard';
-import { RHSM_API_QUERY_TYPES } from '../../../types/rhsmApiTypes';
+import { RHSM_API_QUERY_SET_TYPES } from '../../../services/rhsm/rhsmConstants';
 
 describe('InventoryCard Component', () => {
   it('should render a basic component', async () => {
     const props = {
       useProductInventoryConfig: () => ({ filters: [], settings: {} }),
       useProductInventoryQuery: () => ({
-        [RHSM_API_QUERY_TYPES.LIMIT]: 10,
-        [RHSM_API_QUERY_TYPES.OFFSET]: 0
+        [RHSM_API_QUERY_SET_TYPES.LIMIT]: 10,
+        [RHSM_API_QUERY_SET_TYPES.OFFSET]: 0
       }),
       useGetInventory: () => ({
         pending: true
@@ -25,8 +25,8 @@ describe('InventoryCard Component', () => {
       isDisabled: true,
       useProductInventoryConfig: () => ({ filters: [], settings: {} }),
       useProductInventoryQuery: () => ({
-        [RHSM_API_QUERY_TYPES.LIMIT]: 10,
-        [RHSM_API_QUERY_TYPES.OFFSET]: 0
+        [RHSM_API_QUERY_SET_TYPES.LIMIT]: 10,
+        [RHSM_API_QUERY_SET_TYPES.OFFSET]: 0
       }),
       useGetInventory: () => ({
         data: {
@@ -92,8 +92,8 @@ describe('InventoryCard Component', () => {
     const props = {
       useProductInventoryConfig: () => ({ filters: [], settings: {} }),
       useProductInventoryQuery: () => ({
-        [RHSM_API_QUERY_TYPES.LIMIT]: 10,
-        [RHSM_API_QUERY_TYPES.OFFSET]: 0
+        [RHSM_API_QUERY_SET_TYPES.LIMIT]: 10,
+        [RHSM_API_QUERY_SET_TYPES.OFFSET]: 0
       }),
       useGetInventory: () => ({
         fulfilled: true,
@@ -123,8 +123,8 @@ describe('InventoryCard Component', () => {
     const props = {
       useProductInventoryConfig: () => ({ filters: [], settings: {} }),
       useProductInventoryQuery: () => ({
-        [RHSM_API_QUERY_TYPES.LIMIT]: 10,
-        [RHSM_API_QUERY_TYPES.OFFSET]: 0
+        [RHSM_API_QUERY_SET_TYPES.LIMIT]: 10,
+        [RHSM_API_QUERY_SET_TYPES.OFFSET]: 0
       }),
       useGetInventory: () => ({
         fulfilled: true,

diff --git a/src/components/inventoryCard/__tests__/inventoryCardContext.test.js b/src/components/inventoryCard/__tests__/inventoryCardContext.test.js
@@ -1,5 +1,6 @@
 import {
   context,
+  useGetHostsInventory,
   useGetInstancesInventory,
   useOnPageInstances,
   useOnColumnSortInstances
@@ -18,6 +19,29 @@ describe('InventoryCardContext', () => {
     expect(SORT_TYPES).toMatchSnapshot('sort properties');
   });
 
+  it('should handle a store response with useGetHostsInventory', async () => {
+    const { result } = await shallowHook(
+      () =>
+        useGetHostsInventory({
+          useProduct: () => ({ productId: 'lorem' })
+        }),
+      {
+        state: {
+          inventory: {
+            hostsInventory: {
+              lorem: {
+                fulfilled: true,
+                data: [{ data: [{ lorem: 'ipsum' }, { dolor: 'sit' }], meta: {} }]
+              }
+            }
+          }
+        }
+      }
+    );
+
+    expect(result).toMatchSnapshot('store response');
+  });
+
   it('should handle a store response with useGetInstancesInventory', async () => {
     const { result } = await shallowHook(
       () =>
@@ -41,6 +65,70 @@ describe('InventoryCardContext', () => {
     expect(result).toMatchSnapshot('store response');
   });
 
+  it('should handle variations in hosts inventory API responses', async () => {
+    const { result: errorResponse } = shallowHook(() =>
+      useGetHostsInventory({
+        useProduct: () => ({ productId: 'lorem' }),
+        useDispatch: () => {},
+        useProductInventoryQuery: () => ({}),
+        useSelectorsResponse: () => ({ error: true })
+      })
+    );
+
+    expect(errorResponse).toMatchSnapshot('inventory, error');
+
+    const { result: pendingResponse } = shallowHook(() =>
+      useGetHostsInventory({
+        useProduct: () => ({ productId: 'lorem' }),
+        useDispatch: () => {},
+        useProductInventoryQuery: () => ({}),
+        useSelectorsResponse: () => ({ pending: true })
+      })
+    );
+
+    expect(pendingResponse).toMatchSnapshot('inventory, pending');
+
+    const { result: cancelledResponse } = shallowHook(() =>
+      useGetHostsInventory({
+        useProduct: () => ({ productId: 'lorem' }),
+        useDispatch: () => {},
+        useProductInventoryQuery: () => ({}),
+        useSelectorsResponse: () => ({ cancelled: true })
+      })
+    );
+
+    expect(cancelledResponse).toMatchSnapshot('inventory, cancelled');
+
+    const mockFulfilledGetInventory = jest.fn();
+    const { result: fulfilledResponse } = await mountHook(() =>
+      useGetHostsInventory({
+        getInventory: () => mockFulfilledGetInventory,
+        useProduct: () => ({ productId: 'lorem' }),
+        useDispatch: () => {},
+        useProductInventoryQuery: () => ({}),
+        useSelectorsResponse: () => ({ fulfilled: true })
+      })
+    );
+
+    expect(mockFulfilledGetInventory).toHaveBeenCalledTimes(1);
+    expect(fulfilledResponse).toMatchSnapshot('inventory, fulfilled');
+
+    const mockDisabledGetInventory = jest.fn();
+    const { result: disabledResponse } = await mountHook(() =>
+      useGetHostsInventory({
+        isDisabled: true,
+        getInventory: () => mockDisabledGetInventory,
+        useProduct: () => ({ productId: 'lorem' }),
+        useDispatch: () => {},
+        useProductInventoryQuery: () => ({}),
+        useSelectorsResponse: () => ({})
+      })
+    );
+
+    expect(mockDisabledGetInventory).toHaveBeenCalledTimes(0);
+    expect(disabledResponse).toMatchSnapshot('inventory, disabled');
+  });
+
   it('should handle variations in instances inventory API responses', async () => {
     const { result: errorResponse } = shallowHook(() =>
       useGetInstancesInventory({

diff --git a/src/components/inventoryCard/__tests__/inventoryCardHosts.test.js b/src/components/inventoryCard/__tests__/inventoryCardHosts.test.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { InventoryCardHosts } from '../inventoryCardHosts';
+import { RHSM_API_QUERY_SET_TYPES } from '../../../services/rhsm/rhsmConstants';
+
+describe('InventoryCardHosts Component', () => {
+  it('should render a basic component', async () => {
+    const props = {
+      useProductInventoryConfig: () => ({ filters: [], settings: {} }),
+      useProductInventoryQuery: () => ({
+        [RHSM_API_QUERY_SET_TYPES.LIMIT]: 10,
+        [RHSM_API_QUERY_SET_TYPES.OFFSET]: 0
+      })
+    };
+
+    const component = await shallowHookComponent(<InventoryCardHosts {...props} />);
+    expect(component).toMatchSnapshot('basic render');
+  });
+});
diff --git a/src/components/inventoryCard/inventoryCardContext.js b/src/components/inventoryCard/inventoryCardContext.js
@@ -10,6 +10,47 @@ import {
 } from '../../services/rhsm/rhsmConstants';
 import { helpers } from '../../common';
 
+/**
+ * Combined Redux RHSM Actions, getHostsInventory, and inventory selector response.
+ *
+ * @param {object} options
+ * @param {boolean} options.isDisabled
+ * @param {Function} options.getInventory
+ * @param {Function} options.useDispatch
+ * @param {Function} options.useProduct
+ * @param {Function} options.useProductInventoryQuery
+ * @param {Function} options.useSelectorsResponse
+ * @returns {{data: (*|{}|*[]|{}), pending: boolean, fulfilled: boolean, error: boolean}}
+ */
+const useGetHostsInventory = ({
+  isDisabled = false,
+  getInventory = reduxActions.rhsm.getHostsInventory,
+  useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch,
+  useProduct: useAliasProduct = useProduct,
+  useProductInventoryQuery: useAliasProductInventoryQuery = useProductInventoryHostsQuery,
+  useSelectorsResponse: useAliasSelectorsResponse = storeHooks.reactRedux.useSelectorsResponse
+} = {}) => {
+  const { productId } = useAliasProduct();
+  const query = useAliasProductInventoryQuery();
+  const dispatch = useAliasDispatch();
+  const { error, cancelled, fulfilled, pending, data } = useAliasSelectorsResponse(
+    ({ inventory }) => inventory?.hostsInventory?.[productId]
+  );
+
+  useShallowCompareEffect(() => {
+    if (!isDisabled) {
+      getInventory(productId, query)(dispatch);
+    }
+  }, [dispatch, isDisabled, productId, query]);
+
+  return {
+    error,
+    fulfilled,
+    pending: pending || cancelled || false,
+    data: (data?.length === 1 && data[0]) || data || {}
+  };
+};
+
 /**
  * Combined Redux RHSM Actions, getInstancesInventory, and inventory selector response.
  *
@@ -20,7 +61,7 @@ import { helpers } from '../../common';
  * @param {Function} options.useProduct
  * @param {Function} options.useProductInventoryQuery
  * @param {Function} options.useSelectorsResponse
- * @returns {Function}
+ * @returns {{data: (*|{}|*[]|{}), pending: boolean, fulfilled: boolean, error: boolean}}
  */
 const useGetInstancesInventory = ({
   isDisabled = false,
@@ -154,9 +195,17 @@ const useOnColumnSortInstances = ({
 };
 
 const context = {
+  useGetHostsInventory,
   useGetInstancesInventory,
   useOnPageInstances,
   useOnColumnSortInstances
 };
 
-export { context as default, context, useGetInstancesInventory, useOnPageInstances, useOnColumnSortInstances };
+export {
+  context as default,
+  context,
+  useGetHostsInventory,
+  useGetInstancesInventory,
+  useOnPageInstances,
+  useOnColumnSortInstances
+};