18692: Changed logic for snackbar

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>

diff --git a/cypress/integration/collection.spec.js b/cypress/integration/collection.spec.js
index 28454a9093b3e87499b8daf652ecafb01df4fdaa..f26328ab52c63bd5dd675a37f00b88ee6c791c30 100644 (file)
--- a/cypress/integration/collection.spec.js
+++ b/cypress/integration/collection.spec.js
@@ -192,7 +192,7 @@ describe('Collection panel tests', function () {
             });
     });
 
-    it('shows collection by URL', function () {
+    it.only('shows collection by URL', function () {
         cy.loginAs(activeUser);
         [true, false].map(function (isWritable) {
             // Using different file names to avoid test flakyness: the second iteration

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 06b3c507dba2ba3a49ad998dc59e8277756121b2..4b631a6a90935e7158efd54c45b8a02e2b0f2765 100644 (file)
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -539,7 +539,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
                     : <div className={classes.rowEmpty}>No directories available</div>
                     }}
                 </AutoSizer>
-                : <div className={classes.row}><CircularProgress className={classes.loader} size={30} /></div> }
+                : <div data-cy="collection-loader" className={classes.row}><CircularProgress className={classes.loader} size={30} /></div> }
                 </div>
             </div>
             <div className={classes.rightPanel} data-cy="collection-files-right-panel">

diff --git a/src/store/snackbar/snackbar-actions.ts b/src/store/snackbar/snackbar-actions.ts
index c04371543f34058ca39ee54f091889baf6367675..7b6f2efd150e1d8e3170fb0e8017a3b4370b2f03 100644 (file)
--- a/src/store/snackbar/snackbar-actions.ts
+++ b/src/store/snackbar/snackbar-actions.ts
@@ -20,7 +20,7 @@ export enum SnackbarKind {
 
 export const snackbarActions = unionize({
     OPEN_SNACKBAR: ofType<{message: string; hideDuration?: number, kind?: SnackbarKind, link?: string}>(),
-    CLOSE_SNACKBAR: ofType<{}>(),
+    CLOSE_SNACKBAR: ofType<{}|null>(),
     SHIFT_MESSAGES: ofType<{}>()
 });
 

diff --git a/src/store/snackbar/snackbar-reducer.ts b/src/store/snackbar/snackbar-reducer.ts
index e367ac5fe644223d8119e94af30b9d2cf82d9670..c3fcfb0795e280fe36a844a4208e45c581b44838 100644 (file)
--- a/src/store/snackbar/snackbar-reducer.ts
+++ b/src/store/snackbar/snackbar-reducer.ts
@@ -32,10 +32,10 @@ export const snackbarReducer = (state = initialState, action: SnackbarAction) =>
         CLOSE_SNACKBAR: (payload) => {
             let newMessages: any = [...state.messages];// state.messages.filter(({ message }) => message !== payload);
 
-            if (JSON.stringify(payload) === '{}') {
+            if (payload === undefined || JSON.stringify(payload) === '{}') {
                 newMessages.pop();
             } else {
-                newMessages = state.messages.filter(({ message }) => message !== payload);
+                newMessages = state.messages.filter((message, index) => index !== payload);
             }
 
             return {

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>
     ];