feat: [DHIS2-21635] Display configurable terminology labels across capture UI

src/core_modules/capture-core/components/Breadcrumbs/BulkDataEntryBreadcrumb/hooks/useOriginLabel.ts

@@ -2,6 +2,7 @@ import i18n from '@dhis2/d2-i18n';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { breadcrumbsKeys } from '../BulkDataEntryBreadcrumb';
+import { useProgramLabel } from '../../../../metaData';
 
 type Props = {
     programId: string;
@@ -10,19 +11,16 @@ type Props = {
     page: string;
 };
 
-const DefaultFilterLabels = {
-    default: i18n.t('Program overview'),
-    active: i18n.t('Active enrollments'),
-    complete: i18n.t('Completed enrollments'),
-    cancelled: i18n.t('Cancelled enrollments'),
-};
-
-const getWorkingListLabel = (selectedTemplate: any, selectedTemplateId: string) => {
+const getWorkingListLabel = (
+    selectedTemplate: any,
+    selectedTemplateId: string,
+    defaultFilterLabels: { [key: string]: string },
+) => {
     if (selectedTemplate && !selectedTemplate.isDefault) {
         return selectedTemplate.name;
     }
     if (selectedTemplateId && !selectedTemplate) {
-        return DefaultFilterLabels[selectedTemplateId as keyof typeof DefaultFilterLabels];
+        return defaultFilterLabels[selectedTemplateId];
     }
     return i18n.t('Program overview');
 };
@@ -33,6 +31,14 @@ export const useOriginLabel = ({ programId, displayFrontPageList, page }: Props)
     const { selectedTemplateId, loading: isLoadingTemplates, templates } = workingListTemplates ?? {};
     const selectedTemplate = templates?.find(({ id }: any) => id === selectedTemplateId);
     const isSameProgram = workingListProgramId === programId;
+    const enrollments = useProgramLabel('enrollment', { plural: true, programId }) ?? i18n.t('enrollments');
+
+    const DefaultFilterLabels = useMemo(() => ({
+        default: i18n.t('Program overview'),
+        active: i18n.t('Active {{enrollments}}', { enrollments }),
+        complete: i18n.t('Completed {{enrollments}}', { enrollments }),
+        cancelled: i18n.t('Cancelled {{enrollments}}', { enrollments }),
+    }), [enrollments]);
 
     const label = useMemo(() => {
         if (page === breadcrumbsKeys.SEARCH_PAGE) {
@@ -44,7 +50,7 @@ export const useOriginLabel = ({ programId, displayFrontPageList, page }: Props)
         }
 
         if (isSameProgram) {
-            return getWorkingListLabel(selectedTemplate, selectedTemplateId);
+            return getWorkingListLabel(selectedTemplate, selectedTemplateId, DefaultFilterLabels);
         }
 
         if (!displayFrontPageList) {
@@ -58,6 +64,7 @@ export const useOriginLabel = ({ programId, displayFrontPageList, page }: Props)
         selectedTemplate,
         selectedTemplateId,
         page,
+        DefaultFilterLabels,
     ]);
 
     return {

src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.tsx

@@ -3,6 +3,7 @@ import i18n from '@dhis2/d2-i18n';
 import { withStyles, WithStyles } from 'capture-core-utils/styles';
 import { colors } from '@dhis2/ui';
 import { DirectionalChevron } from '../../../utils/rtl';
+import { useProgramLabel, useStageLabel } from '../../../metaData';
 import { useWorkingListLabel } from './hooks/useWorkingListLabel';
 import { BreadcrumbItem } from '../common/BreadcrumbItem';
 import { defaultDialogProps } from '../../Dialogs/DiscardDialog.constants';
@@ -74,6 +75,9 @@ const BreadcrumbsPlain = ({
         displayFrontPageList,
     });
 
+    const enrollment = useProgramLabel('enrollment', { programId }) ?? i18n.t('Enrollment');
+    const event = useStageLabel('event', { programId }) ?? i18n.t('event');
+
     const handleNavigation = useCallback((callback?: () => void, warningType?: WarningKey) => {
         if (userInteractionInProgress && warningType) {
             setOpenWarning(warningType);
@@ -101,29 +105,29 @@ const BreadcrumbsPlain = ({
         {
             key: pageKeys.OVERVIEW,
             onClick: () => handleNavigation(onBackToDashboard, pageKeys.OVERVIEW),
-            label: i18n.t('Enrollment dashboard'),
+            label: i18n.t('{{enrollment}} dashboard', { enrollment }),
             selected: page === pageKeys.OVERVIEW,
             condition: true,
         },
         {
             key: pageKeys.VIEW_EVENT,
             onClick: () => handleNavigation(onBackToViewEvent, pageKeys.VIEW_EVENT),
-            label: i18n.t('View event'),
+            label: i18n.t('View {{event}}', { event }),
             selected: page === pageKeys.VIEW_EVENT,
             condition: page === pageKeys.VIEW_EVENT ||
                 (page === pageKeys.EDIT_EVENT && !eventIsScheduled(eventStatus)),
         },
         {
             key: pageKeys.EDIT_EVENT,
             onClick: () => undefined,
-            label: i18n.t('Edit event'),
+            label: i18n.t('Edit {{event}}', { event }),
             selected: page === pageKeys.EDIT_EVENT,
             condition: page === pageKeys.EDIT_EVENT,
         },
         {
             key: pageKeys.NEW_EVENT,
             onClick: () => undefined,
-            label: i18n.t('New event'),
+            label: i18n.t('New {{event}}', { event }),
             selected: page === pageKeys.NEW_EVENT,
             condition: page === pageKeys.NEW_EVENT,
         },
@@ -135,6 +139,8 @@ const BreadcrumbsPlain = ({
         onBackToMainPage,
         onBackToDashboard,
         onBackToViewEvent,
+        enrollment,
+        event,
     ]);
 
     return (

src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/hooks/useWorkingListLabel.ts

@@ -1,6 +1,7 @@
 import i18n from '@dhis2/d2-i18n';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import { useProgramLabel } from '../../../../metaData';
 
 type Template = {
     id: string;
@@ -22,19 +23,20 @@ const DefaultFilterKeys = {
 
 type DefaultFilterKey = typeof DefaultFilterKeys[keyof typeof DefaultFilterKeys];
 
-const DefaultFilterLabels: { [key in DefaultFilterKey]: string } = {
-    [DefaultFilterKeys.DEFAULT]: i18n.t('Program overview'),
-    [DefaultFilterKeys.ACTIVE]: i18n.t('Active enrollments'),
-    [DefaultFilterKeys.COMPLETE]: i18n.t('Completed enrollments'),
-    [DefaultFilterKeys.CANCELLED]: i18n.t('Cancelled enrollments'),
-};
-
 export const useWorkingListLabel = ({
     programId,
     displayFrontPageList,
 }: Props) => {
     const workingListTemplates = useSelector((state: any) => state.workingListsTemplates?.teiList);
     const workingListProgramId = useSelector((state: any) => state.workingListsContext?.teiList?.programIdView);
+    const enrollments = useProgramLabel('enrollment', { plural: true, programId }) ?? i18n.t('enrollments');
+
+    const DefaultFilterLabels: { [key in DefaultFilterKey]: string } = useMemo(() => ({
+        [DefaultFilterKeys.DEFAULT]: i18n.t('Program overview'),
+        [DefaultFilterKeys.ACTIVE]: i18n.t('Active {{enrollments}}', { enrollments }),
+        [DefaultFilterKeys.COMPLETE]: i18n.t('Completed {{enrollments}}', { enrollments }),
+        [DefaultFilterKeys.CANCELLED]: i18n.t('Cancelled {{enrollments}}', { enrollments }),
+    }), [enrollments]);
 
     const { selectedTemplateId, loading: isLoadingTemplates, templates } = workingListTemplates ?? {};
 
@@ -66,6 +68,7 @@ export const useWorkingListLabel = ({
         isSameProgram,
         selectedTemplate,
         selectedTemplateId,
+        DefaultFilterLabels,
     ]);
 
     return {

src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/EventBreadcrumb.tsx

@@ -3,6 +3,7 @@ import i18n from '@dhis2/d2-i18n';
 import { colors } from '@dhis2/ui';
 import { withStyles, WithStyles } from 'capture-core-utils/styles';
 import { DirectionalChevron } from '../../../utils/rtl';
+import { useStageLabel } from '../../../metaData';
 import { BreadcrumbItem } from '../common/BreadcrumbItem';
 import { DiscardDialog } from '../../Dialogs/DiscardDialog.component';
 import { defaultDialogProps } from '../../Dialogs/DiscardDialog.constants';
@@ -43,6 +44,7 @@ const EventBreadcrumbPlain = ({
 }: Props) => {
     const [openWarning, setOpenWarning] = useState<PageKeys | null>(null);
     const { label } = useWorkingListLabel({ programId });
+    const event = useStageLabel('event', { programId }) ?? i18n.t('event');
 
     const handleNavigation = useCallback((callback?: () => void, warningType?: PageKeys) => {
         if (userInteractionInProgress && warningType) {
@@ -71,14 +73,14 @@ const EventBreadcrumbPlain = ({
         {
             key: pageKeys.VIEW_EVENT,
             onClick: () => handleNavigation(onBackToViewEvent, pageKeys.VIEW_EVENT),
-            label: i18n.t('View event'),
+            label: i18n.t('View {{event}}', { event }),
             selected: page === pageKeys.VIEW_EVENT,
             condition: page === pageKeys.VIEW_EVENT || page === pageKeys.EDIT_EVENT,
         },
         {
             key: pageKeys.EDIT_EVENT,
             onClick: () => undefined,
-            label: i18n.t('Edit event'),
+            label: i18n.t('Edit {{event}}', { event }),
             selected: page === pageKeys.EDIT_EVENT,
             condition: page === pageKeys.EDIT_EVENT,
         },
@@ -88,6 +90,7 @@ const EventBreadcrumbPlain = ({
         onBackToViewEvent,
         onBackToMainPage,
         page,
+        event,
     ]);
 
     return (

src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/hooks/useWorkingListLabel.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { useSelector } from 'react-redux';
+import { useStageLabel } from '../../../../metaData';
 
 type Template = {
     id: string;
@@ -25,6 +26,7 @@ export const useWorkingListLabel = ({ programId }: Props) => {
     const selectedTemplete: Template | undefined = templates?.find(({ id }) => id === selectedTemplateId);
     const isDefaultTemplate: boolean | undefined = selectedTemplete?.isDefault;
     const isSameProgram: boolean = workingListProgramId === programId;
+    const event = useStageLabel('event', { programId }) ?? i18n.t('Event');
 
     const computedLabel: string = useMemo(() => {
         if (loadingTemplates) return i18n.t('Loading...');
@@ -33,8 +35,8 @@ export const useWorkingListLabel = ({ programId }: Props) => {
             return selectedTemplete.name;
         }
 
-        return i18n.t('Event list');
-    }, [isDefaultTemplate, isSameProgram, loadingTemplates, selectedTemplete]);
+        return i18n.t('{{event}} list', { event });
+    }, [isDefaultTemplate, isSameProgram, loadingTemplates, selectedTemplete, event]);
 
     return {
         label: computedLabel,

src/core_modules/capture-core/components/CardList/CardListButtons.component.tsx

@@ -8,6 +8,7 @@ import { availableCardListButtonState, enrollmentTypes } from './CardList.consta
 import {
     navigateToEnrollmentOverview,
 } from '../../actions/navigateToEnrollmentOverview/navigateToEnrollmentOverview.actions';
+import { useProgramLabel } from '../../metaData';
 
 type Props = {
     currentSearchScopeId?: string,
@@ -78,6 +79,8 @@ const CardListButtons: FC<Props> = ({
     programName,
 }) => {
     const dispatch = useDispatch();
+    const programId = currentSearchScopeType === searchScopes.PROGRAM ? currentSearchScopeId : undefined;
+    const enrollment = useProgramLabel('enrollment', { programId }) ?? i18n.t('enrollment');
     const navigationButtonsState: AvailableCardListButtonState = deriveNavigationButtonState(enrollmentType);
     const onHandleClick: ButtonEventHandler<React.MouseEvent<HTMLButtonElement>> = useCallback((_, event) => {
         event.stopPropagation();
@@ -115,7 +118,7 @@ const CardListButtons: FC<Props> = ({
     {
         dataTest: 'view-active-enrollment-button',
         onClick: onHandleClick,
-        label: i18n.t('View active enrollment'),
+        label: i18n.t('View active {{enrollment}}', { enrollment }),
         hide: navigationButtonsState !== availableCardListButtonState.SHOW_VIEW_ACTIVE_ENROLLMENT_BUTTON,
     },
     {

src/core_modules/capture-core/components/CardList/CardListItem.component.tsx

@@ -16,6 +16,7 @@ import {
     dataElementTypes,
     getTrackerProgramThrowIfNotFound,
     OptionSet,
+    useProgramLabel,
     type TrackerProgram,
 } from '../../metaData';
 import { useOrgUnitNameWithAncestors } from '../../metadataRetrieval/orgUnitName';
@@ -156,6 +157,8 @@ const CardListItemIndex = ({
         ? deriveProgramFromEnrollment(enrollments, currentSearchScopeType)
         : undefined;
     const { fromServerDate } = useTimeZoneConversion();
+    const orgUnit = useProgramLabel('orgUnit', { programId: currentProgramId }) ?? i18n.t('Organisation unit');
+    const enrollment = useProgramLabel('enrollment', { programId: currentProgramId }) ?? i18n.t('enrollment');
 
     const renderImageDataElement = (imageElement?: CardProfileImageElementInformation): React.ReactNode => {
         if (!imageElement) { return null; }
@@ -217,11 +220,11 @@ const CardListItemIndex = ({
 
         return (<>
             <ListEntry
-                name={i18n.t('Organisation unit')}
+                name={orgUnit}
                 value={orgUnitName}
             />
             <ListEntry
-                name={program?.enrollment?.enrollmentDateLabel ?? i18n.t('Date of enrollment')}
+                name={program?.enrollment?.enrollmentDateLabel ?? i18n.t('Date of {{enrollment}}', { enrollment })}
                 value={enrolledAt}
                 type={dataElementTypes.DATE}
             />

src/core_modules/capture-core/components/DataEntries/Enrollment/EnrollmentWithFirstStageDataEntry/hooks/useDataEntrySections.ts

@@ -3,13 +3,15 @@ import i18n from '@dhis2/d2-i18n';
 import { placements } from '../../../../DataEntry/constants/placements.const';
 import { sectionKeysForFirstStageDataEntry } from '../EnrollmentWithFirstStageDataEntry.constants';
 import { AOCsectionKey } from '../../../../DataEntryDhis2Helpers';
+import { useProgramLabel } from '../../../../../metaData';
 
-export const useDataEntrySections = (stageName: string, beforeSectionId: string) =>
-    useMemo(
+export const useDataEntrySections = (stageName: string, beforeSectionId: string) => {
+    const enrollmentLabel = useProgramLabel('enrollment') ?? i18n.t('Enrollment');
+    return useMemo(
         () => ({
             [sectionKeysForFirstStageDataEntry.ENROLLMENT]: {
                 placement: placements.TOP,
-                name: i18n.t('Enrollment'),
+                name: enrollmentLabel,
             },
             [sectionKeysForFirstStageDataEntry.STAGE_BASIC_INFO]: {
                 beforeSectionId,
@@ -35,5 +37,6 @@ export const useDataEntrySections = (stageName: string, beforeSectionId: string)
                 }),
             },
         }),
-        [stageName, beforeSectionId],
+        [stageName, beforeSectionId, enrollmentLabel],
     );
+};

src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/RecentlyAddedEventsList/RecentlyAddedEventsList.component.tsx

@@ -4,6 +4,7 @@ import { withStyles, type WithStyles } from 'capture-core-utils/styles';
 import { Card } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import { OfflineEventsList } from '../../../../EventsList/OfflineEventsList/OfflineEventsList.component';
+import { useStageLabel } from '../../../../../metaData';
 import { listId } from './RecentlyAddedEventsList.const';
 import type { Props } from './RecentlyAddedEventsList.types';
 
@@ -18,7 +19,10 @@ const styles = (theme: any) => ({
 
 const NewEventsListPlain = (props: Props & WithStyles<typeof styles>) => {
     const { classes, ...passOnProps } = props;
+    const eventSingular = useStageLabel('event') ?? i18n.t('event');
+    const eventPlural = useStageLabel('event', { plural: true }) ?? i18n.t('events');
     const eventsAdded = props.events ? Object.keys(props.events).length : 0;
+    const noEventsText = i18n.t('No {{eventLabel}} added', { eventLabel: eventPlural });
     if (eventsAdded === 0) {
         return null;
     }
@@ -27,16 +31,15 @@ const NewEventsListPlain = (props: Props & WithStyles<typeof styles>) => {
             <div
                 className={classes.header}
             >
-                {i18n.t('{{count}} event added', {
+                {i18n.t('{{count}} {{eventLabel}} added', {
                     count: eventsAdded,
-                    defaultValue: '{{count}} event added',
-                    defaultValue_plural: '{{count}} events added',
+                    eventLabel: eventsAdded === 1 ? eventSingular : eventPlural,
                 })}
             </div>
             <OfflineEventsList
                 listId={listId}
-                noItemsText={i18n.t('No events added')}
-                emptyListText={i18n.t('No events added')}
+                noItemsText={noEventsText}
+                emptyListText={noEventsText}
                 {...passOnProps}
             />
         </Card>