feat: [DHIS2-18746] Show org. unit in edit event form in Tracker program

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

@@ -65,6 +65,7 @@ export const TopBar = ({
             onResetOrgUnitId={() => resetOrgUnitId()}
             isUserInteractionInProgress={isUserInteractionInProgress}
             onStartAgain={() => reset()}
+            isReadOnly={mode === dataEntryKeys.EDIT}
         >
             <SingleLockedSelect
                 displayOnly

src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.component.js

@@ -33,6 +33,7 @@ import {
     withDefaultFieldContainer,
     withDefaultShouldUpdateInterface,
     VirtualizedSelectField,
+    SingleOrgUnitSelectField,
 } from '../../FormFields/New';
 import { statusTypes, translatedStatusTypes } from '../../../events/statusTypes';
 import labelTypeClasses from '../DataEntry/dataEntryFieldLabels.module.css';
@@ -48,6 +49,7 @@ import {
     withDataEntryFields,
 } from '../../DataEntryDhis2Helpers/';
 import type { UserFormField } from '../../FormFields/UserField';
+import { getOrgUnitValidatorContainers } from '../DataEntry/fieldValidators';
 
 const tabMode = Object.freeze({
     REPORT: 'REPORT',
@@ -197,6 +199,46 @@ const buildScheduleDateSettingsFn = () => {
     return scheduleDateSettings;
 };
 
+const buildOrgUnitSettingsFn = () => {
+    const orgUnitComponent =
+        withCalculateMessages(overrideMessagePropNames)(
+            withFocusSaver()(
+                withDefaultFieldContainer()(
+                    withDefaultShouldUpdateInterface()(
+                        withLabel({
+                            onGetUseVerticalOrientation: (props: Object) => props.formHorizontal,
+                            onGetCustomFieldLabeClass: (props: Object) => `${props.fieldOptions.fieldLabelMediaBasedClass} ${labelTypeClasses.orgUnitLabel}`,
+                        })(
+                            withDisplayMessages()(
+                                withInternalChangeHandler()(
+                                    withFilterProps(defaultFilterProps)(SingleOrgUnitSelectField),
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            ),
+        );
+
+    const orgUnitSettings = {
+        getComponent: () => orgUnitComponent,
+        getComponentProps: (props: Object) => createComponentProps(props, {
+            width: props && props.formHorizontal ? 150 : 350,
+            label: i18n.t('Organisation unit'),
+            required: true,
+        }),
+        getPropName: () => 'orgUnit',
+        getValidatorContainers: () => getOrgUnitValidatorContainers(),
+        getMeta: () => ({
+            placement: placements.TOP,
+            section: dataEntrySectionNames.BASICINFO,
+        }),
+    };
+
+    return orgUnitSettings;
+};
+
+
 const pointComponent = withCalculateMessages(overrideMessagePropNames)(
     withFocusSaver()(
         withDefaultFieldContainer()(
@@ -359,7 +401,8 @@ const saveHandlerConfig = {
 const AOCFieldBuilderHOC = withAOCFieldBuilder({})(withDataEntryFields(getCategoryOptionsSettingsFn())(DataEntry));
 const CleanUpHOC = withCleanUp()(AOCFieldBuilderHOC);
 const GeometryField = withDataEntryFieldIfApplicable(buildGeometrySettingsFn())(CleanUpHOC);
-const ScheduleDateField = withDataEntryField(buildScheduleDateSettingsFn())(GeometryField);
+const OrgUnitField = withDataEntryField(buildOrgUnitSettingsFn())(GeometryField);
+const ScheduleDateField = withDataEntryField(buildScheduleDateSettingsFn())(OrgUnitField);
 const ReportDateField = withDataEntryField(buildReportDateSettingsFn())(ScheduleDateField);
 const SaveableDataEntry = withSaveHandler(saveHandlerConfig)(withMainButton()(ReportDateField));
 const CancelableDataEntry = withCancelButton(getCancelOptions)(SaveableDataEntry);

src/core_modules/capture-core/components/WidgetEventSchedule/WidgetEventSchedule.component.js

@@ -2,6 +2,7 @@
 import React, { type ComponentType, useEffect } from 'react';
 import { spacersNum } from '@dhis2/ui';
 import withStyles from '@material-ui/core/styles/withStyles';
+import { DividerHorizontal as Divider } from 'capture-ui';
 import i18n from '@dhis2/d2-i18n';
 import { isValidOrgUnit } from 'capture-core-utils/validators/form';
 import { DataSection } from '../DataSection';
@@ -15,11 +16,17 @@ import { CategoryOptions } from './CategoryOptions/CategoryOptions.component';
 import { Assignee } from './Assignee';
 import { ScheduleOrgUnit } from './ScheduleOrgUnit/ScheduleOrgUnit.component';
 
-const styles = () => ({
+const styles = theme => ({
     wrapper: {
         paddingLeft: spacersNum.dp16,
         minWidth: '300px',
     },
+    evenNumbersRecords: {
+        backgroundColor: theme.palette.grey.lightest,
+    },
+    divider: {
+        backgroundColor: theme.palette.dividerForm,
+    },
 });
 
 const WidgetEventSchedulePlain = ({
@@ -76,12 +83,6 @@ const WidgetEventSchedulePlain = ({
                     dataTest="schedule-section"
                     sectionName={i18n.t('Schedule info')}
                 >
-                    <ScheduleOrgUnit
-                        orgUnit={orgUnit}
-                        onSelectOrgUnit={onSelectOrgUnit}
-                        onDeselectOrgUnit={onDeselectOrgUnit}
-                        {...passOnProps}
-                    />
                     <ScheduleDate
                         programId={programId}
                         stageId={stageId}
@@ -91,6 +92,15 @@ const WidgetEventSchedulePlain = ({
                         serverSuggestedScheduleDate={serverSuggestedScheduleDate}
                         {...passOnProps}
                     />
+                    <Divider className={classes.divider} />
+                    <div className={classes.evenNumbersRecords}>
+                        <ScheduleOrgUnit
+                            orgUnit={orgUnit}
+                            onSelectOrgUnit={onSelectOrgUnit}
+                            onDeselectOrgUnit={onDeselectOrgUnit}
+                            {...passOnProps}
+                        />
+                    </div>
                 </DataSection>
                 {programCategory && <DataSection
                     dataTest="category-options-section"