feat: [DHIS2-21941] Self contained changelog widget

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: 2026-09-08T15:17:29.259Z\n"
-"PO-Revision-Date: 2026-09-08T15:17:29.262Z\n"
+"POT-Creation-Date: 2026-09-08T15:49:17.652Z\n"
+"PO-Revision-Date: 2026-09-08T15:49:17.653Z\n"
 
 msgid "The application could not be loaded."
 msgstr "The application could not be loaded."

src/core_modules/capture-core/components/EventOverflowMenu/MenuItems/CompletionMenuItem.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import i18n from '@dhis2/d2-i18n';
 import log from 'loglevel';
 import { MenuItem, IconCheckmark16, IconUndo16 } from '@dhis2/ui';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useAlert, useDataEngine } from '@dhis2/app-runtime';
 import { useDispatch } from 'react-redux';
 import { errorCreator } from 'capture-core-utils';
 import { statusTypes as eventStatuses } from 'capture-core/events/statusTypes';
-import { CompleteModal } from '../../DataEntries/common/trackerEvent/withAskToCompleteEnrollment/CompleteModal';
+import { removeEventChangelogQueries } from '../../WidgetsChangelog';
 import { statusTypes as enrollmentStatuses } from '../../../enrollment';
+import { CompleteModal } from '../../DataEntries/common/trackerEvent/withAskToCompleteEnrollment/CompleteModal';
 import {
     updateEnrollmentAndEvents,
     commitEnrollmentAndEvents,
@@ -64,6 +65,7 @@ export const CompletionMenuItem = ({
     onAskCompleteEnrollment,
 }: MenuItemProps) => {
     const dataEngine = useDataEngine();
+    const queryClient = useQueryClient();
     const { show: showError } = useAlert(({ message }) => message, { critical: true });
 
     const isCompleted = eventStatus === eventStatuses.COMPLETED;
@@ -78,7 +80,10 @@ export const CompletionMenuItem = ({
                 log.error(errorCreator('An error occurred when updating event status')({ error, eventId, newStatus }));
                 onError?.();
             },
-            onSuccess: () => onSuccess?.(newStatus),
+            onSuccess: () => {
+                removeEventChangelogQueries(queryClient, eventId);
+                onSuccess?.(newStatus);
+            },
         },
     );
 
@@ -122,6 +127,7 @@ export const CompleteMenuItemModal = ({
 }: ModalProps) => {
     const dataEngine = useDataEngine();
     const dispatch = useDispatch();
+    const queryClient = useQueryClient();
     const { show: showError } = useAlert(({ message }) => message, { critical: true });
 
     const handleError = (error: unknown) => {
@@ -134,7 +140,10 @@ export const CompleteMenuItemModal = ({
         {
             onMutate: () => onMutate?.(eventStatuses.COMPLETED),
             onError: (error) => { handleError(error); onError?.(); },
-            onSuccess: () => onSuccess?.(eventStatuses.COMPLETED),
+            onSuccess: () => {
+                removeEventChangelogQueries(queryClient, eventId);
+                onSuccess?.(eventStatuses.COMPLETED);
+            },
         },
     );
 
@@ -165,6 +174,7 @@ export const CompleteMenuItemModal = ({
             },
             onSuccess: () => {
                 dispatch(commitEnrollmentAndEvents());
+                removeEventChangelogQueries(queryClient, eventId);
                 onSuccess?.(eventStatuses.COMPLETED);
             },
         },

src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.container.tsx

@@ -5,7 +5,9 @@ import { errorCreator } from 'capture-core-utils';
 import { formatMomentEn } from 'capture-core-utils/date';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTimeZoneConversion } from '@dhis2/app-runtime';
+import { useQueryClient } from '@tanstack/react-query';
 import type { ApiEnrollmentEvent } from 'capture-core-utils/types/api-types';
+import { removeEventChangelogQueries } from '../../../WidgetsChangelog';
 import {
     commitEnrollmentAndEvents,
     EnrollmentAccessProvider,
@@ -50,6 +52,7 @@ import { useHideWidgetByRuleLocations } from '../../../../hooks';
 export const EnrollmentPageDefault = () => {
     const { navigate } = useNavigate();
     const dispatch = useDispatch();
+    const queryClient = useQueryClient();
     const { fromClientDate } = useTimeZoneConversion();
     const { status: widgetEnrollmentStatus } = useSelector(({ widgetEnrollment }: any) => widgetEnrollment);
     const { enrollmentId, programId, teiId, orgUnitId } = useLocationQuery();
@@ -181,7 +184,8 @@ export const EnrollmentPageDefault = () => {
     );
     const onUpdateEnrollmentStatusSuccess = useCallback(() => {
         dispatch(commitEnrollmentAndEvents());
-    }, [dispatch]);
+        removeEventChangelogQueries(queryClient);
+    }, [dispatch, queryClient]);
 
     const onBackToMainPage = useCallback(() => {
         navigate(`/?${buildUrlQueryString({ orgUnitId, programId })}`);

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.container.tsx

@@ -42,8 +42,7 @@ import { DataStoreKeyByPage, useEnrollmentPageLayout } from '../common/Enrollmen
 import { DefaultPageLayout } from './PageLayout/DefaultPageLayout.constants';
 import { rollbackAssignee, setAssignee } from './EnrollmentEditEventPage.actions';
 import { convertClientToServer, convertServerToClient } from '../../../converters';
-import { CHANGELOG_ENTITY_TYPES } from '../../WidgetsChangelog';
-import { ReactQueryAppNamespace } from '../../../utils/reactQueryHelpers';
+import { removeEventChangelogQueries } from '../../WidgetsChangelog';
 import { statusTypes } from '../../../enrollment';
 import { cancelEditEventDataEntry } from '../../WidgetEventEdit/EditEventDataEntry/editEventDataEntry.actions';
 import { setCurrentDataEntry } from '../../DataEntry/actions/dataEntry.actions';
@@ -246,8 +245,7 @@ const EnrollmentEditEventPageWithContextPlain = ({
     }, [dispatch, navigate, orgUnitId, enrollmentId, eventId]);
 
     const onSaveExternal = useCallback(() => {
-        const queryKey = [ReactQueryAppNamespace, 'changelog', CHANGELOG_ENTITY_TYPES.EVENT, eventId];
-        queryClient.removeQueries(queryKey);
+        removeEventChangelogQueries(queryClient, eventId);
         navigate(`enrollment?${buildUrlQueryString({ orgUnitId, enrollmentId })}`);
     }, [navigate, orgUnitId, enrollmentId, eventId, queryClient]);
 

src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.tsx

@@ -20,8 +20,7 @@ import { useCoreOrgUnit } from '../../../../metadataRetrieval/coreOrgUnit';
 import { NoticeBox } from '../../../NoticeBox';
 import { EventChangelogWrapper } from '../../../WidgetEventEdit/EventChangelogWrapper';
 import { OverflowButton } from '../../../Buttons';
-import { ReactQueryAppNamespace } from '../../../../utils/reactQueryHelpers';
-import { CHANGELOG_ENTITY_TYPES } from '../../../WidgetsChangelog';
+import { removeEventChangelogQueries } from '../../../WidgetsChangelog';
 import { useCategoryCombinations } from '../../../DataEntryDhis2Helpers/AOC/useCategoryCombinations';
 import { useMetadataForProgramStage } from '../../../DataEntries/common/ProgramStage/useMetadataForProgramStage';
 import { useProgramExpiryForUser, useEventEditPermissions } from '../../../../hooks';
@@ -64,7 +63,6 @@ const EventDetailsSectionPlain = (props: PlainProps & { classes: any }) => {
     const {
         classes,
         eventId,
-        eventData,
         onOpenEditEvent,
         isEditEventPage,
         programStage,
@@ -74,7 +72,9 @@ const EventDetailsSectionPlain = (props: PlainProps & { classes: any }) => {
         showEditButton,
         ...passOnProps
     } = props;
-    const orgUnitId = useSelector((state: any) => state.viewEventPage.loadedValues?.orgUnit?.id);
+    const orgUnitId = useSelector((state: { viewEventPage: { loadedValues: any } }) =>
+        state.viewEventPage.loadedValues?.orgUnit?.id);
+    const loadedValues = useSelector((state: { viewEventPage: { loadedValues: any } }) => state.viewEventPage.loadedValues);
     const { formFoundation } = useMetadataForProgramStage({ programId });
     const { orgUnit, error } = useCoreOrgUnit(orgUnitId);
     const { programCategory, isLoading } = useCategoryCombinations(programId);
@@ -85,14 +85,13 @@ const EventDetailsSectionPlain = (props: PlainProps & { classes: any }) => {
     const { canToggleCompletion } = useEventEditPermissions({
         programId,
         stage: programStage,
-        eventStatus: eventData?.eventContainer?.event?.status,
-        occurredAtClient: convertFormToClient(eventData?.dataEntryValues?.occurredAt, dataElementTypes.DATE) as string,
-        completedAtClient: eventData?.eventContainer?.event?.completedAt,
+        eventStatus: loadedValues?.eventContainer?.event?.status,
+        occurredAtClient: convertFormToClient(loadedValues?.dataEntryValues?.occurredAt, dataElementTypes.DATE) as string,
+        completedAtClient: loadedValues?.eventContainer?.event?.completedAt,
     });
 
     const onSaveExternal = useCallback(() => {
-        const queryKey = [ReactQueryAppNamespace, 'changelog', CHANGELOG_ENTITY_TYPES.EVENT, eventId];
-        queryClient.removeQueries(queryKey);
+        removeEventChangelogQueries(queryClient, eventId);
         onBackToAllEvents();
     }, [eventId, queryClient, onBackToAllEvents]);
 
@@ -190,7 +189,6 @@ const EventDetailsSectionPlain = (props: PlainProps & { classes: any }) => {
                 <EventChangelogWrapper
                     isOpen
                     setIsOpen={setChangeLogIsOpen}
-                    eventData={eventData?.eventContainer?.values}
                     eventId={eventId}
                     formFoundation={programStage.stageForm}
                 />

src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.container.ts

@@ -7,7 +7,6 @@ import {
 const mapStateToProps = (state: any, ownProps: any) => ({
     isEditEventPage: state.viewEventPage.eventDetailsSection && state.viewEventPage.eventDetailsSection.showEditEvent,
     eventId: state.viewEventPage.eventId,
-    eventData: state.viewEventPage.loadedValues || {},
     programId: state.currentSelections.programId,
     ...ownProps,
 });

src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.types.ts

@@ -3,7 +3,6 @@ import { ProgramStage } from 'capture-core/metaData';
 export type PlainProps = {
     isEditEventPage?: boolean;
     eventId: string;
-    eventData: any;
     onOpenEditEvent: (orgUnit: any, programCategory?: any) => void;
     programStage: ProgramStage;
     eventAccess: { read: boolean, write: boolean };

src/core_modules/capture-core/components/WidgetEventEdit/EventChangelogWrapper/EventChangelogWrapper.component.tsx

@@ -5,7 +5,7 @@ import { dataElementTypes } from '../../../metaData';
 import type { Props } from './EventChangelogWrapper.types';
 import { WidgetEventChangelog } from '../../WidgetsChangelog';
 
-export const EventChangelogWrapper = ({ formFoundation, eventId, eventData, ...passOnProps }: Props) => {
+export const EventChangelogWrapper = ({ formFoundation, eventId, ...passOnProps }: Props) => {
     const dataItemDefinitions = useMemo(() => {
         const elements = formFoundation.getElements();
         const contextLabels = formFoundation.getLabels();
@@ -62,7 +62,6 @@ export const EventChangelogWrapper = ({ formFoundation, eventId, eventData, ...p
         <WidgetEventChangelog
             {...passOnProps}
             eventId={eventId}
-            eventData={eventData}
             dataItemDefinitions={dataItemDefinitions}
         />
     );

src/core_modules/capture-core/components/WidgetEventEdit/EventChangelogWrapper/EventChangelogWrapper.types.ts

@@ -8,5 +8,4 @@ type PassOnProps = {
 
 export type Props = PassOnProps & {
     formFoundation: RenderFoundation,
-    eventData: Record<string, unknown>,
 };

src/core_modules/capture-core/components/WidgetEventEdit/WidgetEventEdit.container.tsx

@@ -102,7 +102,7 @@ const WidgetEventEditPlain = ({
     const { currentPageMode } = useEnrollmentEditEventPageMode(eventStatus);
     const [changeLogIsOpen, setChangeLogIsOpen] = useState(false);
     // "Edit event"-button depends on loadedValues. Delay rendering component until loadedValues has been initialized.
-    const loadedValues = useSelector((state: { viewEventPage: { loadedValues: any } }) => state.viewEventPage.loadedValues);
+    const loadedValues = useSelector((state: any) => state.viewEventPage.loadedValues);
     const orgUnit = loadedValues?.orgUnit;
     const occurredAt = loadedValues?.dataEntryValues?.occurredAt;
     const completedAt = loadedValues?.eventContainer?.event?.completedAt;
@@ -205,7 +205,6 @@ const WidgetEventEditPlain = ({
                     isOpen
                     setIsOpen={setChangeLogIsOpen}
                     eventId={loadedValues.eventContainer.id}
-                    eventData={loadedValues.eventContainer.values}
                     formFoundation={formFoundation}
                 />
             )}

src/core_modules/capture-core/components/WidgetProfile/OverflowMenu/TrackedEntityChangelogWrapper/TrackedEntityChangelogWrapper.component.tsx

@@ -68,7 +68,6 @@ export const TrackedEntityChangelogWrapper = ({
             close={() => setIsOpen(false)}
             programId={programAPI.id}
             dataItemDefinitions={dataItemDefinitions}
-            trackedEntityData={transformedTrackedEntityData}
         />
     );
 };

src/core_modules/capture-core/components/WidgetProfile/WidgetProfile.component.tsx

@@ -19,8 +19,7 @@ import {
     useTeiDisplayName,
 } from './hooks';
 import { DataEntry, dataEntryActionTypes, TEI_MODAL_STATE, convertClientToView } from './DataEntry';
-import { ReactQueryAppNamespace } from '../../utils/reactQueryHelpers';
-import { CHANGELOG_ENTITY_TYPES } from '../WidgetsChangelog';
+import { removeTrackedEntityChangelogQueries } from '../WidgetsChangelog';
 import { OverflowMenu } from './OverflowMenu';
 import {
     useDataEntryFormConfig,
@@ -142,7 +141,7 @@ const WidgetProfilePlain = ({
         }), [clientAttributesWithSubvalues]);
 
     const onSaveExternal = useCallback(() => {
-        queryClient.removeQueries([ReactQueryAppNamespace, 'changelog', CHANGELOG_ENTITY_TYPES.TRACKED_ENTITY, teiId]);
+        removeTrackedEntityChangelogQueries(queryClient, teiId);
     }, [queryClient, teiId]);
 
     useEffect(() => {

src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/EventRow/SkipAction/SkipAction.tsx

@@ -5,11 +5,12 @@ import {
     MenuItem,
     IconRedo16,
 } from '@dhis2/ui';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useAlert, useDataEngine } from '@dhis2/app-runtime';
 import { errorCreator } from 'capture-core-utils';
 import type { ApiEnrollmentEvent } from 'capture-core-utils/types/api-types';
 import { statusTypes as eventStatuses } from 'capture-core/events/statusTypes';
+import { removeEventChangelogQueries } from '../../../../../../WidgetsChangelog';
 import { DirectionalArrow } from '../../../../../../../utils/rtl';
 
 type Props = {
@@ -28,6 +29,7 @@ export const SkipAction = ({
     onUpdateEventStatus,
 }: Props) => {
     const dataEngine = useDataEngine();
+    const queryClient = useQueryClient();
     const { show: showError } = useAlert(
         ({ message }) => message,
         { critical: true },
@@ -55,6 +57,9 @@ export const SkipAction = ({
 
                 return { previousStatus };
             },
+            onSuccess: () => {
+                removeEventChangelogQueries(queryClient, eventId);
+            },
             onError: (error: unknown, payload: { status: string }, context?: { previousStatus: string }) => {
                 showError({ message: i18n.t('An error occurred when updating event status') });
                 log.error(errorCreator('An error occurred when updating event status')({ error, payload, context }));
@@ -75,7 +80,7 @@ export const SkipAction = ({
                 icon={<IconRedo16 />}
                 label={i18n.t('Unskip')}
                 onClick={() => handleMenuItemClick(eventStatuses.SCHEDULE)}
-                suffix=""
+                suffix={null}
             />
         );
     }
@@ -86,7 +91,7 @@ export const SkipAction = ({
             icon={<DirectionalArrow />}
             label={i18n.t('Skip')}
             onClick={() => handleMenuItemClick(eventStatuses.SKIPPED)}
-            suffix=""
+            suffix={null}
         />
     );
 };

src/core_modules/capture-core/components/WidgetsChangelog/WidgetEventChangelog/WidgetEventChangelog.tsx

@@ -4,23 +4,20 @@ import { Changelog, CHANGELOG_ENTITY_TYPES } from '../common/Changelog';
 
 type Props = {
     eventId: string;
-    eventData: Record<string, unknown>;
     dataItemDefinitions: ItemDefinitions;
     isOpen: boolean;
     setIsOpen: (value: boolean | ((prev: boolean) => boolean)) => void;
 };
 
 export const WidgetEventChangelog = ({
     eventId,
-    eventData,
     setIsOpen,
     ...passOnProps
 }: Props) => (
     <Changelog
         {...passOnProps}
         close={() => setIsOpen(false)}
         entityId={eventId}
-        entityData={eventData}
         entityType={CHANGELOG_ENTITY_TYPES.EVENT}
     />
 );

src/core_modules/capture-core/components/WidgetsChangelog/WidgetTrackedEntityChangelog/WidgetTrackedEntityChangelog.tsx

@@ -8,20 +8,17 @@ type Props = {
     dataItemDefinitions: ItemDefinitions;
     isOpen: boolean;
     close: () => void;
-    trackedEntityData: Record<string, unknown>;
 };
 
 export const WidgetTrackedEntityChangelog = ({
     teiId,
     programId,
     close,
-    trackedEntityData,
     ...passOnProps
 }: Props) => (
     <Changelog
         {...passOnProps}
         close={close}
-        entityData={trackedEntityData}
         entityId={teiId}
         programId={programId}
         entityType={CHANGELOG_ENTITY_TYPES.TRACKED_ENTITY}