refactor: [DHIS2-17750] replace material ui Card for Widget

i18n/en.pot

@@ -366,17 +366,11 @@ msgstr "Registered person"
 msgid "validation failed"
 msgstr "validation failed"
 
-msgid "Errors"
-msgstr "Errors"
-
-msgid "Feedback"
-msgstr "Feedback"
-
-msgid "Indicators"
-msgstr "Indicators"
+msgid "No feedback for this event yet"
+msgstr "No feedback for this event yet"
 
-msgid "Warnings"
-msgstr "Warnings"
+msgid "No indicator output for this event yet"
+msgstr "No indicator output for this event yet"
 
 msgid "Generate new event"
 msgstr "Generate new event"
@@ -789,12 +783,6 @@ msgstr "There was an error loading the page"
 msgid "Choose an organisation unit to start reporting"
 msgstr "Choose an organisation unit to start reporting"
 
-msgid "No feedback for this event yet"
-msgstr "No feedback for this event yet"
-
-msgid "No indicator output for this event yet"
-msgstr "No indicator output for this event yet"
-
 msgid "Program stage is invalid"
 msgstr "Program stage is invalid"
 
@@ -941,6 +929,18 @@ msgstr ""
 "Leaving this page will discard any selections you made for a new "
 "relationship"
 
+msgid "Errors"
+msgstr "Errors"
+
+msgid "Feedback"
+msgstr "Feedback"
+
+msgid "Indicators"
+msgstr "Indicators"
+
+msgid "Warnings"
+msgstr "Warnings"
+
 msgid "Show all events"
 msgstr "Show all events"
 

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

@@ -62,10 +62,15 @@ const styles = theme => ({
         position: 'relative',
         flexGrow: 1,
         width: theme.typography.pxToRem(300),
-        margin: theme.typography.pxToRem(10),
+        '& > div > div > *:not(:first-child)': {
+            marginTop: '10px',
+        },
         marginRight: 0,
     },
     verticalOutputsContainer: {
+        '& > *': {
+            marginTop: '10px',
+        },
         marginBottom: theme.typography.pxToRem(10),
     },
     dataEntrySectionContainer: {

src/core_modules/capture-core/components/DataEntry/dataEntryOutput/withDataEntryOutput.js

@@ -21,7 +21,7 @@ const getDataEntryOutput = (InnerComponent: React.ComponentType<any>, Output: Re
             return dataEntryOutputs ? [...dataEntryOutputs, output] : [output];
         };
         getOutput = (key: any) => (
-            <div style={{ marginTop: 10 }} key={key}>
+            <div key={key}>
                 {/* $FlowFixMe[cannot-spread-inexact] automated comment */}
                 <Output
                     key={key}

src/core_modules/capture-core/components/DataEntry/dataEntryOutput/withErrorOutput.js

@@ -1,66 +1,19 @@
 // @flow
 import * as React from 'react';
 import { connect } from 'react-redux';
-import Card from '@material-ui/core/Card';
-import { IconErrorFilled16 } from '@dhis2/ui';
-import { withStyles } from '@material-ui/core/styles';
-import i18n from '@dhis2/d2-i18n';
 import { getDataEntryKey } from '../common/getDataEntryKey';
 import { withDataEntryOutput } from './withDataEntryOutput';
+import { WidgetError } from '../../WidgetErrorAndWarning/WidgetError';
 
 
 type Props = {
     errorItems: ?Array<any>,
     errorOnCompleteItems: ?Array<any>,
     saveAttempted: boolean,
-    classes: {
-        list: string,
-        listItem: string,
-        card: string,
-        header: string,
-        headerText: string,
-    },
 };
 
-const styles = (theme: Theme) => ({
-    card: {
-        padding: theme.typography.pxToRem(10),
-        backgroundColor: theme.palette.error.red200,
-        borderRadius: theme.typography.pxToRem(5),
-    },
-    list: {
-        margin: 0,
-    },
-    listItem: {
-        paddingLeft: theme.typography.pxToRem(10),
-        marginTop: theme.typography.pxToRem(8),
-    },
-    header: {
-        color: '#902c02',
-        display: 'flex',
-        alignItems: 'center',
-    },
-    headerText: {
-        marginLeft: theme.typography.pxToRem(10),
-    },
-});
-
 const getErrorOutput = () =>
     class ErrorOutputBuilder extends React.Component<Props> {
-        static renderErrorItems = (errorItems: any, classes: any) =>
-            (<div>
-                {errorItems
-                    .map(item => (
-                        <li
-                            key={item.id}
-                            className={classes.listItem}
-                        >
-                            <p>{item.message}</p>
-                        </li>
-                    ))
-                }
-            </div>)
-
         name: string;
         constructor(props) {
             super(props);
@@ -82,27 +35,8 @@ const getErrorOutput = () =>
         }
 
         render = () => {
-            const { classes } = this.props;
             const visibleItems = this.getVisibleErrorItems();
-            return (
-                <div>
-                    {visibleItems && visibleItems.length > 0 &&
-                    <Card className={classes.card}>
-                        <div className={classes.header}>
-                            <IconErrorFilled16 />
-                            <div className={classes.headerText}>
-                                {i18n.t('Errors')}
-                            </div>
-                        </div>
-                        <ul className={classes.list}>
-                            {ErrorOutputBuilder.renderErrorItems(visibleItems, classes)}
-                        </ul>
-
-                    </Card>
-                    }
-                </div>
-
-            );
+            return <WidgetError error={visibleItems} />;
         }
     };
 
@@ -124,5 +58,4 @@ export const withErrorOutput = () =>
     (InnerComponent: React.ComponentType<any>) =>
         withDataEntryOutput()(
             InnerComponent,
-            withStyles(styles)(
-                connect(mapStateToProps, mapDispatchToProps)(getErrorOutput())));
+            connect(mapStateToProps, mapDispatchToProps)(getErrorOutput()));

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

@@ -1,95 +1,35 @@
 // @flow
 import * as React from 'react';
 import { connect } from 'react-redux';
-import Card from '@material-ui/core/Card';
-import { Menu, MenuItem } from '@dhis2/ui';
-import { withStyles } from '@material-ui/core/styles';
 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';
 
 type Props = {
     feedbackItems: {
-        displayTexts: [{ key: string, value: string}],
-        displayKeyValuePairs: [{ key: string, value: string}],
-    },
-    classes: {
-        listItem: string,
-        card: string,
-        keyValuePairKey: string,
+        displayTexts: Array<FilteredText>,
+        displayKeyValuePairs: Array<FilteredKeyValue>,
     },
 };
 
-const styles = (theme: Theme) => ({
-    listItem: {
-        display: 'flex',
-        backgroundColor: '#f5f5f5 !important',
-        paddingLeft: theme.typography.pxToRem(10),
-        marginTop: theme.typography.pxToRem(8),
-    },
-    keyValuePairKey: {
-        flexGrow: 1,
-        margin: 0,
-    },
-    keyValue: {
-        margin: 0,
-        fontSize: '0.875rem',
-    },
-    card: {
-        padding: theme.typography.pxToRem(10),
-        borderRadius: theme.typography.pxToRem(5),
-    },
-    labelContainer: {
-        display: 'flex',
-    },
-});
-
 const getFeedbackOutput = () =>
     class FeedbackOutputBuilder extends React.Component<Props> {
-        renderFeedbackItems = (feedbackItems: any, classes: any) =>
-            (<div>
-                {feedbackItems.displayTexts &&
-                    feedbackItems.displayTexts.map(item => (
-                        <MenuItem
-                            dense
-                            key={item.id}
-                            className={classes.listItem}
-                            button={false}
-                            label={<p className={classes.keyValuePairKey}> {item.message} </p>}
-                        />
-                    ),
-                    )}
-                {feedbackItems.displayKeyValuePairs &&
-                    feedbackItems.displayKeyValuePairs.map(item => (
-                        <MenuItem
-                            key={item.id}
-                            button={false}
-                            className={classes.listItem}
-                            dense
-                            label={
-                                <div className={classes.labelContainer}>
-                                    <p className={classes.keyValuePairKey}> {item.key} </p>
-                                    <p className={classes.keyValue}> {item.value} </p>
-                                </div>
-                            }
-                        />
-                    ),
-                    )}
-            </div>)
+        getItems = () => {
+            const { feedbackItems } = this.props;
+            const displayTexts = feedbackItems?.displayTexts || [];
+            const displayKeyValuePairs = feedbackItems?.displayKeyValuePairs || [];
+            return [...displayTexts, ...displayKeyValuePairs];
+        }
 
         render = () => {
-            const { feedbackItems, classes } = this.props;
-            const hasItems = feedbackItems && (feedbackItems.displayTexts || feedbackItems.displayKeyValuePairs);
+            const feedback = this.getItems();
+            const hasItems = feedback.length > 0;
             return (
                 <div>
                     {hasItems &&
-                        <Card className={classes.card}>
-                            {i18n.t('Feedback')}
-                            <Menu dense>
-                                {feedbackItems && this.renderFeedbackItems(feedbackItems, classes)}
-                            </Menu>
-                        </Card>
+                        <WidgetFeedback feedback={feedback} emptyText={i18n.t('No feedback for this event yet')} />
                     }
                 </div>
             );
@@ -113,4 +53,4 @@ export const withFeedbackOutput = () =>
 
         withDataEntryOutput()(
             InnerComponent,
-            withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(getFeedbackOutput())));
+            connect(mapStateToProps, mapDispatchToProps)(getFeedbackOutput()));