Add environment identification tag in the header (409424)

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/_service-header.scss

@@ -74,7 +74,7 @@ $defra-link-colour-hover: govuk-shade($defra-link-colour, 50%);
   min-width: max-content;
   border: 0;
   margin: 0;
-  padding: govuk-spacing(2) 0 govuk-spacing(1) govuk-spacing(4);
+  padding: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(4);
   background: none;
 
   &::before {
@@ -86,14 +86,14 @@ $defra-link-colour-hover: govuk-shade($defra-link-colour, 50%);
     display: inline-block;
     width: 0.6rem;
     height: 0.6rem;
-    transform: translateY(-65%) rotate(135deg);
+    transform: translateY(-75%) rotate(135deg);
     border-top: 0.15rem solid;
     border-right: 0.15rem solid;
   }
 
   &.cross-service-header__button--open {
     &::before {
-      transform: translateY(-15%) rotate(-45deg);
+      transform: translateY(-25%) rotate(-45deg);
     }
   }
 
@@ -161,18 +161,25 @@ $defra-link-colour-hover: govuk-shade($defra-link-colour, 50%);
   display: flex;
   position: relative;
   justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
   flex-wrap: wrap;
+
+  @include govuk-media-query($from: tablet) {
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 .one-login-header__logo {
-  min-width: max-content;
   padding-top: govuk-spacing(2);
-  padding-bottom: govuk-spacing(2);
-  max-width: 33.33%;
+  padding-bottom: govuk-spacing(1);
+
   @include govuk-media-query($from: desktop) {
+    min-width: max-content;
+    max-width: 33.33%;
     width: 33.33%;
     padding-right: govuk-spacing(3);
+    padding-bottom: govuk-spacing(2);
   }
 }
 
@@ -309,16 +316,23 @@ $defra-link-colour-hover: govuk-shade($defra-link-colour, 50%);
   display: inline-block;
   padding: govuk-spacing(2) 0;
 
+  @include govuk-media-query($until: tablet) {
+    &:first-of-type {
+      padding-top: govuk-spacing(1);
+    }
+  }
+
   @include govuk-media-query($from: tablet) {
-    padding: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(6);
+    padding: govuk-spacing(2) 0;
     align-self: stretch;
 
-    &:not(:only-child) {
+    & + & {
+      padding-left: govuk-spacing(5);
       border-left: 1px solid $govuk-border-colour;
     }
 
     &:not(:last-child) {
-      margin-right: govuk-spacing(4);
+      margin-right: govuk-spacing(5);
     }
   }
 

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

@@ -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 { cdpEnvironment, phase, serviceName, serviceVersion } = config
 
 /** @type {Record<string, string> | undefined} */
 let webpackManifest
@@ -33,8 +33,10 @@ export async function context(request) {
   return {
     breadcrumbs: [],
     config: {
+      cdpEnvironment,
       phase,
-      serviceName
+      serviceName,
+      serviceVersion
     },
     navigation: buildNavigation(request),
     getAssetPath: (asset = '') => `/${webpackManifest?.[asset] ?? asset}`,

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

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

designer/server/src/common/templates/layouts/page.njk

@@ -5,6 +5,17 @@
 {% from "heading/macro.njk" import appHeading %}
 
 {% block head %}
+  <meta name="application-name" content="@defra/forms-designer" {{- govukAttributes({
+    "data-environment": {
+      value: config.cdpEnvironment,
+      optional: true
+    },
+    "data-version": {
+      value: config.serviceVersion,
+      optional: true
+    }
+  }) }}>
+
   <link href="{{ getAssetPath("stylesheets/application.scss") }}" rel="stylesheet">
 {% endblock %}
 

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

@@ -1,9 +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",
+  productName: productName | safe | trim,
   navigationItems: navigation if isAuthenticated and isAuthorized and isFormsUser,
   accountName: authedUser.displayName if isAuthenticated,
   accountLink: "/library",

designer/server/src/config.ts

@@ -6,14 +6,24 @@ import joi from 'joi'
 const configPath = fileURLToPath(import.meta.url)
 
 export interface Config {
-  env: 'development' | 'test' | 'production'
   port: number
+  cdpEnvironment:
+    | 'local'
+    | 'infra-dev'
+    | 'management'
+    | 'dev'
+    | 'test'
+    | 'perf-test'
+    | 'ext-test'
+    | 'prod'
+  env: 'development' | 'test' | 'production'
   appDir: string
   clientDir: string
   previewUrl: string
   managerUrl: string
   submissionUrl: string
   serviceName: string
+  serviceVersion?: string
   logLevel: 'fatal' | 'error' | 'warn' | 'info' | 'debug' | 'trace' | 'silent'
   phase?: 'alpha' | 'beta' | 'live'
   isProduction: boolean
@@ -37,6 +47,19 @@ export interface Config {
 // Define config schema
 const schema = joi.object<Config>({
   port: joi.number().default(3000),
+  cdpEnvironment: joi
+    .string()
+    .valid(
+      'local',
+      'infra-dev',
+      'management',
+      'dev',
+      'test',
+      'perf-test',
+      'ext-test',
+      'prod'
+    )
+    .default('local'),
   env: joi
     .string()
     .valid('development', 'test', 'production')
@@ -55,6 +78,7 @@ const schema = joi.object<Config>({
   submissionUrl: joi.string().required(),
   previewUrl: joi.string().required(),
   serviceName: joi.string().required(),
+  serviceVersion: joi.string().optional(),
   logLevel: joi
     .string()
     .default('info')
@@ -90,11 +114,13 @@ const schema = joi.object<Config>({
 const result = schema.validate(
   {
     port: process.env.PORT,
+    cdpEnvironment: process.env.ENVIRONMENT,
     env: process.env.NODE_ENV,
     managerUrl: process.env.MANAGER_URL,
     submissionUrl: process.env.SUBMISSION_URL,
     previewUrl: process.env.PREVIEW_URL,
     serviceName: 'Submit a form to Defra',
+    serviceVersion: process.env.SERVICE_VERSION,
     logLevel: process.env.LOG_LEVEL,
     phase: process.env.PHASE,
     isProduction: process.env.NODE_ENV === 'production',