fix: [DHIS2-16994] Image and File DE and TEA not Displayed in Changelog

src/core_modules/capture-core/components/WidgetsChangelog/common/hooks/useChangelogData.js

@@ -1,22 +1,35 @@
 // @flow
+import { useState, useEffect, useMemo } from 'react';
 import moment from 'moment';
 import { v4 as uuid } from 'uuid';
 import log from 'loglevel';
-import { errorCreator } from 'capture-core-utils';
-import { useMemo, useState } from 'react';
-import { useTimeZoneConversion } from '@dhis2/app-runtime';
+import { useTimeZoneConversion, useConfig, useDataEngine } from '@dhis2/app-runtime';
+import { errorCreator, buildUrl } from 'capture-core-utils';
 import { useApiDataQuery } from '../../../../utils/reactQueryHelpers';
-import { CHANGELOG_ENTITY_TYPES, QUERY_KEYS_BY_ENTITY_TYPE } from '../Changelog/Changelog.constants';
-import type { Change, ChangelogRecord, ItemDefinitions, SortDirection } from '../Changelog/Changelog.types';
+import {
+    CHANGELOG_ENTITY_TYPES,
+    QUERY_KEYS_BY_ENTITY_TYPE,
+} from '../Changelog/Changelog.constants';
+import type {
+    Change,
+    ChangelogRecord,
+    ItemDefinitions,
+    SortDirection,
+} from '../Changelog/Changelog.types';
 import { convertServerToClient } from '../../../../converters';
 import { convert } from '../../../../converters/clientToList';
+import {
+    RECORD_TYPE,
+    subValueGetterByElementType,
+} from '../utils/getSubValueForChangelogData';
+import { makeQuerySingleResource } from '../../../../utils/api';
 
 type Props = {
     entityId: string,
     programId?: string,
     entityType: $Values<typeof CHANGELOG_ENTITY_TYPES>,
     dataItemDefinitions: ItemDefinitions,
-}
+};
 
 const DEFAULT_PAGE_SIZE = 10;
 const DEFAULT_SORT_DIRECTION = 'default';
@@ -39,10 +52,20 @@ export const useChangelogData = ({
     programId,
     dataItemDefinitions,
 }: Props) => {
+    const dataEngine = useDataEngine();
+    const { baseUrl, apiVersion } = useConfig();
+    const { fromServerDate } = useTimeZoneConversion();
+    const absoluteApiPath = buildUrl(baseUrl, `api/${apiVersion}`);
+
     const [page, setPage] = useState<number>(1);
     const [pageSize, setPageSize] = useState<number>(DEFAULT_PAGE_SIZE);
     const [sortDirection, setSortDirection] = useState<SortDirection>(DEFAULT_SORT_DIRECTION);
-    const { fromServerDate } = useTimeZoneConversion();
+    const [records, setRecords] = useState<?Array<ChangelogRecord>>(undefined);
+
+    const querySingleResource = useMemo(
+        () => makeQuerySingleResource(dataEngine.query.bind(dataEngine)),
+        [dataEngine],
+    );
 
     const handleChangePageSize = (newPageSize: number) => {
         setPage(1);
@@ -67,54 +90,109 @@ export const useChangelogData = ({
         },
     );
 
-    const records: ?Array<ChangelogRecord> = useMemo(() => {
-        if (!data) return undefined;
-
-        return data.changeLogs.map((changelog) => {
-            const { change: apiChange, createdAt, createdBy } = changelog;
-            const elementKey = Object.keys(apiChange)[0];
-            const change = apiChange[elementKey];
-
-            const { metadataElement, fieldId } = getMetadataItemDefinition(
-                elementKey,
-                change,
-                dataItemDefinitions,
-            );
-
-            if (!metadataElement) {
-                log.error(errorCreator('Could not find metadata for element')({
-                    ...changelog,
-                }));
-                return null;
-            }
-
-            const { firstName, surname, username } = createdBy;
-            const { options } = metadataElement;
-
-            const previousValue = convert(
-                convertServerToClient(change.previousValue, metadataElement.type),
-                metadataElement.type,
-                options,
-            );
-
-            const currentValue = convert(
-                convertServerToClient(change.currentValue, metadataElement.type),
-                metadataElement.type,
-                options,
+    useEffect(() => {
+        const fetchRecords = async () => {
+            if (!data) return;
+
+            const mostRecentCreatedAtByFieldId = data.changeLogs.reduce((acc, record) => {
+                const elementKey = Object.keys(record.change)[0];
+                const fieldId = record.change[elementKey]?.dataElement ?? record.change[elementKey]?.attribute;
+
+                if (!acc[fieldId] || moment(record.createdAt).isAfter(acc[fieldId])) {
+                    acc[fieldId] = record.createdAt;
+                }
+                return acc;
+            }, {});
+
+            const fetchedRecords = await Promise.all(
+                data.changeLogs.map(async (changelog) => {
+                    const { change: apiChange, createdAt, createdBy, type } = changelog;
+                    const elementKey = Object.keys(apiChange)[0];
+                    const change = apiChange[elementKey];
+
+                    const { metadataElement, fieldId } = getMetadataItemDefinition(
+                        elementKey,
+                        change,
+                        dataItemDefinitions,
+                    );
+
+                    if (!metadataElement) {
+                        log.error(
+                            errorCreator('Could not find metadata for element')({ ...changelog }),
+                        );
+                        return null;
+                    }
+
+                    const getSubValue =
+                        subValueGetterByElementType[RECORD_TYPE[entityType]]?.[metadataElement.type];
+
+                    const isLatestValue =
+                        moment(createdAt).isSameOrAfter(mostRecentCreatedAtByFieldId[fieldId]);
+
+                    const getValue = async (value, latestValue) => {
+                        if (!getSubValue) {
+                            return convertServerToClient(value, metadataElement.type);
+                        }
+                        if (entityType === RECORD_TYPE.trackedEntity) {
+                            return getSubValue({
+                                trackedEntity: { teiId: entityId, value },
+                                programId,
+                                attributeId: fieldId,
+                                absoluteApiPath,
+                                querySingleResource,
+                                latestValue,
+                            });
+                        }
+                        if (entityType === RECORD_TYPE.event) {
+                            return getSubValue({
+                                dataElement: { id: fieldId, value },
+                                eventId: entityId,
+                                absoluteApiPath,
+                                querySingleResource,
+                                latestValue,
+                            });
+                        }
+                        return null;
+                    };
+
+                    const [previousValueRaw, currentValueRaw] = await Promise.all([
+                        change.previousValue ? getValue(change.previousValue, false) : null,
+                        getValue(change.currentValue, isLatestValue),
+                    ]);
+
+                    const { firstName, surname, username } = createdBy;
+                    const { options } = metadataElement;
+
+                    const previousValue = convert(previousValueRaw, metadataElement.type, options);
+                    const currentValue = convert(currentValueRaw, metadataElement.type, options);
+
+                    return {
+                        reactKey: uuid(),
+                        date: moment(fromServerDate(createdAt)).format('YYYY-MM-DD HH:mm'),
+                        user: `${firstName} ${surname} (${username})`,
+                        dataItemId: fieldId,
+                        changeType: type,
+                        dataItemLabel: metadataElement.name,
+                        previousValue,
+                        currentValue,
+                    };
+                }),
             );
 
-            return {
-                reactKey: uuid(),
-                date: moment(fromServerDate(createdAt)).format('YYYY-MM-DD HH:mm'),
-                user: `${firstName} ${surname} (${username})`,
-                dataItemId: fieldId,
-                changeType: changelog.type,
-                dataItemLabel: metadataElement.name,
-                previousValue,
-                currentValue,
-            };
-        }).filter(Boolean);
-    }, [data, dataItemDefinitions, fromServerDate]);
+            setRecords(fetchedRecords.filter(Boolean));
+        };
+
+        fetchRecords();
+    }, [
+        data,
+        dataItemDefinitions,
+        fromServerDate,
+        entityId,
+        entityType,
+        programId,
+        absoluteApiPath,
+        querySingleResource,
+    ]);
 
     return {
         records,

src/core_modules/capture-core/components/WidgetsChangelog/common/utils/getSubValueForChangelogData.js

@@ -0,0 +1,119 @@
+// @flow
+import { dataElementTypes } from '../../../../metaData';
+import type { QuerySingleResource } from '../../../../utils/api';
+
+type SubValueTEAProps = {
+    trackedEntity: Object,
+    attributeId: string,
+    programId: string,
+    absoluteApiPath: string,
+    querySingleResource: QuerySingleResource,
+    latestValue?: boolean,
+};
+
+type SubValuesDataElementProps = {
+    dataElement: Object,
+    querySingleResource: QuerySingleResource,
+    eventId: string,
+    absoluteApiPath: string,
+    latestValue?: boolean,
+};
+
+const buildTEAUrlByElementType: {|
+[string]: Function,
+|} = {
+    [dataElementTypes.FILE_RESOURCE]: async ({
+        trackedEntity,
+        attributeId,
+        programId,
+        absoluteApiPath,
+        querySingleResource,
+        latestValue,
+    }: SubValueTEAProps) => {
+        const { teiId, value } = trackedEntity;
+        if (!value) return null;
+        const { id, displayName: name } = await querySingleResource({ resource: `fileResources/${value}` });
+
+        if (!latestValue) {
+            return name;
+        }
+
+        return {
+            id,
+            name,
+            url: `${absoluteApiPath}/tracker/trackedEntities/${teiId}/attributes/${attributeId}/file?program=${programId}`,
+        };
+    },
+    [dataElementTypes.IMAGE]: async ({
+        trackedEntity,
+        attributeId,
+        programId,
+        absoluteApiPath,
+        latestValue,
+        querySingleResource,
+    }: SubValueTEAProps) => {
+        const { teiId, value } = trackedEntity;
+        if (!value) return null;
+        const { id, displayName: name } = await querySingleResource({ resource: `fileResources/${value}` });
+
+        if (!latestValue) {
+            return name;
+        }
+
+        return {
+            id,
+            name,
+            url: `${absoluteApiPath}/tracker/trackedEntities/${teiId}/attributes/${attributeId}/image?program=${programId}`,
+            previewUrl: `${absoluteApiPath}/tracker/trackedEntities/${teiId}/attributes/${attributeId}/image?program=${programId}&dimension=small`,
+        };
+    },
+};
+
+
+const buildDataElementUrlByElementType: {|
+[string]: Function,
+|} = {
+    [dataElementTypes.FILE_RESOURCE]: async ({ dataElement, querySingleResource, eventId, absoluteApiPath, latestValue }: SubValuesDataElementProps) => {
+        const { id: dataElementId, value } = dataElement;
+        if (!value) return null;
+
+        const { id, displayName: name } = await querySingleResource({ resource: `fileResources/${value}` });
+
+        if (!latestValue) {
+            return name;
+        }
+
+        return {
+            id,
+            name,
+            url: `${absoluteApiPath}/tracker/events/${eventId}/dataValues/${dataElementId}/file`,
+        };
+    },
+    [dataElementTypes.IMAGE]: async ({ dataElement, querySingleResource, eventId, absoluteApiPath, latestValue }: SubValuesDataElementProps) => {
+        const { id: dataElementId, value } = dataElement;
+        if (!value) return null;
+
+        const { id, displayName: name } = await querySingleResource({ resource: `fileResources/${value}` });
+
+        if (!latestValue) {
+            return name;
+        }
+
+        return {
+            id,
+            name,
+            url: `${absoluteApiPath}/tracker/events/${eventId}/dataValues/${dataElementId}/image`,
+            previewUrl: `${absoluteApiPath}/tracker/events/${eventId}/dataValues/${dataElementId}/image?dimension=small`,
+        };
+    },
+};
+
+export const RECORD_TYPE = Object.freeze({
+    event: 'event',
+    trackedEntity: 'trackedEntity',
+});
+
+export const subValueGetterByElementType = Object.freeze({
+    [RECORD_TYPE.trackedEntity]: buildTEAUrlByElementType,
+    [RECORD_TYPE.event]: buildDataElementUrlByElementType,
+});