X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/d7c9755621d7d6f6c57810fc9fe04c8dc65b640e..099468843d687fdc8c6fbb0f0e3dc54f59d0de15:/src/views-components/snackbar/snackbar.tsx

diff --git a/src/views-components/snackbar/snackbar.tsx b/src/views-components/snackbar/snackbar.tsx
index 037f564ade..1887f0bde0 100644
--- a/src/views-components/snackbar/snackbar.tsx
+++ b/src/views-components/snackbar/snackbar.tsx
@@ -27,7 +27,7 @@ interface SnackbarDataProps {
 }
 
 interface SnackbarEventProps {
-    onClose?: (event: React.SyntheticEvent<any>, reason: string) => void;
+    onClose?: (event: React.SyntheticEvent<any>, reason: string, message?: string) => void;
     onExited: () => void;
     onClick: (uuid: string) => void;
 }
@@ -43,9 +43,9 @@ const mapStateToProps = (state: RootState): SnackbarDataProps => {
 };
 
 const mapDispatchToProps = (dispatch: Dispatch): SnackbarEventProps => ({
-    onClose: (event: any, reason: string) => {
+    onClose: (event: any, reason: string, id: undefined) => {
         if (reason !== "clickaway") {
-            dispatch(snackbarActions.CLOSE_SNACKBAR());
+            dispatch(snackbarActions.CLOSE_SNACKBAR(id));
         }
     },
     onExited: () => {
@@ -112,10 +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={`${index}-${message.message}`}
                                 className={classNames(cssClass, classes.snackbarContent)}
                                 aria-describedby="client-snackbar"
                                 message={
@@ -124,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)}
                             />
                          })
                     }
@@ -134,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, '')}>
+            onClick={e => onClose && onClose(e, '', index)}>
             <CloseIcon className={classes.icon} />
         </IconButton>
     ];