From 12f1349735a436099165c5a97de12c737d811bc1 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 13 Feb 2020 18:34:13 +0100
Subject: [PATCH] Added Shared with Me mode in WBBrowse.

---
 .../src/js/component/wb-arvados-crumbs.js     | 13 +++--
 frontend/src/js/component/wb-navbar-common.js |  1 +
 .../src/js/component/wb-project-listing.js    | 20 ++++----
 frontend/src/js/page/wb-app.js                |  8 +++-
 frontend/src/js/page/wb-browse.js             | 47 ++++++++++++-------
 frontend/src/js/widget/wb-tabs.js             |  3 ++
 6 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/frontend/src/js/component/wb-arvados-crumbs.js b/frontend/src/js/component/wb-arvados-crumbs.js
index 233be8e..26640bb 100644
--- a/frontend/src/js/component/wb-arvados-crumbs.js
+++ b/frontend/src/js/component/wb-arvados-crumbs.js
@@ -9,13 +9,20 @@ class WBArvadosCrumbs extends Component {
   }
 
   fetchCrumbs() {
-    if (!this.props.uuid) {
+    const { mode, uuid, app } = this.props;
+    const { arvHost, arvToken } = app.state;
+
+    if (mode === 'shared-with-me') {
+      this.setState({ 'items': [ { 'name': 'Shared with Me' } ] });
+      return;
+    }
+
+    if (!uuid) {
       this.setState({ 'items': [ { 'name': 'All Projects' } ] });
       return;
     }
 
-    let { arvHost, arvToken } = this.props.app.state;
-    let prom = fetchObjectParents(arvHost, arvToken, this.props.uuid);
+    let prom = fetchObjectParents(arvHost, arvToken, uuid);
     prom = prom.then(parents => {
       this.setState({ 'items': parents });
     });
diff --git a/frontend/src/js/component/wb-navbar-common.js b/frontend/src/js/component/wb-navbar-common.js
index 3b6a09b..bd6c6c3 100644
--- a/frontend/src/js/component/wb-navbar-common.js
+++ b/frontend/src/js/component/wb-navbar-common.js
@@ -10,6 +10,7 @@ class WBNavbarCommon extends Component {
           { 'name': 'Home', 'id': 'home' },
           { 'name': 'All Projects', 'id': 'all-projects' },
           { 'name': 'All Users', 'id': 'all-users' },
+          { 'name': 'Shared with Me', 'id': 'shared-with-me' },
           { 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
         ].concat(items) }
         rhs={ (
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 26f4f4a..51795f8 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -42,16 +42,18 @@ class WBProjectListing extends Component {
   }
 
   fetchItems() {
-    let i = this.props.activePage;
+    let { activePage, mode, itemsPerPage, ownerUuid, app } = this.props;
+    let { arvHost, arvToken } = app.state;
     let filters = [
       [ 'group_class', '=', 'project' ]
     ];
-    if (this.props.ownerUuid)
-      filters.push([ 'owner_uuid', '=', this.props.ownerUuid ]);
-    let prom = makeArvadosRequest(this.props.arvHost, this.props.arvToken,
-      '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters)) +
-      '&limit=' + encodeURIComponent(this.props.itemsPerPage) +
-      '&offset=' + encodeURIComponent(this.props.itemsPerPage * i));
+    if (ownerUuid)
+      filters.push([ 'owner_uuid', '=', ownerUuid ]);
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/groups' + (mode === 'shared-with-me' ? '/shared' : '') +
+      '?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+      '&limit=' + itemsPerPage +
+      '&offset=' + (itemsPerPage * activePage));
     prom = prom.then(xhr =>
       this.setState({
         'numPages': Math.ceil(xhr.response['items_available'] / xhr.response['limit']),
@@ -65,7 +67,7 @@ class WBProjectListing extends Component {
     this.fetchItems();
   }
 
-  render({ arvHost, arvToken, ownerUuid, activePage, onPageChanged }, { rows, numPages }) {
+  render({ arvHost, arvToken, ownerUuid, activePage, getPageUrl }, { rows, numPages }) {
     return (
       <div>
         <WBTable columns={ [ 'Name', 'Description', 'Owner', 'Actions' ] }
@@ -73,7 +75,7 @@ class WBProjectListing extends Component {
 
         <WBPagination numPages={ numPages }
           activePage={ activePage }
-          onPageChanged={ i => onPageChanged(i) } />
+          getPageUrl={ getPageUrl } />
       </div>
     );
   }
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index eccf52b..1862de3 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -31,6 +31,8 @@ class WBApp extends Component {
       return ('/browse');
     } else if (item['id'] === 'all-users') {
       return ('/users');
+    } else if (item['id'] === 'shared-with-me') {
+      return ('/shared-with-me');
     }
   }
 
@@ -70,8 +72,10 @@ class WBApp extends Component {
         <WBSignOut path='/sign-out' app={ this } />
 
         <WBBrowse path="/browse/:ownerUuid?/:activePage?/:objTypeTab?/:collectionPage?/:processPage?/:workflowPage?"
-          appState={ this.state }
-          app={ this } />
+          app={ this } mode="browse" />
+
+        <WBBrowse path="/shared-with-me/:activePage?"
+          app={ this } mode="shared-with-me" />
 
         <WBProcessView path="/process/:uuid" app={ this } />
 
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 984ec90..b4ea93d 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -22,6 +22,12 @@ class WBBrowse extends Component {
   }
 
   getUrl(params) {
+    const mode = ('mode' in params ? params.mode : this.props.mode);
+
+    if (mode === 'shared-with-me')
+      return '/shared-with-me/' + ('activePage' in params ? params.activePage :
+        (this.props.activePage || ''));
+
     let res = '/browse/' +
       ('ownerUuid' in params ? params.ownerUuid : (this.props.ownerUuid || '')) + '/' +
       ('activePage' in params ? params.activePage : (this.props.activePage || '')) + '/' +
@@ -59,7 +65,7 @@ class WBBrowse extends Component {
     );
   }
 
-  render({ ownerUuid, activePage, appState, app,
+  render({ mode, ownerUuid, activePage, app,
     objTypeTab, collectionPage, processPage, workflowPage }) {
 
     return (
@@ -70,36 +76,41 @@ class WBBrowse extends Component {
 
         <WBNewProjectDialog app={ app } ref={ this.newProjectDialogRef } />
 
-        <WBNavbarCommon app={ app } activeItem={ !ownerUuid ? 'all-projects' :
-          (ownerUuid === app.state.currentUser.uuid ? 'home' : null) } />
+        <WBNavbarCommon app={ app } activeItem={ mode === 'shared-with-me' ? 'shared-with-me' :
+          (!ownerUuid) ? 'all-projects' :
+          (ownerUuid === app.state.currentUser.uuid) ? 'home' : null } />
 
-        <WBArvadosCrumbs uuid={ ownerUuid } app={ app } />
+        <WBArvadosCrumbs mode={ mode } uuid={ ownerUuid } app={ app } />
 
         <WBTabs tabs={ [
           { 'name': 'Projects', 'isActive': true },
-          { 'name': ( <span><i class="fas fa-plus-square text-success"></i> New Project</span> ),
+          ownerUuid ? { 'name': ( <span><i class="fas fa-plus-square text-success"></i> New Project</span> ),
             'onClick': () => this.newProjectDialogRef.current.show(ownerUuid,
-              () => this.projectListingRef.current.fetchItems() ) }
+              () => this.projectListingRef.current.fetchItems() ) } : null
         ] } />
 
         <WBProjectListing ref={ this.projectListingRef }
           app={ app }
-          arvHost={ appState.arvHost }
-          arvToken={ appState.arvToken }
+          arvHost={ app.state.arvHost }
+          arvToken={ app.state.arvToken }
+          mode={ mode }
           ownerUuid={ ownerUuid }
           itemsPerPage="5"
           activePage={ Number(activePage || 0) }
-          onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i) }
+          getPageUrl={ i => this.getUrl({ 'activePage': i }) }
           renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
           renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
-        <WBTabs tabs={ [
-          { 'id': 'collection', 'name': 'Collections', 'isActive': (!objTypeTab || objTypeTab === 'collection') },
-          { 'id': 'process', 'name': 'Processes', 'isActive': (objTypeTab === 'process') },
-          { 'id': 'workflow', 'name': 'Workflows', 'isActive': (objTypeTab === 'workflow') } ] }
-          onTabChanged={ tab => this.route({ 'objTypeTab': tab['id'] }) } />
+        { (mode !== 'browse') ? null : (
+          <WBTabs tabs={ [
+            { 'id': 'collection', 'name': 'Collections', 'isActive': (!objTypeTab || objTypeTab === 'collection') },
+            { 'id': 'process', 'name': 'Processes', 'isActive': (objTypeTab === 'process') },
+            { 'id': 'workflow', 'name': 'Workflows', 'isActive': (objTypeTab === 'workflow') } ] }
+            onTabChanged={ tab => this.route({ 'objTypeTab': tab['id'] }) } />
+        ) }
 
         {
+          (mode !== 'browse') ? null :
           (!objTypeTab || objTypeTab === 'collection') ? (
             <WBCollectionListing app={ app }
               ownerUuid={ ownerUuid }
@@ -109,8 +120,8 @@ class WBBrowse extends Component {
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
-          ) : (objTypeTab === 'process' ? (
-            <WBProcessListing appState={ appState }
+          ) : (objTypeTab === 'process') ? (
+            <WBProcessListing appState={ app.state }
               ownerUuid={ ownerUuid }
               itemsPerPage="20"
               activePage={ Number(processPage || 0) }
@@ -118,7 +129,7 @@ class WBBrowse extends Component {
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
-          ) : (objTypeTab === 'workflow' ? (
+          ) : (objTypeTab === 'workflow') ? (
             <WBWorkflowListing app={ app }
               ownerUuid={ ownerUuid }
               itemsPerPage="20"
@@ -127,7 +138,7 @@ class WBBrowse extends Component {
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
               renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
 
-          ) : null))
+          ) : null
         }
       </div>
     );
diff --git a/frontend/src/js/widget/wb-tabs.js b/frontend/src/js/widget/wb-tabs.js
index 29faa35..e2bc2f5 100644
--- a/frontend/src/js/widget/wb-tabs.js
+++ b/frontend/src/js/widget/wb-tabs.js
@@ -7,6 +7,9 @@ class WBTabs extends Component {
         { tabs.map((t, idx) => {
           let name, isActive, isDisabled, onClick;
 
+          if (!t)
+            return null;
+
           if (typeof(t) === 'object') {
             name = t.name;
             isActive = t.isActive;