From c542539f12d27c8ccd133fde94305003addd65e0 Mon Sep 17 00:00:00 2001
From: Huw Wilkins <huwshimi@gmail.com>
Date: Mon, 6 Jan 2020 11:59:13 +1100
Subject: [PATCH] Correctly highlight the nav item for the legacy app.

---
 legacy/src/app/entry.js                       |  4 ++
 .../Footer/__snapshots__/Footer.test.js.snap  |  2 +-
 shared/src/components/Header/Header.js        |  8 ++--
 shared/src/components/Header/Header.test.js   | 46 ++++++++++++++++++-
 4 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/legacy/src/app/entry.js b/legacy/src/app/entry.js
index 4f65247d54..12f539e7b8 100644
--- a/legacy/src/app/entry.js
+++ b/legacy/src/app/entry.js
@@ -363,6 +363,10 @@ const renderHeader = ($rootScope, $window, $http) => {
     />,
     headerNode
   );
+  $rootScope.$on("$routeChangeSuccess", function(event, next, current) {
+    // Update the header when the route changes.
+    renderHeader($rootScope, $window, $http);
+  });
 };
 
 const renderFooter = $window => {
diff --git a/shared/src/components/Footer/__snapshots__/Footer.test.js.snap b/shared/src/components/Footer/__snapshots__/Footer.test.js.snap
index 975808b27c..19d1b319e3 100644
--- a/shared/src/components/Footer/__snapshots__/Footer.test.js.snap
+++ b/shared/src/components/Footer/__snapshots__/Footer.test.js.snap
@@ -79,7 +79,7 @@ exports[`Footer renders 1`] = `
         className="u-remove-max-width"
       >
         © 
-        2019
+        2020
          Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.
       </p>
     </div>
diff --git a/shared/src/components/Header/Header.js b/shared/src/components/Header/Header.js
index 869f632474..52420e4792 100644
--- a/shared/src/components/Header/Header.js
+++ b/shared/src/components/Header/Header.js
@@ -56,6 +56,7 @@ export const Header = ({
       });
       window.ga("set", "dimension1", version);
       window.ga("set", "dimension2", uuid);
+
       const sendPageview = () => {
         const path = window.location.pathname + window.location.hash;
         window.ga("send", "pageview", path);
@@ -183,12 +184,12 @@ export const Header = ({
   const generateNavItems = links => {
     const hardwareLinks = links.filter(link => link.inHardwareMenu);
     const hardwareMenu = generateHardwareMenu(hardwareLinks);
+    const path = location.pathname + location.hash;
+
     const linkItems = links.map(link => (
       <li
         className={classNames("p-navigation__link", {
-          "is-selected": location.pathname.startsWith(
-            generateURL(link.url, link.isLegacy)
-          ),
+          "is-selected": path.startsWith(generateURL(link.url, link.isLegacy)),
           "u-hide--hardware-menu-threshold": link.inHardwareMenu
         })}
         key={link.url}
@@ -313,6 +314,7 @@ Header.propTypes = {
   enableAnalytics: PropTypes.bool,
   generateLocalLink: PropTypes.func,
   location: PropTypes.shape({
+    hash: PropTypes.string,
     pathname: PropTypes.string.isRequired
   }).isRequired,
   logout: PropTypes.func.isRequired,
diff --git a/shared/src/components/Header/Header.test.js b/shared/src/components/Header/Header.test.js
index 8cfaa82ab5..0beb92a179 100644
--- a/shared/src/components/Header/Header.test.js
+++ b/shared/src/components/Header/Header.test.js
@@ -81,7 +81,51 @@ describe("Header", () => {
       wrapper.findWhere(n => n.name() === "a" && n.text() === "Skip").exists()
     ).toBe(true);
     expect(
-      wrapper.find(".p-navigation__links").at(0).props().children
+      wrapper
+        .find(".p-navigation__links")
+        .at(0)
+        .props().children
     ).toBe(false);
   });
+
+  it("can highlight a new URL", () => {
+    const wrapper = shallow(
+      <Header
+        authUser={{
+          is_superuser: true,
+          username: "koala"
+        }}
+        basename="/MAAS"
+        completedIntro={true}
+        location={{
+          pathname: "/settings"
+        }}
+        logout={jest.fn()}
+      />
+    );
+    const selected = wrapper.find(".p-navigation__link.is-selected");
+    expect(selected.exists()).toBe(true);
+    expect(selected.text()).toEqual("Settings");
+  });
+
+  it("can highlight a legacy URL", () => {
+    const wrapper = shallow(
+      <Header
+        authUser={{
+          is_superuser: true,
+          username: "koala"
+        }}
+        basename="/MAAS"
+        completedIntro={true}
+        location={{
+          hash: "#/machines",
+          pathname: "/MAAS/"
+        }}
+        logout={jest.fn()}
+      />
+    );
+    const selected = wrapper.find(".p-navigation__link.is-selected");
+    expect(selected.exists()).toBe(true);
+    expect(selected.text()).toEqual("Machines");
+  });
 });