X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/3108f379099f4e0928680e15aa9116542f43a9c6..5bfb2e1cb9f87c2e62aaae870a8789ed132eba50:/src/views-components/snackbar/snackbar.tsx

diff --git a/src/views-components/snackbar/snackbar.tsx b/src/views-components/snackbar/snackbar.tsx
index 2aa607091a..1887f0bde0 100644
--- a/src/views-components/snackbar/snackbar.tsx
+++ b/src/views-components/snackbar/snackbar.tsx
@@ -43,9 +43,9 @@ const mapStateToProps = (state: RootState): SnackbarDataProps => {
 };
 
 const mapDispatchToProps = (dispatch: Dispatch): SnackbarEventProps => ({
-    onClose: (event: any, reason: string, message: '') => {
+    onClose: (event: any, reason: string, id: undefined) => {
         if (reason !== "clickaway") {
-            dispatch(snackbarActions.CLOSE_SNACKBAR(message));
+            dispatch(snackbarActions.CLOSE_SNACKBAR(id));
         }
     },
     onExited: () => {
@@ -112,11 +112,11 @@ export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchT
                 autoHideDuration={props.autoHideDuration}>
                 <div data-cy="snackbar">
                     {
-                         props.messages.map(message => {
+                         props.messages.map((message, index) => {
                             const [Icon, cssClass] = variants[message.kind];
 
                             return <SnackbarContent
-                                key={message.message}
+                                key={`${index}-${message.message}`}
                                 className={classNames(cssClass, classes.snackbarContent)}
                                 aria-describedby="client-snackbar"
                                 message={
@@ -125,7 +125,7 @@ export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchT
                                         {message.message}
                                     </span>
                                 }
-                                action={actions(message, props.onClick, props.onClose, classes)}
+                                action={actions(message, props.onClick, props.onClose, classes, index, props.autoHideDuration)}
                             />
                          })
                     }
@@ -135,13 +135,17 @@ export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchT
     }
 ));
 
-const actions = (props: SnackbarMessage, onClick, onClose, classes) => {
+const actions = (props: SnackbarMessage, onClick, onClose, classes, index, autoHideDuration) => {
+    if (onClose && autoHideDuration) {
+        setTimeout(onClose, autoHideDuration);
+    }
+
     const actions = [
         <IconButton
             key="close"
             aria-label="Close"
             color="inherit"
-            onClick={e => onClose && onClose(e, '', props.message)}>
+            onClick={e => onClose && onClose(e, '', index)}>
             <CloseIcon className={classes.icon} />
         </IconButton>
     ];