Add environment banner (#202)

* Add environment banner

* Detect environment

Author: edwardhorsford

app.js

@@ -33,6 +33,7 @@ const routes = require('./app/routes')
 const exampleTemplatesRoutes = require('./lib/example_templates_routes')
 const authentication = require('./lib/middleware/authentication')
 const automaticRouting = require('./lib/middleware/auto-routing')
+const environmentMiddleware = require('./app/lib/middleware/environment')
 const production = require('./lib/middleware/production')
 const prototypeAdminRoutes = require('./lib/middleware/prototype-admin-routes')
 const utils = require('./lib/utils')
@@ -241,6 +242,9 @@ if (!sessionDataDefaultsFileExists) {
 // Local variables
 app.use(locals(config))
 
+// Environment banner
+app.use(environmentMiddleware)
+
 // View engine
 app.set('view engine', 'html')
 exampleTemplatesApp.set('view engine', 'html')

app/assets/sass/components/_environment.scss

@@ -0,0 +1,22 @@
+// Stolen (with thanks) from https://github.com/nhsuk/manage-vaccinations-in-schools-prototype/blob/c294744d6fba958f1ee9a4d51ab4ef8e425d893d/app/assets/stylesheets/components/_environment.scss
+
+// @use "../vendor/nhsuk-frontend" as *;
+@use "nhsuk-frontend/dist/nhsuk/core/settings" as *;
+@use "nhsuk-frontend/dist/nhsuk/core/tools" as *;
+
+.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);
+  }
+}

app/assets/sass/main.scss

@@ -20,6 +20,7 @@ $nhsuk-page-width: 1260px;
 @forward "components/status-bar";
 @forward "components/summary-card";
 @forward "components/reading";
+@forward "components/environment";
 
 @forward "components/overrides";
 @forward "components/checkboxes";

app/lib/middleware/environment.js

@@ -0,0 +1,62 @@
+// app/lib/middleware/environment.js
+
+/**
+ * Format a link as HTML
+ *
+ * @param {string} url - The URL to link to
+ * @param {string} text - The link text
+ * @returns {string} HTML anchor tag
+ */
+const formatLink = (url, text) => {
+  return `<a href="${url}">${text}</a>`
+}
+
+/**
+ * Environment middleware
+ * Sets res.locals.environment based on the current environment
+ * Supports: development, production, and review (for Heroku PRs)
+ */
+const environment = (req, res, next) => {
+  const { HEROKU_BRANCH, HEROKU_PR_NUMBER, NODE_ENV } = process.env
+
+  let environment = 'development' // Default to development
+
+  if (NODE_ENV === 'production') {
+    environment = 'production'
+  }
+
+  // Review apps on Heroku override the above
+  if (HEROKU_PR_NUMBER || HEROKU_BRANCH) {
+    environment = 'review'
+  }
+
+  const pullRequestUrl =
+    HEROKU_PR_NUMBER &&
+    `https://github.com/NHSDigital/manage-breast-screening-prototype/pull/${HEROKU_PR_NUMBER}`
+
+  const environments = {
+    development: {
+      colour: 'white',
+      name: 'Prototype',
+      text: 'This is a prototype in development.'
+    },
+    production: {
+      colour: 'grey',
+      name: 'Prototype',
+      text: 'This is a prototype for research.'
+    },
+    review: {
+      colour: 'purple',
+      name: HEROKU_PR_NUMBER ? `Prototype PR ${HEROKU_PR_NUMBER}` : 'Prototype',
+      html: HEROKU_PR_NUMBER
+        ? `This is a prototype for review. ${formatLink(pullRequestUrl, 'View pull request')}`
+        : 'This is a prototype for review.'
+    }
+  }
+
+  res.locals.environment = environments[environment]
+
+  next()
+}
+
+module.exports = environment

app/views/_components/environment/macro.njk

@@ -0,0 +1,3 @@
+{%- macro appEnvironment(params) -%}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/views/_components/environment/template.njk

@@ -0,0 +1,12 @@
+{%- from "nhsuk/components/tag/macro.njk" import tag -%}
+
+{%- set colour = params.colour or "blue" -%}
+<div class="app-environment nhsuk-tag--{{ colour }}">
+  <div class="nhsuk-width-container">
+    {{ tag({
+      classes: "nhsuk-tag--" + colour,
+      text: params.name
+    }) if params.name }}
+    {{ params.html | safe if params.html else params.text }}
+  </div>
+</div>

app/views/_templates/layout-base.html

@@ -16,7 +16,7 @@
 {% endblock %}
 
 {% block header %}
-
+  {{ appEnvironment(environment) if environment }}
   {% set useMinimalNav = useMinimalNav | default(false) %}
 
   {% set rootHref = "/" %}

app/views/_templates/layout.html

@@ -22,6 +22,7 @@
 {%- from '_components/summary-list/macro.njk' import appSummaryList as summaryList %}
 {%- from '_components/status-bar/macro.njk' import appStatusBar %}
 {%- from "_components/stepper-input/macro.njk" import appStepperInput -%}
+{%- from "_components/environment/macro.njk" import appEnvironment -%}
 
 {% block head %}
   <!-- Add your custom CSS or Sass in /app/assets/sass/main.scss -->