X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/1b6fde4932a1fbb4da7f860b982bc553088a2d91..97622f7e87cccdd98dfc748913ed8791c862bd4a:/src/views-components/snackbar/snackbar.tsx

diff --git a/src/views-components/snackbar/snackbar.tsx b/src/views-components/snackbar/snackbar.tsx
index 03fe57e478..a33b696825 100644
--- a/src/views-components/snackbar/snackbar.tsx
+++ b/src/views-components/snackbar/snackbar.tsx
@@ -2,23 +2,22 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from "react";
+import React from "react";
+import { Dispatch } from "redux";
 import { connect } from "react-redux";
-import { RootState } from "~/store/store";
+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 { 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 { snackbarActions, SnackbarKind } 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;
@@ -26,11 +25,13 @@ interface SnackbarDataProps {
     open: boolean;
     message?: React.ReactElement<any>;
     kind: SnackbarKind;
+    link?: string;
 }
 
 interface SnackbarEventProps {
     onClose?: (event: React.SyntheticEvent<any>, reason: string) => void;
     onExited: () => void;
+    onClick: (uuid: string) => void;
 }
 
 const mapStateToProps = (state: RootState): SnackbarDataProps => {
@@ -40,7 +41,8 @@ const mapStateToProps = (state: RootState): SnackbarDataProps => {
         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
+        kind: messages.length > 0 ? messages[0].kind : SnackbarKind.INFO,
+        link: messages.length > 0 ? messages[0].link : ''
     };
 };
 
@@ -52,10 +54,13 @@ const mapDispatchToProps = (dispatch: Dispatch): SnackbarEventProps => ({
     },
     onExited: () => {
         dispatch(snackbarActions.SHIFT_MESSAGES());
+    },
+    onClick: (uuid: string) => {
+        dispatch<any>(navigateTo(uuid));
     }
 });
 
-type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message";
+type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message" | "linkButton";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     success: {
@@ -65,7 +70,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]
@@ -81,10 +86,15 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         display: 'flex',
         alignItems: 'center'
     },
+    linkButton: {
+        fontWeight: 'bolder'
+    }
 });
 
+type SnackbarProps = SnackbarDataProps & SnackbarEventProps & WithStyles<CssRules>;
+
 export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(
-    (props: SnackbarDataProps & SnackbarEventProps & WithStyles<CssRules>) => {
+    (props: SnackbarProps) => {
         const { classes } = props;
 
         const variants = {
@@ -96,6 +106,8 @@ export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchT
 
         const [Icon, cssClass] = variants[props.kind];
 
+
+
         return (
             <MaterialSnackbar
                 open={props.open}
@@ -104,26 +116,44 @@ export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchT
                 onExited={props.onExited}
                 anchorOrigin={props.anchorOrigin}
                 autoHideDuration={props.autoHideDuration}>
-                <SnackbarContent
+                <div data-cy="snackbar"><SnackbarContent
                     className={classNames(cssClass)}
                     aria-describedby="client-snackbar"
                     message={
                         <span id="client-snackbar" className={classes.message}>
-                            <Icon className={classNames(classes.icon, classes.iconVariant)}/>
+                            <Icon className={classNames(classes.icon, classes.iconVariant)} />
                             {props.message}
                         </span>
                     }
-                    action={
-                        <IconButton
-                            key="close"
-                            aria-label="Close"
-                            color="inherit"
-                            onClick={e => props.onClose && props.onClose(e, '')}>
-                            <CloseIcon className={classes.icon}/>
-                        </IconButton>
-                    }
-                />
+                    action={actions(props)}
+                /></div>
             </MaterialSnackbar>
         );
     }
 ));
+
+const actions = (props: SnackbarProps) => {
+    const { link, onClose, onClick, classes } = props;
+    const actions = [
+        <IconButton
+            key="close"
+            aria-label="Close"
+            color="inherit"
+            onClick={e => onClose && onClose(e, '')}>
+            <CloseIcon className={classes.icon} />
+        </IconButton>
+    ];
+    if (link) {
+        actions.splice(0, 0,
+            <Button key="goTo"
+                aria-label="goTo"
+                size="small"
+                color="inherit"
+                className={classes.linkButton}
+                onClick={() => onClick(link)}>
+                <span data-cy='snackbar-goto-action'>Go To</span>
+            </Button>
+        );
+    }
+    return actions;
+};
