@defra/forms-engine-plugin 0.1.25 → 0.1.27

package/src/client/javascripts/application.js

@@ -1,87 +1,3 @@
-import {
-  Button,
-  CharacterCount,
-  Checkboxes,
-  ErrorSummary,
-  Header,
-  NotificationBanner,
-  Radios,
-  SkipLink,
-  createAll
-} from 'govuk-frontend'
+import { initAll } from '~/src/client/javascripts/shared.js'
 
-createAll(Button)
-createAll(CharacterCount)
-createAll(Checkboxes)
-createAll(ErrorSummary)
-createAll(Header)
-createAll(NotificationBanner)
-createAll(Radios)
-createAll(SkipLink)
-
-// Show preview close link via `rel="opener"`
-if (window.opener) {
-  const $closeLink = document.querySelector('.js-preview-banner-close')
-
-  $closeLink?.removeAttribute('hidden')
-  $closeLink?.addEventListener('click', (event) => {
-    event.preventDefault()
-    window.close()
-  })
-}
-
-/**
- * Initialise autocomplete
- * @param {HTMLSelectElement | null} $select
- * @param {(config: object) => void} init
- */
-function initAutocomplete($select, init) {
-  if (!$select) {
-    return
-  }
-
-  const config = {
-    id: $select.id,
-    selectElement: $select
-  }
-
-  init(config)
-
-  /** @type {HTMLInputElement | null} */
-  const $input = document.querySelector(`#${config.id}`)
-
-  // Allowed values for input
-  const inputValues = [...$select.options].map((option) => option.text)
-
-  // Reset select when input value is not allowed
-  $input?.addEventListener('blur', () => {
-    if (!$input.value || !inputValues.includes($input.value)) {
-      $select.value = ''
-    }
-  })
-}
-
-// Find all autocompletes
-const $autocompletes = document.querySelectorAll(
-  `[data-module="govuk-accessible-autocomplete"]`
-)
-
-// Lazy load autocomplete component
-if ($autocompletes.length) {
-  // @ts-expect-error -- No types available
-  import('accessible-autocomplete')
-    .then((component) => {
-      const { default: accessibleAutocomplete } = component
-
-      // Initialise each autocomplete
-      $autocompletes.forEach(($module) =>
-        initAutocomplete(
-          $module.querySelector('select'),
-          accessibleAutocomplete.enhanceSelectElement
-        )
-      )
-    })
-
-    // eslint-disable-next-line no-console
-    .catch(console.error)
-}
+initAll()

package/src/client/javascripts/autocomplete.js

@@ -0,0 +1,57 @@
+/**
+ * Initialise autocomplete
+ * @param {HTMLSelectElement | null} $select
+ * @param {(config: object) => void} init
+ */
+function initAutocomplete($select, init) {
+  if (!$select) {
+    return
+  }
+
+  const config = {
+    id: $select.id,
+    selectElement: $select
+  }
+
+  init(config)
+
+  /** @type {HTMLInputElement | null} */
+  const $input = document.querySelector(`#${config.id}`)
+
+  // Allowed values for input
+  const inputValues = [...$select.options].map((option) => option.text)
+
+  // Reset select when input value is not allowed
+  $input?.addEventListener('blur', () => {
+    if (!$input.value || !inputValues.includes($input.value)) {
+      $select.value = ''
+    }
+  })
+}
+
+export function initAllAutocomplete() {
+  // Find all autocompletes
+  const $autocompletes = document.querySelectorAll(
+    `[data-module="govuk-accessible-autocomplete"]`
+  )
+
+  // Lazy load autocomplete component
+  if ($autocompletes.length) {
+    // @ts-expect-error -- No types available
+    import('accessible-autocomplete')
+      .then((component) => {
+        const { default: accessibleAutocomplete } = component
+
+        // Initialise each autocomplete
+        $autocompletes.forEach(($module) =>
+          initAutocomplete(
+            $module.querySelector('select'),
+            accessibleAutocomplete.enhanceSelectElement
+          )
+        )
+      })
+
+      // eslint-disable-next-line no-console
+      .catch(console.error)
+  }
+}

package/src/client/javascripts/file-upload.js

@@ -369,7 +369,7 @@ function handleAjaxFormSubmission(
   return true
 }
 
-export function initFileUpload() {
+function initUpload() {
   const form = document.querySelector('form:has(input[type="file"])')
   /** @type {HTMLInputElement | null} */
   const fileInput = form ? form.querySelector('input[type="file"]') : null
@@ -440,3 +440,11 @@ export function initFileUpload() {
     )
   })
 }
+
+export function initFileUpload() {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initUpload)
+  } else {
+    initUpload()
+  }
+}

package/src/client/javascripts/govuk.js

@@ -0,0 +1,22 @@
+import {
+  Button,
+  CharacterCount,
+  Checkboxes,
+  ErrorSummary,
+  Header,
+  NotificationBanner,
+  Radios,
+  SkipLink,
+  createAll
+} from 'govuk-frontend'
+
+export function initAllGovuk() {
+  createAll(Button)
+  createAll(CharacterCount)
+  createAll(Checkboxes)
+  createAll(ErrorSummary)
+  createAll(Header)
+  createAll(NotificationBanner)
+  createAll(Radios)
+  createAll(SkipLink)
+}

package/src/client/javascripts/preview-close-link.js

@@ -0,0 +1,12 @@
+export function initPreviewCloseLink() {
+  // Show preview close link via `rel="opener"`
+  if (window.opener) {
+    const $closeLink = document.querySelector('.js-preview-banner-close')
+
+    $closeLink?.removeAttribute('hidden')
+    $closeLink?.addEventListener('click', (event) => {
+      event.preventDefault()
+      window.close()
+    })
+  }
+}

package/src/client/javascripts/shared.js

@@ -0,0 +1,16 @@
+import { initAllAutocomplete as initAllAutocompleteImp } from '~/src/client/javascripts/autocomplete.js'
+import { initFileUpload as initFileUploadImp } from '~/src/client/javascripts/file-upload.js'
+import { initAllGovuk as initAllGovukImp } from '~/src/client/javascripts/govuk.js'
+import { initPreviewCloseLink as initPreviewCloseLinkImp } from '~/src/client/javascripts/preview-close-link.js'
+
+export const initAllGovuk = initAllGovukImp
+export const initAllAutocomplete = initAllAutocompleteImp
+export const initFileUpload = initFileUploadImp
+export const initPreviewCloseLink = initPreviewCloseLinkImp
+
+export function initAll() {
+  initAllGovuk()
+  initAllAutocomplete()
+  initFileUpload()
+  initPreviewCloseLink()
+}

package/src/client/stylesheets/_tag-env.scss

@@ -21,4 +21,13 @@
       margin: 0 0 0 govuk-spacing(2);
     }
   }
+
+  &-rebrand {
+    vertical-align: middle;
+
+    // Align with product name
+    @include govuk-media-query($from: tablet) {
+      margin: -3px 0 2px;
+    }
+  }
 }

package/src/config/index.ts

@@ -78,6 +78,16 @@ export const config = convict({
     default: isTest
   },
 
+  /**
+   * Feature flags
+   */
+  showRebrand: {
+    doc: 'If this app should show the 2025 rebrand',
+    format: Boolean,
+    env: 'SHOW_GOVUK_REBRAND',
+    default: false
+  },
+
   /**
    * Service
    */

package/src/index.ts

@@ -1,3 +1,5 @@
+import { getErrorMessage } from '@defra/forms-model'
+
 import { config } from '~/src/config/index.js'
 import { createLogger } from '~/src/server/common/helpers/logging/logger.js'
 import { createServer } from '~/src/server/index.js'
@@ -5,8 +7,9 @@ import { createServer } from '~/src/server/index.js'
 const logger = createLogger()
 
 process.on('unhandledRejection', (error) => {
+  const err = getErrorMessage(error)
   logger.info('Unhandled rejection')
-  logger.error(error)
+  logger.error(err, `[unhandledRejection] Unhandled promise rejection: ${err}`)
   throw error
 })
 
@@ -26,6 +29,8 @@ async function startServer() {
 }
 
 startServer().catch((error: unknown) => {
+  const err = getErrorMessage(error)
   logger.info('Server failed to start :(')
-  logger.error(error)
+  logger.error(err, `[serverStartup] Server failed to start: ${err}`)
+  throw error
 })

package/src/server/common/helpers/logging/request-tracing.js

@@ -6,5 +6,5 @@ import { config } from '~/src/config/index.js'
 
 export const requestTracing = {
   plugin: tracing,
-  options: { tracingHeader: config.get('tracing').header }
+  options: { tracingHeader: config.get('tracing.header') }
 }

package/src/server/common/helpers/redis-client.js

@@ -1,3 +1,4 @@
+import { getErrorMessage } from '@defra/forms-model'
 import { Cluster, Redis } from 'ioredis'
 
 import { config } from '~/src/config/index.js'
@@ -53,17 +54,18 @@ export function buildRedisClient() {
   }
 
   redisClient.on('connect', () => {
-    logger.info('Connected to Redis server')
+    logger.info('[redisConnected] Connected to Redis server')
   })
 
   redisClient.on('close', () => {
     logger.warn(
-      'Redis connection closed attempting reconnect with default behavior'
+      '[redisDisconnected] Redis connection closed attempting reconnect with default behavior'
     )
   })
 
   redisClient.on('error', (error) => {
-    logger.error(error, `Redis connection error ${error}.`)
+    const err = getErrorMessage(error)
+    logger.error(err, `[redisConnectionError] Redis connection error - ${err}`)
   })
 
   return redisClient

package/src/server/constants.js

@@ -1,3 +1,2 @@
 export const PREVIEW_PATH_PREFIX = '/preview'
-export const ERROR_PREVIEW_PATH_PREFIX = '/error-preview'
 export const FORM_PREFIX = ''

package/src/server/index.ts

@@ -89,7 +89,6 @@ export async function createServer(routeConfig?: RouteConfig) {
   await server.register(inert)
   await server.register(Scooter)
   await server.register(pluginCrumb)
-
   await server.register(pluginEngine)
 
   server.ext('onPreResponse', (request: Request, h: ResponseToolkit) => {
@@ -126,7 +125,11 @@ export async function createServer(routeConfig?: RouteConfig) {
   })
 
   await server.register(pluginErrorPages)
-  await server.register(blipp)
+
+  if (config.get('cdpEnvironment') === 'local') {
+    await server.register(blipp)
+  }
+
   await server.register(requestTracing)
 
   return server

package/src/server/plugins/engine/components/DatePartsField.test.ts

@@ -242,9 +242,26 @@ describe('DatePartsField', () => {
           })
         )
 
+        // Check a non-4-digit year shows as an error
+        const state4 = getFormState({
+          day: 1,
+          month: 2,
+          year: 20
+        })
+        const result4 = field.getContextValueFromState(state4)
+
+        const state5 = getFormState({
+          day: 1,
+          month: 2,
+          year: 2000
+        })
+        const result5 = field.getContextValueFromState(state5)
+
         expect(result1.errors).toBeTruthy()
         expect(result2.errors).toBeTruthy()
         expect(result3.errors).toBeTruthy()
+        expect(result4).toBeNull()
+        expect(result5).toBe('2000-02-01')
       })
     })
 

package/src/server/plugins/engine/components/DatePartsField.ts

@@ -9,7 +9,11 @@ import {
   isFormValue
 } from '~/src/server/plugins/engine/components/FormComponent.js'
 import { NumberField } from '~/src/server/plugins/engine/components/NumberField.js'
-import { type DateInputItem } from '~/src/server/plugins/engine/components/types.js'
+import {
+  type DateInputItem,
+  type DatePartsState
+} from '~/src/server/plugins/engine/components/types.js'
+import { parseStrictDate } from '~/src/server/plugins/engine/date-helper.js'
 import { messageTemplate } from '~/src/server/plugins/engine/pageControllers/validationOptions.js'
 import {
   type ErrorMessageTemplateList,
@@ -121,7 +125,8 @@ export class DatePartsField extends FormComponent {
     if (
       !value ||
       !isValid(
-        parse(
+        parseStrictDate(
+          value,
           `${value.year}-${value.month}-${value.day}`,
           'yyyy-MM-dd',
           new Date()
@@ -232,12 +237,6 @@ export class DatePartsField extends FormComponent {
   }
 }
 
-export interface DatePartsState extends Record<string, number> {
-  day: number
-  month: number
-  year: number
-}
-
 export function getValidatorDate(component: DatePartsField) {
   const validator: CustomValidator = (payload: FormPayload, helpers) => {
     const { collection, name, options } = component

package/src/server/plugins/engine/components/MonthYearField.test.ts

@@ -222,9 +222,24 @@ describe('MonthYearField', () => {
           })
         )
 
+        // Check a non-4-digit year shows as an error
+        const state4 = getFormState({
+          month: 2,
+          year: 20
+        })
+        const result4 = field.getContextValueFromState(state4)
+
+        const state5 = getFormState({
+          month: 5,
+          year: 2000
+        })
+        const result5 = field.getContextValueFromState(state5)
+
         expect(result1.errors).toBeTruthy()
         expect(result2.errors).toBeTruthy()
         expect(result3.errors).toBeTruthy()
+        expect(result4).toBeNull()
+        expect(result5).toBe('2000-05')
       })
     })
 

package/src/server/plugins/engine/components/MonthYearField.ts

@@ -1,5 +1,5 @@
 import { ComponentType, type MonthYearFieldComponent } from '@defra/forms-model'
-import { format, isValid, parse } from 'date-fns'
+import { format, isValid } from 'date-fns'
 import {
   type Context,
   type CustomValidator,
@@ -14,7 +14,11 @@ import {
   isFormValue
 } from '~/src/server/plugins/engine/components/FormComponent.js'
 import { NumberField } from '~/src/server/plugins/engine/components/NumberField.js'
-import { type DateInputItem } from '~/src/server/plugins/engine/components/types.js'
+import {
+  type DateInputItem,
+  type MonthYearState
+} from '~/src/server/plugins/engine/components/types.js'
+import { parseStrictDate } from '~/src/server/plugins/engine/date-helper.js'
 import { messageTemplate } from '~/src/server/plugins/engine/pageControllers/validationOptions.js'
 import {
   type ErrorMessageTemplateList,
@@ -119,7 +123,12 @@ export class MonthYearField extends FormComponent {
     if (
       !value ||
       !isValid(
-        parse(`${value.year}-${value.month}-01`, 'yyyy-MM-dd', new Date())
+        parseStrictDate(
+          value,
+          `${value.year}-${value.month}-01`,
+          'yyyy-MM-dd',
+          new Date()
+        )
       )
     ) {
       return null
@@ -223,11 +232,6 @@ export class MonthYearField extends FormComponent {
   }
 }
 
-export interface MonthYearState extends Record<string, number> {
-  month: number
-  year: number
-}
-
 export function getValidatorMonthYear(component: MonthYearField) {
   const validator: CustomValidator = (payload: FormPayload, helpers) => {
     const { collection, name, options } = component

package/src/server/plugins/engine/components/YesNoField.ts

@@ -1,4 +1,9 @@
-import { type YesNoFieldComponent } from '@defra/forms-model'
+import {
+  SchemaVersion,
+  yesNoListId,
+  yesNoListName,
+  type YesNoFieldComponent
+} from '@defra/forms-model'
 
 import { SelectionControlField } from '~/src/server/plugins/engine/components/SelectionControlField.js'
 import { addClassOptionIfNone } from '~/src/server/plugins/engine/components/helpers.js'
@@ -17,7 +22,16 @@ export class YesNoField extends SelectionControlField {
     def: YesNoFieldComponent,
     props: ConstructorParameters<typeof SelectionControlField>[1]
   ) {
-    super({ ...def, list: '__yesNo' }, props)
+    super(
+      {
+        ...def,
+        list:
+          props.model.schemaVersion === SchemaVersion.V1
+            ? yesNoListName
+            : yesNoListId
+      },
+      props
+    )
 
     const { options } = def
     let { formSchema } = this

package/src/server/plugins/engine/components/types.ts

@@ -115,3 +115,14 @@ export interface ComponentViewModel {
   isFormComponent: boolean
   model: ViewModel
 }
+
+export interface DatePartsState extends Record<string, number> {
+  day: number
+  month: number
+  year: number
+}
+
+export interface MonthYearState extends Record<string, number> {
+  month: number
+  year: number
+}

package/src/server/plugins/engine/date-helper.test.ts

@@ -0,0 +1,47 @@
+import { startOfToday } from 'date-fns'
+
+import {
+  parseStrictDate,
+  todayAsDateOnly
+} from '~/src/server/plugins/engine/date-helper.js'
+
+describe('todayAsDateOnly()', () => {
+  test('should return today with no time element', () => {
+    expect(todayAsDateOnly()).toEqual(startOfToday())
+  })
+})
+
+describe('parseStrictDate()', () => {
+  test('should parse valid date', () => {
+    const dateObj = {
+      year: 2025,
+      month: 5,
+      day: 21
+    }
+    expect(
+      parseStrictDate(dateObj, '2025-05-21', 'yyyy-MM-dd', new Date())
+    ).toEqual(new Date(2025, 4, 21))
+  })
+
+  test('should fail to parse invalid date with 4-digit year', () => {
+    const dateObj = {
+      year: 2025,
+      month: 15,
+      day: 21
+    }
+    expect(
+      parseStrictDate(dateObj, '2025-15-21', 'yyyy-MM-dd', new Date())
+    ).toBeNaN()
+  })
+
+  test('should fail to parse valid date that has non-4-digit year', () => {
+    const dateObj = {
+      year: 25,
+      month: 5,
+      day: 21
+    }
+    expect(
+      parseStrictDate(dateObj, '25-15-21', 'yyyy-MM-dd', new Date())
+    ).toBeNaN()
+  })
+})

package/src/server/plugins/engine/date-helper.ts

@@ -0,0 +1,32 @@
+import { parse, startOfToday } from 'date-fns'
+
+import {
+  type DatePartsState,
+  type MonthYearState
+} from '~/src/server/plugins/engine/components/types.js'
+
+/**
+ * This function is just a wrapper for startOfToday() but, since it's in a separate file, allows
+ * the function to be easily mocked for unit testing.
+ * @returns {Date}
+ */
+export function todayAsDateOnly() {
+  return startOfToday()
+}
+
+/**
+ * Wrapper for date-fns parse() method to ensure the year is 4-digits. It seems parse() allows a non-4-digit year
+ * despite the format mask enforcing it.
+ */
+export function parseStrictDate(
+  dateObj: DatePartsState | MonthYearState,
+  dateStr: string,
+  formatStr: string,
+  referenceDate: Date
+) {
+  if (!dateObj.year || dateObj.year < 1000 || dateObj.year > 9999) {
+    return NaN
+  }
+
+  return parse(dateStr, formatStr, referenceDate)
+}

package/src/server/plugins/engine/helpers.ts

@@ -1,6 +1,7 @@
 import {
   ControllerPath,
   Engine,
+  getErrorMessage,
   hasComponents,
   isFormType,
   type ComponentDef,
@@ -148,7 +149,11 @@ export function encodeUrl(link?: string) {
     try {
       return new URL(link).toString() // escape the search params without breaking the ? and & reserved characters in rfc2368
     } catch (err) {
-      logger.error(err, `Failed to encode ${link}`)
+      const errMsg = getErrorMessage(err)
+      logger.error(
+        errMsg,
+        `[urlEncodingFailed] Failed to encode URL: ${link} - ${errMsg}`
+      )
       throw err
     }
   }
@@ -404,7 +409,9 @@ export function setPageTitles(def: FormDefinition) {
       if (!page.title) {
         const formNameMsg = def.name ? ` in form '${def.name}'` : ''
 
-        logger.warn(`Page '${page.path}' has no title${formNameMsg}`)
+        logger.info(
+          `[pageTitleMissing] Page '${page.path}' has no title${formNameMsg}`
+        )
       }
     }
   })

package/src/server/plugins/engine/index.ts

@@ -11,7 +11,6 @@ import {
 import * as filters from '~/src/server/plugins/nunjucks/filters/index.js'
 
 export { getPageHref } from '~/src/server/plugins/engine/helpers.js'
-export { configureEnginePlugin } from '~/src/server/plugins/engine/configureEnginePlugin.js'
 export { context } from '~/src/server/plugins/nunjucks/context.js'
 
 const globals = {