@defra/lis-infra-ui-services 0.1.0-lreg-25.alpha.1

package/README.md

@@ -0,0 +1,5 @@
+# Livestock ui-services
+
+This package contains the shared topology metadata and route helpers used across the hub, spokes, and services.
+
+Install dependencies for this package locally with `npm install` from this directory.

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@defra/lis-infra-ui-services",
+  "version": "0.1.0-lreg-25.alpha.1",
+  "description": "UI-Services shared definitions for the livestock taxonomy topology.",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DEFRA/lis-infra-ui-services.git"
+  },
+  "exports": {
+    ".": "./src/index.js",
+    "./base-path": "./src/base-path.js",
+    "./components/autocomplete": "./src/components/autocomplete.js",
+    "./components/autocomplete.css": "./src/components/autocomplete.css",
+    "./components/sub-navigation.css": "./src/components/sub-navigation.css",
+    "./duration": "./src/duration.js",
+    "./errors": "./src/errors/index.js",
+    "./logging": "./src/logging/index.js",
+    "./logging/logger": "./src/logging/logger.js",
+    "./logging/logger-options": "./src/logging/logger-options.js",
+    "./logging/project": "./src/logging/project.js",
+    "./logging/request-logger": "./src/logging/request-logger.js",
+    "./navigation": "./src/navigation.js",
+    "./nunjucks/build-navigation": "./src/nunjucks/build-navigation.js",
+    "./nunjucks/context": "./src/nunjucks/context.js",
+    "./nunjucks/filters": "./src/nunjucks/filters.js",
+    "./nunjucks/format-currency": "./src/nunjucks/format-currency.js",
+    "./nunjucks/format-date": "./src/nunjucks/format-date.js",
+    "./nunjucks/globals": "./src/nunjucks/globals.js",
+    "./nunjucks/plugin": "./src/nunjucks/plugin.js",
+    "./nunjucks-context": "./src/nunjucks-context.js",
+    "./proxy/setup-proxy": "./src/proxy/setup-proxy.js",
+    "./redis-client": "./src/redis-client.js",
+    "./session-cache": "./src/session-cache.js",
+    "./session-cache/cache-engine": "./src/session-cache/cache-engine.js",
+    "./static-files": "./src/static-files.js",
+    "./status-codes": "./src/status-codes.js"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "format": "prettier --write \"src/**/*.js\" \"**/*.{js,cjs,md,json}\"",
+    "format:check": "prettier --check \"src/**/*.js\" \"**/*.{js,cjs,md,json}\"",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage --coverage.provider=istanbul --coverage.reporter=text --coverage.reporter=lcov --coverage.include=\"src/**/*.js\"",
+    "prepare": "if [ \"$npm_command\" = \"install\" ] && [ -z \"$CI\" ] && command -v husky >/dev/null 2>&1; then husky; fi",
+    "security-audit": "audit-ci",
+    "git:pre-commit-hook": "npm run security-audit && npm run format:check && npm run lint"
+  },
+  "author": "Defra DDTS",
+  "license": "OGL-UK-3.0",
+  "dependencies": {
+    "@defra/hapi-tracing": "1.30.0",
+    "@elastic/ecs-pino-format": "1.5.0",
+    "@hapi/catbox-memory": "6.0.2",
+    "@hapi/catbox-redis": "7.0.2",
+    "@hapi/vision": "7.0.3",
+    "@hapi/yar": "11.0.3",
+    "accessible-autocomplete": "3.0.1",
+    "chokidar": "3.6.0",
+    "date-fns": "4.1.0",
+    "global-agent": "3.0.0",
+    "hapi-pino": "13.0.0",
+    "ioredis": "5.8.2",
+    "lodash": "4.18.1",
+    "nunjucks": "3.2.4",
+    "pino": "10.1.0",
+    "pino-pretty": "13.1.3",
+    "undici": "7.24.8"
+  },
+  "peerDependencies": {
+    "eslint": "^9.0.0"
+  },
+  "devDependencies": {
+    "@defra/lis-infra-eslint-config": "^0.6.0",
+    "@vitest/coverage-istanbul": "^4.1.10",
+    "audit-ci": "^7.1.0",
+    "eslint": "^9.0.0",
+    "husky": "^9.1.7",
+    "prettier": "^3.8.4",
+    "vitest": "^4.1.10"
+  }
+}

package/src/base-path.js

@@ -0,0 +1,141 @@
+/** @import { Request } from '@hapi/hapi' */
+
+function normalizePath(path) {
+  if (!path || path === '/') {
+    return '/'
+  }
+
+  return path.startsWith('/') ? path : `/${path}`
+}
+
+function normalizeBasePath(path) {
+  if (!path) {
+    return ''
+  }
+
+  const normalizedPath = normalizePath(path)
+
+  return normalizedPath === '/' ? '' : normalizedPath
+}
+
+function getForwardedPrefix(request) {
+  const forwardedPrefix = request?.headers?.['x-forwarded-prefix']
+
+  if (typeof forwardedPrefix !== 'string') {
+    return ''
+  }
+
+  return normalizeBasePath(forwardedPrefix.trim())
+}
+
+/**
+ * @param {{ request: Request, basePath: string }} options
+ * @returns {boolean}
+ */
+export function isPrefixedRequest({ request, basePath }) {
+  const normalizedBasePath = normalizeBasePath(basePath)
+
+  if (!normalizedBasePath || !request) {
+    return false
+  }
+
+  const forwardedPrefix = getForwardedPrefix(request)
+
+  if (forwardedPrefix) {
+    return forwardedPrefix === normalizedBasePath
+  }
+
+  return (
+    request.path === normalizedBasePath ||
+    request.path.startsWith(`${normalizedBasePath}/`)
+  )
+}
+
+/**
+ * @param {{ request: Request, basePath: string }} options
+ * @returns {string}
+ */
+export function getRequestBasePath({ request, basePath }) {
+  const normalizedBasePath = normalizeBasePath(basePath)
+
+  return isPrefixedRequest({ request, basePath: normalizedBasePath })
+    ? normalizedBasePath
+    : ''
+}
+
+/**
+ * @param {{ request: Request, routePath?: string, basePath?: string }} options
+ * @returns {string}
+ */
+export function buildAppPath({ request, routePath = '/', basePath = '' }) {
+  const requestBasePath = getRequestBasePath({ request, basePath })
+  const normalizedPath = normalizePath(routePath)
+
+  if (normalizedPath === '/') {
+    return requestBasePath || '/'
+  }
+
+  return `${requestBasePath}${normalizedPath}`
+}
+
+/**
+ * @param {{ routePath?: string, basePath?: string }} options
+ * @returns {string[]}
+ */
+export function getRouteVariants({ routePath = '/', basePath: _basePath = '' }) {
+  const normalizedPath = normalizePath(routePath)
+  return [normalizedPath]
+}
+
+/**
+ * @param {{ basePath?: string, assetPath: string }} options
+ * @returns {string[]}
+ */
+export function getAssetPaths({ basePath: _basePath = '', assetPath }) {
+  return [assetPath]
+}
+
+/**
+ * @param {object} config
+ * @returns {object}
+ */
+export function createBasePathHelpersForConfig(config) {
+  function getBasePath() {
+    return config.get('basePath')
+  }
+
+  return {
+    getBasePath,
+    isPrefixedRequest(request) {
+      return isPrefixedRequest({
+        request,
+        basePath: getBasePath()
+      })
+    },
+    getRequestBasePath(request) {
+      return getRequestBasePath({
+        request,
+        basePath: getBasePath()
+      })
+    },
+    buildAppPath(request, routePath = '/') {
+      return buildAppPath({
+        request,
+        routePath,
+        basePath: getBasePath()
+      })
+    },
+    getRouteVariants(routePath = '/') {
+      return getRouteVariants({
+        routePath,
+        basePath: getBasePath()
+      })
+    },
+    getAssetPaths() {
+      return getAssetPaths({
+        basePath: getBasePath(),
+        assetPath: config.get('assetPath')
+      })
+    }
+  }
+}

package/src/base-path.test.js

@@ -0,0 +1,120 @@
+import assert from 'node:assert/strict'
+import { test } from 'vitest'
+
+import {
+  buildAppPath,
+  createBasePathHelpersForConfig,
+  getAssetPaths,
+  getRequestBasePath,
+  getRouteVariants,
+  isPrefixedRequest
+} from './base-path.js'
+
+test('isPrefixedRequest detects a forwarded prefix that matches the configured base path', () => {
+  assert.equal(
+    isPrefixedRequest({
+      request: {
+        path: '/about',
+        headers: {
+          'x-forwarded-prefix': '/chicken/move'
+        }
+      },
+      basePath: '/chicken/move'
+    }),
+    true
+  )
+})
+
+test('isPrefixedRequest ignores a forwarded prefix that does not match the configured base path', () => {
+  assert.equal(
+    isPrefixedRequest({
+      request: {
+        path: '/about',
+        headers: {
+          'x-forwarded-prefix': '/goat/move'
+        }
+      },
+      basePath: '/chicken/move'
+    }),
+    false
+  )
+})
+
+test('getRequestBasePath preserves direct requests to the configured base path', () => {
+  assert.equal(
+    getRequestBasePath({
+      request: {
+        path: '/chicken/move/about',
+        headers: {}
+      },
+      basePath: '/chicken/move'
+    }),
+    '/chicken/move'
+  )
+})
+
+test('buildAppPath uses the forwarded prefix for outbound paths when present', () => {
+  assert.equal(
+    buildAppPath({
+      request: {
+        path: '/about',
+        headers: {
+          'x-forwarded-prefix': '/chicken/move'
+        }
+      },
+      routePath: '/more-info',
+      basePath: '/chicken/move'
+    }),
+    '/chicken/move/more-info'
+  )
+})
+
+test('getRouteVariants only returns the internal route path', () => {
+  assert.deepEqual(
+    getRouteVariants({
+      routePath: '/about',
+      basePath: '/chicken/move'
+    }),
+    ['/about']
+  )
+})
+
+test('getAssetPaths only returns the internal asset path', () => {
+  assert.deepEqual(
+    getAssetPaths({
+      basePath: '/chicken/move',
+      assetPath: '/public'
+    }),
+    ['/public']
+  )
+})
+
+test('createBasePathHelpersForConfig binds config for request and asset helpers', () => {
+  const calls = []
+  const config = {
+    get(key) {
+      calls.push(key)
+
+      if (key === 'basePath') {
+        return '/chicken/move'
+      }
+
+      if (key === 'assetPath') {
+        return '/public'
+      }
+    }
+  }
+  const helpers = createBasePathHelpersForConfig(config)
+
+  assert.equal(
+    helpers.getRequestBasePath({
+      path: '/about',
+      headers: {
+        'x-forwarded-prefix': '/chicken/move'
+      }
+    }),
+    '/chicken/move'
+  )
+  assert.deepEqual(helpers.getAssetPaths(), ['/public'])
+  assert.deepEqual(calls, ['basePath', 'basePath', 'assetPath'])
+})

package/src/components/autocomplete.css

@@ -0,0 +1,6 @@
+@import 'accessible-autocomplete/dist/accessible-autocomplete.min.css';
+
+.app-autocomplete .autocomplete__input.govuk-input--error,
+.app-autocomplete .autocomplete__hint.govuk-input--error {
+  border-color: #d4351c;
+}

package/src/components/autocomplete.js

@@ -0,0 +1,142 @@
+import accessibleAutocomplete from 'accessible-autocomplete'
+
+const MODULE_SELECTOR = '[data-module="app-autocomplete"]'
+const SOURCE_SELECTOR = '.app-autocomplete__source'
+const DESCRIBED_BY_ATTRIBUTE = 'aria-describedby'
+
+function escapeHtml(value) {
+  return value
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#039;')
+}
+
+function booleanOption(element, name, defaultValue) {
+  const value = element.dataset[name]
+
+  if (value === undefined) {
+    return defaultValue
+  }
+
+  return value === 'true'
+}
+
+function copyInputAttributes(source, target) {
+  const attributes = [
+    'aria-invalid',
+    'autocapitalize',
+    'inputmode',
+    'maxlength',
+    'minlength',
+    'pattern',
+    'spellcheck'
+  ]
+
+  attributes.forEach((name) => {
+    if (source.hasAttribute(name)) {
+      target.setAttribute(name, source.getAttribute(name))
+    }
+  })
+
+  Array.from(source.attributes)
+    .filter(({ name }) => name.startsWith('data-'))
+    .forEach(({ name, value }) => target.setAttribute(name, value))
+}
+
+function preserveDescriptions(input, describedBy) {
+  if (!describedBy) {
+    return
+  }
+
+  const assistiveHint = input.getAttribute(DESCRIBED_BY_ATTRIBUTE)
+  input.setAttribute(
+    DESCRIBED_BY_ATTRIBUTE,
+    [assistiveHint, describedBy].filter(Boolean).join(' ')
+  )
+
+  // The library removes its one-time assistive hint after typing. Restore the
+  // GOV.UK hint and error references that must remain associated with the input.
+  input.addEventListener('input', () => {
+    queueMicrotask(() =>
+      input.setAttribute(DESCRIBED_BY_ATTRIBUTE, describedBy)
+    )
+  })
+}
+
+/**
+ * Progressively enhance one GOV.UK text input with the GDS accessible
+ * autocomplete. Disabled and readonly inputs retain their server-rendered form.
+ *
+ * @param {object} element component root
+ * @returns {object|null} enhanced input, or null when not enhanced
+ */
+export function initAutocomplete(element) {
+  if (element.dataset.appAutocompleteInitialised === 'true') {
+    return element.querySelector('input[role="combobox"]')
+  }
+
+  const originalInput = element.querySelector('.govuk-input')
+  const sourceElement = element.querySelector(SOURCE_SELECTOR)
+
+  if (
+    !originalInput ||
+    !sourceElement ||
+    originalInput.disabled ||
+    originalInput.readOnly
+  ) {
+    return null
+  }
+
+  const source = Array.from(sourceElement.children, ({ textContent }) =>
+    textContent.trim()
+  )
+  const mountElement = document.createElement('div')
+  const describedBy = originalInput.getAttribute(DESCRIBED_BY_ATTRIBUTE)
+
+  originalInput.before(mountElement)
+  originalInput.remove()
+
+  accessibleAutocomplete({
+    element: mountElement,
+    id: originalInput.id || originalInput.name,
+    name: originalInput.name,
+    source,
+    defaultValue: originalInput.value,
+    required: originalInput.required,
+    inputClasses: originalInput.className,
+    hintClasses: originalInput.className,
+    autoselect: booleanOption(element, 'autoselect', false),
+    confirmOnBlur: booleanOption(element, 'confirmOnBlur', true),
+    displayMenu: element.dataset.displayMenu || 'inline',
+    minLength: Number(element.dataset.minLength || 0),
+    showAllValues: booleanOption(element, 'showAllValues', false),
+    placeholder: originalInput.placeholder,
+    templates: {
+      // accessible-autocomplete accepts HTML in suggestion templates. Escape
+      // server-provided values before the library writes them to innerHTML.
+      suggestion: escapeHtml
+    }
+  })
+
+  const input = mountElement.querySelector('input[role="combobox"]')
+
+  copyInputAttributes(originalInput, input)
+  preserveDescriptions(input, describedBy)
+  element.dataset.appAutocompleteInitialised = 'true'
+
+  return input
+}
+
+/**
+ * Initialise every autocomplete below a root element.
+ *
+ * @param {object} root search root
+ * @returns {Array<object>} enhanced inputs
+ */
+export function initAllAutocompletes(root = document) {
+  return Array.from(root.querySelectorAll(MODULE_SELECTOR))
+    .map(initAutocomplete)
+    .filter(Boolean)
+}

package/src/components/autocomplete.test.js

@@ -0,0 +1,177 @@
+import assert from 'node:assert/strict'
+import { beforeEach, test, vi } from 'vitest'
+
+const { accessibleAutocomplete } = vi.hoisted(() => ({
+  accessibleAutocomplete: vi.fn(({ element }) => {
+    element.input = createInput()
+  })
+}))
+
+vi.mock('accessible-autocomplete', () => ({ default: accessibleAutocomplete }))
+
+import { initAllAutocompletes, initAutocomplete } from './autocomplete.js'
+
+function createInput(overrides = {}) {
+  const attributeValues = new Map()
+  const listeners = new Map()
+  const input = {
+    id: 'species',
+    name: 'species',
+    value: 'Sheep',
+    required: true,
+    className: 'govuk-input',
+    placeholder: 'Choose',
+    disabled: false,
+    readOnly: false,
+    attributes: [],
+    hasAttribute: (name) => attributeValues.has(name),
+    getAttribute: (name) => attributeValues.get(name) ?? null,
+    setAttribute(name, value) {
+      attributeValues.set(name, value)
+      const existing = this.attributes.find(
+        (attribute) => attribute.name === name
+      )
+      if (existing) existing.value = value
+      else this.attributes.push({ name, value })
+    },
+    addEventListener: (name, listener) => listeners.set(name, listener),
+    dispatch: (name) => listeners.get(name)?.(),
+    before: vi.fn(),
+    remove: vi.fn(),
+    ...overrides
+  }
+  return input
+}
+
+function createElement({
+  input = createInput(),
+  source = ['Cattle', ' Sheep ']
+} = {}) {
+  const sourceElement = {
+    children: source.map((textContent) => ({ textContent }))
+  }
+  return {
+    dataset: {},
+    querySelector(selector) {
+      if (selector === '.govuk-input') return input
+      if (selector === '.app-autocomplete__source') return sourceElement
+      if (selector === 'input[role="combobox"]')
+        return this.enhancedInput ?? null
+      return null
+    },
+    input
+  }
+}
+
+beforeEach(() => {
+  accessibleAutocomplete.mockClear()
+  vi.stubGlobal('document', {
+    createElement: () => ({
+      input: null,
+      querySelector() {
+        return this.input
+      }
+    })
+  })
+})
+
+test('enhances an input using its source and component options', () => {
+  const element = createElement()
+  Object.assign(element.dataset, {
+    autoselect: 'true',
+    confirmOnBlur: 'false',
+    displayMenu: 'overlay',
+    minLength: '2',
+    showAllValues: 'true'
+  })
+
+  const enhancedInput = initAutocomplete(element)
+  const options = accessibleAutocomplete.mock.calls[0][0]
+
+  assert.equal(enhancedInput, options.element.input)
+  assert.deepEqual(options.source, ['Cattle', 'Sheep'])
+  assert.equal(options.id, 'species')
+  assert.equal(options.defaultValue, 'Sheep')
+  assert.equal(options.autoselect, true)
+  assert.equal(options.confirmOnBlur, false)
+  assert.equal(options.displayMenu, 'overlay')
+  assert.equal(options.minLength, 2)
+  assert.equal(options.showAllValues, true)
+  assert.equal(element.dataset.appAutocompleteInitialised, 'true')
+  assert.equal(element.input.before.mock.calls.length, 1)
+  assert.equal(element.input.remove.mock.calls.length, 1)
+})
+
+test('copies input attributes and preserves descriptions after input', async () => {
+  const original = createInput({ id: '' })
+  original.setAttribute('aria-describedby', 'species-hint species-error')
+  original.setAttribute('aria-invalid', 'true')
+  original.setAttribute('maxlength', '20')
+  original.setAttribute('data-tracking', 'species-field')
+  const element = createElement({ input: original })
+
+  const enhancedInput = initAutocomplete(element)
+
+  assert.equal(accessibleAutocomplete.mock.calls[0][0].id, 'species')
+  assert.equal(enhancedInput.getAttribute('aria-invalid'), 'true')
+  assert.equal(enhancedInput.getAttribute('maxlength'), '20')
+  assert.equal(enhancedInput.getAttribute('data-tracking'), 'species-field')
+  assert.equal(
+    enhancedInput.getAttribute('aria-describedby'),
+    'species-hint species-error'
+  )
+
+  enhancedInput.setAttribute('aria-describedby', 'assistive-hint')
+  enhancedInput.dispatch('input')
+  await new Promise(queueMicrotask)
+  assert.equal(
+    enhancedInput.getAttribute('aria-describedby'),
+    'species-hint species-error'
+  )
+})
+
+test('escapes suggestion HTML', () => {
+  const element = createElement()
+  initAutocomplete(element)
+
+  assert.equal(
+    accessibleAutocomplete.mock.calls[0][0].templates.suggestion(
+      `<b class="x">Tom & 'Sue'</b>`
+    ),
+    '&lt;b class=&quot;x&quot;&gt;Tom &amp; &#039;Sue&#039;&lt;/b&gt;'
+  )
+})
+
+test('does not enhance missing, disabled, or readonly inputs', () => {
+  const missing = createElement()
+  missing.querySelector = () => null
+
+  assert.equal(initAutocomplete(missing), null)
+  assert.equal(
+    initAutocomplete(createElement({ input: createInput({ disabled: true }) })),
+    null
+  )
+  assert.equal(
+    initAutocomplete(createElement({ input: createInput({ readOnly: true }) })),
+    null
+  )
+  assert.equal(accessibleAutocomplete.mock.calls.length, 0)
+})
+
+test('returns the existing combobox when already initialised', () => {
+  const existing = createInput()
+  const element = createElement()
+  element.dataset.appAutocompleteInitialised = 'true'
+  element.enhancedInput = existing
+
+  assert.equal(initAutocomplete(element), existing)
+  assert.equal(accessibleAutocomplete.mock.calls.length, 0)
+})
+
+test('initialises all valid components below a root', () => {
+  const valid = createElement()
+  const disabled = createElement({ input: createInput({ disabled: true }) })
+  const root = { querySelectorAll: () => [valid, disabled] }
+
+  assert.equal(initAllAutocompletes(root).length, 1)
+})