From 2271ff3d566d40ccba53f7e2a6e7504434a64a08 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 9 Oct 2019 16:00:45 +0100
Subject: [PATCH] Use header component for masthead

Replaces the following blocks/variables with the
`header` block filled by the `header` component:
- header_class
- proposition_header
- global_header_text
- homepage_url

Also rewrites code that selects header nav items

The original code inserts a class name to mark the
nav item as selected.

The GOVUK Frontend header just needs a boolean to
be passed to indicate an item is selected.

This uses the `header_navigation.is_selected`
method, as before, but changes its return value to
a boolean.
---
 app/navigation.py                 |   6 ++
 app/templates/admin_template.html | 117 ++++++++++++++++++++++--------
 2 files changed, 93 insertions(+), 30 deletions(-)

diff --git a/app/navigation.py b/app/navigation.py
index d4faadcdf..cf5b5b715 100644
--- a/app/navigation.py
+++ b/app/navigation.py
@@ -328,6 +328,12 @@ class HeaderNavigation(Navigation):
         'whitelist',
     }
 
+    # header HTML now comes from GOVUK Frontend so requires a boolean, not an attribute
+    def is_selected(self, navigation_item):
+        if request.endpoint in self.mapping[navigation_item]:
+            return True
+        return False
+
 
 class MainNavigation(Navigation):
 
diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html
index d2d305ac5..24e99e2eb 100644
--- a/app/templates/admin_template.html
+++ b/app/templates/admin_template.html
@@ -31,38 +31,95 @@
   </p>
 {% endblock %}
 
-{% block header_class %}with-proposition{% endblock %}
-{% block proposition_header %}
-  <div class="header-proposition">
-    <div class="content">
-      <a href="#proposition-links" class="js-header-toggle menu">Menu</a>
-      <nav id="proposition-menu">
-        <ul id="proposition-links">
-          <li><a href="{{ url_for('main.support') }}" {{ header_navigation.is_selected('support') }}>Support</a></li>
-          {% if current_user.is_authenticated %}
-            <li><a href="{{ url_for('main.documentation') }}" {{ header_navigation.is_selected('documentation') }}>Documentation</a></li>
-            <li><a href="{{ url_for('main.user_profile') }}" {{ header_navigation.is_selected('user-profile') }}>{{ current_user.name }}</a></li>
-            {% if current_user.platform_admin %}
-              <li><a href="{{ url_for('main.platform_admin') }}" {{ header_navigation.is_selected('platform-admin') }}>Platform admin</a></li>
-            {% endif %}
-            <li><a href="{{ url_for('main.sign_out')}}">Sign out</a></li>
-          {% else %}
-            <li><a href="{{ url_for('main.features') }}" {{ header_navigation.is_selected('features') }}>Features</a></li>
-            <li><a href="{{ url_for('main.pricing' )}}" {{ header_navigation.is_selected('pricing') }}>Pricing</a></li>
-            <li><a href="{{ url_for('main.documentation') }}" {{ header_navigation.is_selected('documentation') }}>Documentation</a></li>
-            <li><a href="{{ url_for('main.sign_in' )}}" {{ header_navigation.is_selected('sign-in') }}>Sign in</a></li>
-          {% endif %}
-        </ul>
-      </nav>
-    </div>
-  </div>
+{% block header %}
+  {% if current_user.is_authenticated %}
+    {% if current_user.platform_admin %}
+      {% set navigation = [
+        {
+          "href": url_for('main.support'),
+          "text": "Support",
+          "active": header_navigation.is_selected('support')
+        },
+        {
+          "href": url_for('main.documentation'),
+          "text": "Documentation",
+          "active": header_navigation.is_selected('documentation')
+        },
+        {
+          "href": url_for('main.user_profile'),
+          "text": current_user.name,
+          "active": header_navigation.is_selected('user-profile')
+        },
+        {
+          "href": url_for('main.platform_admin'),
+          "text": "Platform admin",
+          "active": header_navigation.is_selected('platform-admin')
+        },
+        {
+          "href": url_for('main.sign_out'),
+          "text": "Sign out"
+        }
+      ] %}
+    {% else %}
+      {% set navigation = [
+        {
+          "href": url_for('main.support'),
+          "text": "Support",
+          "active": header_navigation.is_selected('support')
+        },
+        {
+          "href": url_for('main.documentation'),
+          "text": "Documentation",
+          "active": header_navigation.is_selected('documentation')
+        },
+        {
+          "href": url_for('main.user_profile'),
+          "text": current_user.name,
+          "active": header_navigation.is_selected('user-profile')
+        },
+        {
+          "href": url_for('main.sign_out'),
+          "text": "Sign out"
+        }
+      ] %}
+    {% endif %}
+  {% else %}
+    {% set navigation = [
+      {
+        "href": url_for('main.support'),
+        "text": "Support",
+        "active": header_navigation.is_selected('support')
+      },
+      {
+        "href": url_for('main.features'),
+        "text": "Features",
+        "active": header_navigation.is_selected('features')
+      },
+      {
+        "href": url_for('main.pricing'),
+        "text": "Pricing",
+        "active": header_navigation.is_selected('pricing')
+      },
+      {
+        "href": url_for('main.documentation'),
+        "text": "Documentation",
+        "active": header_navigation.is_selected('documentation')
+      },
+      {
+        "href": url_for('main.sign_in'),
+        "text": "Sign in",
+        "active": header_navigation.is_selected('sign-in')
+      }
+    ] %}
+  {% endif %}
+
+  {{ govukHeader({
+    "homepageUrl": url_for('main.show_accounts_or_dashboard'),
+    "productName": "Notify",
+    "navigation": navigation
+  }) }}
 {% endblock %}
 
-
-{% set global_header_text = "GOV.UK <span id='product-name'>Notify</span>"|safe %}
-
-{% set homepage_url = url_for('main.show_accounts_or_dashboard') %}
-
 {% block content %}
   {% block fullwidth_content %}{% endblock %}
 {% endblock %}