Dpat 2062 moj frontend (#29)

* Install MOJ frontend

Update the sass and Makefile commands. Created header include to try the
MOJ header.

* Use MOJ frontend header and navigation components

Use includes and context processors to build the header and nav

* Move MOJ header svg to an include

* Use gov uk header class

* Update make static commands

* Add .htmlhintrc to disable some incompatible flags

* More htmllint config

* Disable attr-no-duplication htmlhint as incompatible with DTL syntax

* Move header and nav context to base view

* Add unit tests for BaseView

* Remove context processors

* Add test for get_header_context

* Revert "Remove context processors"

This reverts commit 5f92cf0.

* Revert to using context_processors in header

Decided to use context_processors rather than adding a view mixin, as
using a mixin means remembering to use it for every view that you add.
Also reduces the chance that it is overwritten accidentally for a view.
Using context processors means it is defined once, in one place, and
will always be used.

* Remove BaseView

.htmlhintrc

@@ -0,0 +1,25 @@
+{
+  "tagname-lowercase": true,
+  "attr-lowercase": true,
+  "attr-value-double-quotes": true,
+  "attr-value-not-empty": false,
+  "attr-no-duplication": false,
+  "doctype-first": false,
+  "tag-pair": true,
+  "tag-self-close": false,
+  "spec-char-escape": true,
+  "id-unique": true,
+  "src-not-empty": true,
+  "title-require": true,
+  "alt-require": true,
+  "doctype-html5": false,
+  "id-class-value": false,
+  "style-disabled": false,
+  "inline-style-disabled": false,
+  "inline-script-disabled": false,
+  "space-tab-mixed-disabled": "space",
+  "id-class-ad-disabled": false,
+  "href-abs-or-rel": false,
+  "attr-unsafe-chars": true,
+  "head-script-disabled": true
+}

Makefile

@@ -1,10 +1,10 @@
 #!make
 
-build:
-	make build-static
+build-static:
+	make build-css
 	make build-js
 
-build-static:
+build-css:
 	mkdir -p static/assets/fonts
 	mkdir -p static/assets/images
 	cp -R node_modules/govuk-frontend/govuk/assets/fonts/. static/assets/fonts

README.md

@@ -33,7 +33,7 @@ This will run black, mypy, flake8 and isort before a commit to check for failure
 There is a Makefile to wrap commands used to build the static files. When setting up the project, run all steps using the command:
 
 ```commandline
-make build
+make build-static
 ```
 
 Or look at the Makefile and run the individual commands as you require.

controlpanel/interfaces/web/context_processors.py

@@ -0,0 +1,33 @@
+from django.urls import reverse
+
+
+def nav_items(request):
+    data_products_url = reverse("data-products")
+    return {
+        "nav_items": [
+            {"name": "Home", "url": "/", "active": request.get_full_path() == "/"},
+            {
+                "name": "Data Products",
+                "url": data_products_url,
+                "active": request.get_full_path() == data_products_url,
+            },
+        ]
+    }
+
+
+def header_context(request):
+    is_logged_in = request.user.is_authenticated
+    return {
+        "header_nav_items": [
+            {
+                "name": request.user.name,
+                "url": "",
+            },
+            {
+                "name": "Sign out" if is_logged_in else "Sign in",
+                "url": reverse("logout") if is_logged_in else reverse("login"),
+            },
+        ],
+        "header_organisation_url": "https://www.gov.uk/government/organisations/ministry-of-justice",  # noqa
+        "header_service_url": "https://github.com/ministryofjustice/data-platform",
+    }

controlpanel/interfaces/web/static/app.scss

@@ -1,5 +1,7 @@
 $govuk-assets-path: "/static/assets/";
 
  /* stylelint-disable import-notation */
-@import "govuk-frontend/govuk/all";
+@import "node_modules/govuk-frontend/govuk/all";
+@import "node_modules/@ministryofjustice/frontend/moj/all";
+
  /* stylelint-enable */

controlpanel/interfaces/web/templates/base.html

@@ -9,11 +9,7 @@
 {% endblock head %}
 
 {% block header %}
-    {% url 'data-products' as data_products_url %}
-    {% gds_header homepageUrl="/" serviceName="Data Platform Control Panel" serviceUrl="/" containerClasses="govuk-width-container" %}
-        {% gds_header_nav_item href="/" text="Home" %}
-        {% gds_header_nav_item href=data_products_url text="Data products" %}
-    {% endgds_header %}
+    {% include "includes/header.html" %}
 {% endblock header %}
 
 

controlpanel/interfaces/web/templates/data-products.html

@@ -3,6 +3,6 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1> Data products </h1>
+<h1 class="govuk-heading-xl"> Data products </h1>
 
 {% endblock %}

controlpanel/interfaces/web/templates/home.html

@@ -11,7 +11,7 @@
 {{ user.user_id }}
 </pre>
 
-<h1>User list</h1>
+<h1 class="govuk-heading-xl">User list</h1>
 {% for user in users %}
     <li>{{ user.name }}: {{ user.nickname }}, {{ user.email }} </li>
 {% endfor %}

controlpanel/interfaces/web/templates/includes/header.html

@@ -0,0 +1,29 @@
+<header class="moj-header" role="banner">
+
+    <div class="moj-header__container">
+
+      <div class="moj-header__logo">
+
+        {% include "includes/moj_header.svg" %}
+        <a class="moj-header__link moj-header__link--organisation-name" href="{{ header_organisation_url }}">Ministry of Justice</a>
+
+        <a class="moj-header__link moj-header__link--service-name" href="{{ header_service_url}}">Data Platform</a>
+      </div>
+      <div class="moj-header__content">
+
+        <nav class="moj-header__navigation" aria-label="Account navigation">
+
+          <ul class="moj-header__navigation-list">
+            {% for item in header_nav_items %}
+                {% include "includes/nav_item.html" with item=item level="moj-header__navigation-" %}
+            {% endfor %}
+          </ul>
+
+        </nav>
+
+      </div>
+    </div>
+
+</header>
+
+{% include "includes/navigation.html" %}

controlpanel/interfaces/web/templates/includes/nav_item.html

@@ -0,0 +1,3 @@
+<li class="{{ level }}item">
+    <a class="{{ level }}link" {% if item.active %}aria-current="page" {% endif %}href="{{ item.url }}">{{ item.name }}</a>
+</li>

controlpanel/interfaces/web/templates/includes/navigation.html

@@ -0,0 +1,20 @@
+<div class="moj-primary-navigation">
+
+    <div class="moj-primary-navigation__container">
+
+      <div class="moj-primary-navigation__nav">
+
+        <nav class="moj-primary-navigation" aria-label="Primary navigation">
+
+          <ul class="moj-primary-navigation__list">
+            {% for item in nav_items %}
+                {% include "includes/nav_item.html" with level="moj-primary-navigation__" %}
+            {% endfor %}
+          </ul>
+
+        </nav>
+
+      </div>
+    </div>
+
+  </div>

controlpanel/interfaces/web/views.py

@@ -1,17 +1,19 @@
-from django.shortcuts import render
-from django.views.generic import View
+from typing import Any
+
+from django.views.generic import TemplateView
 
 from controlpanel.core.models import User
 from controlpanel.interfaces.web.auth.mixins import OIDCLoginRequiredMixin
 
 
-class IndexView(OIDCLoginRequiredMixin, View):
+class IndexView(OIDCLoginRequiredMixin, TemplateView):
     template_name = "home.html"
 
-    def get(self, request):
-        users = User.objects.all()
-        context = {
-            "user": request.user,
-            "users": users,
-        }
-        return render(request, "home.html", context=context)
+    def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
+        context = super().get_context_data(**kwargs)
+        context.update(
+            {
+                "users": User.objects.all(),
+            }
+        )
+        return context

controlpanel/settings/common.py

@@ -96,6 +96,8 @@
                 "django.template.context_processors.request",
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
+                "controlpanel.interfaces.web.context_processors.nav_items",
+                "controlpanel.interfaces.web.context_processors.header_context",
             ],
         },
     },