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

cypress/e2e/EnrollmentPage/BreakingTheGlass.feature

@@ -1,5 +1,7 @@
 Feature: Breaking the glass page
 
+  # TODO - Flaky tests should be fixed by TECH-1662
+  @skip
   Scenario: User with search scope access tries to access an enrollment in a protected program
     Given the tei created by this test is cleared from the database
     And the data store is clean

cypress/e2e/WidgetsForEnrollmentPages/WidgetChangelog/index.js

@@ -0,0 +1,46 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
+
+Given('you select view changelog in the event overflow button', () => {
+    cy.get('[data-test="widget-event-edit-overflow-button"]')
+        .click();
+
+    cy.get('[data-test="event-overflow-view-changelog"] > a')
+        .click({ force: true });
+});
+
+Then('the changelog modal should be visible', () => {
+    cy.get('[data-test="changelog-modal"]')
+        .should('be.visible');
+});
+
+Then(/^the number of changelog table rows should be (.*)$/, (numberOfRows) => {
+    cy.get('[data-test="changelog-data-table-body"]')
+        .within(() => {
+            cy.get('tr')
+                .should('have.length', numberOfRows);
+        });
+});
+
+When(/^you change the page size to (.*)$/, (pageSize) => {
+    cy.get('[data-test="changelog-pagination-pagesize-select"]')
+        .click();
+
+    cy.get('[data-test="dhis2-uicore-select-menu-menuwrapper"]')
+        .contains(pageSize)
+        .click();
+});
+
+Then('the changelog modal should contain data', () => {
+    cy.get('[data-test="changelog-data-table-body"]')
+        .should('be.visible');
+});
+
+When('you move to the next page', () => {
+    cy.get('[data-test="changelog-pagination-page-next"]')
+        .click();
+});
+
+Then('the table footer should display page 2', () => {
+    cy.get('[data-test="changelog-pagination-summary"]')
+        .contains('Page 2');
+});

cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEnrollmentEditEvent.feature

@@ -105,10 +105,31 @@ Feature: The user interacts with the widgets on the enrollment edit event
     Then list should contain the new comment: new test comment
 
   Scenario: You can assign a user to a event
-  Given you land on the enrollment edit event page by having typed /#/enrollmentEventEdit?eventId=veuwiLC2x0e&orgUnitId=g8upMTyEZGZ
-  When you assign the user Geetha in the view mode
-  Then the event has the user Geetha Alwan assigned
-  When you assign the user Tracker demo User in the edit mode
-  Then the event has the user Tracker demo User assigned
-  When you remove the assigned user
-  Then the event has no assignd user
+    Given you land on the enrollment edit event page by having typed /#/enrollmentEventEdit?eventId=veuwiLC2x0e&orgUnitId=g8upMTyEZGZ
+    When you assign the user Geetha in the view mode
+    Then the event has the user Geetha Alwan assigned
+    When you assign the user Tracker demo User in the edit mode
+    Then the event has the user Tracker demo User assigned
+    When you remove the assigned user
+    Then the event has no assignd user
+
+  Scenario: The user can view an event changelog on the enrollment edit event
+    Given you land on the enrollment edit event page by having typed /#/enrollmentEventEdit?eventId=QsAhMiZtnl2&orgUnitId=DiszpKrYNg8
+    When you select view changelog in the event overflow button
+    Then the changelog modal should be visible
+    And the changelog modal should contain data
+    # One row is filtered out as the metadata is no longer there
+    And the number of changelog table rows should be 9
+
+  Scenario: The user can change changelog page size
+    Given you land on the enrollment edit event page by having typed /#/enrollmentEventEdit?eventId=QsAhMiZtnl2&orgUnitId=DiszpKrYNg8
+    When you select view changelog in the event overflow button
+    And you change the page size to 20
+    # One row is filtered out as the metadata is no longer there
+    Then the number of changelog table rows should be 19
+
+  Scenario: The user can move to the next page in the changelog
+    Given you land on the enrollment edit event page by having typed /#/enrollmentEventEdit?eventId=QsAhMiZtnl2&orgUnitId=DiszpKrYNg8
+    When you select view changelog in the event overflow button
+    And you move to the next page
+    Then the table footer should display page 2

cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEnrollmentEditEvent/index.js

@@ -3,4 +3,5 @@ import '../WidgetEnrollment';
 import '../WidgetProfile';
 import '../WidgetEventComment';
 import '../WidgetAssignee';
+import '../WidgetChangelog';
 

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-16T12:15:15.668Z\n"
-"PO-Revision-Date: 2024-02-16T12:15:15.668Z\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"
 
@@ -1585,9 +1612,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: {|