Implemented WBBrowseDialogUserList.

frontend/src/js/dialog/wb-browse-dialog-user-list.js

@@ -1,11 +1,69 @@
 import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
+import makeArvadosRequest from 'make-arvados-request';
 
 class WBBrowseDialogUserList extends Component {
-  render() {
+  constructor(...args) {
+    super(...args);
+    this.state.rows = [];
+  }
+
+  componentDidMount() {
+    this.fetchRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.fetchRows();
+  }
+
+  prepareRows(items) {
+    const { navigate } = this.props;
+    return items.map(it => [
+      (
+        <a href="#" onclick={ e => { e.preventDefault();
+          navigate('/browse-dialog/browse/' + it.uuid); } }>
+          { it.last_name + ', ' + it.first_name }
+        </a>
+      ),
+      it.uuid
+    ]);
+  }
+
+  fetchRows() {
+    const { arvHost, arvToken } = this.props.app.state;
+    const { itemsPerPage, page, textSearch } = this.props;
+    const order = ['last_name asc', 'first_name asc'];
+    const filters = [];
+    if (textSearch)
+      filters.push([ 'any', 'ilike', '%' + textSearch + '%' ]);
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/users?order=' +
+      encodeURIComponent(JSON.stringify(order)) +
+      '&limit=' + itemsPerPage +
+      '&offset=' + (itemsPerPage * page));
+    prom = prom.then(xhr => this.setState({
+      'rows': this.prepareRows(xhr.response.items),
+      'numPages': Math.ceil(xhr.response.items_available / itemsPerPage)
+    }));
+  }
+
+  render({ page, navigate }, { rows, numPages }) {
     return (
-      <div>WBBrowseDialogUserList</div>
+      <div>
+        <WBTable columns={ [ 'Name', 'UUID' ] }
+          rows={ rows } />
+
+        <WBPagination numPages={ numPages } activePage={ page }
+          onPageChanged={ i => navigate({ 'topPage': i }) } />
+      </div>
     );
   }
 }
 
+WBBrowseDialogUserList.defaultProps = {
+  'itemsPerPage': 20
+};
+
 export default WBBrowseDialogUserList;

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

@@ -162,7 +162,9 @@ class WBBrowseDialog extends Component {
               ) : null }
 
               { (mode === 'users') ? (
-                <WBBrowseDialogUserList app={ app } parent={ this } />
+                <WBBrowseDialogUserList app={ app }
+                  navigate={ url => this.navigate(url) }
+                  page={ topPage } textSearch={ textSearch }/>
               ) : null }
 
               { (mode === 'content') ? (