fix(frontend): show audit log rule changes as JSON instead of [object Object]

frontend/common/types/responses.ts

@@ -565,8 +565,8 @@ export type AuditLogItem = {
 export type AuditLogDetail = AuditLogItem & {
   change_details: {
     field: string
-    old: FlagsmithValue
-    new: FlagsmithValue
+    old: FlagsmithValue | object
+    new: FlagsmithValue | object
   }[]
 }
 export type PaymentMethod = 'CHARGEBEE' | 'XERO' | 'AWS_MARKETPLACE'

frontend/common/utils/__tests__/diffValue.test.ts

@@ -0,0 +1,27 @@
+import { stringifyDiffValue } from 'common/utils/diffValue'
+
+describe('stringifyDiffValue', () => {
+  it('returns an empty string for null and undefined', () => {
+    expect(stringifyDiffValue(null)).toBe('')
+    expect(stringifyDiffValue(undefined)).toBe('')
+  })
+
+  it('quotes the empty string', () => {
+    expect(stringifyDiffValue('')).toBe('""')
+  })
+
+  it('stringifies primitives', () => {
+    expect(stringifyDiffValue('abc')).toBe('abc')
+    expect(stringifyDiffValue(3)).toBe('3')
+    expect(stringifyDiffValue(false)).toBe('false')
+  })
+
+  it('pretty-prints arrays of objects instead of [object Object]', () => {
+    const rules = [
+      { conditions: [{ operator: 'EQUAL', property: 'a', value: '1' }] },
+    ]
+    const result = stringifyDiffValue(rules)
+    expect(result).not.toContain('[object Object]')
+    expect(JSON.parse(result)).toEqual(rules)
+  })
+})

frontend/common/utils/diffValue.ts

@@ -0,0 +1,17 @@
+/**
+ * Turns an audit-log / diff value into the string shown in the diff viewer.
+ * Objects and arrays (e.g. a segment's `rules_data`) are pretty-printed as JSON,
+ * otherwise template interpolation would render them as `[object Object]`.
+ */
+export const stringifyDiffValue = (value: unknown): string => {
+  if (value === undefined || value === null) {
+    return ''
+  }
+  if (value === '') {
+    return '""'
+  }
+  if (typeof value === 'object') {
+    return JSON.stringify(value, null, 2)
+  }
+  return `${value}`
+}

frontend/web/components/diff/DiffString.tsx

@@ -3,23 +3,15 @@ import Diff, { DiffMethod } from 'react-diff-viewer-continued'
 import Prism from 'prismjs'
 import 'prismjs/components/prism-json'
 import { FlagsmithValue } from 'common/types/responses'
+import { stringifyDiffValue } from 'common/utils/diffValue'
 import DiffRow from './DiffRow'
 
 type DiffType = {
-  oldValue: FlagsmithValue
-  newValue: FlagsmithValue
+  oldValue: FlagsmithValue | object
+  newValue: FlagsmithValue | object
   compareMethod?: DiffMethod
 }
 
-const sanitiseDiffString = (value: FlagsmithValue) => {
-  if (value === undefined || value === null) {
-    return ''
-  }
-  if (value === '') {
-    return '""'
-  }
-  return `${value}`
-}
 const DiffString: FC<DiffType> = ({
   compareMethod = DiffMethod.WORDS_WITH_SPACE,
   newValue,
@@ -34,7 +26,7 @@ const DiffString: FC<DiffType> = ({
     )
   }
 
-  if (oldValue === newValue) {
+  if (stringifyDiffValue(oldValue) === stringifyDiffValue(newValue)) {
     if (oldValue === null || oldValue === '') {
       return <div className='text-muted'>No Value.</div>
     }
@@ -44,7 +36,7 @@ const DiffString: FC<DiffType> = ({
           className='d-inline mb-0'
           dangerouslySetInnerHTML={{
             __html: Prism.highlight(
-              sanitiseDiffString(newValue),
+              stringifyDiffValue(newValue),
               Prism.languages.json,
               'json',
             ),
@@ -55,11 +47,14 @@ const DiffString: FC<DiffType> = ({
   }
   return (
     <Diff
-      oldValue={sanitiseDiffString(oldValue)}
-      newValue={sanitiseDiffString(newValue)}
+      oldValue={stringifyDiffValue(oldValue)}
+      newValue={stringifyDiffValue(newValue)}
       compareMethod={compareMethod}
       hideLineNumbers={
-        !(`${oldValue}`.includes?.('\n') || `${newValue}`.includes?.('\n'))
+        !(
+          stringifyDiffValue(oldValue).includes('\n') ||
+          stringifyDiffValue(newValue).includes('\n')
+        )
       }
       renderContent={(str) => (
         <pre