fix: clean up frontend audit presentation [DHIS2-20126] (#487)

Author: tomzemp

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-07-04T13:29:52.415Z\n"
-"PO-Revision-Date: 2025-07-04T13:29:52.415Z\n"
+"POT-Creation-Date: 2025-09-16T12:04:32.693Z\n"
+"PO-Revision-Date: 2025-09-16T12:04:32.694Z\n"
 
 msgid "Not authorized"
 msgstr "Not authorized"
@@ -357,6 +357,9 @@ msgstr "Change"
 msgid "audit dates are given in {{- timeZone}} time"
 msgstr "audit dates are given in {{- timeZone}} time"
 
+msgid "log displays only changes made while audit was enabled"
+msgstr "log displays only changes made while audit was enabled"
+
 msgid "Unmark for follow-up"
 msgstr "Unmark for follow-up"
 

src/data-workspace/data-details-sidebar/audit-log.jsx

@@ -103,7 +103,6 @@ export default function AuditLog({ item }) {
                         {audits.map((audit) => {
                             const {
                                 modifiedBy: user,
-                                previousValue: nonParsedPreviousValue,
                                 value: nonParsedValue,
                                 created,
                                 auditType,
@@ -122,15 +121,6 @@ export default function AuditLog({ item }) {
                                       calendar
                                   )
                                 : nonParsedValue
-                            const previousValue = [
-                                VALUE_TYPES.DATETIME,
-                                VALUE_TYPES.DATE,
-                            ].includes(item.valueType)
-                                ? convertFromIso8601ToString(
-                                      nonParsedPreviousValue,
-                                      calendar
-                                  )
-                                : nonParsedPreviousValue
 
                             const key = `${de}-${pe}-${ou}-${coc}-${created}`
 
@@ -152,14 +142,7 @@ export default function AuditLog({ item }) {
                                             )}
                                             {['UPDATE', 'CREATE'].includes(
                                                 auditType
-                                            ) && (
-                                                <UpdatedValue
-                                                    value={value}
-                                                    previousValue={
-                                                        previousValue
-                                                    }
-                                                />
-                                            )}
+                                            ) && <UpdatedValue value={value} />}
                                         </div>
                                     </DataTableCell>
                                 </DataTableRow>
@@ -168,11 +151,18 @@ export default function AuditLog({ item }) {
                     </TableBody>
                 </DataTable>
                 {audits.length > 0 && (
-                    <div className={styles.timeZoneNote}>
-                        {i18n.t(
-                            'audit dates are given in {{- timeZone}} time',
-                            { timeZone }
-                        )}
+                    <div>
+                        <div className={styles.timeZoneNote}>
+                            {i18n.t(
+                                'audit dates are given in {{- timeZone}} time',
+                                { timeZone }
+                            )}
+                        </div>
+                        <div className={styles.timeZoneNote}>
+                            {i18n.t(
+                                'log displays only changes made while audit was enabled'
+                            )}
+                        </div>
                     </div>
                 )}
             </div>
@@ -191,21 +181,21 @@ AuditLog.propTypes = {
 
 function DeletedValue({ value }) {
     return (
-        <Tag negative className={styles.lineThrough}>
-            {value}
-        </Tag>
+        <div className={styles.alignToEnd}>
+            <Tag negative className={styles.lineThrough}>
+                {value}
+            </Tag>
+        </div>
     )
 }
 
 DeletedValue.propTypes = {
     value: PropTypes.string.isRequired,
 }
 
-function UpdatedValue({ value, previousValue }) {
+function UpdatedValue({ value }) {
     return (
         <div className={styles.alignToEnd}>
-            {previousValue && <Tag>{previousValue}</Tag>}
-            {/* arrow-right*/}
             {i18n.dir() === 'rtl' ? (
                 <span className={styles.rightArrow}>&larr;</span>
             ) : (
@@ -219,5 +209,4 @@ function UpdatedValue({ value, previousValue }) {
 
 UpdatedValue.propTypes = {
     value: PropTypes.string.isRequired,
-    previousValue: PropTypes.string,
 }

src/data-workspace/data-details-sidebar/audit-log.test.jsx

@@ -88,7 +88,6 @@ describe('<AuditLog />', () => {
                 auditType: 'UPDATE',
                 created: new Date('2021-02-01').toISOString(),
                 modifiedBy: 'Firstname2 Lastname2',
-                previousValue: '19',
                 value: '21',
             },
             {
@@ -135,6 +134,7 @@ describe('<AuditLog />', () => {
         expect(secondChangeName).toBeInTheDocument()
         const secondChangeValue = within(auditRows[2]).getByText('21', {})
         expect(secondChangeValue).toBeInTheDocument()
+        expect(auditRows[2].textContent).toContain('→21')
 
         const thirdChangeName = within(auditRows[3]).getByText(
             'Firstname3 Lastname3',
@@ -143,11 +143,17 @@ describe('<AuditLog />', () => {
         expect(thirdChangeName).toBeInTheDocument()
         const thirdChangeValue = within(auditRows[3]).getByText('19', {})
         expect(thirdChangeValue).toBeInTheDocument()
+        expect(auditRows[3].textContent).toContain('→19')
 
         // check that note about time zone appears
         expect(
             getByText('audit dates are given in UTC time')
         ).toBeInTheDocument()
+
+        // check that warning about limited audit history appears
+        expect(
+            getByText('log displays only changes made while audit was enabled')
+        ).toBeInTheDocument()
     })
 
     it('renders the date/datetime values in system calendar (ethiopian)', async () => {
@@ -167,7 +173,6 @@ describe('<AuditLog />', () => {
                 auditType: 'UPDATE',
                 created: new Date('2021-02-01').toISOString(),
                 modifiedBy: 'Firstname2 Lastname2',
-                previousValue: '2021-09-10',
                 value: '2021-09-11',
             },
         ]
@@ -241,7 +246,6 @@ describe('<AuditLog />', () => {
                 auditType: 'UPDATE',
                 created: new Date('2021-02-01').toISOString(),
                 modifiedBy: 'Firstname2 Lastname2',
-                previousValue: '2021-09-10',
                 value: '2021-09-11',
             },
         ]

src/data-workspace/data-details-sidebar/process-audits.js

@@ -7,7 +7,6 @@ import {
     usePeriodId,
 } from '../../shared/index.js'
 import * as queryKeyFactory from '../query-key-factory.js'
-import processAudits from './process-audits.js'
 
 /**
  * @returns PropTypes.shape({
@@ -17,7 +16,6 @@ import processAudits from './process-audits.js'
  *                 auditType: PropTypes.oneOf(['UPDATE', 'DELETE']).isRequired,
  *                 created: PropTypes.string,
  *                 modifiedBy: PropTypes.string,
- *                 prevValue: PropTypes.string,
  *                 value: PropTypes.string,
  *             })
  *         ),
@@ -56,13 +54,5 @@ export default function useDataValueContext(item, enabled) {
 
     return useQuery(dataValueContextQueryKey, {
         enabled: enabled && online && isValidSelection,
-        select: (data) => {
-            const { audits } = data
-
-            return {
-                ...data,
-                audits: processAudits(audits, item),
-            }
-        },
     })
 }