Added selectability to WBBrowse.

frontend/src/css/index.css

@@ -5,3 +5,7 @@ pre.word-wrap {
     white-space: -o-pre-wrap;    /* Opera 7 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
+
+.w-1 {
+  width: 1px !important;
+}

frontend/src/js/component/wb-collection-listing.js

@@ -21,9 +21,11 @@ class WBCollectionListing extends Component {
   }
 
   prepareRows(items, ownerLookup) {
-    let { app, renderRenameLink, renderDeleteButton } = this.props;
+    let { app, renderRenameLink, renderDeleteButton,
+      renderSelectionCell } = this.props;
 
     return items.map(item => [
+      renderSelectionCell(item),
       (<div>
         <div>
           <a href={ urlForObject(item) }>
@@ -137,7 +139,8 @@ class WBCollectionListing extends Component {
           { error }
         </div>) : null }
 
-        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'File Count', 'Total Size', 'Actions' ] }
+        <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'File Count', 'Total Size', 'Actions' ] }
+          headerClasses={ [ 'w-1'] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }

frontend/src/js/component/wb-process-listing.js

@@ -28,9 +28,11 @@ class WBProcessListing extends Component {
   }
 
   prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
-    const { app, renderRenameLink, renderDeleteButton } = this.props;
+    const { app, renderRenameLink, renderDeleteButton,
+      renderSelectionCell } = this.props;
     return requests.map(item => {
       return ( [
+        renderSelectionCell(item),
         (<div>
           <div>
             <a href={ '/process/' + item['uuid'] }>
@@ -95,7 +97,8 @@ class WBProcessListing extends Component {
           cssClass="float-left mx-2 my-2" title="Request State: "
           onChange={ () => this.fetchItems() } />
 
-        <WBTable columns={ [ 'Name', 'Status', 'Owner', 'Created At', 'Output', 'Actions' ] }
+        <WBTable columns={ [ '', 'Name', 'Status', 'Owner', 'Created At', 'Output', 'Actions' ] }
+          headerClasses={ [ 'w-1' ] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }

frontend/src/js/component/wb-project-listing.js

@@ -17,9 +17,11 @@ class WBProjectListing extends Component {
   }
 
   prepareRows(items) {
-    let { app, renderRenameLink, renderDeleteButton } = this.props;
+    const { app, renderRenameLink, renderDeleteButton,
+      renderSelectionCell } = this.props;
 
     return items.map(item => [
+      renderSelectionCell(item),
       (<div>
         <div>
           <a href="#"
@@ -70,7 +72,8 @@ class WBProjectListing extends Component {
   render({ arvHost, arvToken, ownerUuid, activePage, getPageUrl }, { rows, numPages }) {
     return (
       <div>
-        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'Actions' ] }
+        <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'Actions' ] }
+          headerClasses={ [ 'w-1' ] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }
@@ -84,7 +87,9 @@ class WBProjectListing extends Component {
 WBProjectListing.defaultProps = {
   'itemsPerPage': 100,
   'ownerUuid': null,
-  'renderRenameLink': () => null
+  'renderRenameLink': () => null,
+  'renderDeleteButton': () => null,
+  'renderSelectionCell': () => null
 };
 
 export default WBProjectListing;

frontend/src/js/component/wb-workflow-listing.js

@@ -21,8 +21,10 @@ class WBWorkflowListing extends Component {
   }
 
   prepareRows(items, ownerLookup) {
-    const { renderRenameLink, renderDeleteButton } = this.props;
+    const { renderRenameLink, renderDeleteButton,
+      renderSelectionCell } = this.props;
     return items.map(item => [
+      renderSelectionCell(item),
       (
         <div>
           <div>
@@ -78,7 +80,8 @@ class WBWorkflowListing extends Component {
   render({ app, ownerUuid, page, getPageUrl }, { rows, numPages }) {
     return (
       <div>
-        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'Created At', 'Actions' ] }
+        <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'Created At', 'Actions' ] }
+          headerClasses={ [ 'w-1' ] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }

frontend/src/js/page/wb-browse.js

@@ -19,6 +19,7 @@ class WBBrowse extends Component {
     this.deleteDialogRef = createRef();
     this.newProjectDialogRef = createRef();
     this.projectListingRef = createRef();
+    this.state.selected = {};
   }
 
   getUrl(params) {
@@ -65,6 +66,22 @@ class WBBrowse extends Component {
     );
   }
 
+  renderSelectionCell(item) {
+    const { selected } = this.state;
+    const { uuid } = item;
+    return (
+      <div>
+        <input type="checkbox" checked={ (uuid in selected) }
+          onChange={ e => {
+          if (e.target.value === 'on')
+            selected[uuid] = true;
+          else
+            delete selected[uuid];
+        } } /> { '\u00A0' }
+      </div>
+    );
+  }
+
   render({ mode, ownerUuid, activePage, app,
     objTypeTab, collectionPage, processPage, workflowPage }) {
 
@@ -99,7 +116,8 @@ class WBBrowse extends Component {
           activePage={ Number(activePage || 0) }
           getPageUrl={ i => this.getUrl({ 'activePage': i }) }
           renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-          renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
+          renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
+          renderSelectionCell={ it => this.renderSelectionCell(it) } />
 
         { (mode !== 'browse') ? null : (
           <WBTabs tabs={ [
@@ -118,7 +136,8 @@ class WBBrowse extends Component {
               activePage={ Number(collectionPage || 0) }
               getPageUrl={ i => this.getUrl({ 'collectionPage': i }) }
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
+              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
+              renderSelectionCell={ it => this.renderSelectionCell(it) } />
 
           ) : (objTypeTab === 'process') ? (
             <WBProcessListing app={ app }
@@ -128,7 +147,8 @@ class WBBrowse extends Component {
               activePage={ Number(processPage || 0) }
               onPageChanged={ i => this.route({ 'processPage': i }) }
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
+              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
+              renderSelectionCell={ it => this.renderSelectionCell(it) } />
 
           ) : (objTypeTab === 'workflow') ? (
             <WBWorkflowListing app={ app }
@@ -137,7 +157,8 @@ class WBBrowse extends Component {
               page={ Number(workflowPage || 0) }
               getPageUrl={ i => this.getUrl({ 'workflowPage': i }) }
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
+              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
+              renderSelectionCell={ it => this.renderSelectionCell(it) } />
 
           ) : null
         }