Enhance PropertyChanges component to handle cases where both old and new values are absent, and improve rendering logic for displaying property changes.

This commit is contained in:
Tom Butcher 2025-07-14 23:08:18 +01:00
parent a505e1aaba
commit 5aa7355b0f

View File

@ -8,7 +8,7 @@ import ArrowRightIcon from '../../Icons/ArrowRightIcon'
const { Text } = Typography
const PropertyChanges = ({ type, value }) => {
if (!value || !value.new) {
if (!value || (!value.new && !value.old)) {
return <Text type='secondary'>n/a</Text>
}
@ -18,7 +18,15 @@ const PropertyChanges = ({ type, value }) => {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
const val = obj[key]
const newKey = prefix ? `${prefix}.${key}` : key
if (val && typeof val === 'object' && !Array.isArray(val)) {
// Don't flatten keys that are "state" or "netGross"
if (
val &&
typeof val === 'object' &&
!Array.isArray(val) &&
key !== 'state' &&
key !== 'netGross'
) {
flattenObject(val, newKey, res)
} else {
res[newKey] = val
@ -34,7 +42,6 @@ const PropertyChanges = ({ type, value }) => {
...flatOld,
...flatNew
}
console.log('combined', combinedChanges)
return (
<Descriptions size='small' column={1}>
{Object.keys(combinedChanges).map((key) => {
@ -46,19 +53,25 @@ const PropertyChanges = ({ type, value }) => {
return (
<Descriptions.Item key={key} label={changeProperty.label}>
<Space>
{value?.old ? (
<ObjectProperty
{...changeProperty}
longId={false}
objectData={value?.old}
/>
) : null}
{value?.old && value?.new ? (
<Text type='secondary'>
<ArrowRightIcon />
</Text>
) : null}
{value?.new ? (
<ObjectProperty
{...changeProperty}
longId={false}
objectData={value?.new}
/>
) : null}
</Space>
</Descriptions.Item>
)