Making the navbar more configurable.

frontend/src/js/component/wb-inline-search.js

@@ -0,0 +1,14 @@
+import { h, Component } from 'preact';
+
+class WBInlineSearch extends Component {
+  render() {
+    return (
+      <form class="form-inline my-2 my-lg-0">
+        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
+        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+      </form>
+    );
+  }
+}
+
+export default WBInlineSearch;

frontend/src/js/component/wb-navbar.js

@@ -1,49 +0,0 @@
-import { h, Component } from 'preact';
-
-class WBNavbar extends Component {
-  render() {
-    return (
-      <nav class="navbar navbar-expand-lg navbar-light bg-light">
-        <a class="navbar-brand" href="#">Workbench Advanced</a>
-
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul class="navbar-nav mr-auto">
-            <li class="nav-item active">
-              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#"><i class="fas fa-user"></i> Log In</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">Link</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Dropdown
-              </a>
-              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <a class="dropdown-item" href="#">Action</a>
-                <a class="dropdown-item" href="#">Another action</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">Something else here</a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link disabled" href="#">Disabled</a>
-            </li>
-          </ul>
-          <form class="form-inline my-2 my-lg-0">
-            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
-            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-          </form>
-        </div>
-      </nav>
-    );
-  }
-}
-
-export default WBNavbar;

frontend/src/js/component/wb-app.js → frontend/src/js/page/wb-app.js

@@ -6,6 +6,7 @@ import WBPagination from 'wb-pagination';
 import WBProjectListing from 'wb-project-listing';
 import WBNavbar from 'wb-navbar';
 import WBBrowse from 'wb-browse';
+import WBSignIn from 'wb-sign-in';
 
 class WBApp extends Component {
   render({}, { activePage }) {
@@ -15,9 +16,7 @@ class WBApp extends Component {
           Hello, world!
         </div>
 
-        <div path="/login">
-          <WBNavbar />
-        </div>
+        <WBSignIn path="/sign-in" />
 
         <WBBrowse path="/browse/:ownerUuid?" />
       </Router>

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

@@ -1,12 +1,18 @@
 import { h, Component } from 'preact';
 import WBNavbar from 'wb-navbar';
 import WBProjectListing from 'wb-project-listing';
+import WBInlineSearch from 'wb-inline-search';
 
 class WBBrowse extends Component {
   render({ ownerUuid }) {
     return (
       <div>
-        <WBNavbar />
+        <WBNavbar items={ [
+          { 'name': 'Browse', 'active': true },
+          { 'name': 'User', 'dropdown': [ 'Sign Off' ]}
+        ] } rhs={ (
+          <WBInlineSearch />
+        ) } />
         <WBProjectListing arvHost="api.arkau.roche.com"
           arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
           ownerUuid={ ownerUuid }

frontend/src/js/page/wb-sign-in.js

@@ -0,0 +1,31 @@
+import { h, Component } from 'preact';
+import WBNavbar from 'wb-navbar';
+
+class WBLogin extends Component {
+  render() {
+    return (
+      <div>
+        <div class="container">
+          <div class="row justify-content-center">
+            <div class="col-6">
+              <h1>Sign In</h1>
+              <form>
+                <div class="form-group">
+                  <label for="arvHost">Arvados API Host</label>
+                  <input type="text" class="form-control" id="arvHost" placeholder="Enter Arvados API Host" />
+                </div>
+                <div class="form-group">
+                  <label for="arvToken">Token</label>
+                  <input type="text" class="form-control" id="arvToken" placeholder="Enter Arvados API Token" />
+                </div>
+                <button type="submit" class="btn btn-primary">Submit</button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WBLogin;

frontend/src/js/widget/wb-navbar.js

@@ -0,0 +1,87 @@
+import { h, Component } from 'preact';
+
+class WBNavbar extends Component {
+  render({ title, items, rhs, onItemClicked }) {
+    return (
+      <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <a class="navbar-brand" href="#">{ title }</a>
+
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav mr-auto">
+
+            { items.map(i => {
+              if (typeof(i) === 'string')
+                return (
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">{ i }</a>
+                  </li>
+                );
+
+              else if (typeof(i) === 'object')
+                var li_cls = ['nav-item'];
+                if (i['active'])
+                  li_cls.push('active');
+                var a_cls = ['nav-link'];
+                if (i['disabled'])
+                  a_cls.push('disabled');
+
+                if ('dropdown' in i) {
+                  li_cls.push('dropdown');
+                  a_cls.push('dropdown-toggle');
+
+                  li_cls = li_cls.join(' ');
+                  a_cls = a_cls.join(' ');
+
+                  return (
+                    <li class={ li_cls }>
+                      <a class={ a_cls } href="#" id={ i['name'].replace(' ', '-').toLowerCase() + '-dropdown' }
+                        role="button" data-toggle="dropdown" aria-haspopup="true"
+                        aria-expanded="false">{ i['name'] }</a>
+                      <div class="dropdown-menu" aria-labelledby={ i['name'].replace(' ', '-').toLowerCase() + '-dropdown' }>
+                        { i['dropdown'].map(d => {
+                          if (typeof(d) === 'string')
+                            return (
+                              <a class="dropdown-item" href="#" onclick={ e => { e.preventDefault(); onItemClicked(d); } }>{ d }</a>
+                            );
+
+                          else if (typeof(d) === 'object' && d['divider'])
+                            return (
+                              <div class="dropdown-divider" />
+                            );
+                        }) }
+                      </div>
+                    </li>
+                  );
+                } else {
+                  li_cls = li_cls.join(' ');
+                  a_cls = a_cls.join(' ');
+
+                  return (
+                    <li class={ li_cls }>
+                      <a class={ a_cls } href="#" onclick={ e => { e.preventDefault(); onItemClicked(i); } }>{ i['name'] }</a>
+                    </li>
+                  );
+                }
+
+            }) }
+          </ul>
+
+          { rhs }
+        </div>
+      </nav>
+    );
+  }
+}
+
+WBNavbar.defaultProps = {
+  'title': 'Workbench Advanced',
+  'items': [],
+  'form': null,
+  'onItemClicked': () => {}
+}
+
+export default WBNavbar;