feat: [DHIS2-16764][DHIS2-16759][DHIS2-16781] Changelog (#3540)

Minor-contributions-by: Joakim Storløkken Melseth <joakim@dhis2.org>

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

@@ -112,18 +112,43 @@ 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
-
-    Scenario: User can complete the enrollment and the active events
+    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
+
+  @v>=41
+  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
+
+  @v>=41
+  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
+
+  @v>=41
+  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
+
+  Scenario: User can complete the enrollment and the active events
     Given you land on the enrollment edit event page by having typed #/enrollmentEventEdit?eventId=OWpIzQ4xabC&orgUnitId=DiszpKrYNg8
     And the enrollment widget should be opened
     And the user sees the enrollment status and the Baby Postnatal event status is active
     And the user opens the enrollment actions menu
     When the user completes the enrollment and the active events
     Then the user sees the enrollment status and the Baby Postnatal event status is completed
+

cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEnrollmentEditEvent/index.js

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

i18n/en.pot

@@ -320,6 +320,11 @@ msgstr "{{programStageName}} completed"
 msgid "Would you like to complete the enrollment and all active events as well?"
 msgstr "Would you like to complete the enrollment and all active events as well?"
 
+msgid "{{count}} event in {{programStageName}}"
+msgid_plural "{{count}} event in {{programStageName}}"
+msgstr[0] "{{count}} event in {{programStageName}}"
+msgstr[1] "{{count}} events in {{programStageName}}"
+
 msgid "Yes, complete enrollment and events"
 msgstr "Yes, complete enrollment and events"
 
@@ -907,6 +912,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"
 
@@ -953,6 +961,11 @@ msgstr "Search {{uniqueAttrName}}"
 msgid "Search by attributes"
 msgstr "Search by attributes"
 
+msgid "Fill in at least {{count}} attribute to search"
+msgid_plural "Fill in at least {{count}} attribute to search"
+msgstr[0] "Fill in at least {{count}} attribute to search"
+msgstr[1] "Fill in at least {{count}} attributes to search"
+
 msgid "Could not retrieve metadata. Please try again later."
 msgstr "Could not retrieve metadata. Please try again later."
 
@@ -1338,12 +1351,22 @@ msgstr "Scheduled automatically for {{suggestedScheduleDate}}"
 msgid "The scheduled date matches the suggested date, but can be changed if needed."
 msgstr "The scheduled date matches the suggested date, but can be changed if needed."
 
+msgid "The scheduled date is {{count}} days {{position}} the suggested date."
+msgid_plural "The scheduled date is {{count}} days {{position}} the suggested date."
+msgstr[0] "The scheduled date is {{count}} day {{position}} the suggested date."
+msgstr[1] "The scheduled date is {{count}} days {{position}} the suggested date."
+
 msgid "after"
 msgstr "after"
 
 msgid "before"
 msgstr "before"
 
+msgid "There are {{count}} scheduled event in {{orgUnitName}} on this day."
+msgid_plural "There are {{count}} scheduled event in {{orgUnitName}} on this day."
+msgstr[0] "There are {{count}} scheduled event in {{orgUnitName}} on this day."
+msgstr[1] "There are {{count}} scheduled events in {{orgUnitName}} on this day."
+
 msgid "Scheduling an event in {{stageName}} for {{programName}} in {{orgUnitName}}"
 msgstr "Scheduling an event in {{stageName}} for {{programName}} in {{orgUnitName}}"
 
@@ -1458,6 +1481,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"
 
@@ -1663,9 +1710,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

@@ -6,6 +6,7 @@ export const FEATURES = Object.freeze({
     customIcons: 'customIcons',
     newTransferQueryParam: 'newTransferQueryParam',
     exportablePayload: 'exportablePayload',
+    changelogs: 'changelogs',
     trackerImageEndpoint: 'trackerImageEndpoint',
 });
 
@@ -18,6 +19,7 @@ const MINOR_VERSION_SUPPORT = Object.freeze({
     [FEATURES.exportablePayload]: 41,
     [FEATURES.trackerImageEndpoint]: 41,
     [FEATURES.newTransferQueryParam]: 41,
+    [FEATURES.changelogs]: 41,
 });
 
 export const hasAPISupportForFeature = (minorVersion: string | number, featureName: string) =>

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

@@ -14,7 +14,6 @@ type Props = {
     dataTest?: string,
     small?: boolean,
     large?: boolean,
-    className: string,
 };
 
 export const OverflowButton = ({
@@ -28,7 +27,6 @@ export const OverflowButton = ({
     icon,
     dataTest,
     component,
-    className,
 }: Props) => {
     const [isOpen, setIsOpen] = useState(false);
     const anchorRef = useRef(null);
@@ -51,7 +49,6 @@ export const OverflowButton = ({
                 large={large}
                 onClick={toggle}
                 icon={icon}
-                className={className}
             >
                 {label}
             </Button>

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

@@ -46,6 +46,7 @@ export const EnrollmentEditEventPageComponent = ({
     onSaveAndCompleteEnrollment,
     onCancelEditEvent,
     onHandleScheduleSave,
+    onSaveExternal,
     getAssignedUserSaveContext,
     onSaveAssignee,
     onSaveAssigneeError,
@@ -70,6 +71,7 @@ export const EnrollmentEditEventPageComponent = ({
             pageLayout={pageLayout}
             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';
@@ -40,6 +41,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';
 import { statusTypes } from '../../../enrollment';
 
 const getEventDate = (event) => {
@@ -114,6 +117,7 @@ const EnrollmentEditEventPageWithContextPlain = ({
 }: Props) => {
     const history = useHistory();
     const dispatch = useDispatch();
+    const queryClient = useQueryClient();
     const { pageLayout, isLoading } = useEnrollmentPageLayout({
         selectedScopeId: programId,
         dataStoreKey: DataStoreKeyByPage.ENROLLMENT_EVENT_EDIT,
@@ -181,6 +185,12 @@ const EnrollmentEditEventPageWithContextPlain = ({
         dispatch(updateEnrollmentEvent(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;
@@ -259,6 +269,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

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