feat: [DHIS2-17874] Replace the SnackBar MenuList MenuItem Grow and remaining Icons

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-08-10T10:42:21.141Z\n"
-"PO-Revision-Date: 2024-08-10T10:42:21.141Z\n"
+"POT-Creation-Date: 2024-09-02T13:49:55.522Z\n"
+"PO-Revision-Date: 2024-09-02T13:49:55.522Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -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"
 

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, { useState, 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,49 @@ 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';
+const FeedbackBarComponentPlain = ({ feedback = {}, onClose }: Props) => {
+    const [hide, setHide] = useState(false);
+    const { message, displayType } = feedback;
+    const isAlertBarOpen = typeof message === 'string' && !displayType;
+    const isDialogOpen = typeof message === 'object' && displayType === 'dialog';
 
-    static ANCHOR_ORIGIN = {
-        vertical: 'bottom',
-        horizontal: 'center',
+    const handleClose = () => {
+        setHide(true);
+        onClose();
     };
 
-    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>
+    return (
+        <>
+            <AlertStack>
+                {isAlertBarOpen && (
+                    <AlertBar duration={5000}>
+                        {message}
+                    </AlertBar>
                 )}
-            </React.Fragment>
-        );
-    }
-}
-Index.displayName = 'FeedbackBar';
+            </AlertStack>
+            {isDialogOpen && (
+                <Modal hide={hide}>
+                    <ModalTitle>{message.title || ''}</ModalTitle>
+                    <ModalContent>{message.content || ''}</ModalContent>
+                    <ModalActions>
+                        <Button onClick={handleClose} primary>
+                            {i18n.t('Close')}
+                        </Button>
+                    </ModalActions>
+                </Modal>
+            )}
+        </>
+    );
+};
 
-export const FeedbackBarComponent = withStyles(styles)(Index);
+export const FeedbackBarComponent = withStyles(styles)(FeedbackBarComponentPlain);

src/core_modules/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 { Tooltip, Button, spacers } 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) => ({
@@ -22,6 +26,7 @@ const getStyles = (theme: Theme) => ({
     },
     clearIcon: {
         color: theme.palette.text.secondary,
+        marginTop: spacers.dp4,
         '&:hover': {
             color: theme.palette.text.primary,
         },

src/core_modules/capture-core/components/ListView/Filters/FilterButton/FilterButtonMain.component.js

@@ -2,17 +2,19 @@
 import React, { Component } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import Popover from '@material-ui/core/Popover';
-import { IconChevronDown16, IconChevronUp16, Button } from '@dhis2/ui';
+import { Button } from '@dhis2/ui';
 import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
+import { ChevronDown, ChevronUp } from 'capture-ui/Icons';
 import { ActiveFilterButton } from './ActiveFilterButton.component';
 import { FilterSelectorContents } from '../Contents';
 import type { UpdateFilter, ClearFilter, RemoveFilter } from '../../types';
 import type { FilterData, Options } from '../../../FiltersForTypes';
 
 const getStyles = (theme: Theme) => ({
     icon: {
-        fontSize: theme.typography.pxToRem(20),
-        paddingLeft: theme.typography.pxToRem(5),
+        paddingLeft: theme.typography.pxToRem(12),
+        display: 'flex',
+        alignItems: 'center',
     },
     inactiveFilterButton: {
         backgroundColor: '#f5f5f5',
@@ -142,11 +144,11 @@ class FilterButtonMainPlain extends Component<Props, State> {
 
         const arrowIconElement = selectorVisible ? (
             <span className={classes.icon}>
-                <IconChevronUp16 />
+                <ChevronUp />
             </span>
         ) : (
             <span className={classes.icon}>
-                <IconChevronDown16 />
+                <ChevronDown />
             </span>
         );
 
@@ -178,7 +180,7 @@ class FilterButtonMainPlain extends Component<Props, State> {
                 >
                     {title}
                     <span className={classes.icon}>
-                        {selectorVisible ? <IconChevronUp16 /> : <IconChevronDown16 />}
+                        {selectorVisible ? <ChevronUp /> : <ChevronDown />}
                     </span>
                 </Button>
             </ConditionalTooltip>