feat: [DHIS2-18739] Update feedback and indicator widgets in the Registration page

i18n/en.pot

@@ -407,6 +407,12 @@ msgstr "Some operations are still runnning. Please wait.."
 msgid "Operations running"
 msgstr "Operations running"
 
+msgid "No feedback for this enrollment yet"
+msgstr "No feedback for this enrollment yet"
+
+msgid "No indicator output for this enrollment yet"
+msgstr "No indicator output for this enrollment yet"
+
 msgid ""
 "This event has unsaved changes. Leaving this page without saving will lose "
 "these changes. Are you sure you want to discard unsaved changes?"
@@ -621,12 +627,6 @@ msgstr "Notice"
 msgid "Close the notice"
 msgstr "Close the notice"
 
-msgid "No feedback for this enrollment yet"
-msgstr "No feedback for this enrollment yet"
-
-msgid "No indicator output for this enrollment yet"
-msgstr "No indicator output for this enrollment yet"
-
 msgid "Quick actions"
 msgstr "Quick actions"
 

src/core_modules/capture-core/components/DataEntry/dataEntryOutput/withFeedbackOutput.tsx

@@ -3,13 +3,14 @@ import { connect } from 'react-redux';
 import i18n from '@dhis2/d2-i18n';
 import { getDataEntryKey } from '../common/getDataEntryKey';
 import { withDataEntryOutput } from './withDataEntryOutput';
-import { WidgetFeedback } from '../../WidgetFeedback';
-import type { FilteredText, FilteredKeyValue } from '../../WidgetFeedback';
+import {
+    WidgetFeedback,
+    type FilteredFeedbackText, type FilteredFeedbackKeyValue } from '../../WidgetFeedback';
 
 type Props = {
     feedbackItems: {
-        displayTexts: Array<FilteredText>;
-        displayKeyValuePairs: Array<FilteredKeyValue>;
+        displayTexts: Array<FilteredFeedbackText>;
+        displayKeyValuePairs: Array<FilteredFeedbackKeyValue>;
     };
 };
 
@@ -28,7 +29,7 @@ const getFeedbackOutput = () =>
             return (
                 <div>
                     {hasItems &&
-                        <WidgetFeedback feedback={feedback} emptyText={i18n.t('No feedback for this event yet')} />
+                        <WidgetFeedback feedback={feedback} feedbackEmptyText={i18n.t('No feedback for this event yet')} />
                     }
                 </div>
             );

src/core_modules/capture-core/components/DataEntry/dataEntryOutput/withIndicatorOutput.tsx

@@ -3,13 +3,16 @@ import { connect } from 'react-redux';
 import i18n from '@dhis2/d2-i18n';
 import { getDataEntryKey } from '../common/getDataEntryKey';
 import { withDataEntryOutput } from './withDataEntryOutput';
-import { WidgetIndicator } from '../../WidgetIndicator';
-import type { FilteredText, FilteredKeyValue } from '../../WidgetFeedback';
+import {
+    WidgetIndicator,
+    type FilteredIndicatorText,
+    type FilteredIndicatorKeyValue,
+} from '../../WidgetIndicator';
 
 type Props = {
     indicatorItems: {
-        displayTexts: Array<FilteredText>;
-        displayKeyValuePairs: Array<FilteredKeyValue>;
+        displayTexts: Array<FilteredIndicatorText>;
+        displayKeyValuePairs: Array<FilteredIndicatorKeyValue>;
     };
 };
 
@@ -30,7 +33,7 @@ const getIndicatorOutput = () =>
                     {hasItems &&
                         <WidgetIndicator
                             indicators={indicators}
-                            emptyText={i18n.t('No indicator output for this event yet')}
+                            indicatorEmptyText={i18n.t('No indicator output for this event yet')}
                         />
                     }
                 </div>

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

@@ -4,8 +4,8 @@ import { spacers } from '@dhis2/ui';
 import { StickyOnScroll } from '../Sticky/StickyOnScroll.component';
 import { ErrorsSection } from './ErrorsSection/ErrorsSection.container';
 import { WarningsSection } from './WarningsSection/WarningsSection.container';
-import { FeedbacksSection } from '../Pages/ViewEvent/RightColumn/FeedbacksSection/FeedbacksSection.container';
-import { IndicatorsSection } from '../Pages/ViewEvent/RightColumn/IndicatorsSection/IndicatorsSection.container';
+import { WidgetFeedback } from '../WidgetFeedback';
+import { WidgetIndicator } from '../WidgetIndicator';
 
 type OwnProps = {
     onLink: (teiId: string, values: Record<string, unknown>) => void;
@@ -28,19 +28,15 @@ type Props = OwnProps & WithStyles<typeof getStyles>;
 const componentContainers = [
     { id: 'ErrorsSection', Component: ErrorsSection },
     { id: 'WarningsSection', Component: WarningsSection },
-    { id: 'FeedbacksSection', Component: FeedbacksSection },
-    { id: 'IndicatorsSection', Component: IndicatorsSection },
+    { id: 'FeedbacksSection', Component: WidgetFeedback },
+    { id: 'IndicatorsSection', Component: WidgetIndicator },
 ];
 
 class DataEntryWidgetOutputPlain extends React.Component<Props> {
-    renderComponent = (container: {id: string, Component: React.ComponentType<any> }, props: Record<string, any>) => {
-        const { renderCardActions, ...otherProps } = props;
-
-        const passOnProps = container.id === 'WarningsSection' ? props : otherProps;
-        return (
-            <container.Component key={container.id} {...passOnProps} />
-        );
-    }
+    renderComponent = (
+        container: { id: string, Component: React.ComponentType<any> },
+        props: Record<string, any>,
+    ) => <container.Component key={container.id} {...props} />
 
     render() {
         const { classes, ...passOnProps } = this.props;

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

@@ -1,11 +1,10 @@
 import { connect } from 'react-redux';
 import React, { type ComponentType } from 'react';
+import i18n from '@dhis2/d2-i18n';
 import { DataEntryWidgetOutputComponent } from './DataEntryWidgetOutput.component';
 import { getDataEntryKey } from '../DataEntry/common/getDataEntryKey';
-import type { RenderCustomCardActions } from '../CardList/CardList.types';
 
 type OwnProps = {
-    renderCardActions?: RenderCustomCardActions;
     dataEntryId: string;
     selectedScopeId: string;
 };
@@ -18,6 +17,8 @@ const mapStateToProps = (state: any, { dataEntryId }: { dataEntryId: string }) =
     return {
         ready,
         dataEntryKey,
+        feedbackEmptyText: i18n.t('No feedback for this enrollment yet'),
+        indicatorEmptyText: i18n.t('No indicator output for this enrollment yet'),
     };
 };
 

src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegisterTei.component.tsx

@@ -142,9 +142,6 @@ const RegisterTeiPlain = ({
             <DataEntryWidgetOutput
                 dataEntryId={dataEntryId}
                 selectedScopeId={newRelationshipProgramId}
-                renderCardActions={({ item }: { item: any }) =>
-                    <CardListButton teiId={item.id} values={item.values} handleOnClick={onLink} />
-                }
             />
         </div>
     );

src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/LayoutComponentConfig/LayoutComponentConfig.ts

@@ -8,8 +8,6 @@ import type { Props as WidgetErrorProps } from '../../../../../WidgetErrorAndWar
 import { EnrollmentQuickActions } from '../../../../Enrollment/EnrollmentPageDefault/EnrollmentQuickActions';
 import { WidgetWarning } from '../../../../../WidgetErrorAndWarning/WidgetWarning';
 import type { Props as WidgetWarningProps } from '../../../../../WidgetErrorAndWarning/WidgetWarning/WidgetWarning.types';
-import { WidgetFeedback } from '../../../../../WidgetFeedback';
-import { WidgetIndicator } from '../../../../../WidgetIndicator';
 import { WidgetEnrollmentNote } from '../../../../../WidgetEnrollmentNote';
 import { WidgetProfile } from '../../../../../WidgetProfile';
 import type { Props as WidgetProfileProps } from '../../../../../WidgetProfile/widgetProfile.types';
@@ -23,12 +21,16 @@ import { NewEventWorkspaceWrapper } from '../../../NewEventWorkspaceWrapper';
 import { WidgetEventEditWrapper } from '../../../WidgetEventEditWrapper';
 import { WidgetEventNote } from '../../../../../WidgetEventNote';
 import { WidgetAssignee } from '../../../../../WidgetAssignee';
-import type {
-    IndicatorProps,
-    Props as WidgetFeedbackProps,
-    InputFeedbackProps,
-    InputIndicatorProps,
-} from '../../../../../WidgetFeedback/WidgetFeedback.types';
+import {
+    WidgetFeedback,
+    type FeedbackProps,
+    type FeedbackInputProps,
+} from '../../../../../WidgetFeedback';
+import {
+    WidgetIndicator,
+    type IndicatorProps,
+    type IndicatorInputProps,
+} from '../../../../../WidgetIndicator';
 import { WidgetTwoEventWorkspace } from '../../../../../WidgetTwoEventWorkspace';
 import { WidgetRelatedStages } from '../../../../../WidgetRelatedStages';
 import {
@@ -110,18 +112,18 @@ export const WarningWidget: WidgetConfig = {
 export const FeedbackWidget: WidgetConfig = {
     Component: WidgetFeedback,
     shouldHideWidget: ({ hideWidgets }: any) => hideWidgets?.feedback,
-    getProps: ({ widgetEffects, feedbackEmptyText }: InputFeedbackProps): WidgetFeedbackProps => ({
+    getProps: ({ widgetEffects, feedbackEmptyText }: FeedbackInputProps): FeedbackProps => ({
         feedback: widgetEffects?.feedbacks as any,
-        emptyText: feedbackEmptyText,
+        feedbackEmptyText,
     }),
 };
 
 export const IndicatorWidget: WidgetConfig = {
     Component: WidgetIndicator,
     shouldHideWidget: ({ hideWidgets }: any) => hideWidgets?.indicator,
-    getProps: ({ widgetEffects, indicatorEmptyText }: InputIndicatorProps): IndicatorProps => ({
+    getProps: ({ widgetEffects, indicatorEmptyText }: IndicatorInputProps): IndicatorProps => ({
         indicators: widgetEffects?.indicators as any,
-        emptyText: indicatorEmptyText,
+        indicatorEmptyText,
     }),
 };
 

src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/enrollmentOverviewDomain.types.ts

@@ -1,14 +1,15 @@
 import type { Message } from '../../../WidgetErrorAndWarning/content/WidgetErrorAndWarningContent.types';
-import type { WidgetData } from '../../../WidgetFeedback/WidgetFeedback.types';
+import type { FeedbackWidgetData } from '../../../WidgetFeedback';
+import type { IndicatorWidgetData } from '../../../WidgetIndicator';
 
 export type HideWidgets = {
     feedback: boolean;
     indicator: boolean;
 };
 
 export type WidgetEffects = {
-    feedbacks?: Array<WidgetData> | null;
+    feedbacks?: Array<FeedbackWidgetData> | null;
     warnings?: Array<Message> | null;
     errors?: Array<Message> | null;
-    indicators?: Array<WidgetData> | null;
+    indicators?: Array<IndicatorWidgetData> | null;
 };

src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegisterTei.component.tsx

@@ -120,9 +120,6 @@ const RegisterTeiPlain = ({
             <DataEntryWidgetOutput
                 dataEntryId={dataEntryId}
                 selectedScopeId={selectedScopeId}
-                renderCardActions={({ item }) =>
-                    <CardListButton teiId={item.id} values={item.values} handleOnClick={onLink} />
-                }
             />
         </div>
     );

src/core_modules/capture-core/components/WidgetFeedback/WidgetFeedback.component.tsx

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { Widget } from '../Widget';
 import { WidgetFeedbackContent } from './WidgetFeedbackContent/WidgetFeedbackContent';
-import type { Props } from './WidgetFeedback.types';
+import type { FeedbackProps } from './WidgetFeedback.types';
 
-export const WidgetFeedback = ({ feedback, emptyText }: Props) => {
+export const WidgetFeedbackComponent = ({ feedback, feedbackEmptyText }: FeedbackProps) => {
     const [openStatus, setOpenStatus] = useState(true);
 
     return (
@@ -18,8 +18,8 @@ export const WidgetFeedback = ({ feedback, emptyText }: Props) => {
                 open={openStatus}
             >
                 <WidgetFeedbackContent
-                    widgetData={feedback}
-                    emptyText={emptyText}
+                    feedback={feedback}
+                    feedbackEmptyText={feedbackEmptyText}
                 />
             </Widget>
         </div>

src/core_modules/capture-core/components/WidgetFeedback/WidgetFeedback.container.ts

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { WidgetFeedbackComponent } from './WidgetFeedback.component';
+import { FeedbackProps } from './WidgetFeedback.types';
+
+const mapStateToProps = (state: any, props: FeedbackProps) => ({
+    feedback: props.feedback || (props.dataEntryKey ? [
+        ...(state.rulesEffectsFeedback[props.dataEntryKey]?.displayTexts || []),
+        ...(state.rulesEffectsFeedback[props.dataEntryKey]?.displayKeyValuePairs || []),
+    ] : []),
+    feedbackEmptyText: props.feedbackEmptyText,
+});
+
+export const WidgetFeedback = connect(mapStateToProps, () => ({}))(WidgetFeedbackComponent);
+

src/core_modules/capture-core/components/WidgetFeedback/WidgetFeedback.types.ts

@@ -1,39 +1,25 @@
-export type FilteredText = {
+export type FilteredFeedbackText = {
     id: string;
     message: string;
     color?: string;
 }
 
-export type FilteredKeyValue = {
+export type FilteredFeedbackKeyValue = {
     id: string;
     key: string;
     value: string;
     color?: string;
 }
 
-export type WidgetData = string | FilteredText | FilteredKeyValue;
+export type FeedbackWidgetData = string | FilteredFeedbackText | FilteredFeedbackKeyValue;
 
-export type ContentType = {
-    widgetData?: Array<WidgetData>;
-    emptyText: string;
-};
-
-export type InputFeedbackProps = {
+export type FeedbackInputProps = {
     widgetEffects?: Record<string, unknown>;
     feedbackEmptyText: string;
 }
 
-export type Props = {
-    feedback?: Array<string | FilteredText | FilteredKeyValue>;
-    emptyText: string;
-}
-
-export type IndicatorProps = {
-    indicators?: Array<string | FilteredText | FilteredKeyValue>;
-    emptyText: string;
-}
-
-export type InputIndicatorProps = {
-    widgetEffects?: Record<string, unknown>;
-    indicatorEmptyText: string;
+export type FeedbackProps = {
+    feedback?: Array<FeedbackWidgetData>;
+    feedbackEmptyText: string;
+    dataEntryKey?: string;
 }

src/core_modules/capture-core/components/WidgetFeedback/WidgetFeedbackContent/WidgetFeedbackContent.tsx

@@ -1,7 +1,12 @@
 import React, { type ComponentType } from 'react';
 import { spacersNum, colors } from '@dhis2/ui';
 import { withStyles, type WithStyles } from '@material-ui/core';
-import type { FilteredKeyValue, FilteredText, ContentType, WidgetData } from '../WidgetFeedback.types';
+import type {
+    FilteredFeedbackKeyValue,
+    FeedbackWidgetData,
+    FilteredFeedbackText,
+    FeedbackProps,
+} from '../WidgetFeedback.types';
 
 const styles = {
     container: {
@@ -28,21 +33,21 @@ const styles = {
     },
 };
 
-type Props = ContentType & WithStyles<typeof styles>;
+type Props = FeedbackProps & WithStyles<typeof styles>;
 
-const WidgetFeedbackContentComponent = ({ widgetData, emptyText, classes }: Props) => {
-    if (!widgetData?.length) {
+const WidgetFeedbackContentComponent = ({ feedback, feedbackEmptyText, classes }: Props) => {
+    if (!feedback?.length) {
         return (
             <div
                 data-test="widget-content"
                 className={classes.container}
             >
-                <p className={classes.noFeedbackText}>{emptyText}</p>
+                <p className={classes.noFeedbackText}>{feedbackEmptyText}</p>
             </div>
         );
     }
 
-    const renderTextObject = (item: FilteredText) => (
+    const renderTextObject = (item: FilteredFeedbackText) => (
         <li
             className={classes.listItem}
             key={item.id}
@@ -51,7 +56,7 @@ const WidgetFeedbackContentComponent = ({ widgetData, emptyText, classes }: Prop
         </li>
     );
 
-    const renderKeyValue = (item: FilteredKeyValue) => (
+    const renderKeyValue = (item: FilteredFeedbackKeyValue) => (
         <li
             key={item.id}
             className={classes.listItem}
@@ -75,12 +80,12 @@ const WidgetFeedbackContentComponent = ({ widgetData, emptyText, classes }: Prop
             className={classes.container}
         >
             <ul className={classes.unorderedList}>
-                {widgetData.map((rule: WidgetData, index: number) => {
+                {feedback.map((rule: FeedbackWidgetData, index: number) => {
                     if (typeof rule === 'object') {
                         if ('key' in rule || 'value' in rule) {
-                            return renderKeyValue(rule as FilteredKeyValue);
+                            return renderKeyValue(rule as FilteredFeedbackKeyValue);
                         } else if ('message' in rule) {
-                            return renderTextObject(rule as FilteredText);
+                            return renderTextObject(rule as FilteredFeedbackText);
                         }
                     } else if (typeof rule === 'string') {
                         return renderString(rule, index);
@@ -93,4 +98,4 @@ const WidgetFeedbackContentComponent = ({ widgetData, emptyText, classes }: Prop
 };
 
 export const WidgetFeedbackContent =
-    withStyles(styles)(WidgetFeedbackContentComponent) as ComponentType<ContentType>;
+    withStyles(styles)(WidgetFeedbackContentComponent) as ComponentType<FeedbackProps>;