X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/a2bf1ed3a15cf55e426c51ad8e6febd7ff2e3020..2c2339c775f9112f5da638b2beb81d8b6d5abc2b:/src/views-components/snackbar/snackbar.tsx

diff --git a/src/views-components/snackbar/snackbar.tsx b/src/views-components/snackbar/snackbar.tsx
index 7449e1e2f8..1887f0bde0 100644
--- a/src/views-components/snackbar/snackbar.tsx
+++ b/src/views-components/snackbar/snackbar.tsx
@@ -2,51 +2,61 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from "react";
-import { connect } from "react-redux";
-import { RootState } from "~/store/store";
-import MaterialSnackbar, { SnackbarProps } from "@material-ui/core/Snackbar";
+import React from "react";
 import { Dispatch } from "redux";
-import { snackbarActions, SnackbarKind } from "~/store/snackbar/snackbar-actions";
-import IconButton from '@material-ui/core/IconButton';
-import SnackbarContent from '@material-ui/core/SnackbarContent';
+import { connect } from "react-redux";
+import { RootState } from "store/store";
+import { Button, IconButton, StyleRulesCallback, WithStyles, withStyles, SnackbarContent } from '@material-ui/core';
+import MaterialSnackbar, { SnackbarOrigin } from "@material-ui/core/Snackbar";
+import { snackbarActions, SnackbarKind, SnackbarMessage } from "store/snackbar/snackbar-actions";
+import { navigateTo } from 'store/navigation/navigation-action';
 import WarningIcon from '@material-ui/icons/Warning';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import ErrorIcon from '@material-ui/icons/Error';
 import InfoIcon from '@material-ui/icons/Info';
 import CloseIcon from '@material-ui/icons/Close';
-import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
-import { ArvadosTheme } from "~/common/custom-theme";
+import { ArvadosTheme } from "common/custom-theme";
 import { amber, green } from "@material-ui/core/colors";
-import * as classNames from 'classnames';
+import classNames from 'classnames';
+
+interface SnackbarDataProps {
+    anchorOrigin?: SnackbarOrigin;
+    autoHideDuration?: number;
+    open: boolean;
+    messages: SnackbarMessage[];
+}
 
-const mapStateToProps = (state: RootState): SnackbarProps & ArvadosSnackbarProps => {
+interface SnackbarEventProps {
+    onClose?: (event: React.SyntheticEvent<any>, reason: string, message?: string) => void;
+    onExited: () => void;
+    onClick: (uuid: string) => void;
+}
+
+const mapStateToProps = (state: RootState): SnackbarDataProps => {
     const messages = state.snackbar.messages;
     return {
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         open: state.snackbar.open,
-        message: <span>{messages.length > 0 ? messages[0].message : ""}</span>,
-        autoHideDuration: messages.length > 0 ? messages[0].hideDuration : 0,
-        kind: messages.length > 0 ? messages[0].kind : SnackbarKind.INFO
+        messages,
+        autoHideDuration: messages.length > 0 ? messages[0].hideDuration : 0
     };
 };
 
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-    onClose: (event: any, reason: string) => {
+const mapDispatchToProps = (dispatch: Dispatch): SnackbarEventProps => ({
+    onClose: (event: any, reason: string, id: undefined) => {
         if (reason !== "clickaway") {
-            dispatch(snackbarActions.CLOSE_SNACKBAR());
+            dispatch(snackbarActions.CLOSE_SNACKBAR(id));
         }
     },
     onExited: () => {
         dispatch(snackbarActions.SHIFT_MESSAGES());
+    },
+    onClick: (uuid: string) => {
+        dispatch<any>(navigateTo(uuid));
     }
 });
 
-const ArvadosSnackbar = (props: any) => <MaterialSnackbar {...props}>
-    <ArvadosSnackbarContent {...props}/>
-</MaterialSnackbar>;
-
-type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message";
+type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message" | "linkButton" | "snackbarContent";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     success: {
@@ -56,7 +66,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         backgroundColor: theme.palette.error.dark
     },
     info: {
-        backgroundColor: theme.palette.primary.dark
+        backgroundColor: theme.palette.primary.main
     },
     warning: {
         backgroundColor: amber[700]
@@ -72,64 +82,84 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         display: 'flex',
         alignItems: 'center'
     },
+    linkButton: {
+        fontWeight: 'bolder'
+    },
+    snackbarContent: {
+        marginBottom: '1rem'
+    }
 });
 
-interface ArvadosSnackbarProps {
-    kind: SnackbarKind;
-}
+type SnackbarProps = SnackbarDataProps & SnackbarEventProps & WithStyles<CssRules>;
+
+export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(
+    (props: SnackbarProps) => {
+        const { classes } = props;
 
-const ArvadosSnackbarContent = (props: SnackbarProps & ArvadosSnackbarProps & WithStyles<CssRules>) => {
-    const { classes, className, message, onClose, kind } = props;
+        const variants = {
+            [SnackbarKind.INFO]: [InfoIcon, classes.info],
+            [SnackbarKind.WARNING]: [WarningIcon, classes.warning],
+            [SnackbarKind.SUCCESS]: [CheckCircleIcon, classes.success],
+            [SnackbarKind.ERROR]: [ErrorIcon, classes.error]
+        };
 
-    let Icon = InfoIcon;
-    let cssClass = classes.info;
+        return (
+            <MaterialSnackbar
+                open={props.open}
+                onClose={props.onClose}
+                onExited={props.onExited}
+                anchorOrigin={props.anchorOrigin}
+                autoHideDuration={props.autoHideDuration}>
+                <div data-cy="snackbar">
+                    {
+                         props.messages.map((message, index) => {
+                            const [Icon, cssClass] = variants[message.kind];
 
-    switch (kind) {
-        case SnackbarKind.INFO:
-            Icon = InfoIcon;
-            cssClass = classes.info;
-            break;
-        case SnackbarKind.WARNING:
-            Icon = WarningIcon;
-            cssClass = classes.warning;
-            break;
-        case SnackbarKind.SUCCESS:
-            Icon = CheckCircleIcon;
-            cssClass = classes.success;
-            break;
-        case SnackbarKind.ERROR:
-            Icon = ErrorIcon;
-            cssClass = classes.error;
-            break;
+                            return <SnackbarContent
+                                key={`${index}-${message.message}`}
+                                className={classNames(cssClass, classes.snackbarContent)}
+                                aria-describedby="client-snackbar"
+                                message={
+                                    <span id="client-snackbar" className={classes.message}>
+                                        <Icon className={classNames(classes.icon, classes.iconVariant)} />
+                                        {message.message}
+                                    </span>
+                                }
+                                action={actions(message, props.onClick, props.onClose, classes, index, props.autoHideDuration)}
+                            />
+                         })
+                    }
+                </div>
+            </MaterialSnackbar>
+        );
     }
+));
 
-    return (
-        <SnackbarContent
-            className={classNames(cssClass, className)}
-            aria-describedby="client-snackbar"
-            message={
-                <span id="client-snackbar" className={classes.message}>
-                    <Icon className={classNames(classes.icon, classes.iconVariant)}/>
-                    {message}
-                </span>
-            }
-            action={
-                <IconButton
-                    key="close"
-                    aria-label="Close"
-                    color="inherit"
-                    onClick={e => {
-                        if (onClose) {
-                            onClose(e, '');
-                        }
-                    }}>
-                    <CloseIcon className={classes.icon}/>
-                </IconButton>
-            }
-        />
-    );
-};
+const actions = (props: SnackbarMessage, onClick, onClose, classes, index, autoHideDuration) => {
+    if (onClose && autoHideDuration) {
+        setTimeout(onClose, autoHideDuration);
+    }
 
-export const Snackbar = connect(mapStateToProps, mapDispatchToProps)(
-    withStyles(styles)(ArvadosSnackbar)
-);
+    const actions = [
+        <IconButton
+            key="close"
+            aria-label="Close"
+            color="inherit"
+            onClick={e => onClose && onClose(e, '', index)}>
+            <CloseIcon className={classes.icon} />
+        </IconButton>
+    ];
+    if (props.link) {
+        actions.splice(0, 0,
+            <Button key="goTo"
+                aria-label="goTo"
+                size="small"
+                color="inherit"
+                className={classes.linkButton}
+                onClick={() => onClick(props.link)}>
+                <span data-cy='snackbar-goto-action'>Go To</span>
+            </Button>
+        );
+    }
+    return actions;
+};