Spiffier UI: Allow opening nav items in new tab (#3514)

changes/issue-340-nav-open-new-tab

@@ -0,0 +1 @@
+* Nav items can be opened in a new tab or window

cypress/integration/all/app/hosts.spec.ts

@@ -69,7 +69,7 @@ describe(
 
         // Go to host details page
         cy.location("pathname").should("match", /hosts\/[0-9]/i);
-        cy.get("span.status").should("contain", /online/i);
+        cy.getAttached("span.status").should("contain", /online/i);
 
         // Run policy on host
         let policyname = "";

frontend/components/side_panels/SiteTopNav/SiteTopNav.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import { Link } from "react-router";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
@@ -35,7 +36,6 @@ class SiteTopNav extends Component {
   renderNavItem = (navItem) => {
     const { name, iconName } = navItem;
     const {
-      onNavItemClick,
       pathname,
       config: { org_logo_url: orgLogoURL },
     } = this.props;
@@ -51,12 +51,12 @@ class SiteTopNav extends Component {
     if (iconName === "logo") {
       return (
         <li className={navItemClasses} key={`nav-item-${name}`}>
-          <a
+          <Link
             className={`${navItemBaseClass}__link`}
-            onClick={onNavItemClick(navItem.location.pathname)}
+            to={navItem.location.pathname}
           >
             <OrgLogoIcon className="logo" src={orgLogoURL} />
-          </a>
+          </Link>
         </li>
       );
     }
@@ -82,9 +82,9 @@ class SiteTopNav extends Component {
 
     return (
       <li className={navItemClasses} key={`nav-item-${name}`}>
-        <a
+        <Link
           className={`${navItemBaseClass}__link`}
-          onClick={onNavItemClick(navItem.location.pathname)}
+          to={navItem.location.pathname}
         >
           {icon}
           <span
@@ -93,7 +93,7 @@ class SiteTopNav extends Component {
           >
             {name}
           </span>
-        </a>
+        </Link>
       </li>
     );
   };

frontend/components/side_panels/SiteTopNav/_styles.scss

@@ -67,6 +67,7 @@
     display: flex;
     align-items: center;
     padding: 14px 20px 17px;
+    text-decoration: none;
   }
 
   &--active {