feat: [DHIS2-16764][DHIS2-16759][DHIS2-16781] Changelog

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: 2024-02-14T10:01:26.732Z\n"
-"PO-Revision-Date: 2024-02-14T10:01:26.732Z\n"
+"POT-Creation-Date: 2024-02-29T10:05:58.402Z\n"
+"PO-Revision-Date: 2024-02-29T10:05:58.402Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -889,6 +889,9 @@ msgstr "You don't have access to edit this event"
 msgid "Edit event"
 msgstr "Edit event"
 
+msgid "View changelog"
+msgstr "View changelog"
+
 msgid "Event details"
 msgstr "Event details"
 
@@ -1380,6 +1383,30 @@ msgstr "{{ scheduledEvents }} scheduled"
 msgid "Stages and Events"
 msgstr "Stages and Events"
 
+msgid "Changelog"
+msgstr "Changelog"
+
+msgid "No changes to display"
+msgstr "No changes to display"
+
+msgid "Created"
+msgstr "Created"
+
+msgid "Deleted"
+msgstr "Deleted"
+
+msgid "Date"
+msgstr "Date"
+
+msgid "User"
+msgstr "User"
+
+msgid "Data item"
+msgstr "Data item"
+
+msgid "Change"
+msgstr "Change"
+
 msgid "New {{trackedEntityTypeName}} relationship"
 msgstr "New {{trackedEntityTypeName}} relationship"
 
@@ -1569,9 +1596,6 @@ msgstr "Error updating the Assignee"
 msgid "Set coordinate"
 msgstr "Set coordinate"
 
-msgid "Date"
-msgstr "Date"
-
 msgid "Time"
 msgstr "Time"
 

src/core_modules/capture-core-utils/featuresSupport/support.js

@@ -5,6 +5,7 @@ export const FEATURES = Object.freeze({
     multiText: 'multiText',
     customIcons: 'customIcons',
     exportablePayload: 'exportablePayload',
+    changelogs: 'changelogs',
 });
 
 // The first minor version that supports the feature
@@ -14,6 +15,7 @@ const MINOR_VERSION_SUPPORT = Object.freeze({
     [FEATURES.multiText]: 41,
     [FEATURES.customIcons]: 41,
     [FEATURES.exportablePayload]: 41,
+    [FEATURES.changelogs]: 41,
 });
 
 export const hasAPISupportForFeature = (minorVersion: string | number, featureName: string) =>

src/core_modules/capture-core/components/Buttons/OverflowButton.component.js

@@ -0,0 +1,69 @@
+// @flow
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { Button, Layer, Popper } from '@dhis2/ui';
+
+type Props = {
+    label?: string,
+    primary?: boolean,
+    secondary?: boolean,
+    icon?: React.Node,
+    onClick?: () => void,
+    open?: boolean,
+    component: React.Node,
+    dataTest?: string,
+    small?: boolean,
+    large?: boolean,
+}
+
+export const OverflowButton = ({
+    label,
+    primary,
+    secondary,
+    small,
+    large,
+    onClick: handleClick,
+    open: propsOpen,
+    icon,
+    dataTest,
+    component,
+}: Props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const anchorRef = useRef(null);
+    const open = propsOpen !== undefined ? propsOpen : isOpen;
+
+    const toggle = () => {
+        if (propsOpen === undefined) {
+            setIsOpen(prev => !prev);
+        }
+        handleClick && handleClick();
+    };
+
+    return (
+        <div ref={anchorRef}>
+            <Button
+                primary={primary}
+                secondary={secondary}
+                dataTest={dataTest}
+                small={small}
+                large={large}
+                onClick={toggle}
+                icon={icon}
+            >
+                {label}
+            </Button>
+
+            {open && (
+                <Layer onBackdropClick={toggle} transparent>
+                    <Popper
+                        reference={anchorRef}
+                        placement="bottom-start"
+                    >
+                        {component}
+                    </Popper>
+                </Layer>
+            )}
+
+        </div>
+    );
+};

src/core_modules/capture-core/components/Buttons/index.js

@@ -1,2 +1,3 @@
 // @flow
 export { SimpleSplitButton } from './SimpleSplitButton.component';
+export { OverflowButton } from './OverflowButton.component';

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js

@@ -39,6 +39,7 @@ export const EnrollmentEditEventPageComponent = ({
     onEnrollmentSuccess,
     onCancelEditEvent,
     onHandleScheduleSave,
+    onSaveExternal,
     getAssignedUserSaveContext,
     onSaveAssignee,
     onSaveAssigneeError,
@@ -62,6 +63,7 @@ export const EnrollmentEditEventPageComponent = ({
             currentPage={mode === EnrollmentPageKeys.EDIT_EVENT ? EnrollmentPageKeys.EDIT_EVENT : EnrollmentPageKeys.VIEW_EVENT}
             availableWidgets={WidgetsForEnrollmentEventEdit}
 
+            onSaveExternal={onSaveExternal}
             trackedEntityTypeId={trackedEntityTypeId}
             programStage={programStage}
             onGoBack={onGoBack}

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

@@ -1,5 +1,6 @@
 // @flow
 import React, { useEffect, useCallback } from 'react';
+import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { dataEntryIds } from 'capture-core/constants';
@@ -32,6 +33,8 @@ import { DefaultPageLayout } from './PageLayout/DefaultPageLayout.constants';
 import { getProgramEventAccess } from '../../../metaData';
 import { setAssignee, rollbackAssignee } from './EnrollmentEditEventPage.actions';
 import { convertClientToServer } from '../../../converters';
+import { CHANGELOG_ENTITY_TYPES } from '../../WidgetsChangelog';
+import { ReactQueryAppNamespace } from '../../../utils/reactQueryHelpers';
 
 const getEventDate = (event) => {
     const eventDataConvertValue = convertDateWithTimeForView(event?.occurredAt || event?.scheduledAt);
@@ -105,6 +108,7 @@ const EnrollmentEditEventPageWithContextPlain = ({
 }: Props) => {
     const history = useHistory();
     const dispatch = useDispatch();
+    const queryClient = useQueryClient();
     const { pageLayout, isLoading } = useEnrollmentPageLayout({
         selectedScopeId: programId,
         dataStoreKey: DataStoreKeyByPage.ENROLLMENT_EVENT_EDIT,
@@ -147,6 +151,12 @@ const EnrollmentEditEventPageWithContextPlain = ({
         dispatch(updateEnrollmentEvents(eventId, eventData));
         history.push(`enrollment?${buildUrlQueryString({ enrollmentId })}`);
     };
+
+    const onSaveExternal = () => {
+        const queryKey = [ReactQueryAppNamespace, 'changelog', CHANGELOG_ENTITY_TYPES.EVENT, eventId];
+        queryClient.removeQueries(queryKey);
+    };
+
     const { teiDisplayName } = useTeiDisplayName(teiId, programId);
     // $FlowFixMe
     const { name: trackedEntityName, id: trackedEntityTypeId } = program?.trackedEntityType;
@@ -216,6 +226,7 @@ const EnrollmentEditEventPageWithContextPlain = ({
             scheduleDate={scheduleDate}
             onCancelEditEvent={onCancelEditEvent}
             onHandleScheduleSave={onHandleScheduleSave}
+            onSaveExternal={onSaveExternal}
             getAssignedUserSaveContext={getAssignedUserSaveContext}
             onSaveAssignee={onSaveAssignee}
             onSaveAssigneeError={onSaveAssigneeError}

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.types.js

@@ -32,6 +32,7 @@ export type PlainProps = {|
     onEnrollmentSuccess: () => void,
     onCancelEditEvent: (isScheduled: boolean) => void,
     onHandleScheduleSave: (eventData: Object) => void,
+    onSaveExternal: () => void,
     pageStatus: string,
     eventStatus?: string,
     eventAccess: {|

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

@@ -1,9 +1,10 @@
 // @flow
-import React from 'react';
+import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { dataEntryIds, dataEntryKeys } from 'capture-core/constants';
 import { withStyles } from '@material-ui/core/';
-import { spacers, IconFileDocument24, Button } from '@dhis2/ui';
+import { spacers, IconFileDocument24, Button, IconMore16, FlyoutMenu, MenuItem } from '@dhis2/ui';
+import { useQueryClient } from 'react-query';
 import i18n from '@dhis2/d2-i18n';
 import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { ViewEventSection } from '../Section/ViewEventSection.component';
@@ -13,19 +14,30 @@ import { ViewEventDataEntry } from '../../../WidgetEventEdit/ViewEventDataEntry/
 import type { ProgramStage } from '../../../../metaData';
 import { useCoreOrgUnit } from '../../../../metadataRetrieval/coreOrgUnit';
 import { NoticeBox } from '../../../NoticeBox';
+import { FEATURES, useFeature } from '../../../../../capture-core-utils';
+import { EventChangelogWrapper } from '../../../WidgetEventEdit/EventChangelogWrapper';
+import { OverflowButton } from '../../../Buttons';
+import { ReactQueryAppNamespace } from '../../../../utils/reactQueryHelpers';
+import { CHANGELOG_ENTITY_TYPES } from '../../../WidgetsChangelog';
 
 const getStyles = () => ({
     container: {
         flexGrow: 2,
         flexBasis: 0,
     },
-    content: {
+    dataEntryContent: {
         display: 'flex',
         gap: spacers.dp8,
     },
     dataEntryContainer: {
         flexGrow: 1,
     },
+    headerContainer: {
+        display: 'flex',
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
     actionsContainer: {
         flexShrink: 0,
     },
@@ -38,12 +50,14 @@ const getStyles = () => ({
 
 type Props = {
     showEditEvent: ?boolean,
+    eventId: string,
     onOpenEditEvent: (orgUnit: Object) => void,
     programStage: ProgramStage,
     eventAccess: { read: boolean, write: boolean },
     classes: {
         container: string,
-        content: string,
+        headerContainer: string,
+        dataEntryContent: string,
         dataEntryContainer: string,
         actionsContainer: string,
         button: string,
@@ -54,13 +68,23 @@ type Props = {
 const EventDetailsSectionPlain = (props: Props) => {
     const {
         classes,
+        eventId,
         onOpenEditEvent,
         showEditEvent,
         programStage,
         eventAccess,
         ...passOnProps } = props;
     const orgUnitId = useSelector(({ viewEventPage }) => viewEventPage.loadedValues?.orgUnit?.id);
     const { orgUnit, error } = useCoreOrgUnit(orgUnitId);
+    const queryClient = useQueryClient();
+    const supportsChangelog = useFeature(FEATURES.changelogs);
+    const [changeLogIsOpen, setChangeLogIsOpen] = useState(false);
+    const [actionsIsOpen, setActionsIsOpen] = useState(false);
+
+    const onSaveExternal = () => {
+        const queryKey = [ReactQueryAppNamespace, 'changelog', CHANGELOG_ENTITY_TYPES.EVENT, eventId];
+        queryClient.removeQueries(queryKey);
+    };
 
     if (error) {
         return error.errorComponent;
@@ -76,6 +100,7 @@ const EventDetailsSectionPlain = (props: Props) => {
                         dataEntryId={dataEntryIds.SINGLE_EVENT}
                         formFoundation={formFoundation}
                         orgUnit={orgUnit}
+                        onSaveExternal={onSaveExternal}
                         {...passOnProps}
                     /> :
                     // $FlowFixMe[cannot-spread-inexact] automated comment
@@ -112,6 +137,26 @@ const EventDetailsSectionPlain = (props: Props) => {
                         </Button>
                     </ConditionalTooltip>
                 </div>}
+                {supportsChangelog && (
+                    <OverflowButton
+                        open={actionsIsOpen}
+                        onClick={() => setActionsIsOpen(prev => !prev)}
+                        secondary
+                        small
+                        icon={<IconMore16 />}
+                        component={(
+                            <FlyoutMenu dense maxWidth="250px">
+                                <MenuItem
+                                    label={i18n.t('View changelog')}
+                                    onClick={() => {
+                                        setChangeLogIsOpen(true);
+                                        setActionsIsOpen(false);
+                                    }}
+                                />
+                            </FlyoutMenu>
+                        )}
+                    />
+                )}
             </div>
         );
     };
@@ -120,14 +165,26 @@ const EventDetailsSectionPlain = (props: Props) => {
     return orgUnit ? (
         <div className={classes.container}>
             <ViewEventSection
-                header={<ViewEventSectionHeader text={i18n.t('Event details')} icon={IconFileDocument24} />}
+                header={(
+                    <div className={classes.headerContainer}>
+                        <ViewEventSectionHeader text={i18n.t('Event details')} icon={IconFileDocument24} />
+                        {renderActionsContainer()}
+                    </div>
+                )}
             >
-                <div className={classes.content}>
+                <div className={classes.dataEntryContainer}>
                     {renderDataEntryContainer()}
-                    {renderActionsContainer()}
                 </div>
                 {showEditEvent && <NoticeBox formId={`${dataEntryIds.SINGLE_EVENT}-${dataEntryKeys.EDIT}`} /> }
             </ViewEventSection>
+            {supportsChangelog && changeLogIsOpen && (
+                <EventChangelogWrapper
+                    isOpen
+                    setIsOpen={setChangeLogIsOpen}
+                    eventId={eventId}
+                    formFoundation={programStage.stageForm}
+                />
+            )}
         </div>
     ) : null;
 };

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

@@ -8,6 +8,7 @@ import {
 
 const mapStateToProps = (state: ReduxState) => ({
     showEditEvent: state.viewEventPage.eventDetailsSection && state.viewEventPage.eventDetailsSection.showEditEvent,
+    eventId: state.viewEventPage.eventId,
     programId: state.currentSelections.programId,
 });
 

src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/LayoutComponentConfig/LayoutComponentConfig.js

@@ -183,6 +183,7 @@ export const EditEventWorkspace: WidgetConfig = {
         eventStatus,
         onCancelEditEvent,
         onHandleScheduleSave,
+        onSaveExternal,
         initialScheduleDate,
         assignee,
     }) => ({
@@ -195,6 +196,7 @@ export const EditEventWorkspace: WidgetConfig = {
         eventStatus,
         onCancelEditEvent,
         onHandleScheduleSave,
+        onSaveExternal,
         initialScheduleDate,
         assignee,
     }),