Environment banner

Author: swebberuk

manage_breast_screening/assets/sass/main.scss

@@ -46,6 +46,24 @@ a[href="#"] {
   color: #c80000 !important;
 }
 
+// Environment banner at the top of the page
+.app-environment {
+  @include nhsuk-font-size(14);
+  @include nhsuk-responsive-padding(2, bottom);
+  @include nhsuk-responsive-padding(2, top);
+
+  .nhsuk-link {
+    color: inherit;
+  }
+
+  .nhsuk-width-container {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: nhsuk-spacing(1) nhsuk-spacing(2);
+  }
+}
+
 // Status tag positioning within headers
 .app-header {
   position: relative;

manage_breast_screening/config/jinja2_env.py

@@ -1,3 +1,5 @@
+import os
+
 import inflect
 from django.conf import settings
 from django.templatetags.static import static
@@ -41,6 +43,7 @@ def environment(**options):
             "static": static,
             "url": reverse,
             "inflector": inflector,
+            "ENV_CONFIG": os.environ.get("ENV_CONFIG", "unknown"),
         }
     )
 

manage_breast_screening/core/jinja2/layout-app.jinja

@@ -14,6 +14,17 @@
 {% block pageTitle %}{% if form and form.errors %}Error: {% endif %}{% if page_title %}{{ page_title }} – {% endif %}Manage breast screening – NHS{% endblock %}
 
 {% block header %}
+  {% if ENV_CONFIG != 'prod' %}
+    <div class="app-environment nhsuk-tag--grey">
+      <div class="nhsuk-width-container">
+        <strong class="nhsuk-tag nhsuk-tag--grey">
+          {{ ENV_CONFIG }}
+        </strong>
+        This is the {{ ENV_CONFIG }} environment.
+      </div>
+    </div>
+  {% endif %}
+
   {{ header({
     "service": {
       "text": "Manage breast screening"