From bb2b8fa70f3fb250601ad717ca2b88cb49c3dd37 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 7 Jan 2022 11:18:21 -0500
Subject: [PATCH] Spiffier UI: Allow opening nav items in new tab (#3514)

---
 changes/issue-340-nav-open-new-tab                 |  1 +
 cypress/integration/all/app/hosts.spec.ts          |  2 +-
 .../side_panels/SiteTopNav/SiteTopNav.jsx          | 14 +++++++-------
 .../components/side_panels/SiteTopNav/_styles.scss |  1 +
 4 files changed, 10 insertions(+), 8 deletions(-)
 create mode 100644 changes/issue-340-nav-open-new-tab

diff --git a/changes/issue-340-nav-open-new-tab b/changes/issue-340-nav-open-new-tab
new file mode 100644
index 0000000000..fa8672fdff
--- /dev/null
+++ b/changes/issue-340-nav-open-new-tab
@@ -0,0 +1 @@
+* Nav items can be opened in a new tab or window
\ No newline at end of file
diff --git a/cypress/integration/all/app/hosts.spec.ts b/cypress/integration/all/app/hosts.spec.ts
index 1e4a402a16..a1f00db4ed 100644
--- a/cypress/integration/all/app/hosts.spec.ts
+++ b/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 = "";
diff --git a/frontend/components/side_panels/SiteTopNav/SiteTopNav.jsx b/frontend/components/side_panels/SiteTopNav/SiteTopNav.jsx
index 9d3240001c..97ca7d1fb2 100644
--- a/frontend/components/side_panels/SiteTopNav/SiteTopNav.jsx
+++ b/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>
     );
   };
diff --git a/frontend/components/side_panels/SiteTopNav/_styles.scss b/frontend/components/side_panels/SiteTopNav/_styles.scss
index 35bec8d681..d727c46ec7 100644
--- a/frontend/components/side_panels/SiteTopNav/_styles.scss
+++ b/frontend/components/side_panels/SiteTopNav/_styles.scss
@@ -67,6 +67,7 @@
     display: flex;
     align-items: center;
     padding: 14px 20px 17px;
+    text-decoration: none;
   }
 
   &--active {