feat: [DHIS2-17874] replace remaining Material UI components (#3794)

* feat: remove snackbar * feat: change menu components * feat: remove paper * feat: remove grow * feat: change popover * feat: remove icon button * feat: remove icons * fix: type error for open delay * fix: after review changes * feat: change to icon button * fix: data test prop * fix: increase max width
dhis2 · Oct 3, 2024 · 7194e54 · 7194e54
1 parent b8245ea
commit 7194e54
Show file tree

Hide file tree

Showing 22 changed files with 410 additions and 943 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -598,15 +598,6 @@ msgstr "Program doesn't exist"
 msgid "Selected program is invalid for selected organisation unit"
 msgstr "Selected program is invalid for selected organisation unit"
 
-msgid "Online"
-msgstr "Online"
-
-msgid "Offline"
-msgstr "Offline"
-
-msgid "Syncing"
-msgstr "Syncing"
-
 msgid "Add note"
 msgstr "Add note"
 

diff --git a/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js b/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js
@@ -1,11 +1,8 @@
 // @flow
-import * as React from 'react';
-import SnackBar from '@material-ui/core/Snackbar';
+import React, { type Node } from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import { IconButton } from 'capture-ui';
-import { IconCross24, Button, Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
+import { Button, Modal, ModalTitle, ModalContent, ModalActions, AlertStack, AlertBar } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
-import isDefined from 'd2-utilizr/lib/isDefined';
 
 const styles = () => ({
     closeButton: {
@@ -17,110 +14,43 @@ const styles = () => ({
 });
 
 type Feedback = {
-    message: string | { title: string, content: string},
-    action?: ?React.Node,
-    displayType?: ?string,
+    message: string | { title: string, content: string },
+    action?: Node,
+    displayType?: 'alert' | 'dialog',
 };
 
 type Props = {
     feedback: Feedback,
     onClose: () => void,
-    classes: Object,
 };
 
-class Index extends React.Component<Props> {
-    static defaultProps = {
-        feedback: {},
-    };
-
-    constructor(props: Props) {
-        super(props);
-        this.handleClose = this.handleClose.bind(this);
-    }
-    static CLICKAWAY_KEY = 'clickaway';
-
-    static ANCHOR_ORIGIN = {
-        vertical: 'bottom',
-        horizontal: 'center',
-    };
-
-    handleClose = (event?: ?Object, reason?: ?string) => {
-        if (reason !== Index.CLICKAWAY_KEY) {
-            this.props.onClose();
-        }
-    }
-
-    getAction() {
-        const { feedback, classes } = this.props;
-
-        return (
-            <>
-                {
-                    (() => {
-                        if (!feedback.action) {
-                            return null;
-                        }
-
-                        return (
-                            <span
-                                className={classes.actionContainer}
-                            >
-                                {feedback.action}
-                            </span>
-                        );
-                    })()
-                }
-                <IconButton
-                    className={classes.closeButton}
-                    onClick={this.handleClose}
-                >
-                    <IconCross24 />
-                </IconButton>
-            </>
-        );
-    }
-
-    render() {
-        const { feedback } = this.props;
-        const { message, displayType } = feedback;
-        const isSnackBarOpen = isDefined(message) && !displayType;
-        const isDialogOpen = isDefined(message) && displayType === 'dialog';
-        return (
-            <React.Fragment>
-                <SnackBar
-                    open={isSnackBarOpen}
-                    anchorOrigin={Index.ANCHOR_ORIGIN}
-                    autoHideDuration={5000}
-                    onClose={this.handleClose}
-                    // $FlowFixMe[incompatible-type] automated comment
-                    message={<span>{message}</span>}
-                    action={this.getAction()}
-                />
-                {isDialogOpen && (
-                    <Modal
-                        hide={!isDialogOpen}
-                    >
-                        <ModalTitle>
-                            {
-                            // $FlowFixMe[prop-missing] automated comment
-                                isDialogOpen ? message && message.title : ''}
-                        </ModalTitle>
-                        <ModalContent>
-                            {
-                            // $FlowFixMe[prop-missing] automated comment
-                                isDialogOpen ? message && message.content : ''}
-                        </ModalContent>
-                        <ModalActions>
-                            <Button onClick={this.handleClose} primary>
-                                {i18n.t('Close')}
-                            </Button>
-                        </ModalActions>
-                    </Modal>
+const FeedbackBarComponentPlain = ({ feedback = {}, onClose }: Props) => {
+    const { message, displayType } = feedback;
+    const isAlertBarOpen = typeof message === 'string' && !displayType;
+    const isDialogOpen = typeof message === 'object' && displayType === 'dialog';
+
+    return (
+        <>
+            <AlertStack>
+                {isAlertBarOpen && (
+                    <AlertBar duration={5000}>
+                        {message}
+                    </AlertBar>
                 )}
-            </React.Fragment>
-        );
-    }
-}
-Index.displayName = 'FeedbackBar';
+            </AlertStack>
+            {isDialogOpen && (
+                <Modal hide={!isDialogOpen}>
+                    <ModalTitle>{message?.title || ''}</ModalTitle>
+                    <ModalContent>{message?.content || ''}</ModalContent>
+                    <ModalActions>
+                        <Button onClick={onClose} primary>
+                            {i18n.t('Close')}
+                        </Button>
+                    </ModalActions>
+                </Modal>
+            )}
+        </>
+    );
+};
 
-export const FeedbackBarComponent = withStyles(styles)(Index);
+export const FeedbackBarComponent = withStyles(styles)(FeedbackBarComponentPlain);
diff --git a/src/core_modules/capture-core/components/FormFields/UserField/SearchSuggestion.component.js b/src/core_modules/capture-core/components/FormFields/UserField/SearchSuggestion.component.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import parse from 'autosuggest-highlight/parse';
-import MenuItem from '@material-ui/core/MenuItem';
+import { MenuItem } from '@dhis2/ui';
 import classNames from 'classnames';
 import { SearchContext } from './Search.context';
 import defaultClasses from './searchSuggestion.module.css';
@@ -96,7 +96,6 @@ export const SearchSuggestion = (props: Props) => {
             onExitSearch();
         }
     }, [onExitSearch, suggestionName, inputName]);
-
     return (
         <div
             name={suggestionName}
@@ -109,23 +108,24 @@ export const SearchSuggestion = (props: Props) => {
             onBlur={handleBlur}
         >
             <MenuItem
-                selected={isHighlighted}
-                component="div"
-            >
-                <div>
-                    {parts.map((part, index) => (part.highlight ? (
-                        // eslint-disable-next-line react/no-array-index-key
-                        <span key={String(index)} style={{ fontWeight: 500 }}>
-                            {part.text}
-                        </span>
-                    ) : (
-                        // eslint-disable-next-line react/no-array-index-key
-                        <strong key={String(index)} style={{ fontWeight: 300 }}>
-                            {part.text}
-                        </strong>
-                    )))}
-                </div>
-            </MenuItem>
+                active={isHighlighted}
+                label={(
+                    <div>
+                        {parts.map((part, index) => (part.highlight ? (
+                            // eslint-disable-next-line react/no-array-index-key
+                            <span key={String(index)} style={{ fontWeight: 500 }}>
+                                {part.text}
+                            </span>
+                        ) : (
+                            // eslint-disable-next-line react/no-array-index-key
+                            <strong key={String(index)} style={{ fontWeight: 300 }}>
+                                {part.text}
+                            </strong>
+                        )))}
+                    </div>
+                )}
+            />
+
         </div>
     );
 };
diff --git a/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js b/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js
@@ -1,29 +1,23 @@
 import React from 'react';
-import Paper from '@material-ui/core/Paper/Paper';
-import { withStyles } from '@material-ui/core';
 import { colors } from '@dhis2/ui';
 
-const StyledPaper = withStyles({
-    root: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        background: colors.grey200,
-        color: colors.grey700,
-        padding: '12px 16px',
-    },
-})(Paper);
-
 const containerStyle = {
     display: 'flex',
     justifyContent: 'center',
-    width: '100%',
+};
+
+const messageBoxStyle = {
+    alignItems: 'center',
+    background: colors.grey200,
+    color: colors.grey700,
+    padding: '12px 16px',
+    borderRadius: '4px',
 };
 
 export const IncompleteSelectionsMessage = ({ children, dataTest = 'informative-paper' }) => (
     <div style={containerStyle}>
-        <StyledPaper data-test={dataTest} elevation={0}>
+        <div style={messageBoxStyle} data-test={dataTest}>
             {children}
-        </StyledPaper>
+        </div>
     </div>
 );
diff --git a/...les/capture-core/components/ListView/Filters/FilterButton/ActiveFilterButton.component.js b/...les/capture-core/components/ListView/Filters/FilterButton/ActiveFilterButton.component.js
@@ -1,16 +1,20 @@
 // @flow
 import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import createSvgIcon from '@material-ui/icons/utils/createSvgIcon';
 import { Tooltip, Button } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import classNames from 'classnames';
 
-const ClearIcon = createSvgIcon(
-    <React.Fragment>
+const ClearIcon = ({ className, ...props }) => (
+    <svg
+        className={className}
+        {...props}
+        viewBox="0 0 24 24"
+        width={24}
+        height={24}
+    >
         <path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />
-    </React.Fragment>,
-    'CloseCircle',
+    </svg>
 );
 
 const getStyles = (theme: Theme) => ({