X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/aafa91ce918b23cff556f73e337ad8fe76ed578a..ac687c484aeb0d16d4d2765cad4d64b171398b1e:/src/views-components/snackbar/snackbar.tsx
diff --git a/src/views-components/snackbar/snackbar.tsx b/src/views-components/snackbar/snackbar.tsx
index 341e803cf6..4250dcdfb3 100644
--- a/src/views-components/snackbar/snackbar.tsx
+++ b/src/views-components/snackbar/snackbar.tsx
@@ -3,125 +3,157 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from "react";
+import { Dispatch } from "redux";
import { connect } from "react-redux";
import { RootState } from "~/store/store";
-import MaterialSnackbar, { SnackbarProps } from "@material-ui/core/Snackbar";
-import { Dispatch } from "redux";
+import { Button, IconButton, StyleRulesCallback, WithStyles, withStyles, SnackbarContent } from '@material-ui/core';
+import MaterialSnackbar, { SnackbarOrigin } from "@material-ui/core/Snackbar";
import { snackbarActions, SnackbarKind } from "~/store/snackbar/snackbar-actions";
-import IconButton from '@material-ui/core/IconButton';
-import SnackbarContent from '@material-ui/core/SnackbarContent';
+import { navigateToProject } 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 { amber, green } from "@material-ui/core/colors";
import * as classNames from 'classnames';
-const mapStateToProps = (state: RootState): SnackbarProps => ({
- anchorOrigin: { vertical: "bottom", horizontal: "right" },
- open: state.snackbar.open,
- message: {state.snackbar.message},
- autoHideDuration: state.snackbar.hideDuration,
-});
+interface SnackbarDataProps {
+ anchorOrigin?: SnackbarOrigin;
+ autoHideDuration?: number;
+ open: boolean;
+ message?: React.ReactElement;
+ kind: SnackbarKind;
+ link?: string;
+}
-const mapDispatchToProps = (dispatch: Dispatch): Pick => ({
+interface SnackbarEventProps {
+ onClose?: (event: React.SyntheticEvent, reason: 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: {messages.length > 0 ? messages[0].message : ""},
+ autoHideDuration: messages.length > 0 ? messages[0].hideDuration : 0,
+ kind: messages.length > 0 ? messages[0].kind : SnackbarKind.INFO,
+ link: messages.length > 0 ? messages[0].link : ''
+ };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch): SnackbarEventProps => ({
onClose: (event: any, reason: string) => {
if (reason !== "clickaway") {
dispatch(snackbarActions.CLOSE_SNACKBAR());
}
+ },
+ onExited: () => {
+ dispatch(snackbarActions.SHIFT_MESSAGES());
+ },
+ onClick: (uuid: string) => {
+ dispatch(navigateToProject(uuid));
}
});
-const ArvadosSnackbar = (props: any) =>
-
-;
-
-type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message";
+type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message" | "linkButton";
const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({
success: {
- backgroundColor: green[600],
+ backgroundColor: green[600]
},
error: {
- backgroundColor: theme.palette.error.dark,
+ backgroundColor: theme.palette.error.dark
},
info: {
- backgroundColor: theme.palette.primary.dark,
+ backgroundColor: theme.palette.primary.main
},
warning: {
- backgroundColor: amber[700],
+ backgroundColor: amber[700]
},
icon: {
- fontSize: 20,
+ fontSize: 20
},
iconVariant: {
opacity: 0.9,
- marginRight: theme.spacing.unit,
+ marginRight: theme.spacing.unit
},
message: {
display: 'flex',
- alignItems: 'center',
+ alignItems: 'center'
},
+ linkButton: {
+ fontWeight: 'bolder'
+ }
});
-interface ArvadosSnackbarProps {
- kind: SnackbarKind;
-}
+type SnackbarProps = SnackbarDataProps & SnackbarEventProps & WithStyles;
+
+export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(
+ (props: SnackbarProps) => {
+ const { classes } = props;
-const ArvadosSnackbarContent = (props: SnackbarProps & ArvadosSnackbarProps & WithStyles) => {
- const { classes, className, message, onClose, kind, ...other } = 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;
- 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;
+ const [Icon, cssClass] = variants[props.kind];
+
+
+
+ return (
+
+
+
+ {props.message}
+
+ }
+ action={actions(props)}
+ />
+
+ );
}
+));
- return (
-
-
- {message}
-
- }
- action={
- {
- if (onClose) {
- onClose(e, '');
- }
- }}>
-
-
- }
- />
- );
+const actions = (props: SnackbarProps) => {
+ const { link, onClose, onClick, classes } = props;
+ const actions = [
+ onClose && onClose(e, '')}>
+
+
+ ];
+ if (link) {
+ actions.splice(0, 0,
+
+ );
+ }
+ return actions;
};
-
-export const Snackbar = connect(mapStateToProps, mapDispatchToProps)(
- withStyles(styles)(ArvadosSnackbar)
-);