@defra/forms-engine-plugin 4.0.41 → 4.0.42

package/src/client/javascripts/shared.js

@@ -2,12 +2,16 @@ import { initAllAutocomplete as initAllAutocompleteImp } from '~/src/client/java
 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 { initMaps } from '~/src/client/javascripts/location-map.js'
 
 export const initAllGovuk = initAllGovukImp
 export const initAllAutocomplete = initAllAutocompleteImp
 export const initFileUpload = initFileUploadImp
 export const initPreviewCloseLink = initPreviewCloseLinkImp
 
+/**
+ * Initialise all clientside components (but not maps as this will be an opt-in for now given the additional UMD assets that are required)
+ */
 export function initAll() {
   initAllGovuk()
   initAllAutocomplete()

package/src/client/stylesheets/_location-fields.scss

@@ -3,3 +3,14 @@
 .govuk-form-group .app-location-field-inputs .govuk-form-group {
   margin-bottom: 0;
 }
+
+.map-container {
+  margin-top: 10px;
+}
+
+// Hides the location instructions text when JS (maps) is available
+.js-enabled .app-location-field {
+  details:last-child {
+    display: none;
+  }
+}

package/src/client/stylesheets/application.scss

@@ -2,7 +2,6 @@
 @use "shared";
 @use "code";
 @use "tag-env";
-@use "location-fields";
 
 //  An example of some user-supplied styling
 //  Not great practice but it illustrates the point

package/src/client/stylesheets/shared.scss

@@ -2,6 +2,7 @@
 @use "pkg:accessible-autocomplete";
 @use "prose";
 @use "summary-list";
+@use "location-fields";
 
 // Use default GDS Transport font for autocomplete
 .autocomplete__hint,

package/src/config/index.ts

@@ -255,7 +255,7 @@ export const config = convict({
   } as SchemaObj<string>,
 
   ordnanceSurveyApiKey: {
-    doc: 'The ordnance survey api key use by the postcode lookup plugin',
+    doc: 'The ordnance survey api key used by the postcode lookup and maps plugin',
     format: String,
     nullable: true,
     default: undefined,

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

@@ -15,6 +15,7 @@ import { getRoutes as getRepeaterItemDeleteRoutes } from '~/src/server/plugins/e
 import { getRoutes as getRepeaterSummaryRoutes } from '~/src/server/plugins/engine/routes/repeaters/summary.js'
 import { type PluginOptions } from '~/src/server/plugins/engine/types.js'
 import { registerVision } from '~/src/server/plugins/engine/vision.js'
+import { mapPlugin } from '~/src/server/plugins/map/index.js'
 import { postcodeLookupPlugin } from '~/src/server/plugins/postcode-lookup/index.js'
 import {
   type FormRequestPayloadRefs,
@@ -57,6 +58,16 @@ export const plugin = {
       })
     }
 
+    // Register the maps plugin only if we have an OS api key
+    if (ordnanceSurveyApiKey) {
+      await server.register({
+        plugin: mapPlugin,
+        options: {
+          ordnanceSurveyApiKey
+        }
+      })
+    }
+
     server.expose('baseLayoutPath', nunjucksOptions.baseLayoutPath)
     server.expose('viewContext', viewContext)
     server.expose('cacheService', cacheService)

package/src/server/plugins/engine/views/components/_location-field-base.html

@@ -70,7 +70,7 @@
 
   {% set hasErrors = showFieldsetError and component.model.errorMessage %}
 
-  <div class="govuk-form-group {{ "govuk-form-group--error" if hasErrors }}">
+  <div class="govuk-form-group app-location-field {{ "govuk-form-group--error" if hasErrors }}" data-locationtype="{{component.type | lower}}">
     {{ govukFieldset({
       legend: {
         text: component.model.fieldset.legend.text,

package/src/server/plugins/engine/views/components/osgridreffield.html

@@ -3,8 +3,10 @@
 
 {% macro OsGridRefField(component) %}
   {% set hasErrors = component.model.errorMessage %}
-  <div class="govuk-form-group {{ "govuk-form-group--error" if hasErrors }}">
-    {{ TextField(component) }}
+  <div class="govuk-form-group app-location-field {{ "govuk-form-group--error" if hasErrors }}" data-locationtype="{{component.type | lower}}">
+    <div class="app-location-field-inputs">
+      {{ TextField(component) }}
+    </div>
 
     {% if component.model.instructionText %}
       {{ govukDetails({

package/src/server/plugins/map/index.js

@@ -0,0 +1,19 @@
+import { getRoutes } from '~/src/server/plugins/map/routes/index.js'
+
+/**
+ * @satisfies {NamedPlugin<MapConfiguration>}
+ */
+export const mapPlugin = {
+  name: '@defra/forms-engine-plugin/map',
+  dependencies: ['@hapi/inert'],
+  multiple: false,
+  register(server, options) {
+    // @ts-expect-error - Request typing
+    server.route(getRoutes(options))
+  }
+}
+
+/**
+ * @import { NamedPlugin } from '@hapi/hapi'
+ * @import { MapConfiguration } from '~/src/server/plugins/map/types.js'
+ */

package/src/server/plugins/map/routes/index.js

@@ -0,0 +1,146 @@
+import { resolve } from 'node:path'
+
+import Joi from 'joi'
+
+import { find, nearest } from '~/src/server/plugins/map/service.js'
+import { request as httpRequest } from '~/src/server/services/httpService.js'
+
+/**
+ * Gets the map support routes
+ * @param {MapConfiguration} options - ordnance survey names api key
+ */
+export function getRoutes(options) {
+  return [
+    mapProxyRoute(options),
+    geocodeProxyRoute(options),
+    reverseGeocodeProxyRoute(options),
+    ...tileRoutes()
+  ]
+}
+
+/**
+ * Proxies ordnance survey requests from the front end to api.os.com
+ * Used for VTS map tiles, sprites and fonts by forwarding on the request
+ * and adding the apikey and optionally an SRS (spatial reference system)
+ * @param {MapConfiguration} options - the map options
+ * @returns {ServerRoute<MapProxyGetRequestRefs>}
+ */
+function mapProxyRoute(options) {
+  return {
+    method: 'GET',
+    path: '/api/map-proxy',
+    handler: async (request, h) => {
+      const { query } = request
+      const targetUrl = new URL(decodeURIComponent(query.url))
+
+      // Add API key server-side and set SRS
+      targetUrl.searchParams.set('key', options.ordnanceSurveyApiKey)
+      if (!targetUrl.searchParams.has('srs')) {
+        targetUrl.searchParams.set('srs', '3857')
+      }
+
+      const proxyResponse = await httpRequest('get', targetUrl.toString())
+      const buffer = proxyResponse.payload
+      const contentType = proxyResponse.res.headers['content-type']
+      const response = h.response(buffer)
+
+      if (contentType) {
+        response.type(contentType)
+      }
+
+      return response
+    },
+    options: {
+      validate: {
+        query: Joi.object()
+          .keys({
+            url: Joi.string().required()
+          })
+          .optional()
+      }
+    }
+  }
+}
+
+/**
+ * Proxies ordnance survey geocode requests from the front end to api.os.com
+ * Used for the gazzeteer address lookup to find name from query strings like postcode and place names
+ * @param {MapConfiguration} options - the map options
+ * @returns {ServerRoute<MapGeocodeGetRequestRefs>}
+ */
+function geocodeProxyRoute(options) {
+  return {
+    method: 'GET',
+    path: '/api/geocode-proxy',
+    async handler(request, _h) {
+      const { query } = request
+      const data = await find(query.query, options.ordnanceSurveyApiKey)
+
+      return data
+    },
+    options: {
+      validate: {
+        query: Joi.object()
+          .keys({
+            query: Joi.string().required()
+          })
+          .required()
+      }
+    }
+  }
+}
+
+/**
+ * Proxies ordnance survey reverse geocode requests from the front end to api.os.com
+ * Used to find name from easting and northing points.
+ * N.B this endpoint is currently not used by the front end but will be soon in "maps V2"
+ * @param {MapConfiguration} options - the map options
+ * @returns {ServerRoute<MapReverseGeocodeGetRequestRefs>}
+ */
+function reverseGeocodeProxyRoute(options) {
+  return {
+    method: 'GET',
+    path: '/api/reverse-geocode-proxy',
+    async handler(request, _h) {
+      const { query } = request
+      const data = await nearest(
+        query.easting,
+        query.northing,
+        options.ordnanceSurveyApiKey
+      )
+
+      return data
+    },
+    options: {
+      validate: {
+        query: Joi.object()
+          .keys({
+            easting: Joi.number().required(),
+            northing: Joi.number().required()
+          })
+          .required()
+      }
+    }
+  }
+}
+
+function tileRoutes() {
+  return [
+    {
+      method: 'GET',
+      path: '/api/maps/vts/{path*}',
+      options: {
+        handler: {
+          directory: {
+            path: resolve(import.meta.dirname, './vts')
+          }
+        }
+      }
+    }
+  ]
+}
+
+/**
+ * @import { ServerRoute } from '@hapi/hapi'
+ * @import { MapConfiguration, MapProxyGetRequestRefs, MapGeocodeGetRequestRefs, MapReverseGeocodeGetRequestRefs } from '~/src/server/plugins/map/types.js'
+ */