DEV inventoryCardContext, helpers, table expandContent adjustment

RedHatInsights · Aug 23, 2023 · a1f86e8 · a1f86e8
1 parent 635e91a
commit a1f86e8
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 31 deletions.
diff --git a/src/components/inventoryCard/_inventoryCardContext.js b/src/components/inventoryCard/_inventoryCardContext.js
@@ -80,7 +80,7 @@ const useGetInstancesInventory = ({
   const session = useAliasSession();
   const query = useAliasProductInventoryQuery();
   const dispatch = useAliasDispatch();
-  const { filters, columnCountAndWidths } = useAliasParseInstancesFiltersSettings();
+  const { columnCountAndWidths, filters, settings } = useAliasParseInstancesFiltersSettings();
   const { cancelled, pending, data, ...response } = useAliasSelectorsResponse(
     ({ inventory }) => inventory?.instancesInventory?.[productId]
   );
@@ -95,11 +95,11 @@ const useGetInstancesInventory = ({
   const parsedData = useMemo(() => {
     if (response?.fulfilled) {
       const updatedData = (data?.length === 1 && data[0]) || data || {};
-      return inventoryCardHelpers.parseInventoryResponse({ data: updatedData, filters, query, session });
+      return inventoryCardHelpers.parseInventoryResponse({ data: updatedData, filters, query, session, settings });
     }
 
     return undefined;
-  }, [data, filters, query, response?.fulfilled, session]);
+  }, [data, filters, query, response?.fulfilled, session, settings]);
 
   return {
     ...response,

diff --git a/src/components/inventoryCard/_inventoryCardHelpers.js b/src/components/inventoryCard/_inventoryCardHelpers.js
@@ -1,5 +1,7 @@
+import React from 'react';
 import { translate } from '../i18n/i18n';
 import { RHSM_API_QUERY_SET_TYPES, RHSM_API_RESPONSE_META_TYPES } from '../../services/rhsm/rhsmConstants';
+import { InventoryGuests } from '../inventoryGuests/inventoryGuests';
 import { tableHelpers } from '../table/_table';
 
 /**
@@ -74,9 +76,10 @@ const normalizeInventorySettings = ({ filters = [], settings = {}, productId } =
  * @param {Array} params.filters
  * @param {object} params.query
  * @param {object} params.session
+ * @param {object} params.settings
  * @returns {{dataSetColumnHeaders: [], resultsPerPage: number, resultsOffset: number, dataSetRows: [], resultsCount: number}}
  */
-const parseInventoryResponse = ({ data = {}, filters = [], query = {}, session = {} } = {}) => {
+const parseInventoryResponse = ({ data = {}, filters = [], query = {}, session = {}, settings = {} } = {}) => {
   const { data: listData = [], meta = {} } = data;
   const resultsCount = meta[RHSM_API_RESPONSE_META_TYPES.COUNT];
   const {
@@ -92,6 +95,8 @@ const parseInventoryResponse = ({ data = {}, filters = [], query = {}, session =
 
   listData.forEach(rowData => {
     const dataSetRow = [];
+    let expandedContent;
+
     filters.forEach(({ metric, label, cell, ...rest }) => {
       const updatedCell = cell({ ...rowData }, { ...session }, { ...meta });
       dataSetRow.push({ metric, ...rest, dataLabel: label, content: updatedCell });
@@ -100,7 +105,16 @@ const parseInventoryResponse = ({ data = {}, filters = [], query = {}, session =
       columnData[metric].push(updatedCell);
     });
 
-    dataSetRows.push({ cells: dataSetRow });
+    if (typeof settings?.guestContent === 'function') {
+      const guestContentResults = settings.guestContent({ ...rowData }, { ...session }, { ...meta });
+      const { id: guestId, numberOfGuests } = guestContentResults || {};
+
+      if (guestId && numberOfGuests) {
+        expandedContent = <InventoryGuests key={`guests-${guestId}`} id={guestId} numberOfGuests={numberOfGuests} />;
+      }
+    }
+
+    dataSetRows.push({ cells: dataSetRow, expandedContent });
   });
 
   filters.forEach(({ metric, header, ...rest }) => {

diff --git a/src/components/table/_table.js b/src/components/table/_table.js
@@ -293,13 +293,14 @@ const Table = ({
           return (
             <CellWrapper key={`${rowKey}-parent-row`} {...cellWrapperProps}>
               <Tr className={componentClassNames.tr} key={`${rowKey}-row`}>
-                {expand && (
+                {(expand && (
                   <Td
                     className={`${componentClassNames.td} ${componentClassNames.tdExpand}`}
                     key={`${rowKey}-expand-col`}
                     expand={expand}
                   />
-                )}
+                )) ||
+                  (updatedIsExpandableRow && <Td className={componentClassNames.td} key="expand-td-cell" />)}
                 {select && (
                   <Td
                     className={`${componentClassNames.td} ${componentClassNames.tdSelect}`}
@@ -472,19 +473,19 @@ Table.defaultProps = {
   className: '',
   columnHeaders: [],
   componentClassNames: {
-    table: 'quipucords-table',
-    td: 'quipucords-table__td',
-    tdAction: 'quipucords-table__td-action',
-    tdSelect: 'quipucords-table__td-select',
-    th: 'quipucords-table__th',
-    tr: 'quipucords-table__tr',
-    trExpand: 'quipucords-table__tr-expand',
-    trExpanded: 'quipucords-table__tr-expand-expanded',
-    trExpandedContent: 'quipucords-table__tr-expand-content',
-    tdExpand: 'quipucords-table__td-expand',
-    tdExpanded: 'quipucords-table__td-expand-expanded',
-    tdExpandedWrapper: 'quipucords-table__td-expand-wrapper',
-    tdExpandedContent: 'quipucords-table__td-expand-content'
+    table: 'curiosity-table',
+    td: 'curiosity-table__td',
+    tdAction: 'curiosity-table__td-action',
+    tdSelect: 'curiosity-table__td-select',
+    th: 'curiosity-table__th',
+    tr: 'curiosity-table__tr',
+    trExpand: 'curiosity-table__tr-expand',
+    trExpanded: 'curiosity-table__tr-expand-expanded',
+    trExpandedContent: 'curiosity-table__tr-expand-content',
+    tdExpand: 'curiosity-table__td-expand',
+    tdExpanded: 'curiosity-table__td-expand-expanded',
+    tdExpandedWrapper: 'curiosity-table__td-expand-wrapper',
+    tdExpandedContent: 'curiosity-table__td-expand-content'
   },
   isBorders: true,
   isHeader: false,

diff --git a/src/config/product.openshiftContainer.js b/src/config/product.openshiftContainer.js
@@ -233,7 +233,7 @@ const config = {
     guestContent: ({
       [INVENTORY_TYPES.NUMBER_OF_GUESTS]: numberOfGuests = {},
       [INVENTORY_TYPES.INSTANCE_ID]: id
-    } = {}) => (numberOfGuests > 0 && id) || undefined
+    } = {}) => (numberOfGuests > 0 && id && { id, numberOfGuests }) || undefined
   },
   initialSubscriptionsInventoryFilters: [
     {

diff --git a/src/config/product.openshiftDedicated.js b/src/config/product.openshiftDedicated.js
@@ -280,7 +280,7 @@ const config = {
     guestContent: ({
       [INVENTORY_TYPES.NUMBER_OF_GUESTS]: numberOfGuests = {},
       [INVENTORY_TYPES.INSTANCE_ID]: id
-    } = {}) => (numberOfGuests > 0 && id) || undefined
+    } = {}) => (numberOfGuests > 0 && id && { id, numberOfGuests }) || undefined
   },
   initialToolbarFilters: [
     {

diff --git a/src/config/product.openshiftMetrics.js b/src/config/product.openshiftMetrics.js
@@ -263,7 +263,7 @@ const config = {
     guestContent: ({
       [INVENTORY_TYPES.NUMBER_OF_GUESTS]: numberOfGuests = {},
       [INVENTORY_TYPES.INSTANCE_ID]: id
-    } = {}) => (numberOfGuests > 0 && id) || undefined
+    } = {}) => (numberOfGuests > 0 && id && { id, numberOfGuests }) || undefined
   },
   initialToolbarFilters: [
     {

diff --git a/src/config/product.rhacs.js b/src/config/product.rhacs.js
@@ -225,7 +225,7 @@ const config = {
     guestContent: ({
       [INVENTORY_TYPES.NUMBER_OF_GUESTS]: numberOfGuests = {},
       [INVENTORY_TYPES.INSTANCE_ID]: id
-    } = {}) => (numberOfGuests > 0 && id) || undefined
+    } = {}) => (numberOfGuests > 0 && id && { id, numberOfGuests }) || undefined
   },
   initialSubscriptionsInventoryFilters: [
     {

diff --git a/src/config/product.rhel.js b/src/config/product.rhel.js
@@ -192,7 +192,6 @@ const config = {
         const { inventory: authorized } = session?.authorized || {};
 
         if (!instanceId) {
-          console.log('>>>> DISPLAY NAME CELL', displayName);
           return displayName;
         }
 
@@ -211,8 +210,6 @@ const config = {
           );
         }
 
-        console.log('>>>> DISPLAY NAME CELL', updatedDisplayName);
-
         return updatedDisplayName;
       },
       isSort: true
@@ -266,7 +263,7 @@ const config = {
     guestContent: ({
       [INVENTORY_TYPES.NUMBER_OF_GUESTS]: numberOfGuests = {},
       [INVENTORY_TYPES.INSTANCE_ID]: id
-    } = {}) => (numberOfGuests > 0 && id) || undefined
+    } = {}) => (numberOfGuests > 0 && id && { id, numberOfGuests }) || undefined
   },
   initialSubscriptionsInventoryFilters: [
     {

diff --git a/src/config/product.rhods.js b/src/config/product.rhods.js
@@ -218,7 +218,7 @@ const config = {
     guestContent: ({
       [INVENTORY_TYPES.NUMBER_OF_GUESTS]: numberOfGuests = {},
       [INVENTORY_TYPES.INSTANCE_ID]: id
-    } = {}) => (numberOfGuests > 0 && id) || undefined
+    } = {}) => (numberOfGuests > 0 && id && { id, numberOfGuests }) || undefined
   },
   initialSubscriptionsInventoryFilters: [
     {

diff --git a/src/config/product.rosa.js b/src/config/product.rosa.js
@@ -278,7 +278,7 @@ const config = {
     guestContent: ({
       [INVENTORY_TYPES.NUMBER_OF_GUESTS]: numberOfGuests = {},
       [INVENTORY_TYPES.INSTANCE_ID]: id
-    } = {}) => (numberOfGuests > 0 && id) || undefined
+    } = {}) => (numberOfGuests > 0 && id && { id, numberOfGuests }) || undefined
   },
   initialSubscriptionsInventoryFilters: [
     {

diff --git a/src/config/product.satellite.js b/src/config/product.satellite.js
@@ -241,7 +241,7 @@ const config = {
     guestContent: ({
       [INVENTORY_TYPES.NUMBER_OF_GUESTS]: numberOfGuests = {},
       [INVENTORY_TYPES.INSTANCE_ID]: id
-    } = {}) => (numberOfGuests > 0 && id) || undefined
+    } = {}) => (numberOfGuests > 0 && id && { id, numberOfGuests }) || undefined
   },
   initialToolbarFilters: [
     {