feat: [DHIS2-12362] display relationships

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-05-26T08:53:52.765Z\n"
-"PO-Revision-Date: 2023-05-26T08:53:52.765Z\n"
+"POT-Creation-Date: 2023-06-20T11:10:43.080Z\n"
+"PO-Revision-Date: 2023-06-20T11:10:43.080Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1332,14 +1332,8 @@ msgstr "Something went wrong while loading relationships. Please try again later
 msgid "TEI's Relationships"
 msgstr "TEI's Relationships"
 
-msgid "Event based relationship"
-msgstr "Event based relationship"
-
-msgid "Event based relationships are not supported yet"
-msgstr "Event based relationships are not supported yet"
-
-msgid "TET name"
-msgstr "TET name"
+msgid "Type"
+msgstr "Type"
 
 msgid "Created date"
 msgstr "Created date"

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

@@ -3,7 +3,7 @@ import type { TrackerProgram } from 'capture-core/metaData';
 import type { Stage } from 'capture-core/components/WidgetStagesAndEvents/types/common.types';
 import type { WidgetEffects, HideWidgets } from '../../common/EnrollmentOverviewDomain';
 import type { Event } from '../../common/EnrollmentOverviewDomain/useCommonEnrollmentDomainData';
-import type { UrlParameters } from '../../../WidgetsRelationship/common/Types';
+import type { LinkedRecordClick } from '../../../WidgetsRelationship/WidgetTrackedEntityRelationship';
 
 export type Props = {|
     program: TrackerProgram,
@@ -20,7 +20,7 @@ export type Props = {|
     onCreateNew: (stageId: string) => void,
     onEventClick: (eventId: string) => void,
     onUpdateTeiAttributeValues: (attributes: Array<{ [key: string]: string }>, teiDisplayName: string) => void,
-    onLinkedRecordClick: (parameters: UrlParameters) => void,
+    onLinkedRecordClick: LinkedRecordClick,
     onEnrollmentError: (message: string) => void,
 |};
 

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

@@ -1,7 +1,7 @@
 // @flow
 import type { ProgramStage } from '../../../metaData';
 import type { WidgetEffects, HideWidgets } from '../common/EnrollmentOverviewDomain';
-import type { UrlParameters } from '../../WidgetsRelationship/common/Types';
+import type { LinkedRecordClick } from '../../WidgetsRelationship/WidgetTrackedEntityRelationship';
 
 export type PlainProps = {|
     programStage: ?ProgramStage,
@@ -21,7 +21,7 @@ export type PlainProps = {|
     onDelete: () => void,
     onAddNew: () => void,
     onGoBack: () => void,
-    onLinkedRecordClick: (parameters: UrlParameters) => void,
+    onLinkedRecordClick: LinkedRecordClick,
     onEnrollmentError: (message: string) => void,
     onEnrollmentSuccess: () => void,
     onCancelEditEvent: () => void,

src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.component.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import i18n from '@dhis2/d2-i18n';
-import { useTEIRelationshipsWidgetMetadata } from '../index';
+import { useTEIRelationshipsWidgetMetadata } from '../useTEIRelationshipsWidgetMetadata';
 import { WidgetTrackedEntityRelationship } from '../../../../WidgetsRelationship/WidgetTrackedEntityRelationship';
 import type { Props } from './TrackedEntityRelationshipsWrapper.types';
 

src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.types.js

@@ -1,5 +1,5 @@
 // @flow
-import type { UrlParameters } from '../../../../WidgetsRelationship/common/Types';
+import type { LinkedRecordClick } from '../../../../WidgetsRelationship/WidgetTrackedEntityRelationship';
 
 export type Props = {|
     trackedEntityTypeId: string,
@@ -9,5 +9,5 @@ export type Props = {|
     addRelationshipRenderElement: HTMLDivElement,
     onOpenAddRelationship: () => void,
     onCloseAddRelationship: () => void,
-    onLinkedRecordClick: (parameters: UrlParameters) => void,
+    onLinkedRecordClick: LinkedRecordClick,
 |};

src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/useLinkedRecordClick.js

@@ -1,31 +1,18 @@
 // @flow
-
 import { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
-import log from 'loglevel';
-import type { UrlParameters } from '../../../WidgetsRelationship/common/Types';
+import type { NavigationArgs } from '../../../WidgetsRelationship/WidgetTrackedEntityRelationship';
 import { EventProgram, getProgramFromProgramIdThrowIfNotFound } from '../../../../metaData';
-import { buildUrlQueryString } from '../../../../utils/routing';
-import { errorCreator } from '../../../../../capture-core-utils';
+import { useLocationQuery, buildUrlQueryString } from '../../../../utils/routing';
 
 export const useLinkedRecordClick = () => {
     const history = useHistory();
+    const { orgUnitId } = useLocationQuery();
 
-    const onLinkedRecordClick = useCallback((urlParameters: UrlParameters) => {
+    const onLinkedRecordClick = useCallback((navigationArgs: NavigationArgs) => {
         let url;
-        const {
-            programId,
-            orgUnitId,
-            eventId,
-            teiId,
-        } = urlParameters;
-
-        if (!programId || !orgUnitId) {
-            log.error(errorCreator('programId and orgUnitId must be provided')({ programId, orgUnitId }));
-            return;
-        }
-
-        if (eventId) {
+        if (navigationArgs.eventId) {
+            const { eventId, programId } = navigationArgs;
             const recordProgram = getProgramFromProgramIdThrowIfNotFound(programId);
             if (recordProgram instanceof EventProgram) {
                 url = `/viewEvent?viewEventId=${eventId}`;
@@ -35,19 +22,20 @@ export const useLinkedRecordClick = () => {
                     eventId,
                 })}`;
             }
-        } else if (teiId) {
+        } else if (navigationArgs.trackedEntityId) {
+            const { trackedEntityId, programId } = navigationArgs;
             url = `/enrollment?${buildUrlQueryString({
                 programId,
                 orgUnitId,
-                teiId,
+                teiId: trackedEntityId,
                 enrollmentId: 'AUTO',
             })}`;
         }
 
         if (url) {
             history.push(url);
         }
-    }, [history]);
+    }, [history, orgUnitId]);
 
     return {
         onLinkedRecordClick,

src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/linkedEntityMetadataSelector.types.js

@@ -1,5 +1,5 @@
 // @flow
-import type { RelationshipType } from '../../../common/Types';
+import type { RelationshipTypes } from '../../../common/Types';
 import type { TargetSides } from '../../../common/LinkedEntityMetadataSelector';
 
 
@@ -29,7 +29,7 @@ export type LinkedEntityMetadata = $ReadOnly<{|
 |}>;
 
 export type Props = $ReadOnly<{|
-    relationshipTypes: Array<RelationshipType>,
+    relationshipTypes: RelationshipTypes,
     trackedEntityTypeId: string,
     programId: string,
     onSelectLinkedEntityMetadata: (linkedEntityMetadata: LinkedEntityMetadata) => void,

src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/useApplicableTypesAndSides.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { TARGET_SIDES } from '../common';
 import type { ApplicableTypesInfo } from './linkedEntityMetadataSelector.types';
 import type { RelationshipType } from '../../../common/Types';
-import { RELATIONSHIP_ENTITIES } from '../../../constants';
+import { RELATIONSHIP_ENTITIES } from '../../../common/constants';
 import type { TargetSides } from '../../../common/LinkedEntityMetadataSelector';
 
 const isApplicableProgram = (programId, sourceProgramIds) =>

src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.component.js

@@ -11,7 +11,7 @@ import {
     type LinkedEntityMetadata,
 } from './LinkedEntityMetadataSelector';
 import { RetrieverModeSelector } from './RetrieverModeSelector';
-import type { Props, PlainProps } from './NewTrackedEntityRelationship.types';
+import type { ComponentProps, StyledComponentProps } from './NewTrackedEntityRelationship.types';
 
 const styles = {
     container: {
@@ -40,7 +40,7 @@ const NewTrackedEntityRelationshipPlain = ({
     programId,
     onCancel,
     classes,
-}: PlainProps) => {
+}: StyledComponentProps) => {
     const [currentStep, setCurrentStep] =
         useState(NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.SELECT_LINKED_ENTITY_METADATA);
     const [selectedLinkedEntityMetadata: LinkedEntityMetadata, setSelectedLinkedEntityMetadata] = useState(undefined);
@@ -142,5 +142,5 @@ const NewTrackedEntityRelationshipPlain = ({
     );
 };
 
-export const NewTrackedEntityRelationshipComponent: ComponentType<Props> =
+export const NewTrackedEntityRelationshipComponent: ComponentType<ComponentProps> =
     withStyles(styles)(NewTrackedEntityRelationshipPlain);

src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.container.js

@@ -1,10 +1,10 @@
 // @flow
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, type ComponentType } from 'react';
 import { Button, spacers } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core';
 import i18n from '@dhis2/d2-i18n';
 import { NewTrackedEntityRelationshipPortal } from './NewTrackedEntityRelationship.portal';
-import type { PlainProps } from './NewTrackedEntityRelationship.types';
+import type { ContainerProps, StyledContainerProps } from './NewTrackedEntityRelationship.types';
 
 const styles = {
     container: {
@@ -13,14 +13,14 @@ const styles = {
 };
 
 export const NewTrackedEntityRelationshipPlain = ({
-    addRelationshipRenderElement,
+    renderElement,
     programId,
     relationshipTypes,
     trackedEntityTypeId,
     onCloseAddRelationship,
     onOpenAddRelationship,
     classes,
-}: PlainProps) => {
+}: StyledContainerProps) => {
     const [addWizardVisible, setAddWizardVisibility] = useState(false);
 
     const closeAddWizard = useCallback(() => {
@@ -49,7 +49,7 @@ export const NewTrackedEntityRelationshipPlain = ({
                         relationshipTypes={relationshipTypes}
                         trackedEntityTypeId={trackedEntityTypeId}
                         programId={programId}
-                        renderElement={addRelationshipRenderElement}
+                        renderElement={renderElement}
                         onSave={closeAddWizard}
                         onCancel={closeAddWizard}
                     />
@@ -59,4 +59,5 @@ export const NewTrackedEntityRelationshipPlain = ({
     );
 };
 
-export const NewTrackedEntityRelationship = withStyles(styles)(NewTrackedEntityRelationshipPlain);
+export const NewTrackedEntityRelationship: ComponentType<ContainerProps> =
+    withStyles(styles)(NewTrackedEntityRelationshipPlain);

src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.types.js

@@ -1,24 +1,44 @@
 // @flow
-
 import type { RelationshipTypes } from '../../common/Types';
 
-export type Props = $ReadOnly<{|
+export type ContainerProps = $ReadOnly<{|
+    renderElement: HTMLElement,
     relationshipTypes: RelationshipTypes,
     trackedEntityTypeId: string,
     programId: string,
-    onSave: () => void,
-    onCancel: () => void,
     onCloseAddRelationship?: () => void,
     onOpenAddRelationship?: () => void,
 |}>;
 
-export type PlainProps = $ReadOnly<{|
-    addRelationshipRenderElement: HTMLElement,
-    ...Props,
+export type StyledContainerProps = $ReadOnly<{|
+    ...ContainerProps,
     ...CssClasses,
 |}>;
 
 export type PortalProps = $ReadOnly<{|
     renderElement: HTMLElement,
-    ...Props,
+    relationshipTypes: RelationshipTypes,
+    trackedEntityTypeId: string,
+    programId: string,
+    onSave: () => void,
+    onCancel: () => void,
+|}>;
+
+export type StyledPortalProps = $ReadOnly<{|
+    ...PortalProps,
+    ...CssClasses,
+|}>;
+
+
+export type ComponentProps = $ReadOnly<{|
+    relationshipTypes: RelationshipTypes,
+    trackedEntityTypeId: string,
+    programId: string,
+    onSave: () => void,
+    onCancel: () => void,
+|}>;
+
+export type StyledComponentProps = $ReadOnly<{|
+    ...ComponentProps,
+    ...CssClasses,
 |}>;

src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.component.js

@@ -1,22 +1,23 @@
 // @flow
 import React from 'react';
 import i18n from '@dhis2/d2-i18n';
-import type { Props } from './WidgetTrackedEntityRelationship.types';
-import { useLinkedEntityGroups } from '../common/hooks';
-import { RelationshipsWidget } from '../common/RelationshipsComponent';
-import { RelationshipSearchEntities, useRelationships } from '../common/hooks/useRelationships';
-import { useRelationshipTypes } from '../common/hooks/useRelationshipTypes';
+import type { WidgetTrackedEntityRelationshipProps } from './WidgetTrackedEntityRelationship.types';
+import { RelationshipsWidget } from '../common/RelationshipsWidget';
+import { RelationshipSearchEntities, useRelationships } from '../common/useRelationships';
+import { NewTrackedEntityRelationship } from './NewTrackedEntityRelationship';
 
 export const WidgetTrackedEntityRelationship = ({
     relationshipTypes: cachedRelationshipTypes,
     teiId,
-    ...passOnProps
-}: Props) => {
-    const { data: relationshipTypes } = useRelationshipTypes(cachedRelationshipTypes);
+    trackedEntityTypeId,
+    programId,
+    addRelationshipRenderElement,
+    onLinkedRecordClick,
+    onOpenAddRelationship,
+    onCloseAddRelationship,
+}: WidgetTrackedEntityRelationshipProps) => {
     const { data: relationships, isError } = useRelationships(teiId, RelationshipSearchEntities.TRACKED_ENTITY);
 
-    const { relationships: linkedEntityRelationships } = useLinkedEntityGroups(teiId, relationshipTypes, relationships);
-
     if (isError) {
         return (
             <div>
@@ -28,10 +29,23 @@ export const WidgetTrackedEntityRelationship = ({
     return (
         <RelationshipsWidget
             title={i18n.t("TEI's Relationships")}
-            relationshipTypes={relationshipTypes}
-            relationships={linkedEntityRelationships}
-            teiId={teiId}
-            {...passOnProps}
-        />
+            relationships={relationships}
+            cachedRelationshipTypes={cachedRelationshipTypes}
+            sourceId={teiId}
+            onLinkedRecordClick={onLinkedRecordClick}
+        >
+            {
+                relationshipTypes => (
+                    <NewTrackedEntityRelationship
+                        renderElement={addRelationshipRenderElement}
+                        relationshipTypes={relationshipTypes}
+                        trackedEntityTypeId={trackedEntityTypeId}
+                        programId={programId}
+                        onOpenAddRelationship={onOpenAddRelationship}
+                        onCloseAddRelationship={onCloseAddRelationship}
+                    />
+                )
+            }
+        </RelationshipsWidget>
     );
 };

src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.types.js

@@ -1,13 +1,14 @@
 // @flow
-import type { RelationshipTypes, UrlParameters } from '../common/Types';
+import type { RelationshipTypes } from '../common/Types';
+import type { LinkedRecordClick } from '../common/RelationshipsWidget';
 
-export type Props = {|
+export type WidgetTrackedEntityRelationshipProps = {|
     trackedEntityTypeId: string,
     teiId: string,
     programId: string,
     addRelationshipRenderElement: HTMLElement,
-    onLinkedRecordClick: (parameters: UrlParameters) => void,
+    onLinkedRecordClick: LinkedRecordClick,
     onOpenAddRelationship?: () => void,
     onCloseAddRelationship?: () => void,
     relationshipTypes?: RelationshipTypes,
-|}
+|};

src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/index.js

@@ -1,2 +1,10 @@
 // @flow
 export { WidgetTrackedEntityRelationship } from './WidgetTrackedEntityRelationship.component';
+export type { WidgetTrackedEntityRelationshipProps } from './WidgetTrackedEntityRelationship.types';
+export type { RelationshipTypes } from '../common/Types';
+export type {
+    LinkedRecordClick,
+    NavigationArgs,
+    NavigationArgsEvent,
+    NavigationArgsTrackedEntity,
+} from '../common/RelationshipsWidget';