Merge branch '18315-collection-panel-refresh'. Closes #18315

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>

diff --git a/cypress/integration/collection.spec.js b/cypress/integration/collection.spec.js
index f6547aae389d9e695e436591bd072ea81c0d7ed1..b451fd66e865c5e2478f1453cf10bcdc7c9965fc 100644 (file)
--- a/cypress/integration/collection.spec.js
+++ b/cypress/integration/collection.spec.js
@@ -626,6 +626,34 @@ describe('Collection panel tests', function () {
             });
     });
 
+    it('automatically updates the collection UI contents without using the Refresh button', function () {
+        const collName = `Test Collection ${Math.floor(Math.random() * 999999)}`;
+        const fileName = 'foobar'
+
+        cy.createCollection(adminUser.token, {
+            name: collName,
+            owner_uuid: activeUser.user.uuid,
+        }).as('testCollection');
+
+        cy.getAll('@testCollection').then(function ([testCollection]) {
+            cy.loginAs(activeUser);
+            cy.goToPath(`/collections/${testCollection.uuid}`);
+            cy.get('[data-cy=collection-files-panel]').should('contain', 'This collection is empty');
+            cy.get('[data-cy=collection-files-panel]').should('not.contain', fileName);
+            cy.get('[data-cy=collection-info-panel]').should('contain', collName);
+
+            cy.updateCollection(adminUser.token, testCollection.uuid, {
+                name: `${collName + ' updated'}`,
+                manifest_text: `. 37b51d194a7513e45b56f6524f2d51f2+3 0:3:${fileName}\n`,
+            }).as('updatedCollection');
+            cy.getAll('@updatedCollection').then(function ([updatedCollection]) {
+                expect(updatedCollection.name).to.equal(`${collName + ' updated'}`);
+                cy.get('[data-cy=collection-info-panel]').should('contain', updatedCollection.name);
+                cy.get('[data-cy=collection-files-panel]').should('contain', fileName);
+            });
+        });
+    })
+
     it('makes a copy of an existing collection', function() {
         const collName = `Test Collection ${Math.floor(Math.random() * 999999)}`;
         const copyName = `Copy of: ${collName}`;
@@ -890,17 +918,15 @@ describe('Collection panel tests', function () {
             name: `Test collection ${Math.floor(Math.random() * 999999)}`,
             owner_uuid: activeUser.user.uuid,
             manifest_text: ". 37b51d194a7513e45b56f6524f2d51f2+3 0:3:bar\n"
-        })
-            .as('testCollection1');
+        }).as('testCollection1');
 
         cy.createCollection(adminUser.token, {
             name: `Test collection ${Math.floor(Math.random() * 999999)}`,
             owner_uuid: adminUser.user.uuid,
             manifest_text: ". 37b51d194a7513e45b56f6524f2d51f2+3 0:3:bar\n"
-        })
-            .as('testCollection2').then(function (testCollection2) {
-                cy.shareWith(adminUser.token, activeUser.user.uuid, testCollection2.uuid, 'can_write');
-            });
+        }).as('testCollection2').then(function (testCollection2) {
+            cy.shareWith(adminUser.token, activeUser.user.uuid, testCollection2.uuid, 'can_write');
+        });
 
         cy.getAll('@testCollection1', '@testCollection2')
             .then(function ([testCollection1, testCollection2]) {
@@ -922,8 +948,29 @@ describe('Collection panel tests', function () {
                 name: `Test collection ${Math.floor(Math.random() * 999999)}`,
                 owner_uuid: activeUser.user.uuid,
                 manifest_text: ". 37b51d194a7513e45b56f6524f2d51f2+3 0:3:bar\n"
-            })
-                .as('testCollection1');
+            }).as('testCollection1');
+        });
+
+        it('uploads a file and checks the collection UI to be fresh', () => {
+            cy.getAll('@testCollection1')
+                .then(function([testCollection1]) {
+                    cy.loginAs(activeUser);
+                    cy.goToPath(`/collections/${testCollection1.uuid}`);
+                    cy.get('[data-cy=upload-button]').click();
+                    cy.get('[data-cy=collection-files-panel]')
+                        .contains('5mb_a.bin').should('not.exist');
+                    cy.get('[data-cy=collection-file-count]').should('contain', '1');
+                    cy.fixture('files/5mb.bin', 'base64').then(content => {
+                        cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_a.bin');
+                        cy.get('[data-cy=form-submit-btn]').click();
+                        cy.get('[data-cy=form-submit-btn]').should('not.exist');
+                    });
+                    // Confirm that the file browser has been updated.
+                    cy.get('[data-cy=collection-files-panel]')
+                        .contains('5mb_a.bin').should('exist');
+                    // Confirm that the collection panel has been updated.
+                    cy.get('[data-cy=collection-file-count]').should('contain', '2');
+                });
         });
 
         it('allows to cancel running upload', () => {

diff --git a/cypress/integration/side-panel.spec.js b/cypress/integration/side-panel.spec.js
index afe326e39a15166075bbf399a5578c16422b8b6b..4c824d3275f5d83bf53a04da7dc1abf41312a9d1 100644 (file)
--- a/cypress/integration/side-panel.spec.js
+++ b/cypress/integration/side-panel.spec.js
@@ -82,7 +82,6 @@ describe('Side panel tests', function() {
             group_class: 'filter',
             properties: {filters: []},
         }).as('myFavoriteFilterGroup').then(function (myFavoriteFilterGroup) {
-            cy.contains('Refresh').click();
             cy.goToPath(`/projects/${myFavoriteFilterGroup.uuid}`);
             cy.get('[data-cy=breadcrumb-last]').should('contain', 'my-favorite-filter-group');
 

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 1ef6b5c94cdf117ea52a932c47a085957ce6c2d2..1f7e8603c5ec25bb9afa8a1a68b8565b7c7a909d 100644 (file)
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -201,7 +201,6 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
     const [path, setPath]: any = React.useState([]);
     const [pathData, setPathData]: any = React.useState({});
     const [isLoading, setIsLoading] = React.useState(false);
-    const [collectionAutofetchEnabled, setCollectionAutofetchEnabled] = React.useState(false);
     const [leftSearch, setLeftSearch] = React.useState('');
     const [rightSearch, setRightSearch] = React.useState('');
 
@@ -278,13 +277,12 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
         }
     }, [rightKey]); // eslint-disable-line react-hooks/exhaustive-deps
 
+    const currentPDH = (collectionPanel.item || {}).portableDataHash;
     React.useEffect(() => {
-        const hash = (collectionPanel.item || {}).portableDataHash;
-
-        if (hash && collectionAutofetchEnabled) {
+        if (currentPDH) {
             fetchData([leftKey, rightKey], true);
         }
-    }, [(collectionPanel.item || {}).portableDataHash]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [currentPDH]); // eslint-disable-line react-hooks/exhaustive-deps
 
     React.useEffect(() => {
         if (rightData) {
@@ -315,10 +313,6 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
 
             if (id) {
                 onItemMenuOpen(event, item, isWritable);
-
-                if (!collectionAutofetchEnabled) {
-                    setCollectionAutofetchEnabled(true);
-                }
             }
         },
         [onItemMenuOpen, isWritable, rightData] // eslint-disable-line react-hooks/exhaustive-deps
@@ -445,9 +439,6 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
                     <IconButton
                         data-cy='collection-files-panel-options-btn'
                         onClick={(ev) => {
-                            if (!collectionAutofetchEnabled) {
-                                setCollectionAutofetchEnabled(true);
-                            }
                             onOptionsMenuOpen(ev, isWritable);
                         }}>
                         <CustomizeTableIcon />
@@ -517,9 +508,6 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
                             className={classes.uploadButton}
                             data-cy='upload-button'
                             onClick={() => {
-                                if (!collectionAutofetchEnabled) {
-                                    setCollectionAutofetchEnabled(true);
-                                }
                                 onUploadDataClick();
                             }}
                             variant='contained'
@@ -567,7 +555,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
                                                     </div>
                                                 }
                                             }
-                                        </FixedSizeList> : <div className={classes.rowEmpty}>No data available</div>
+                                        </FixedSizeList> : <div className={classes.rowEmpty}>This collection is empty</div>
                                     }}
                                 </AutoSizer> : <div className={classes.row}><CircularProgress className={classes.loader} size={30} /></div>
                         }

diff --git a/src/index.tsx b/src/index.tsx
index 0b04c29e4c896c5387688caeadb35cc29bafc43a..c160f96c2c9346be412757a149c5d45c7da78ec7 100644 (file)
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -183,7 +183,7 @@ const initListener = (history: History, store: RootStore, services: ServiceRepos
     let initialized = false;
     return async () => {
         const { router, auth } = store.getState();
-        if (router.location && auth.user && !initialized) {
+        if (router.location && auth.user && services.authService.getApiToken() && !initialized) {
             initialized = true;
             initWebSocket(config, services.authService, store);
             await store.dispatch(loadWorkbench());

diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index d513cfb48db2ed329427150ddd541456cca097cc..dce8ef8f68cde0083a14703aee13e05f966f339e 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -323,7 +323,7 @@ export const CollectionDetailsAttributes = (props: CollectionDetailsProps) => {
         </Grid>
         <Grid item xs={12} md={mdSize}>
             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                label='Number of files' value={item.fileCount} />
+                label='Number of files' value={<span data-cy='collection-file-count'>{item.fileCount}</span>} />
         </Grid>
         <Grid item xs={12} md={mdSize}>
             <DetailsAttribute classLabel={classes.label} classValue={classes.value}

diff --git a/src/websocket/websocket.ts b/src/websocket/websocket.ts
index b12658086c9493729c3ab9f183ed8764547ce16e..7c8e0171e6d38bb48286b3d23a341c5c881986f8 100644 (file)
--- a/src/websocket/websocket.ts
+++ b/src/websocket/websocket.ts
@@ -15,6 +15,7 @@ import { subprocessPanelActions } from "store/subprocess-panel/subprocess-panel-
 import { projectPanelActions } from "store/project-panel/project-panel-action";
 import { getProjectPanelCurrentUuid } from 'store/project-panel/project-panel-action';
 import { allProcessesPanelActions } from 'store/all-processes-panel/all-processes-panel-action';
+import { loadCollection } from 'store/workbench/workbench-actions';
 
 export const initWebSocket = (config: Config, authService: AuthService, store: RootStore) => {
     if (config.websocketUrl) {
@@ -29,6 +30,12 @@ export const initWebSocket = (config: Config, authService: AuthService, store: R
 const messageListener = (store: RootStore) => (message: ResourceEventMessage) => {
     if (message.eventType === LogEventType.CREATE || message.eventType === LogEventType.UPDATE) {
         switch (message.objectKind) {
+            case ResourceKind.COLLECTION:
+                const currentCollection = store.getState().collectionPanel.item;
+                if (currentCollection && currentCollection.uuid === message.objectUuid) {
+                    store.dispatch(loadCollection(message.objectUuid));
+                }
+                return;
             case ResourceKind.CONTAINER_REQUEST:
                 if (store.getState().processPanel.containerRequestUuid === message.objectUuid) {
                     store.dispatch(loadProcess(message.objectUuid));

diff --git a/tools/arvados_config.yml b/tools/arvados_config.yml
index 55dc8a020b2361769d85a1155af946cbd5c34bc5..b9bcfbe0d3327880f39244d321718f374b4f1aac 100644 (file)
--- a/tools/arvados_config.yml
+++ b/tools/arvados_config.yml
@@ -15,6 +15,8 @@ Clusters:
       ForwardSlashNameSubstitution: /
       ManagedProperties:
         original_owner_uuid: {Function: original_owner, Protected: true}
+      WebDAVCache:
+        UUIDTTL: 0s
     Login:
       PAM:
         Enable: true