SDIT-1108: ✨ Add in environment name to header (#235)

ministryofjustice · Sep 28, 2023 · 9358419 · 9358419
1 parent 5251e36
commit 9358419
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 0 deletions.
diff --git a/assets/scss/components/_header-bar.scss b/assets/scss/components/_header-bar.scss
@@ -139,3 +139,8 @@
     display: none;
   }
 }
+
+.govuk-phase-banner {
+  @include govuk-width-container;
+  border: none;
+}
diff --git a/feature.env b/feature.env
@@ -7,3 +7,4 @@ API_CLIENT_ID=clientid
 API_CLIENT_SECRET=clientsecret
 SYSTEM_CLIENT_ID=clientid
 SYSTEM_CLIENT_SECRET=clientsecret
+ENVIRONMENT_NAME=dev
diff --git a/helm_deploy/values-dev.yaml b/helm_deploy/values-dev.yaml
@@ -11,6 +11,7 @@ generic-service:
     INGRESS_URL: "https://hmpps-template-typescript-dev.hmpps.service.justice.gov.uk"
     HMPPS_AUTH_URL: "https://sign-in-dev.hmpps.service.justice.gov.uk/auth"
     TOKEN_VERIFICATION_API_URL: "https://token-verification-api-dev.prison.service.justice.gov.uk"
+    ENVIRONMENT_NAME: DEV
 
 generic-prometheus-alerts:
   alertSeverity: digital-prison-service-dev
diff --git a/helm_deploy/values-preprod.yaml b/helm_deploy/values-preprod.yaml
@@ -11,6 +11,7 @@ generic-service:
     INGRESS_URL: "https://hmpps-template-typescript-preprod.hmpps.service.justice.gov.uk"
     HMPPS_AUTH_URL: "https://sign-in-preprod.hmpps.service.justice.gov.uk/auth"
     TOKEN_VERIFICATION_API_URL: "https://token-verification-api-preprod.prison.service.justice.gov.uk"
+    ENVIRONMENT_NAME: PRE-PRODUCTION
 
 generic-prometheus-alerts:
   alertSeverity: digital-prison-service-dev
diff --git a/integration_tests/e2e/login.cy.ts b/integration_tests/e2e/login.cy.ts
@@ -26,6 +26,12 @@ context('SignIn', () => {
     indexPage.headerUserName().should('contain.text', 'J. Smith')
   })
 
+  it('Phase banner visible in header', () => {
+    cy.signIn()
+    const indexPage = Page.verifyOnPage(IndexPage)
+    indexPage.headerPhaseBanner().should('contain.text', 'dev')
+  })
+
   it('User can log out', () => {
     cy.signIn()
     const indexPage = Page.verifyOnPage(IndexPage)

diff --git a/integration_tests/pages/index.ts b/integration_tests/pages/index.ts
@@ -6,4 +6,6 @@ export default class IndexPage extends Page {
   }
 
   headerUserName = (): PageElement => cy.get('[data-qa=header-user-name]')
+
+  headerPhaseBanner = (): PageElement => cy.get('[data-qa=header-phase-banner]')
 }
diff --git a/server/config.ts b/server/config.ts
@@ -72,4 +72,5 @@ export default {
     },
   },
   domain: get('INGRESS_URL', 'http://localhost:3000', requiredInProduction),
+  environmentName: get('ENVIRONMENT_NAME', ''),
 }
diff --git a/server/utils/nunjucksSetup.ts b/server/utils/nunjucksSetup.ts
@@ -4,6 +4,7 @@ import nunjucks from 'nunjucks'
 import express from 'express'
 import { initialiseName } from './utils'
 import { ApplicationInfo } from '../applicationInfo'
+import config from '../config'
 
 const production = process.env.NODE_ENV === 'production'
 
@@ -12,6 +13,8 @@ export default function nunjucksSetup(app: express.Express, applicationInfo: App
 
   app.locals.asset_path = '/assets/'
   app.locals.applicationName = 'HMPPS Typescript Template'
+  app.locals.environmentName = config.environmentName
+  app.locals.environmentNameColour = config.environmentName === 'PRE-PRODUCTION' ? 'govuk-tag--green' : ''
 
   // Cachebusting version string
   if (production) {

diff --git a/server/views/partials/header.njk b/server/views/partials/header.njk
@@ -1,3 +1,4 @@
+{% from "govuk/components/tag/macro.njk" import govukTag %}
 <header class="hmpps-header" role="banner">
   <div class="hmpps-header__container">
     <div class="hmpps-header__title">
@@ -11,6 +12,16 @@
       </a>
 
       <a class="hmpps-header__link hmpps-header__title__service-name" href="/">{{ applicationName }}</a>
+
+      {% if environmentName %}
+        <div class="govuk-phase-banner">
+          {{ govukTag({
+            text: environmentName,
+            classes: environmentNameColour,
+            attributes: { "data-qa": "header-phase-banner" }
+          }) }}
+        </div>
+      {% endif %}
     </div>
 
     <nav aria-label="Account navigation">
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,4 +6,6 @@ export default class IndexPage extends Page { @@
       }
       headerUserName = (): PageElement => cy.get('[data-qa=header-user-name]')
+      headerPhaseBanner = (): PageElement => cy.get('[data-qa=header-phase-banner]')
     }