@defra/forms-engine-plugin 5.0.0-alpha.27 → 5.0.0-alpha.29

package/src/client/javascripts/geospatial-map.js

@@ -1,7 +1,7 @@
 // @ts-expect-error - no types
 import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets'
 // @ts-expect-error - no types
-import createDrawPlugin from '@defra/interactive-map/plugins/draw-ml'
+import createDrawPlugin from '@defra/interactive-map/plugins/draw'
 import { bbox } from '@turf/bbox'
 
 import {
@@ -12,9 +12,9 @@ import {
 import {
   EVENTS,
   createMap,
-  defaultConfig,
   getCentroidGridRef,
   getCoordinateGridRef,
+  getDefaultConfig,
   getMapCountryLayers,
   getMapLayers
 } from './map.js'
@@ -223,7 +223,7 @@ export function processGeospatial(config, geospatial, index) {
   }
 
   const initConfig = {
-    ...defaultConfig,
+    ...getDefaultConfig(),
     bounds,
     plugins
   }

package/src/client/javascripts/location-map.js

@@ -10,8 +10,8 @@ import {
   EVENTS,
   centerMap,
   createMap,
-  defaultConfig,
   eastingNorthingToLatLong,
+  getDefaultConfig,
   getMapCountryLayers,
   getMapLayers,
   latLongToEastingNorthing,
@@ -446,7 +446,7 @@ export function processLocation(config, location, index) {
   mapContainer.setAttribute('id', mapId)
   mapContainer.setAttribute('class', 'map-container')
 
-  const initConfig = getInitMapConfig(location) ?? defaultConfig
+  const initConfig = getInitMapConfig(location) ?? getDefaultConfig()
 
   locationInputs.after(mapContainer)
 

package/src/client/javascripts/map.js

@@ -122,10 +122,15 @@ export function getCentroidGridRef(feature) {
   }
 }
 
-/** @type {InteractiveMapInitConfig} */
-export const defaultConfig = {
-  zoom: '6',
-  center: [DEFAULT_LONG, DEFAULT_LAT]
+/**
+ * Get the default config for a map
+ * @returns {InteractiveMapInitConfig}
+ */
+export const getDefaultConfig = () => {
+  return {
+    zoom: '6',
+    center: [DEFAULT_LONG, DEFAULT_LAT]
+  }
 }
 
 export const EVENTS = {
@@ -166,6 +171,7 @@ export function initMaps(config = {}) {
   const {
     assetPath = '/assets',
     apiPath = '/form/api',
+    workerPath = '/assets/interactive-map/maplibre-gl-worker.mjs',
     data = defaultData
   } = config
   const locations = document.querySelectorAll('.app-location-field')
@@ -197,11 +203,15 @@ export function initMaps(config = {}) {
   }
 
   locations.forEach((location, index) => {
-    processLocation({ assetPath, apiPath, data }, location, index)
+    processLocation({ assetPath, apiPath, workerPath, data }, location, index)
   })
 
   geospatials.forEach((geospatial, index) => {
-    processGeospatial({ assetPath, apiPath, data }, geospatial, index)
+    processGeospatial(
+      { assetPath, apiPath, workerPath, data },
+      geospatial,
+      index
+    )
   })
 }
 
@@ -258,7 +268,7 @@ export function makeTileRequestTransformer(apiPath) {
  * @param {MapsEnvironmentConfig} mapsConfig - the map environment params
  */
 export function createMap(mapId, initConfig, mapsConfig) {
-  const { assetPath, apiPath, data = defaultData } = mapsConfig
+  const { assetPath, apiPath, workerPath, data = defaultData } = mapsConfig
   const logoAltText = 'Ordnance survey logo'
   const interactPlugin = createInteractPlugin({
     markerColor: { outdoor: '#ff0000', dark: '#00ff00' },
@@ -270,7 +280,7 @@ export function createMap(mapId, initConfig, mapsConfig) {
   const map = new InteractiveMap(mapId, {
     enableFullscreen: true,
     autoColorScheme: false,
-    mapProvider: maplibreProvider(),
+    mapProvider: maplibreProvider({ workerUrl: workerPath }),
     behaviour: 'inline',
     minZoom: 6,
     maxZoom: 18,
@@ -448,6 +458,7 @@ export function getMapCountryLayers(apiPath, country) {
  * @typedef {object} MapsEnvironmentConfig
  * @property {string} assetPath - the root asset path
  * @property {string} apiPath - the root API path
+ * @property {string} workerPath - the maplibre worker path
  * @property {TileData} data - the tile data config
  */
 

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

@@ -1,7 +1,7 @@
 import { type AutocompleteFieldComponent } from '@defra/forms-model'
-import { type LanguageMessages } from 'joi'
 
 import { SelectField } from './SelectField.js'
+import { withCustomValidationOverrides } from './helpers/index.js'
 import { type RenderContext } from './types.js'
 import { buildValidationMessages } from '../i18n/buildValidationMessages.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
@@ -50,12 +50,19 @@ export class AutocompleteField extends SelectField {
   }
 
   getValidationMessagesOverride(translator: Translator) {
+    const { customValidationMessages } = this.options
     const { t } = translator
+    const defaults = {
+      'any.required': buildValidationMessages(t).objectRequired,
+      'any.only': buildValidationMessages(t).objectRequired
+    }
+
     return {
-      [this.name]: {
-        'any.required': buildValidationMessages(t).objectRequired,
-        'any.only': buildValidationMessages(t).objectRequired
-      } as LanguageMessages
+      [this.name]: withCustomValidationOverrides(
+        defaults,
+        undefined,
+        customValidationMessages
+      )
     }
   }
 }

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

@@ -19,8 +19,8 @@ import {
 export class CheckboxesField extends SelectionControlField {
   declare options: CheckboxesFieldComponent['options']
   declare schema: CheckboxesFieldComponent['schema']
-  declare formSchema: ArraySchema<string> | ArraySchema<number>
-  declare stateSchema: ArraySchema<string> | ArraySchema<number>
+  declare formSchema: ArraySchema<string[]> | ArraySchema<number[]>
+  declare stateSchema: ArraySchema<string[]> | ArraySchema<number[]>
   declare limits: { min?: number; max?: number; length?: number }
 
   constructor(
@@ -33,7 +33,7 @@ export class CheckboxesField extends SelectionControlField {
     const { options, schema } = def
 
     let formSchema =
-      type === 'string' ? joi.array<string>() : joi.array<number>()
+      type === 'string' ? joi.array<string[]>() : joi.array<number[]>()
 
     const itemsSchema = joi[type]()
       .valid(...this.values)

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

@@ -89,10 +89,10 @@ export class ComponentBase {
 }
 
 export type ComponentSchema =
-  | ArraySchema<string>
-  | ArraySchema<number>
-  | ArraySchema<boolean>
-  | ArraySchema<object>
+  | ArraySchema<string[]>
+  | ArraySchema<number[]>
+  | ArraySchema<boolean[]>
+  | ArraySchema<object[]>
   | BooleanSchema<string>
   | BooleanSchema
   | DateSchema

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

@@ -8,8 +8,7 @@ import {
 import joi, {
   type ArraySchema,
   type BooleanSchema,
-  type LanguageMessages,
-  type StringSchema
+  type LanguageMessages
 } from 'joi'
 
 import {
@@ -34,7 +33,7 @@ export class DeclarationField extends FormComponent {
 
   declare declarationConfirmationLabel: string | undefined
 
-  declare formSchema: ArraySchema<StringSchema[]>
+  declare formSchema: ArraySchema<string[]>
   declare stateSchema: BooleanSchema
   declare content: string
   headerStartLevel: number
@@ -63,7 +62,7 @@ export class DeclarationField extends FormComponent {
         'any.unknown': messageTemplate.declarationRequired as string,
         'array.includesRequiredUnknowns':
           messageTemplate.declarationRequired as string
-      }) as ArraySchema<StringSchema[]>
+      })
 
     this.formSchema = formSchema
     this.stateSchema = joi.boolean().cast('string').label(this.label).required()

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

@@ -111,8 +111,8 @@ export const formItemSchema = itemSchema.append({
 export class FileUploadField extends FormComponent {
   declare options: FileUploadFieldComponent['options']
   declare schema: FileUploadFieldComponent['schema']
-  declare formSchema: ArraySchema<FileState>
-  declare stateSchema: ArraySchema<FileState>
+  declare formSchema: ArraySchema<FileState[]>
+  declare stateSchema: ArraySchema<FileState[]>
   declare limits: { min?: number; max?: number; length?: number }
 
   constructor(

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

@@ -31,16 +31,16 @@ export class ListFormComponent extends FormComponent {
   >['options']
 
   declare formSchema:
-    | ArraySchema<string>
-    | ArraySchema<number>
+    | ArraySchema<string[]>
+    | ArraySchema<number[]>
     | BooleanSchema<string>
     | NumberSchema<string>
     | NumberSchema
     | StringSchema
 
   declare stateSchema:
-    | ArraySchema<string>
-    | ArraySchema<number>
+    | ArraySchema<string[]>
+    | ArraySchema<number[]>
     | BooleanSchema<string>
     | NumberSchema<string>
     | NumberSchema

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

@@ -9,7 +9,10 @@ import {
   FormComponent,
   isFormValue
 } from './FormComponent.js'
-import { addClassOptionIfNone } from './helpers/index.js'
+import {
+  addClassOptionIfNone,
+  withCustomValidationOverrides
+} from './helpers/index.js'
 import { type RenderContext } from './types.js'
 import { buildValidationMessages } from '../i18n/buildValidationMessages.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
@@ -141,16 +144,23 @@ export abstract class LocationFieldBase extends FormComponent {
   }
 
   getValidationMessagesOverride(translator: Translator) {
+    const { customValidationMessage, customValidationMessages } = this.options
     const { t } = translator
     const config = this.getValidationConfig(translator)
+    const defaults = {
+      'any.required':
+        config.requiredMessage ?? buildValidationMessages(t).objectRequired,
+      'string.empty':
+        config.requiredMessage ?? buildValidationMessages(t).objectRequired,
+      'string.pattern.base': config.patternErrorMessage
+    }
+
     return {
-      [this.name]: {
-        'any.required':
-          config.requiredMessage ?? buildValidationMessages(t).objectRequired,
-        'string.empty':
-          config.requiredMessage ?? buildValidationMessages(t).objectRequired,
-        'string.pattern.base': config.patternErrorMessage
-      } as LanguageMessages
+      [this.name]: withCustomValidationOverrides(
+        defaults,
+        customValidationMessage,
+        customValidationMessages
+      )
     }
   }
 

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

@@ -1,14 +1,11 @@
 import { type NumberFieldComponent } from '@defra/forms-model'
-import joi, {
-  type CustomValidator,
-  type LanguageMessages,
-  type NumberSchema
-} from 'joi'
+import joi, { type CustomValidator, type NumberSchema } from 'joi'
 
 import {
   FormComponent,
   isFormValue
 } from './FormComponent.js'
+import { withCustomValidationOverrides } from './helpers/index.js'
 import { type RenderContext } from './types.js'
 import { buildValidationMessages } from '../i18n/buildValidationMessages.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
@@ -137,16 +134,23 @@ export class NumberField extends FormComponent {
   }
 
   getValidationMessagesOverride(translator: Translator) {
+    const { customValidationMessage, customValidationMessages } = this.options
     const { t } = translator
+    const defaults = {
+      'any.required': buildValidationMessages(t).objectRequired,
+      'number.base': buildValidationMessages(t).objectMissing,
+      'number.precision': buildValidationMessages(t).numberPrecision,
+      'number.integer': buildValidationMessages(t).numberInteger,
+      'number.min': buildValidationMessages(t).numberMin,
+      'number.max': buildValidationMessages(t).numberMax
+    }
+
     return {
-      [this.name]: {
-        'any.required': buildValidationMessages(t).objectRequired,
-        'number.base': buildValidationMessages(t).objectMissing,
-        'number.precision': buildValidationMessages(t).numberPrecision,
-        'number.integer': buildValidationMessages(t).numberInteger,
-        'number.min': buildValidationMessages(t).numberMin,
-        'number.max': buildValidationMessages(t).numberMax
-      } as LanguageMessages
+      [this.name]: withCustomValidationOverrides(
+        defaults,
+        customValidationMessage,
+        customValidationMessages
+      )
     }
   }
 

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

@@ -6,7 +6,10 @@ import {
 } from '@defra/forms-model'
 
 import { SelectionControlField } from './SelectionControlField.js'
-import { addClassOptionIfNone } from './helpers/index.js'
+import {
+  addClassOptionIfNone,
+  withCustomValidationOverrides
+} from './helpers/index.js'
 import { buildValidationMessages } from '../i18n/buildValidationMessages.js'
 import { type Translator } from '../i18n/types.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
@@ -62,11 +65,18 @@ export class YesNoField extends SelectionControlField {
   }
 
   getValidationMessagesOverride(translator: Translator) {
+    const { customValidationMessage, customValidationMessages } = this.options
     const { selectYesNoRequired } = buildValidationMessages(translator.t)
+    const defaults = {
+      'any.required': selectYesNoRequired
+    }
+
     return {
-      [this.name]: {
-        'any.required': selectYesNoRequired
-      }
+      [this.name]: withCustomValidationOverrides(
+        defaults,
+        customValidationMessage,
+        customValidationMessages
+      )
     }
   }
 

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

@@ -1,5 +1,9 @@
 import { type ComponentDef } from '@defra/forms-model'
-import joi, { type JoiExpression, type ReferenceOptions } from 'joi'
+import joi, {
+  type JoiExpression,
+  type LanguageMessages,
+  type ReferenceOptions
+} from 'joi'
 import lowerFirst from 'lodash/lowerFirst.js'
 
 import { type Translator } from '../../i18n/types.js'
@@ -69,6 +73,46 @@ export const lowerFirstExpressionOptions = {
 export const createLowerFirstExpression = (template: string): JoiExpression =>
   joi.expression(template, lowerFirstExpressionOptions) as JoiExpression
 
+/**
+ * Joi's own LanguageMessages type only allows string values, but
+ * buildValidationMessages() returns JoiExpression for templated messages,
+ * which Joi accepts at runtime. This type covers both.
+ */
+type TranslatedValidationMessages = Record<string, string | JoiExpression>
+
+/**
+ * Keep the form author's custom validation message for any key they set,
+ * so translated defaults only fill in the keys the author left blank.
+ * A single customValidationMessage covers every key in the schema.
+ */
+export function withCustomValidationOverrides(
+  defaults: TranslatedValidationMessages,
+  customValidationMessage?: string,
+  customValidationMessages?: LanguageMessages
+): LanguageMessages {
+  const messages: TranslatedValidationMessages = {}
+
+  // A global override for all messages is the value for all scenarios
+  if (customValidationMessage) {
+    for (const key of Object.keys(defaults)) {
+      messages[key] = customValidationMessage
+    }
+
+    return messages as LanguageMessages
+  }
+
+  // A default only fills a key that the user has not configured
+  const authorKeys = Object.keys(customValidationMessages ?? {})
+
+  for (const [key, message] of Object.entries(defaults)) {
+    if (!authorKeys.includes(key)) {
+      messages[key] = message
+    }
+  }
+
+  return messages as LanguageMessages
+}
+
 /**
  * Translate a component label, in precedence order of errorDescription, then shortDesciption, then title
  * @param {ComponentDef} component