Add environment identification tag in the header

designer/server/src/common/components/service-header/template.njk

@@ -1,3 +1,5 @@
+{% from "tag-env/macro.njk" import appTagEnv %}
+
 {#
 Component options:
   - organisationName (string): The name of the organisation
@@ -72,6 +74,8 @@ Component options:
             {% endif %}
           </span>
         </a>
+        {# Environment identification tag -#}
+        {{ appTagEnv(params.env) }}
       </div>
       <button type="button"
         aria-controls="one-login-header__nav"

designer/server/src/common/components/tag-env/macro.njk

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

designer/server/src/common/components/tag-env/template.njk

@@ -0,0 +1,15 @@
+{%- from "govuk/components/tag/macro.njk" import govukTag -%}
+
+{%- switch env %}
+    {% case "test" %}
+      {% set classes = "govuk-tag--yellow" %}
+    {% case "production" %}
+      {% set classes = "govuk-tag--red" %}
+    {% default %}
+      {% set classes = "govuk-tag--grey" %}
+{% endswitch -%}
+
+{{ govukTag({
+  text: env | capitalize,
+  classes: classes
+}) }}

designer/server/src/common/nunjucks/context/index.js

@@ -8,7 +8,7 @@ import { buildNavigation } from '~/src/common/nunjucks/context/build-navigation.
 import config from '~/src/config.js'
 
 const logger = createLogger()
-const { phase, serviceName } = config
+const { phase, serviceName, env } = config
 
 /** @type {Record<string, string> | undefined} */
 let webpackManifest
@@ -34,7 +34,8 @@ export async function context(request) {
     breadcrumbs: [],
     config: {
       phase,
-      serviceName
+      serviceName,
+      env
     },
     navigation: buildNavigation(request),
     getAssetPath: (asset = '') => `/${webpackManifest?.[asset] ?? asset}`,

designer/server/src/common/nunjucks/context/index.test.js

@@ -80,7 +80,8 @@ describe('Nunjucks context', () => {
 
       expect(ctx.config).toEqual({
         phase: config.phase,
-        serviceName: config.serviceName
+        serviceName: config.serviceName,
+        env: config.env
       })
     })
   })

designer/server/src/common/templates/partials/navigation.njk

@@ -4,6 +4,7 @@
 {{ appServiceHeader({
   organisationName: "Defra",
   productName: "Forms Designer",
+  env: config.env,
   navigationItems: navigation if isAuthenticated and isAuthorized and isFormsUser,
   accountName: authedUser.displayName if isAuthenticated,
   accountLink: "/library",

designer/server/src/config.ts

@@ -5,8 +5,33 @@ import joi from 'joi'
 
 const configPath = fileURLToPath(import.meta.url)
 
+const {
+  DEPLOYMENT_ENV,
+  LOG_LEVEL,
+  NODE_ENV,
+  PHASE,
+  SESSION_COOKIE_PASSWORD,
+  SESSION_TTL,
+  PORT,
+  MANAGER_URL,
+  SUBMISSION_URL,
+  PREVIEW_URL,
+  SESSION_COOKIE_TTL,
+  AZURE_CLIENT_ID,
+  AZURE_CLIENT_SECRET,
+  OIDC_WELL_KNOWN_CONFIGURATION_URL,
+  APP_BASE_URL,
+  REDIS_HOST,
+  REDIS_USERNAME,
+  REDIS_PASSWORD,
+  REDIS_KEY_PREFIX,
+  ROLE_EDITOR_GROUP_ID,
+  FILE_DOWNLOAD_PASSWORD_TTL
+} = process.env
+
 export interface Config {
-  env: 'development' | 'test' | 'production'
+  env: 'development' | 'test' | 'perf test' | 'production'
+  nodeEnv: 'development' | 'test' | 'production'
   port: number
   appDir: string
   clientDir: string
@@ -38,14 +63,18 @@ export interface Config {
 const schema = joi.object<Config>({
   port: joi.number().default(3000),
   env: joi
+    .string()
+    .valid('development', 'test', 'perf test', 'production')
+    .default('development'),
+  nodeEnv: joi
     .string()
     .valid('development', 'test', 'production')
     .default('development'),
   appDir: joi.string().default(dirname(configPath)),
   clientDir: joi
     .string()
     .default(resolve(dirname(configPath), '../../client/dist'))
-    .when('env', {
+    .when('nodeEnv', {
       is: 'test',
       then: joi
         .string()
@@ -89,31 +118,32 @@ const schema = joi.object<Config>({
 // Validate config
 const result = schema.validate(
   {
-    port: process.env.PORT,
-    env: process.env.NODE_ENV,
-    managerUrl: process.env.MANAGER_URL,
-    submissionUrl: process.env.SUBMISSION_URL,
-    previewUrl: process.env.PREVIEW_URL,
+    port: PORT,
+    env: DEPLOYMENT_ENV,
+    nodeEnv: NODE_ENV,
+    managerUrl: MANAGER_URL,
+    submissionUrl: SUBMISSION_URL,
+    previewUrl: PREVIEW_URL,
     serviceName: 'Submit a form to Defra',
-    logLevel: process.env.LOG_LEVEL,
-    phase: process.env.PHASE,
-    isProduction: process.env.NODE_ENV === 'production',
-    isDevelopment: !['production', 'test'].includes(`${process.env.NODE_ENV}`),
-    isTest: process.env.NODE_ENV === 'test',
-    sessionTtl: process.env.SESSION_TTL,
-    fileDownloadPasswordTtl: process.env.FILE_DOWNLOAD_PASSWORD_TTL,
-    sessionCookiePassword: process.env.SESSION_COOKIE_PASSWORD,
-    sessionCookieTtl: process.env.SESSION_COOKIE_TTL,
-    azureClientId: process.env.AZURE_CLIENT_ID,
-    azureClientSecret: process.env.AZURE_CLIENT_SECRET,
-    oidcWellKnownConfigurationUrl:
-      process.env.OIDC_WELL_KNOWN_CONFIGURATION_URL,
-    appBaseUrl: process.env.APP_BASE_URL,
-    redisHost: process.env.REDIS_HOST,
-    redisUsername: process.env.REDIS_USERNAME,
-    redisPassword: process.env.REDIS_PASSWORD,
-    redisKeyPrefix: process.env.REDIS_KEY_PREFIX,
-    roleEditorGroupId: process.env.ROLE_EDITOR_GROUP_ID
+    logLevel: LOG_LEVEL,
+    phase: PHASE,
+    isProduction: DEPLOYMENT_ENV === 'production',
+    isDevelopment:
+      !DEPLOYMENT_ENV || !['production', 'test'].includes(DEPLOYMENT_ENV),
+    isTest: NODE_ENV === 'test',
+    sessionTtl: SESSION_TTL,
+    fileDownloadPasswordTtl: FILE_DOWNLOAD_PASSWORD_TTL,
+    sessionCookiePassword: SESSION_COOKIE_PASSWORD,
+    sessionCookieTtl: SESSION_COOKIE_TTL,
+    azureClientId: AZURE_CLIENT_ID,
+    azureClientSecret: AZURE_CLIENT_SECRET,
+    oidcWellKnownConfigurationUrl: OIDC_WELL_KNOWN_CONFIGURATION_URL,
+    appBaseUrl: APP_BASE_URL,
+    redisHost: REDIS_HOST,
+    redisUsername: REDIS_USERNAME,
+    redisPassword: REDIS_PASSWORD,
+    redisKeyPrefix: REDIS_KEY_PREFIX,
+    roleEditorGroupId: ROLE_EDITOR_GROUP_ID
   },
   { abortEarly: false }
 )