Merge pull request #1239 from HubSpot/add_href_to_navitems

Add href to navitems

SingularityUI/app/components/common/Navigation.jsx

@@ -2,51 +2,82 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter, Link } from 'react-router';
 import { ToggleVisibility } from '../../actions/ui/globalSearch';
+import classnames from 'classnames';
 
-import { Navbar, NavItem, Nav, NavDropdown, MenuItem, Glyphicon } from 'react-bootstrap';
-
-function goTo(router, event, route) {
-  event.preventDefault();
-  router.push(route);
-}
+import { Glyphicon } from 'react-bootstrap';
 
 function handleSearchClick(event, toggleGlobalSearch) {
   event.preventDefault();
   toggleGlobalSearch();
 }
 
+function isActive(navbarPath, fragment) {
+  if (navbarPath === 'requests' || navbarPath === 'request') {
+    return _.contains(['requests', 'request'], fragment);
+  }
+  if (navbarPath === 'tasks' || navbarPath === 'task') {
+    return _.contains(['tasks', 'task'], fragment);
+  }
+  if (navbarPath === 'admin') {
+    return (
+      fragment === 'racks' ||
+      fragment === 'slaves' ||
+      fragment === 'webhooks' ||
+      fragment === 'task-search'
+    );
+  }
+  if (navbarPath === '/') {
+    return fragment === '';
+  }
+  return navbarPath === fragment;
+}
+
 // put into page wrapper, render children
 const Navigation = (props) => {
   const fragment = props.location.pathname.split('/')[1];
   return (
-    <Navbar fluid={true}>
-      <Navbar.Header>
-        <Navbar.Brand>
-          <Link to="/">{config.title}</Link>
-        </Navbar.Brand>
-        <Navbar.Toggle />
-      </Navbar.Header>
-      <Navbar.Collapse>
-        <Nav>
-          <NavItem eventKey={1} active={fragment === ''} onClick={(event) => goTo(props.router, event, '')}>Dashboard</NavItem>
-          <NavItem eventKey={2} active={fragment === 'status'} onClick={(event) => goTo(props.router, event, 'status')}>Status</NavItem>
-          <NavItem eventKey={3} active={_.contains(['requests', 'request'], fragment)} onClick={(event) => goTo(props.router, event, 'requests')}>Requests</NavItem>
-          <NavItem eventKey={4} active={_.contains(['tasks', 'task'], fragment)} onClick={(event) => goTo(props.router, event, 'tasks')}>Tasks</NavItem>
-          <NavDropdown id="admin-dropdown" eventKey={5} active={_.contains(['racks', 'slaves', 'webhooks'], fragment)} title="Admin">
-            <MenuItem eventKey={5.1} onClick={(event) => goTo(props.router, event, 'racks')}>Racks</MenuItem>
-            <MenuItem eventKey={5.2} onClick={(event) => goTo(props.router, event, 'slaves')}>Slaves</MenuItem>
-            <MenuItem eventKey={5.3} onClick={(event) => goTo(props.router, event, 'webhooks')}>Webhooks</MenuItem>
-            <MenuItem divider={true} />
-            <MenuItem eventKey={5.4} onClick={(event) => goTo(props.router, event, 'task-search')}>Task search</MenuItem>
-          </NavDropdown>
-          <NavItem eventKey={6} target="blank" href={config.apiDocs}>API Docs <small>(Beta)</small></NavItem>
-          <NavItem eventKey={7} className="global-search-button" onClick={(event) => handleSearchClick(event, props.toggleGlobalSearch)}>
-            <Glyphicon glyph="search" />
-            <span className="icon-search-adjacent-text"> Search</span>
-          </NavItem>
-        </Nav>
-      </Navbar.Collapse>
-    </Navbar>
+    <nav className="navbar navbar-default">
+      <div className="container-fluid">
+        <div className="navbar-header">
+          <Link className="navbar-brand" to="/">{config.title}</Link>
+        </div>
+        <div className="collapse navbar-collapse" id="navbar-collapse">
+          <ul className="nav navbar-nav">
+            <li className={classnames({active: isActive('/', fragment)})}>
+              <Link to="/">Dashboard {isActive('/', fragment) && <span className="sr-only">(current)</span>}</Link>
+            </li>
+            <li className={classnames({active: isActive('status', fragment)})}>
+              <Link to="/status">Status {isActive('status', fragment) && <span className="sr-only">(current)</span>}</Link>
+            </li>
+            <li className={classnames({active: isActive('requests', fragment)})}>
+              <Link to="/requests">Requests {isActive('requests', fragment) && <span className="sr-only">(current)</span>}</Link>
+            </li>
+            <li className={classnames({active: isActive('tasks', fragment)})}>
+              <Link to="/tasks">Tasks {isActive('tasks', fragment) && <span className="sr-only">(current)</span>}</Link>
+            </li>
+            <li className={classnames('dropdown', {active: isActive('admin', fragment)})}>
+              <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                Admin <span className="caret"></span>
+              </a>
+              <ul className="dropdown-menu">
+                <li><Link to="/racks">Racks</Link></li>
+                <li><Link to="/slaves">Slaves</Link></li>
+                <li><Link to="/webhooks">Webhooks</Link></li>
+                <li role="separator" className="divider"></li>
+                <li><Link to="/task-search">Task Search</Link></li>
+              </ul>
+            </li>
+            <li><a href={config.apiDocs}>API Docs <small>(Beta)</small></a></li>
+            <li>
+              <a href="#" onClick={(event) => handleSearchClick(event, props.toggleGlobalSearch)}>
+                <Glyphicon glyph="search" />
+                <span className="icon-search-adjacent-text"> Search</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
   );
 };