Add environment identification tag in the header (macro)

designer/client/src/stylesheets/application.scss

@@ -3,6 +3,7 @@
 @use "components/breadcrumbs";
 @use "components/form-card";
 @use "components/service-header";
+@use "components/tag-env";
 @use "components/button";
 @use "components/header";
 

designer/client/src/stylesheets/components/_tag-env.scss

@@ -0,0 +1 @@
+@forward "@defra/forms-designer/server/src/common/components/tag-env/tag-env";

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

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

designer/server/src/common/components/tag-env/_tag-env.scss

@@ -0,0 +1,24 @@
+@use "govuk-frontend" as *;
+
+.app-tag--env {
+  margin: -6px 0 0;
+  vertical-align: top;
+
+  // Override product name font size
+  @include govuk-font-size($size: 16);
+
+  // Align with product name
+  @include govuk-media-query($from: tablet) {
+    margin: -3px 0 0;
+  }
+
+  // Override service header alignment
+  .cross-service-header & {
+    margin: -2px 0 0 govuk-spacing(1);
+
+    // Align with product name
+    @include govuk-media-query($from: tablet) {
+      margin: 0 0 0 govuk-spacing(2);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,30 @@
+{%- from "govuk/components/tag/macro.njk" import govukTag -%}
+
+{%- switch params.env %}
+  {% case "local" %}
+    {% set text = "Local" %}
+    {% set classes = "govuk-tag--green" %}
+  {% case "dev" %}
+    {% set text = "Development" %}
+    {% set classes = "govuk-tag--grey" %}
+  {% case "test" %}
+    {% set text = "Test" %}
+    {% set classes = "govuk-tag--yellow" %}
+  {% case "ext-test" %}
+    {% set text = "External test" %}
+    {% set classes = "govuk-tag--yellow" %}
+  {% case "perf-test" %}
+    {% set text = "Performance test" %}
+    {% set classes = "govuk-tag--yellow" %}
+  {% case "prod" %}
+    {% set text = "Production" %}
+    {% set classes = "govuk-tag--red" %}
+  {% default %}
+    {% set text = env | replace("-", " ") | capitalize %}
+    {% set classes = "govuk-tag--grey" %}
+{% endswitch -%}
+
+{{ govukTag({
+  text: text,
+  classes: classes + " app-tag--env"
+}) }}

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

@@ -1,16 +1,14 @@
 import { readFileSync } from 'node:fs'
 import { basename, join } from 'node:path'
 
-import upperFirst from 'lodash/upperFirst.js'
-
 import { SCOPE_READ } from '~/src/common/constants/scopes.js'
 import { getUserSession } from '~/src/common/helpers/auth/get-user-session.js'
 import { createLogger } from '~/src/common/helpers/logging/logger.js'
 import { buildNavigation } from '~/src/common/nunjucks/context/build-navigation.js'
 import config from '~/src/config.js'
 
 const logger = createLogger()
-const { phase, serviceName, serviceVersion, env, isTest, isProduction } = config
+const { cdpEnvironment, phase, serviceName, serviceVersion } = config
 
 /** @type {Record<string, string> | undefined} */
 let webpackManifest
@@ -32,25 +30,10 @@ export async function context(request) {
 
   const credentials = request ? await getUserSession(request) : undefined
 
-  let tagColour
-
-  if (isTest) {
-    tagColour = 'yellow'
-  } else if (isProduction) {
-    tagColour = 'red'
-  } else {
-    tagColour = 'grey'
-  }
-
-  const envTag = {
-    text: upperFirst(env),
-    classes: `govuk-tag--${tagColour}`
-  }
-
   return {
-    envTag,
     breadcrumbs: [],
     config: {
+      cdpEnvironment,
       phase,
       serviceName,
       serviceVersion

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

@@ -79,6 +79,7 @@ describe('Nunjucks context', () => {
       const ctx = await context(null)
 
       expect(ctx.config).toEqual({
+        cdpEnvironment: config.cdpEnvironment,
         phase: config.phase,
         serviceName: config.serviceName,
         serviceVersion: config.serviceVersion

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

@@ -1,10 +1,14 @@
 {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
 {% from "service-header/macro.njk" import appServiceHeader %}
+{% from "tag-env/macro.njk" import appTagEnv %}
+
+{%- set productName %}
+  Forms Designer {{ appTagEnv({ env: config.cdpEnvironment }) }}
+{% endset -%}
 
 {{ appServiceHeader({
   organisationName: "Defra",
-  productName: "Forms Designer",
-  envTag: envTag,
+  productName: productName | safe | trim,
   navigationItems: navigation if isAuthenticated and isAuthorized and isFormsUser,
   accountName: authedUser.displayName if isAuthenticated,
   accountLink: "/library",