fix(inventoryCard): ent-5022 pass meta response for configs (#939)

* inventoryCard, pass API meta response for config * inventoryCardHelpers, pass meta, allow standalone filters
RedHatInsights · Jul 11, 2022 · 15f2ea1 · 15f2ea1
1 parent 913c98d
commit 15f2ea1
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 15 deletions.
diff --git a/src/components/inventoryCard/__tests__/__snapshots__/inventoryCardHelpers.test.js.snap b/src/components/inventoryCard/__tests__/__snapshots__/inventoryCardHelpers.test.js.snap
@@ -146,6 +146,32 @@ Object {
 }
 `;
 
+exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: basic standalone data 1`] = `
+Object {
+  "cells": Array [
+    Object {
+      "title": "world",
+    },
+  ],
+  "columnHeaders": Array [
+    Object {
+      "title": "hello",
+      "transforms": Array [],
+    },
+  ],
+  "data": Object {
+    "dolor": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"dolor\\"})",
+      "value": "sit",
+    },
+    "lorem": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+      "value": "ipsum",
+    },
+  },
+}
+`;
+
 exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom and generated transforms 1`] = `
 Object {
   "cells": Array [
@@ -364,6 +390,32 @@ Object {
 }
 `;
 
+exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom standalone data 1`] = `
+Object {
+  "cells": Array [
+    Object {
+      "title": "custom ipsum/sit",
+    },
+  ],
+  "columnHeaders": Array [
+    Object {
+      "title": "custom t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})/t(curiosity-inventory.header, {\\"context\\":\\"dolor\\"})",
+      "transforms": Array [],
+    },
+  ],
+  "data": Object {
+    "dolor": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"dolor\\"})",
+      "value": "sit",
+    },
+    "lorem": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+      "value": "ipsum",
+    },
+  },
+}
+`;
+
 exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom transforms 1`] = `
 Object {
   "cells": Array [

diff --git a/src/components/inventoryCard/__tests__/inventoryCardHelpers.test.js b/src/components/inventoryCard/__tests__/inventoryCardHelpers.test.js
@@ -121,6 +121,22 @@ describe('InventoryListHelpers', () => {
     };
 
     expect(parseRowCellsListData({ filters, cellData })).toMatchSnapshot('custom callback data');
+
+    filters[0] = {
+      isStandalone: true,
+      header: 'hello',
+      cell: 'world'
+    };
+
+    expect(parseRowCellsListData({ filters, cellData })).toMatchSnapshot('basic standalone data');
+
+    filters[0] = {
+      isStandalone: true,
+      header: ({ lorem, dolor }) => `custom ${lorem.title}/${dolor.title}`,
+      cell: ({ lorem, dolor }) => `custom ${lorem.value}/${dolor.value}`
+    };
+
+    expect(parseRowCellsListData({ filters, cellData })).toMatchSnapshot('custom standalone data');
   });
 
   it('parseInventoryFilters should parse and return updated filters for table cells', () => {

diff --git a/src/components/inventoryCard/inventoryCard.js b/src/components/inventoryCard/inventoryCard.js
@@ -95,6 +95,7 @@ const InventoryCard = ({
           query
         }),
         cellData,
+        meta,
         session: sessionData
       });
 

diff --git a/src/components/inventoryCard/inventoryCardHelpers.js b/src/components/inventoryCard/inventoryCardHelpers.js
@@ -41,27 +41,43 @@ const applyConfigProperty = (prop, { params = [] } = {}) => {
 /**
  * Generate header and row cell configuration from filters.
  *
- * @param {Array<{id: string, cell:React.ReactNode|{ title: string }, cellWidth: number,
- *     header:React.ReactNode|{ title: string }, onSort: Function, showEmptyCell: boolean,
- *     sortId: string, sortActive: boolean, sortDirection: string,
- *     transforms: Array}>} filters
- * @param {object} cellData
- * @param {object} session
+ * @param {object} params
+ * @param {Array<{id: string, isStandalone: boolean, cell:React.ReactNode|{ title: string }, cellWidth: number,
+ *     header:React.ReactNode|{ title: string }, onSort: Function, showEmptyCell: boolean, sortId: string,
+ *     sortActive: boolean, sortDirection: string, transforms: Array}>} params.filters
+ * @param {object} params.cellData
+ * @param {object} params.meta
+ * @param {object} params.session
  * @returns {{bodyCells: { title: React.ReactNode }[], headerCells: { title: React.ReactNode }[]}}
  */
-const applyHeaderRowCellFilters = (filters = [], cellData = {}, session = {}) => {
+const applyHeaderRowCellFilters = ({ filters = [], cellData = {}, meta = {}, session = {} } = {}) => {
   const headerCells = [];
   const bodyCells = [];
 
   filters.forEach(
-    ({ id, cell, cellWidth, header, onSort, showEmptyCell = true, sortId, sortActive, sortDirection, transforms }) => {
+    ({
+      isStandalone,
+      id,
+      cell,
+      cellWidth,
+      header,
+      onSort,
+      showEmptyCell = true,
+      sortId,
+      sortActive,
+      sortDirection,
+      transforms
+    }) => {
       const headerCellUpdated = { title: translate('curiosity-inventory.header', { context: id }), transforms: [] };
       const bodyCellUpdated = { title: '' };
 
       // set filtered base header and body cells, or if filter doesn't exist skip
       if (cellData[id]) {
         headerCellUpdated.title = cellData[id]?.title ?? id;
         bodyCellUpdated.title = cellData[id]?.value ?? '';
+      } else if (isStandalone === true) {
+        headerCellUpdated.title = '';
+        bodyCellUpdated.title = '';
       } else {
         if (helpers.DEV_MODE || helpers.REVIEW_MODE) {
           console.warn(`Warning: Filter "${id}" not found in "table row" response data.`, cellData);
@@ -73,7 +89,9 @@ const applyHeaderRowCellFilters = (filters = [], cellData = {}, session = {}) =>
 
       // set header cell title
       if (header) {
-        const updatedHeaderCellTitle = applyConfigProperty(header, { params: [{ ...cellData }, { ...session }] });
+        const updatedHeaderCellTitle = applyConfigProperty(header, {
+          params: [{ ...cellData }, { ...session }, { ...meta }]
+        });
         if (updatedHeaderCellTitle) {
           headerCellUpdated.title = updatedHeaderCellTitle;
         } else if (_isPlainObject(header)) {
@@ -83,7 +101,7 @@ const applyHeaderRowCellFilters = (filters = [], cellData = {}, session = {}) =>
         // set header cell tooltip
         if (header.tooltip && headerCellUpdated.title) {
           const updatedHeaderCellTooltip = applyConfigProperty(header.tooltip, {
-            params: [{ ...cellData }, { ...session }]
+            params: [{ ...cellData }, { ...session }, { ...meta }]
           });
           if (updatedHeaderCellTooltip) {
             headerCellUpdated.title = <Tooltip content={updatedHeaderCellTooltip}>{headerCellUpdated.title}</Tooltip>;
@@ -113,7 +131,9 @@ const applyHeaderRowCellFilters = (filters = [], cellData = {}, session = {}) =>
 
       // set body cell title
       if (cell) {
-        const updatedBodyCellTitle = applyConfigProperty(cell, { params: [{ ...cellData }, { ...session }] });
+        const updatedBodyCellTitle = applyConfigProperty(cell, {
+          params: [{ ...cellData }, { ...session }, { ...meta }]
+        });
         if (updatedBodyCellTitle) {
           bodyCellUpdated.title = updatedBodyCellTitle;
         } else if (_isPlainObject(cell)) {
@@ -123,7 +143,7 @@ const applyHeaderRowCellFilters = (filters = [], cellData = {}, session = {}) =>
         // set body cell tooltip
         if (cell.tooltip && bodyCellUpdated.title) {
           const updatedBodyCellTooltip = applyConfigProperty(cell.tooltip, {
-            params: [{ ...cellData }, { ...session }]
+            params: [{ ...cellData }, { ...session }, { ...meta }]
           });
           if (updatedBodyCellTooltip) {
             bodyCellUpdated.title = <Tooltip content={updatedBodyCellTooltip}>{bodyCellUpdated.title}</Tooltip>;
@@ -257,10 +277,11 @@ const parseInventoryFilters = ({ filters = [], onSort, query = {} } = {}) =>
  *     sortId: string, sortActive: boolean, sortDirection: string,
  *     transforms: Array}>} params.filters
  * @param {object} params.cellData
+ * @param {object} params.meta
  * @param {object} params.session
  * @returns {{columnHeaders: { title: React.ReactNode }[], cells: { title: React.ReactNode }[], data: {}}}
  */
-const parseRowCellsListData = ({ filters = [], cellData = {}, session = {} } = {}) => {
+const parseRowCellsListData = ({ filters = [], cellData = {}, meta = {}, session = {} } = {}) => {
   const updatedColumnHeaders = [];
   const updatedCells = [];
   const allCells = {};
@@ -281,7 +302,12 @@ const parseRowCellsListData = ({ filters = [], cellData = {}, session = {} } = {
     updatedColumnHeaders.length = 0;
     updatedCells.length = 0;
 
-    const { headerCells = [], bodyCells = [] } = applyHeaderRowCellFilters(filters, allCells, session);
+    const { headerCells = [], bodyCells = [] } = applyHeaderRowCellFilters({
+      filters,
+      cellData: allCells,
+      meta,
+      session
+    });
 
     updatedColumnHeaders.push(...headerCells);
     updatedCells.push(...bodyCells);

diff --git a/tests/__snapshots__/code.test.js.snap b/tests/__snapshots__/code.test.js.snap
@@ -3,7 +3,7 @@
 exports[`General code checks should only have specific console.[warn|log|info|error] methods: console methods 1`] = `
 Array [
   "components/inventoryCard/inventoryCardContext.js:127:        console.warn(\`Sorting can only be performed on select fields, confirm field \${id} is allowed.\`);",
-  "components/inventoryCard/inventoryCardHelpers.js:67:          console.warn(\`Warning: Filter \\"\${id}\\" not found in \\"table row\\" response data.\`, cellData);",
+  "components/inventoryCard/inventoryCardHelpers.js:83:          console.warn(\`Warning: Filter \\"\${id}\\" not found in \\"table row\\" response data.\`, cellData);",
   "components/inventoryCard/inventoryList.deprecated.js:62:        console.warn(\`Sorting can only be performed on select fields, confirm field \${id} is allowed.\`);",
   "components/inventoryCardSubscriptions/inventoryCardSubscriptionsContext.js:127:        console.warn(\`Sorting can only be performed on select fields, confirm field \${id} is allowed.\`);",
   "redux/common/reduxHelpers.js:282:    console.error(\`Error: Property \${prop} does not exist within the passed state.\`, state);",