From 2d58c0667175a9b549c511474105e3cdc3ed56c5 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Wed, 25 May 2022 18:14:39 -0400 Subject: [PATCH] fix(inventoryCard): ent-5022 pass meta response for configs (#939) * inventoryCard, pass API meta response for config * inventoryCardHelpers, pass meta, allow standalone filters --- .../inventoryCardHelpers.test.js.snap | 52 ++++++++++++++++++ .../__tests__/inventoryCardHelpers.test.js | 16 ++++++ src/components/inventoryCard/inventoryCard.js | 1 + .../inventoryCard/inventoryCardHelpers.js | 54 ++++++++++++++----- tests/__snapshots__/code.test.js.snap | 2 +- 5 files changed, 110 insertions(+), 15 deletions(-) diff --git a/src/components/inventoryCard/__tests__/__snapshots__/inventoryCardHelpers.test.js.snap b/src/components/inventoryCard/__tests__/__snapshots__/inventoryCardHelpers.test.js.snap index 0666d0567..2ee801ef4 100644 --- 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 index d559d0778..da1755cfc 100644 --- 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 index 3cd223849..e76dfca9d 100644 --- 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 index a8504489f..271cc3d92 100644 --- a/src/components/inventoryCard/inventoryCardHelpers.js +++ b/src/components/inventoryCard/inventoryCardHelpers.js @@ -41,20 +41,33 @@ 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: '' }; @@ -62,6 +75,9 @@ const applyHeaderRowCellFilters = (filters = [], cellData = {}, session = {}) => 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 = {headerCellUpdated.title}; @@ -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 = {bodyCellUpdated.title}; @@ -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 index c882fa249..1ac69ae64 100644 --- 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);",