//
// 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: {
backgroundColor: theme.palette.error.dark
},
info: {
- backgroundColor: theme.palette.primary.dark
+ backgroundColor: theme.palette.primary.main
},
warning: {
backgroundColor: amber[700]
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;
+};