feat: [DHIS2-21266] Integrate react Markdown lib

cypress/e2e/Markdown/Markdown.feature

@@ -0,0 +1,53 @@
+Feature: Feedback widget renders markdown content from program rules
+
+  Scenario: Feedback widget is visible on the enrollment dashboard
+    Given user lands on the enrollment edit event page by having typed #/enrollmentEventEdit?eventId=EKlWxFF9NPb
+    Then the feedback widget should be visible
+
+  Scenario: Feedback widget list contains 4 items
+    Given user lands on the enrollment edit event page by having typed #/enrollmentEventEdit?eventId=EKlWxFF9NPb
+    Then the list should contain 4 items
+
+  Scenario Outline: Headers feedback item renders markdown correctly
+    Given user lands on the enrollment edit event page by having typed #/enrollmentEventEdit?eventId=EKlWxFF9NPb
+    Then the <n> list item should contain p with text "Headers"
+    And the <n> list item should contain h1 with text "Header 1"
+    And the <n> list item should contain h2 with text "Header 2"
+    And the <n> list item should contain h3 with text "Header 3"
+    And the <n> list item should contain h4 with text "Header 4"
+    And the <n> list item should contain h5 with text "Header 5"
+    And the <n> list item should contain h6 with text "Header 6"
+
+    @v>=43
+    Examples:
+      | n     |
+      | first |
+
+    @v<43
+    Examples:
+      | n      |
+      | second |
+
+  Scenario Outline: Italic heading and table feedback item renders correctly
+    Given user lands on the enrollment edit event page by having typed #/enrollmentEventEdit?eventId=EKlWxFF9NPb
+    Then the <n> list item h6 should contain italic text "Feedback"
+    And the <n> list item table should match:
+      | Column A  | Column B  |
+      | Content A | Content B |
+
+    @v>=43
+    Examples:
+      | n      |
+      | second |
+
+    @v<43
+    Examples:
+      | n     |
+      | first |
+
+  @v>=43
+  Scenario: Fourth feedback item renders score with color indicator correctly
+    Given user lands on the enrollment edit event page by having typed #/enrollmentEventEdit?eventId=EKlWxFF9NPb
+    Then the fourth list item left section should have h1 with text "1. Score 1"
+    And the fourth list item right section color indicator should be "rgb(57, 166, 45)"
+    And the fourth list item right section should have p with text "90%"

cypress/e2e/Markdown/Markdown.js

@@ -0,0 +1,77 @@
+import {Given, Then, defineStep as And} from '@badeball/cypress-cucumber-preprocessor';
+
+const LONG_TIMEOUT = { timeout: 120000 };
+
+const getFeedbackDiv = () =>
+    cy.get('[data-test="feedback-widget"]', LONG_TIMEOUT);
+
+// SHARED
+
+Given(/^user lands on the enrollment edit event page by having typed (.*)$/, (url) => {
+    cy.visit(url, LONG_TIMEOUT);
+    getFeedbackDiv().should('exist');
+});
+
+Then('the feedback widget should be visible', () => {
+    getFeedbackDiv().should('be.visible');
+});
+
+Then('the list should contain {int} items', (expectedCount) => {
+    getFeedbackDiv()
+        .find('[data-test="widget-contents"]', LONG_TIMEOUT)
+        .find('ul')
+        .find('li')
+        .should('have.length', expectedCount);
+});
+
+const getListItem = (n) =>
+    getFeedbackDiv()
+        .find('[data-test="widget-contents"]', LONG_TIMEOUT)
+        .find('ul li')
+        .eq(n - 1);
+
+const ordinalToIndex = { first: 1, second: 2, third: 3, fourth: 4 };
+
+And('the {word} list item should contain {word} with text {string}', (ordinal, tag, text) => {
+    getListItem(ordinalToIndex[ordinal])
+        .find(tag)
+        .should('have.text', text);
+});
+
+Then('the {word} list item {word} should contain italic text {string}', (ordinal, tag, text) => {
+    getListItem(ordinalToIndex[ordinal])
+        .find(tag)
+        .find('em')
+        .should('have.text', text);
+});
+
+And('the {word} list item table should match:', (ordinal, dataTable) => {
+    const [headerRow, ...bodyRows] = dataTable.raw();
+
+    getListItem(ordinalToIndex[ordinal]).find('table').within(() => {
+        cy.get('thead th').each(($th, i) => {
+            expect($th.text()).to.equal(headerRow[i]);
+        });
+
+        cy.get('tbody tr').each(($tr, rowIndex) => {
+            bodyRows[rowIndex].forEach((cell, colIndex) => {
+                expect($tr.find('td').eq(colIndex).text()).to.equal(cell);
+            });
+        });
+    });
+});
+
+
+// FOURTH FEEDBACK ELEMENT
+
+Then('the fourth list item left section should have {word} with text {string}', (tag, text) => {
+    getListItem(4).find('> div > div').first().find(tag).should('have.text', text);
+});
+
+And('the fourth list item right section color indicator should be {string}', (color) => {
+    getListItem(4).find('> div > div').last().find('span').should('have.css', 'background-color', color);
+});
+
+And('the fourth list item right section should have {word} with text {string}', (tag, text) => {
+    getListItem(4).find('> div > div').last().find(tag).should('have.text', text);
+});

docs/user/using-the-capture-app.md

@@ -1138,6 +1138,9 @@ Click the **Delete ${tracked entity type}** button to delete the tracked entity.
 On the enrollment dashboard, the feedback widget displays text and values that are triggered by certain conditions. 
 If the current dashboard triggers some rules set up in the program, the text or values will be automatically displayed.
 
+The displayed text and values support Markdown formatting. 
+![](resources/images/enrollment-edit-event-feedback-widget.png)
+
 #### Empty state
 
 If there isn't any feedback for the current dashboard, the widget shows a short _empty_ message.

package.json

@@ -45,6 +45,7 @@
         "react-leaflet": "^2.8.0",
         "react-leaflet-draw": "0.19.0",
         "react-leaflet-search-unpolyfilled": "^0.1.0",
+        "react-markdown": "^10.1.0",
         "react-popper": "^2.2.4",
         "react-redux": "^9.3.0",
         "react-router-dom": "^5.3.0",
@@ -57,6 +58,7 @@
         "redux-logger": "^3.0.6",
         "redux-observable": "^2.0.0",
         "regenerator-runtime": "^0.14.1",
+        "remark-gfm": "^4.0.1",
         "reselect": "^4.1.7",
         "rxjs": "^7.8.2",
         "typeface-roboto": "^1.1.13",

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

@@ -2,16 +2,18 @@ export type FilteredFeedbackText = {
     id: string;
     message: string;
     color?: string;
+    legendSetId?: string;
 }
 
 export type FilteredFeedbackKeyValue = {
     id: string;
     key: string;
     value: string;
     color?: string;
+    legendSetId?: string;
 }
 
-export type FeedbackWidgetData = string | FilteredFeedbackText | FilteredFeedbackKeyValue;
+export type FeedbackWidgetData = FilteredFeedbackText | FilteredFeedbackKeyValue;
 
 export type FeedbackInputProps = {
     widgetEffects?: Record<string, unknown>;

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

@@ -0,0 +1,169 @@
+import React, { ComponentType, memo } from 'react';
+import { spacersNum, colors } from '@dhis2/ui';
+import Markdown from 'react-markdown';
+import { withStyles, type WithStyles } from 'capture-core-utils/styles';
+import remarkGfm from 'remark-gfm';
+import { MarkdownWrapperProps } from './MarkdownWrapper.types';
+
+
+const styles = {
+    container: {
+        width: '100%',
+        margin: '8px 0px',
+        display: 'flex',
+        gap: '1rem',
+    },
+    title: {
+        flex: '1 0 50%',
+        minWidth: '50%',
+    },
+    content: {
+        flex: '0 1 auto',
+        maxWidth: '50%',
+        minWidth: '0',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    },
+    legend: {
+        height: '12px',
+        width: '12px',
+        minWidth: '12px',
+        borderRadius: '2px',
+    },
+    markdown: {
+        fontSize: '14px',
+        lineHeight: 1.45,
+        color: colors.grey900,
+        '&:first-child': {
+            marginTop: 0,
+        },
+        '& p': {
+            margin: `${spacersNum.dp8}px 0 0 0`,
+            display: 'inline-block',
+        },
+        '& p:first-child': {
+            marginTop: 0,
+        },
+        '& h1': {
+            fontSize: '18px',
+            fontWeight: 700,
+            lineHeight: 1.25,
+            margin: `${spacersNum.dp12}px 0 ${spacersNum.dp8}px 0`,
+            paddingBottom: spacersNum.dp4,
+            borderBottom: `2px solid ${colors.grey400}`,
+            color: colors.grey900,
+        },
+        '& h2': {
+            fontSize: '16px',
+            fontWeight: 700,
+            margin: `${spacersNum.dp12}px 0 ${spacersNum.dp4}px 0`,
+            color: colors.grey900,
+        },
+        '& h3': {
+            fontSize: '15px',
+            fontWeight: 600,
+            margin: `${spacersNum.dp8}px 0 ${spacersNum.dp4}px 0`,
+            color: colors.grey900,
+        },
+        '& h4, & h5, & h6': {
+            fontSize: '14px',
+            fontWeight: 600,
+            margin: `${spacersNum.dp8}px 0 ${spacersNum.dp4}px 0`,
+            color: colors.grey900,
+        },
+        '& strong': {
+            fontWeight: 700,
+            color: colors.grey900,
+        },
+        '& em': {
+            fontStyle: 'italic',
+            color: colors.grey900,
+        },
+        '& a': {
+            color: colors.blue800,
+            textDecoration: 'underline',
+        },
+        '& ul, & ol': {
+            margin: `${spacersNum.dp8}px 0 0 0`,
+            paddingInlineStart: spacersNum.dp16,
+        },
+        '& li': {
+            marginTop: spacersNum.dp4,
+        },
+        '& code': {
+            fontFamily: 'Menlo, Monaco, Consolas, monospace',
+            fontSize: '12px',
+            background: colors.grey200,
+            padding: `1px ${spacersNum.dp4}px`,
+            borderRadius: '3px',
+        },
+        '& pre': {
+            margin: `${spacersNum.dp8}px 0 0 0`,
+            padding: spacersNum.dp8,
+            background: colors.grey200,
+            borderRadius: '4px',
+            overflow: 'auto',
+            fontSize: '12px',
+        },
+        '& pre code': {
+            background: 'transparent',
+            padding: 0,
+        },
+        '& blockquote': {
+            margin: `${spacersNum.dp8}px 0 0 0`,
+            paddingInlineStart: spacersNum.dp12,
+            borderInlineStart: `4px solid ${colors.grey400}`,
+            color: colors.grey800,
+            fontStyle: 'italic',
+        },
+        '& hr': {
+            margin: `${spacersNum.dp12}px 0`,
+            border: 'none',
+            borderTop: `1px solid ${colors.grey400}`,
+        },
+        '& table': {
+            borderCollapse: 'collapse',
+            width: '100%',
+            margin: `${spacersNum.dp8}px 0`,
+            fontSize: '13px',
+            lineHeight: '18px',
+        },
+        '& th, & td': {
+            padding: `${spacersNum.dp4}px ${spacersNum.dp8}px`,
+            border: `1px solid ${colors.grey300}`,
+            textAlign: 'left',
+        },
+        '& th': {
+            fontWeight: 600,
+            color: colors.grey800,
+            whiteSpace: 'nowrap',
+        },
+        '& td': {
+            color: colors.grey900,
+        },
+    },
+};
+const REMARK_PLUGINS = [remarkGfm];
+
+type Props = MarkdownWrapperProps & WithStyles<typeof styles>;
+const MarkdownWrapperComponent = memo(({ title, content, color, classes }:Props) => (
+    <div className={classes.container} >
+        <div className={classes.title}>
+            <div className={classes.markdown}>
+                <Markdown remarkPlugins={REMARK_PLUGINS}>{title}</Markdown>
+            </div>
+        </div>
+
+        { content &&
+            <div className={classes.content}>
+                { color && <span className={classes.legend} style={{ backgroundColor: color }} /> }
+                <div className={classes.markdown}>
+                    <Markdown remarkPlugins={REMARK_PLUGINS}>{content}</Markdown>
+                </div>
+            </div>
+        }
+    </div>
+));
+
+export const MarkdownWrapper = withStyles(styles)(MarkdownWrapperComponent) as ComponentType<MarkdownWrapperProps>;

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

@@ -0,0 +1,5 @@
+export type MarkdownWrapperProps = {
+  title: string;
+  content?: string;
+  color?: string;
+}

src/core_modules/capture-core/components/WidgetFeedback/WidgetFeedbackContent/MarkdownWrapper/index.ts

@@ -0,0 +1 @@
+export { MarkdownWrapper } from './MarkdownWrapper';