fix: custom title support

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: 2023-12-13T09:06:59.302Z\n"
-"PO-Revision-Date: 2023-12-13T09:06:59.302Z\n"
+"POT-Creation-Date: 2023-12-15T14:56:37.592Z\n"
+"PO-Revision-Date: 2023-12-15T14:56:37.592Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -671,9 +671,6 @@ msgstr "There is an error while opening this enrollment. Please enter a valid ur
 msgid "An error occurred while fetching enrollments. Please enter a valid url."
 msgstr "An error occurred while fetching enrollments. Please enter a valid url."
 
-msgid "Enrollment Dashboard"
-msgstr "Enrollment Dashboard"
-
 msgid "Quick actions"
 msgstr "Quick actions"
 
@@ -772,9 +769,6 @@ msgstr "Schedule"
 msgid "Refer"
 msgstr "Refer"
 
-msgid "Enrollment{{escape}} New Event"
-msgstr "Enrollment{{escape}} New Event"
-
 msgid "You can't add any more {{ programStageName }} events"
 msgstr "You can't add any more {{ programStageName }} events"
 
@@ -790,9 +784,6 @@ msgstr "Program Stages could not be loaded"
 msgid "Stage"
 msgstr "Stage"
 
-msgid "Enrollment{{escape}} Edit event"
-msgstr "Enrollment{{escape}} Edit event"
-
 msgid "Registered events"
 msgstr "Registered events"
 
@@ -929,6 +920,12 @@ msgstr "Event could not be loaded"
 msgid "Organisation unit could not be loaded"
 msgstr "Organisation unit could not be loaded"
 
+msgid "Dashboard"
+msgstr "Dashboard"
+
+msgid "View event"
+msgstr "View event"
+
 msgid "No feedback for this enrollment yet"
 msgstr "No feedback for this enrollment yet"
 

src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/DefaultPageLayout/DefaultPageLayout.constants.js

@@ -1,5 +1,4 @@
 // @flow
-import i18n from '@dhis2/d2-i18n';
 import {
     QuickActions,
     StagesAndEvents,
@@ -8,7 +7,7 @@ import {
     WidgetTypes,
 } from '../../../common/EnrollmentOverviewDomain/EnrollmentPageLayout';
 import type {
-    DefaultPageLayoutConfig,
+    PageLayoutConfig,
     WidgetConfig,
 } from '../../../common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types';
 
@@ -19,8 +18,7 @@ export const WidgetsForEnrollmentPageDefault: $ReadOnly<{ [key: string]: WidgetC
     ...DefaultWidgetsForEnrollmentOverview,
 });
 
-export const DefaultPageLayout: DefaultPageLayoutConfig = Object.freeze({
-    title: i18n.t('Enrollment Dashboard'),
+export const DefaultPageLayout: PageLayoutConfig = Object.freeze({
     leftColumn: [
         {
             type: WidgetTypes.COMPONENT,

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

@@ -34,6 +34,9 @@ import {
 } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout/hooks/useEnrollmentPageLayout';
 import { DefaultPageLayout, WidgetsForEnrollmentPageDefault } from './DefaultPageLayout';
 import { LoadingMaskForPage } from '../../../LoadingMasks';
+import {
+    EnrollmentPageKeys,
+} from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
 
 
 export const EnrollmentPageDefault = () => {
@@ -132,6 +135,7 @@ export const EnrollmentPageDefault = () => {
     return (
         <EnrollmentPageLayout
             pageLayout={pageLayout}
+            currentPage={EnrollmentPageKeys.OVERVIEW}
             availableWidgets={WidgetsForEnrollmentPageDefault}
 
             teiId={teiId}

src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.types.js

@@ -8,8 +8,12 @@ import type { LinkedRecordClick } from '../../../WidgetsRelationship/WidgetTrack
 import type {
     PageLayoutConfig, WidgetConfig,
 } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types';
+import {
+    EnrollmentPageKeys,
+} from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
 
 export type Props = {|
+    currentPage: $Values<typeof EnrollmentPageKeys>,
     program: TrackerProgram,
     enrollmentId: string,
     teiId: string,

src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/EnrollmentAddEventPageDefault/EnrollmentAddEventPageDefault.component.js

@@ -6,6 +6,9 @@ import withStyles from '@material-ui/core/styles/withStyles';
 import type { Props } from './EnrollmentAddEventPageDefault.types';
 import { IncompleteSelectionsMessage } from '../../../IncompleteSelectionsMessage';
 import { EnrollmentPageLayout } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout';
+import {
+    EnrollmentPageKeys,
+} from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
 
 const styles = ({ typography }) => ({
     container: {
@@ -76,6 +79,7 @@ const EnrollmentAddEventPagePain = ({
         <div>
             <EnrollmentPageLayout
                 {...passOnProps}
+                currentPage={EnrollmentPageKeys.NEW_EVENT}
                 program={program}
                 pageLayout={pageLayout}
                 stageId={stageId}

src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/PageLayout/DefaultPageLayout.constants.js

@@ -1,7 +1,6 @@
 // @flow
-import i18n from '@dhis2/d2-i18n';
 import type {
-    DefaultPageLayoutConfig,
+    PageLayoutConfig,
     WidgetConfig,
 } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types';
 import {
@@ -15,8 +14,7 @@ export const WidgetsForEnrollmentEventNew: $ReadOnly<{ [key: string]: WidgetConf
     ...DefaultWidgetsForEnrollmentOverview,
 });
 
-export const DefaultPageLayout: DefaultPageLayoutConfig = Object.freeze({
-    title: i18n.t('Enrollment{{escape}} New Event', { escape: ':' }),
+export const DefaultPageLayout: PageLayoutConfig = Object.freeze({
     leftColumn: [
         {
             type: WidgetTypes.COMPONENT,

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

@@ -7,6 +7,9 @@ import { TopBar } from './TopBar.container';
 import { NoticeBox } from '../../NoticeBox';
 import { EnrollmentPageLayout } from '../common/EnrollmentOverviewDomain/EnrollmentPageLayout';
 import { WidgetsForEnrollmentEventEdit } from './PageLayout/DefaultPageLayout.constants';
+import {
+    EnrollmentPageKeys,
+} from '../common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
 
 export const EnrollmentEditEventPageComponent = ({
     pageLayout,
@@ -51,6 +54,7 @@ export const EnrollmentEditEventPageComponent = ({
         />
         <EnrollmentPageLayout
             pageLayout={pageLayout}
+            currentPage={mode === EnrollmentPageKeys.EDIT_EVENT ? EnrollmentPageKeys.EDIT_EVENT : EnrollmentPageKeys.VIEW_EVENT}
             availableWidgets={WidgetsForEnrollmentEventEdit}
 
             trackedEntityTypeId={trackedEntityTypeId}

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/PageLayout/DefaultPageLayout.constants.js

@@ -1,7 +1,6 @@
 // @flow
-import i18n from '@dhis2/d2-i18n';
 import type {
-    DefaultPageLayoutConfig,
+    PageLayoutConfig,
     WidgetConfig,
 } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types';
 import {
@@ -17,8 +16,7 @@ export const WidgetsForEnrollmentEventEdit: $ReadOnly<{ [key: string]: WidgetCon
     ...DefaultWidgetsForEnrollmentOverview,
 });
 
-export const DefaultPageLayout: DefaultPageLayoutConfig = {
-    title: i18n.t('Enrollment{{escape}} Edit event', { escape: ':' }),
+export const DefaultPageLayout: PageLayoutConfig = {
     leftColumn: [
         {
             type: WidgetTypes.COMPONENT,

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

@@ -1,5 +1,5 @@
 // @flow
-
+import i18n from '@dhis2/d2-i18n';
 import {
     EnrollmentWidget,
     ErrorWidget,
@@ -10,6 +10,20 @@ import {
     WarningWidget,
 } from './LayoutComponentConfig';
 
+export const EnrollmentPageKeys = Object.freeze({
+    OVERVIEW: 'overview',
+    NEW_EVENT: 'newEvent',
+    EDIT_EVENT: 'editEvent',
+    VIEW_EVENT: 'viewEvent',
+});
+
+export const DefaultPageTitle = {
+    OVERVIEW: i18n.t('Dashboard'),
+    NEW_EVENT: i18n.t('New event'),
+    EDIT_EVENT: i18n.t('Edit event'),
+    VIEW_EVENT: i18n.t('View event'),
+};
+
 // Default components are available across all Enrollment Pages
 export const DefaultWidgetsForEnrollmentOverview = {
     TrackedEntityRelationship,

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

@@ -24,13 +24,11 @@ export type ColumnConfig = {
 }
 
 export type PageLayoutConfig = {
-    title: ?string,
+    title?: ?string,
     leftColumn: ?Array<ColumnConfig>,
     rightColumn: ?Array<ColumnConfig>,
 }
 
-export type DefaultPageLayoutConfig = $Exact<PageLayoutConfig>;
-
 export type WidgetConfig = {
     Component: React$ComponentType<any>,
     shouldHideWidget?: (props: Object) => boolean,

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

@@ -1,10 +1,12 @@
 // @flow
 import React, { useCallback, useMemo, useState } from 'react';
+import i18n from '@dhis2/d2-i18n';
 import { colors, spacers, spacersNum } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core/styles';
 import { useWidgetColumns } from './hooks/useWidgetColumns';
 import { AddRelationshipRefWrapper } from './AddRelationshipRefWrapper';
 import type { PlainProps } from '../../../Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.types';
+import { DefaultPageTitle, EnrollmentPageKeys } from './DefaultEnrollmentLayout.constants';
 
 const getEnrollmentPageStyles = () => ({
     container: {
@@ -42,9 +44,21 @@ const getEnrollmentPageStyles = () => ({
     },
 });
 
+const getTitle = (inputTitle, page) => {
+    const title = inputTitle || i18n.t('Enrollment');
+    const titles = {
+        [EnrollmentPageKeys.OVERVIEW]: !inputTitle ? `${title} ${DefaultPageTitle.OVERVIEW}` : title,
+        [EnrollmentPageKeys.NEW_EVENT]: `${title}: ${DefaultPageTitle.NEW_EVENT}`,
+        [EnrollmentPageKeys.EDIT_EVENT]: `${title}: ${DefaultPageTitle.EDIT_EVENT}`,
+        [EnrollmentPageKeys.VIEW_EVENT]: `${title}: ${DefaultPageTitle.VIEW_EVENT}`,
+    };
+    return titles[page] || title;
+};
+
 const EnrollmentPageLayoutPlain = ({
     pageLayout,
     availableWidgets,
+    currentPage,
     classes,
     ...passOnProps
 }: PlainProps) => {
@@ -75,7 +89,7 @@ const EnrollmentPageLayoutPlain = ({
                 className={classes.contentContainer}
                 style={!mainContentVisible ? { display: 'none' } : undefined}
             >
-                <div className={classes.title}>{pageLayout.title}</div>
+                <div className={classes.title}>{getTitle(pageLayout.title, currentPage)}</div>
                 <div className={classes.columns}>
                     {pageLayout.leftColumn && !!leftColumnWidgets?.length && (
                         <div className={classes.leftColumn}>

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

@@ -1,10 +1,10 @@
 // @flow
 import { useApiMetadataQuery } from '../../../../../../utils/reactQueryHelpers';
-import type { DefaultPageLayoutConfig, PageLayoutConfig } from '../DefaultEnrollmentLayout.types';
+import type { PageLayoutConfig } from '../DefaultEnrollmentLayout.types';
 
 type Props = {
     selectedScopeId: ?string,
-    defaultPageLayout: DefaultPageLayoutConfig,
+    defaultPageLayout: PageLayoutConfig,
     dataStoreKey: string,
 }
 export const useEnrollmentPageLayout = ({ selectedScopeId, defaultPageLayout, dataStoreKey }: Props) => {