diff --git a/src/components/blocks/DetailedViewStagingTab.js b/src/components/blocks/DetailedViewStagingTab.js index 2e645e80..72776f39 100644 --- a/src/components/blocks/DetailedViewStagingTab.js +++ b/src/components/blocks/DetailedViewStagingTab.js @@ -24,35 +24,48 @@ const StyledDetailedViewTab = styled('div')` `; const DetailedViewTabItem = ({ entry }) => { + const hasEntryKeyData = key => + (entry[key].original !== null && entry[key].original !== 'null') || + (entry[key].changes && + entry[key].changes.some(change => change !== null && change !== 'null')); + + const isKeyAllowedToBeDisplayed = key => + ![ + 'orgUid', + 'warehouseProjectId', + 'id', + 'createdAt', + 'updatedAt', + 'label_unit', + ].includes(key); + + const isOriginalDataToBeDisplayedInRed = key => + entry[key].changes && + entry[key].changes.length > 0 && + entry[key].changes.some(x => x !== null); + return ( {Object.keys(entry).map( (entryProp, index) => - ![ - 'orgUid', - 'warehouseProjectId', - 'id', - 'createdAt', - 'updatedAt', - 'label_unit', - ].includes(entryProp) && ( + isKeyAllowedToBeDisplayed(entryProp) && + hasEntryKeyData(entryProp) && (
{convertPascalCaseToSentenceCase(entryProp)} - {entry[entryProp].original && ( - 0 && - entry[entryProp].changes.some(x => x !== null) - ? '#f5222d' - : '#000000' - } - > - {entry[entryProp].original} - - )} + {entry[entryProp].original && + entry[entryProp].original !== 'null' && ( + + {entry[entryProp].original} + + )} {entry[entryProp].changes && entry[entryProp].changes.length > 0 && entry[entryProp].changes.some(x => x !== null) &&