18692: Changed logic for snackbar

[arvados-workbench2.git] / src / views-components / snackbar / snackbar.tsx

diff --git a/src/views-components/snackbar/snackbar.tsx b/src/views-components/snackbar/snackbar.tsx
index 2aa607091a7e2202ecd47b44baa9e58aa5861ffa..f3d3368ba0bdbd3e3561081e394bdedcded0774b 100644 (file)
--- 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)}
                             />
                          })
                     }
@@ -135,13 +135,13 @@ export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchT
     }
 ));
 
-const actions = (props: SnackbarMessage, onClick, onClose, classes) => {
+const actions = (props: SnackbarMessage, onClick, onClose, classes, index) => {
     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>
     ];