feat: DHIS2-10321 adds View Dashboard button on duplicates modal (#1496)

* feat: adds button

* chore: space

i18n/en.pot

@@ -709,6 +709,9 @@ msgstr ""
 msgid "Save as new"
 msgstr ""
 
+msgid "View dashboard"
+msgstr ""
+
 msgid "Create for"
 msgstr ""
 
@@ -802,9 +805,6 @@ msgstr ""
 msgid "Choose a type to start searching"
 msgstr ""
 
-msgid "View dashboard"
-msgstr ""
-
 msgid "View active enrollment"
 msgstr ""
 

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

@@ -1,18 +1,19 @@
 // @flow
 import React from 'react';
-import type { ComponentType, Element } from 'react';
+import type { ComponentType } from 'react';
 import { withStyles } from '@material-ui/core';
 import { CardListItem } from './CardListItem.component';
 import { makeElementsContainerSelector } from './CardList.selectors';
-import type { CardDataElementsInformation, SearchResultItem } from '../Pages/Search/SearchResults/SearchResults.types';
+import type { CardDataElementsInformation } from '../Pages/Search/SearchResults/SearchResults.types';
+import type { ListItem, RenderCustomCardActions } from './CardList.types';
 
 type OwnProps = $ReadOnly<{|
     dataElements: CardDataElementsInformation,
-    items: Array<SearchResultItem>,
+    items: Array<ListItem>,
     currentProgramId?: string,
     currentSearchScopeName?: string,
     noItemsText?: string,
-    getCustomItemBottomElements?: (itemProps: Object) => Element<any>,
+    renderCustomCardActions?: RenderCustomCardActions,
 |}>
 
 const getStyles = (theme: Theme) => ({
@@ -22,10 +23,11 @@ const getStyles = (theme: Theme) => ({
     },
 });
 
+
 const CardListIndex = ({
     classes,
     items,
-    getCustomItemBottomElements,
+    renderCustomCardActions,
     dataElements,
     noItemsText,
     currentProgramId,
@@ -47,7 +49,7 @@ const CardListIndex = ({
                             item={item}
                             currentSearchScopeName={currentSearchScopeName}
                             currentProgramId={currentProgramId}
-                            getCustomBottomElements={getCustomItemBottomElements}
+                            renderCustomCardActions={renderCustomCardActions}
                             profileImageDataElement={profileImageDataElement}
                             dataElements={dataElementsExceptProfileImage}
                         />

src/core_modules/capture-core/components/CardList/CardList.types.js

@@ -0,0 +1,36 @@
+// @flow
+import { type Node } from 'react';
+import { typeof enrollmentTypes } from './CardList.constants';
+
+export type Tei = $ReadOnly<{
+  created: string,
+  orgUnit: string,
+  trackedEntityInstance: string,
+  lastUpdated: string,
+  trackedEntityType: string,
+  deleted: boolean,
+  featureType: string,
+  programOwners: Array<any>,
+  enrollments: Array<any>,
+  relationships: ?Array<any>,
+  orgUnit: string,
+  attributes: Array<{
+    lastUpdated: string,
+    code: string,
+    displayName: string,
+    created: string,
+    valueType: string,
+    attribute: string,
+    value: string
+  }>
+}>
+
+export type ListItem = {|
+  +id: string,
+  +values: {
+    [elementId: string]: any,
+  },
+  +tei: Tei,
+|}
+
+export type RenderCustomCardActions = ({item: ListItem, programName?: string, enrollmentType: $Keys<enrollmentTypes>}) => Node

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

@@ -2,28 +2,33 @@
 import i18n from '@dhis2/d2-i18n';
 import React from 'react';
 import moment from 'moment';
-import type { ComponentType, Element } from 'react';
+import type { ComponentType } from 'react';
 import { Avatar, Grid, withStyles } from '@material-ui/core';
 import DoneIcon from '@material-ui/icons/Done';
 import { colors, Tag } from '@dhis2/ui';
 import type {
     CardDataElementsInformation,
     CardProfileImageElementInformation,
-    SearchResultItem,
 } from '../Pages/Search/SearchResults/SearchResults.types';
-import { availableCardListButtonState, enrollmentTypes } from './CardList.constants';
+import { enrollmentTypes } from './CardList.constants';
 import { ListEntry } from './ListEntry.component';
 import { dataElementTypes } from '../../metaData';
+import type { ListItem, RenderCustomCardActions } from './CardList.types';
 
 type OwnProps = $ReadOnly<{|
-    item: SearchResultItem,
+    item: ListItem,
     currentSearchScopeName?: string,
     currentProgramId?: string,
-    getCustomBottomElements?: (props: Object) => Element<any>,
+    renderCustomCardActions?: RenderCustomCardActions,
     profileImageDataElement: ?CardProfileImageElementInformation,
     dataElements: CardDataElementsInformation,
 |}>;
 
+type Props = $ReadOnly<{|
+    ...OwnProps,
+    ...CssClasses
+|}>;
+
 const getStyles = (theme: Theme) => ({
     itemContainer: {
         maxWidth: theme.typography.pxToRem(600),
@@ -58,22 +63,11 @@ const getStyles = (theme: Theme) => ({
         height: theme.typography.pxToRem(44),
         marginRight: theme.typography.pxToRem(8),
     },
+    buttonMargin: {
+        marginTop: theme.typography.pxToRem(8),
+    },
 });
 
-const deriveNavigationButtonState =
-  (type): $Keys<typeof availableCardListButtonState> => {
-      switch (type) {
-      case enrollmentTypes.ACTIVE:
-          return availableCardListButtonState.SHOW_VIEW_ACTIVE_ENROLLMENT_BUTTON;
-      case enrollmentTypes.CANCELLED:
-      case enrollmentTypes.COMPLETED:
-          return availableCardListButtonState.SHOW_RE_ENROLLMENT_BUTTON;
-      default:
-          return availableCardListButtonState.DONT_SHOW_BUTTON;
-      }
-  };
-
-
 const deriveEnrollmentType =
   (enrollments, currentProgramId): $Keys<typeof enrollmentTypes> => {
       if (!currentProgramId) {
@@ -116,11 +110,11 @@ const CardListItemIndex = ({
     item,
     classes,
     profileImageDataElement,
-    getCustomBottomElements,
+    renderCustomCardActions,
     dataElements,
     currentProgramId,
     currentSearchScopeName,
-}: OwnProps & CssClasses) => {
+}: Props) => {
     const renderImageDataElement = (imageElement: CardProfileImageElementInformation) => {
         const imageValue = item.values[imageElement.id];
         return (
@@ -227,15 +221,23 @@ const CardListItemIndex = ({
             </div>
 
             {
-                getCustomBottomElements &&
-                getCustomBottomElements({
-                    item,
-                    navigationButtonsState: deriveNavigationButtonState(enrollmentType),
-                    programName: currentSearchScopeName,
-                })
+                renderCustomCardActions
+                &&
+                <div className={classes.buttonMargin}>
+                    {
+                        renderCustomCardActions({
+                            item,
+                            // we pass the programName because we have the case that the scope of the search
+                            // can be different that the scopeId from the url
+                            // this can happen for example when you are registering through the relationships
+                            programName: currentSearchScopeName,
+                            enrollmentType,
+                        })
+                    }
+                </div>
             }
         </div>
     );
 };
 
-export const CardListItem: ComponentType<OwnProps> = withStyles(getStyles)(CardListItemIndex);
+export const CardListItem: ComponentType<$Diff<Props, CssClasses>> = withStyles(getStyles)(CardListItemIndex);

src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/NewRelationshipWrapper/NewEventNewRelationshipWrapper.component.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import i18n from '@dhis2/d2-i18n';
 import Paper from '@material-ui/core/Paper';
 import withStyles from '@material-ui/core/styles/withStyles';
-import NewRelatonship from '../../../Pages/NewRelationship/NewRelationship.container';
+import NewRelationship from '../../../Pages/NewRelationship/NewRelationship.container';
 import ConfirmDialog from '../../../Dialogs/ConfirmDialog.component';
 import LinkButton from '../../../Buttons/LinkButton.component';
 
@@ -111,7 +111,7 @@ class NewEventNewRelationshipWrapper extends React.Component<Props, State> {
                 </div>
                 <Paper className={classes.newRelationshipPaper}>
                     {/* $FlowFixMe[cannot-spread-inexact] automated comment */}
-                    <NewRelatonship
+                    <NewRelationship
                         header={i18n.t('New event relationship')}
                         onGetUnsavedAttributeValues={this.onGetUnsavedAttributeValues}
                         {...passOnProps}

src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js

@@ -38,6 +38,7 @@ class ExistingTEIContents extends React.Component<Props> {
                     </DialogTitle>
                     <CardList
                         currentProgramId={programId}
+                        // $FlowFixMe
                         items={items}
                         dataElements={dataElements}
                     />

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

@@ -9,7 +9,7 @@ import FeedbacksSection from '../Pages/ViewEvent/RightColumn/FeedbacksSection/Fe
 import IndicatorsSection from '../Pages/ViewEvent/RightColumn/IndicatorsSection/IndicatorsSection.container';
 
 type Props = {
-    onLink: (teiId: string) => void,
+    onLink: (teiId: string, values: Object) => void,
     classes: {
         stickyOnScroll: string,
     }
@@ -34,7 +34,8 @@ const componentContainers = [
 
 class DataEntryWidgetOutputComponent extends React.Component<Props> {
     renderComponent = (container: {id: string, Component: React.ComponentType<any> }, props: Object) => {
-        const { onLink, ...otherProps } = props;
+        const { renderCardActions, ...otherProps } = props;
+
         const passOnProps = container.id === 'WarningsSection' ? props : otherProps;
         return (
             <container.Component key={container.id} {...passOnProps} />

src/core_modules/capture-core/components/DataEntryWidgetOutput/DataEntryWidgetOutput.container.js

@@ -3,9 +3,10 @@ import { connect } from 'react-redux';
 import React, { type ComponentType } from 'react';
 import GeneralOutputComponent from './DataEntryWidgetOutput.component';
 import getDataEntryKey from '../DataEntry/common/getDataEntryKey';
+import type { RenderCustomCardActions } from '../CardList/CardList.types';
 
 type OwnProps = {|
-    onLink?: (teiId: string) => void,
+    renderCardActions?: RenderCustomCardActions,
     dataEntryId: string,
     selectedScopeId: string,
 |}

src/core_modules/capture-core/components/DataEntryWidgetOutput/WarningsSection/SearchGroupDuplicate/SearchGroupDuplicate.component.js

@@ -4,9 +4,10 @@ import i18n from '@dhis2/d2-i18n';
 import { Button } from '../../../Buttons';
 import { WarningMessageCreator } from './WarningMessageCreator.component';
 import { PossibleDuplicatesDialog } from '../../../PossibleDuplicatesDialog';
+import type { RenderCustomCardActions } from '../../../CardList/CardList.types';
 
 type Props = {|
-    onLink: Function,
+    renderCardActions: RenderCustomCardActions,
     selectedScopeId: string,
     dataEntryId: string
 |};
@@ -44,7 +45,7 @@ export class SearchGroupDuplicate extends React.Component<Props, State> {
     }
 
     render() {
-        const { onLink, selectedScopeId, dataEntryId } = this.props;
+        const { selectedScopeId, dataEntryId, renderCardActions } = this.props;
         const { duplicatesReviewDialogOpen } = this.state;
 
         return (
@@ -59,8 +60,8 @@ export class SearchGroupDuplicate extends React.Component<Props, State> {
                     selectedScopeId={selectedScopeId}
                     open={duplicatesReviewDialogOpen}
                     onCancel={this.handleCloseReviewDialog}
-                    onLink={onLink}
                     extraActions={this.getHideButton()}
+                    renderCardActions={renderCardActions}
                 />
             </React.Fragment>
         );

src/core_modules/capture-core/components/DataEntryWidgetOutput/WarningsSection/warningsSection.selectors.js

@@ -8,17 +8,17 @@ const searchGroupCountSelector = (state, props) =>
     state.dataEntriesSearchGroupsResults[props.dataEntryKey].main &&
     state.dataEntriesSearchGroupsResults[props.dataEntryKey].main.count;
 
-const onLinkSelector = (state, props) => props.onLink;
+const renderCardActionsSelector = (state, props) => props.renderCardActions;
 const selectedScopeIdSelector = (_, props) => props.selectedScopeId;
 const dataEntryIdSelector = (_, props) => props.dataEntryId;
 
 // $FlowFixMe
 export const makeGetSearchGroupWarning = () => createSelector(
     searchGroupCountSelector,
-    onLinkSelector,
+    renderCardActionsSelector,
     selectedScopeIdSelector,
     dataEntryIdSelector,
-    (count: ?number, onLink: Function, selectedScopeId: string, dataEntryId: string) => {
+    (count: ?number, renderCardActions, selectedScopeId: string, dataEntryId: string) => {
         if (!count) {
             return null;
         }
@@ -28,7 +28,7 @@ export const makeGetSearchGroupWarning = () => createSelector(
                 <SearchGroupDuplicate
                     dataEntryId={dataEntryId}
                     selectedScopeId={selectedScopeId}
-                    onLink={onLink}
+                    renderCardActions={renderCardActions}
                 />
             ),
         };