feat: [DHIS2-17792] Org unit context in forms

cypress/e2e/WidgetsForEnrollmentPages/WidgetEnrollment/index.js

@@ -66,7 +66,7 @@ Then('the user sees the enrollment organisation unit', () => {
     cy.get('[data-test="widget-enrollment"]').within(() => {
         cy.get('[data-test="widget-enrollment-icon-orgunit"]').should('exist');
         cy.get('[data-test="widget-enrollment-orgunit"]')
-            .contains('Started at: Ngelehun CHC')
+            .contains('Started at:Ngelehun CHC')
             .should('exist');
     });
 });
@@ -77,7 +77,7 @@ Then('the user sees the owner organisation unit', () => {
             'exist',
         );
         cy.get('[data-test="widget-enrollment-owner-orgunit"]')
-            .contains('Owned by: Ngelehun CHC')
+            .contains('Owned by:Ngelehun CHC')
             .should('exist');
     });
 });
@@ -232,7 +232,7 @@ Then(/^the user successfully transfers the enrollment/, () => {
 
     cy.get('[data-test="widget-enrollment"]').within(() => {
         cy.get('[data-test="widget-enrollment-owner-orgunit"]')
-            .contains('Owned by: Njandama MCHP')
+            .contains('Owned by:Njandama MCHP')
             .should('exist');
     });
 });
@@ -246,7 +246,7 @@ Then(/^the user types in (.*)/, (orgunit) => {
 Given(/^the enrollment owner organisation unit is (.*)/, (orgunit) => {
     cy.get('[data-test="widget-enrollment"]').within(() => {
         cy.get('[data-test="widget-enrollment-owner-orgunit"]')
-            .contains(`Owned by: ${orgunit}`)
+            .contains(`Owned by:${orgunit}`)
             .should('exist');
     });
 });

i18n/en.pot

@@ -1224,6 +1224,12 @@ msgstr "Enrollment widget could not be loaded. Please try again later"
 msgid "Follow-up"
 msgstr "Follow-up"
 
+msgid "Started at{{escape}}"
+msgstr "Started at{{escape}}"
+
+msgid "Owned by{{escape}}"
+msgstr "Owned by{{escape}}"
+
 msgid "Cancelled"
 msgstr "Cancelled"
 

src/core_modules/capture-core/components/FormFields/New/Fields/OrgUnitField/SingleOrgUnitSelectField.component.js

@@ -1,14 +1,21 @@
 // @flow
 import * as React from 'react';
 import { withStyles } from '@material-ui/core';
-import { Chip } from '@dhis2/ui';
+import { Chip, colors } from '@dhis2/ui';
 import { OrgUnitField } from './OrgUnitField.component';
+import { TooltipOrgUnit } from '../../../../Tooltips/TooltipOrgUnit/TooltipOrgUnit.component';
 
 const getStyles = () => ({
     selectedOrgUnitContainer: {
         display: 'flex',
         alignItems: 'center',
     },
+    chip: {
+        cursor: 'text !important',
+        '&:hover': {
+            backgroundColor: `${colors.grey200} !important`,
+        },
+    },
 });
 
 type OrgUnitValue = {
@@ -27,9 +34,7 @@ type Props = {
     disabled?: ?boolean,
     classes: {
         selectedOrgUnitContainer: string,
-        clearSelectedOrgUnitButton: string,
-        clearSelectedOrgUnitButtonDisabled: string,
-        selectedOrgUnitText: string,
+        chip: string,
     }
 }
 
@@ -44,7 +49,12 @@ class SingleOrgUnitSelectFieldPlain extends React.Component<Props, State> {
         const { classes } = this.props;
         return (
             <div className={classes.selectedOrgUnitContainer}>
-                <Chip onRemove={this.onDeselectOrgUnit}>{selectedOrgUnit.name}</Chip>
+                <Chip
+                    onRemove={this.onDeselectOrgUnit}
+                    className={classes.chip}
+                >
+                    <TooltipOrgUnit orgUnitId={selectedOrgUnit.id} />
+                </Chip>
             </div>
         );
     }

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

@@ -136,15 +136,19 @@ export const WidgetEnrollmentPlain = ({
                             <span className={classes.icon} data-test="widget-enrollment-icon-orgunit">
                                 <IconDimensionOrgUnit16 color={colors.grey600} />
                             </span>
-                            {i18n.t('Started at: ')}
+                            {i18n.t('Started at{{escape}}', {
+                                escape: ':',
+                            })}
                             {convertValue(orgUnitClientValue, type)}
                         </div>
 
                         <div className={classes.row} data-test="widget-enrollment-owner-orgunit">
                             <span className={classes.icon} data-test="widget-enrollment-icon-owner-orgunit">
                                 <IconDimensionOrgUnit16 color={colors.grey600} />
                             </span>
-                            {i18n.t('Owned by: ')}
+                            {i18n.t('Owned by{{escape}}', {
+                                escape: ':',
+                            })}
                             {convertValue(ownerOrgUnitClientValue, type)}
                         </div>