Add app wide snackbar

ui/src/App.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { connect, ConnectedProps } from "react-redux";
 import clsx from "clsx";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
@@ -7,12 +8,19 @@ import Drawer from "@material-ui/core/Drawer";
 import Toolbar from "@material-ui/core/Toolbar";
 import List from "@material-ui/core/List";
 import Typography from "@material-ui/core/Typography";
+import Snackbar from "@material-ui/core/Snackbar";
+import SnackbarContent from "@material-ui/core/SnackbarContent";
 import IconButton from "@material-ui/core/IconButton";
+import Slide from "@material-ui/core/Slide";
+import { TransitionProps } from "@material-ui/core/transitions";
 import MenuIcon from "@material-ui/icons/Menu";
 import BarChartIcon from "@material-ui/icons/BarChart";
 import LayersIcon from "@material-ui/icons/Layers";
 import SettingsIcon from "@material-ui/icons/Settings";
+import CloseIcon from "@material-ui/icons/Close";
+import { AppState } from "./store";
 import { paths } from "./paths";
+import { closeSnackbar } from "./actions/snackbarActions";
 import ListItemLink from "./components/ListItemLink";
 import SchedulersView from "./views/SchedulersView";
 import DashboardView from "./views/DashboardView";
@@ -71,6 +79,13 @@ const useStyles = makeStyles((theme) => ({
       width: theme.spacing(9),
     },
   },
+  snackbar: {
+    background: theme.palette.grey["A400"],
+    color: "#ffffff",
+  },
+  snackbarCloseIcon: {
+    color: theme.palette.grey[400],
+  },
   appBarSpacer: theme.mixins.toolbar,
   mainContainer: {
     display: "flex",
@@ -96,7 +111,21 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function App() {
+function mapStateToProps(state: AppState) {
+  return { snackbar: state.snackbar };
+}
+
+const mapDispatchToProps = {
+  closeSnackbar,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+function SlideUpTransition(props: TransitionProps) {
+  return <Slide {...props} direction="up" />;
+}
+
+function App(props: ConnectedProps<typeof connector>) {
   const classes = useStyles();
   const [open, setOpen] = useState(true);
   const toggleDrawer = () => {
@@ -142,6 +171,31 @@ function App() {
             }}
             open={open}
           >
+            <Snackbar
+              anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+              open={props.snackbar.isOpen}
+              autoHideDuration={6000}
+              onClose={props.closeSnackbar}
+              TransitionComponent={SlideUpTransition}
+            >
+              <SnackbarContent
+                message={props.snackbar.message}
+                className={classes.snackbar}
+                action={
+                  <IconButton
+                    size="small"
+                    aria-label="close"
+                    color="inherit"
+                    onClick={props.closeSnackbar}
+                  >
+                    <CloseIcon
+                      className={classes.snackbarCloseIcon}
+                      fontSize="small"
+                    />
+                  </IconButton>
+                }
+              />
+            </Snackbar>
             <div className={classes.appBarSpacer} />
             <div className={classes.sidebarContainer}>
               <List>
@@ -191,4 +245,4 @@ function App() {
   );
 }
 
-export default App;
+export default connector(App);