Fix/DF-861 done button double (#360)

* Spelling typo fix

* Geospatial field - default an empty string to an empty array for non JS

* Add geospatial feature cap of 50

* Change map info slot to "drawer" now "bottom" is deprecated

* Add temporary transformGeocodeRequest until fixed in v0.0.18

* Bump interactive-map to v0.0.17-alpha

* Fix tests

Author: davidjamesstone

package-lock.json

@@ -85,7 +85,7 @@
   "dependencies": {
     "@defra/forms-model": "^3.0.637",
     "@defra/hapi-tracing": "^1.29.0",
-    "@defra/interactive-map": "^0.0.11-alpha",
+    "@defra/interactive-map": "^0.0.17-alpha",
     "@elastic/ecs-pino-format": "^1.5.0",
     "@hapi/boom": "^10.0.1",
     "@hapi/bourne": "^3.0.0",

package.json

@@ -12,19 +12,19 @@ const helpPanelConfig = {
   showLabel: true,
   label: 'How to use this map',
   mobile: {
-    slot: 'bottom',
+    slot: 'drawer',
     open: true,
     dismissible: true,
     modal: false
   },
   tablet: {
-    slot: 'bottom',
+    slot: 'drawer',
     open: true,
     dismissible: true,
     modal: false
   },
   desktop: {
-    slot: 'bottom',
+    slot: 'drawer',
     open: true,
     dismissible: true,
     modal: false
@@ -245,7 +245,7 @@ function createFeatureHTML(feature, index, mapId, readonly) {
           <dd class="govuk-summary-list__value">${typeDescriptions[feature.geometry.type]}</dd>
         </div>
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">Center grid reference</dt>
+          <dt class="govuk-summary-list__key">Centre grid reference</dt>
           <dd class="govuk-summary-list__value">${feature.properties.centroidGridReference}</dd>
         </div>
         <div class="govuk-summary-list__row">

src/client/javascripts/geospatial-map.js

@@ -447,19 +447,19 @@ export function processLocation(config, location, index) {
         showLabel: true,
         label: 'How to use the map',
         mobile: {
-          slot: 'bottom',
+          slot: 'drawer',
           open: true,
           dismissible: true,
           modal: false
         },
         tablet: {
-          slot: 'bottom',
+          slot: 'drawer',
           open: true,
           dismissible: true,
           modal: false
         },
         desktop: {
-          slot: 'bottom',
+          slot: 'drawer',
           open: true,
           dismissible: true,
           modal: false

src/client/javascripts/location-map.js

@@ -239,6 +239,18 @@ export function makeTileRequestTransformer(apiPath) {
   }
 }
 
+/**
+ * Temporary transform request function to transform geocode requests. Fixed in v0.0.18 of interactive map so this is not needed when we upgrade.
+ * @param {object} request
+ * @param {string} request.url
+ * @param {{ method: 'get' }} request.options
+ * @returns {Request}
+ */
+export const transformGeocodeRequest = (request) => {
+  const url = new URL(request.url, window.location.origin)
+  return new Request(url.toString(), request.options)
+}
+
 /**
  * Create a Defra map instance
  * @param {string} mapId - the map id
@@ -310,6 +322,7 @@ export function createMap(mapId, initConfig, mapsConfig) {
       }),
       interactPlugin,
       defra.searchPlugin({
+        transformRequest: transformGeocodeRequest,
         osNamesURL: `${apiPath}/geocode-proxy?query={query}`,
         width: '300px',
         showMarker: false

src/client/javascripts/map.js

@@ -110,7 +110,7 @@ describe('GeospatialField', () => {
 
         expect(result.errors).toEqual([
           expect.objectContaining({
-            text: 'Select example geospatial'
+            text: 'Example geospatial must contain at least 1 items'
           })
         ])
       })
@@ -128,7 +128,7 @@ describe('GeospatialField', () => {
 
         expect(result.errors).toEqual([
           expect.objectContaining({
-            text: 'Select example geospatial title'
+            text: 'Example geospatial title must contain at least 1 items'
           })
         ])
       })

src/server/plugins/engine/components/GeospatialField.test.ts

@@ -33,6 +33,8 @@ export class GeospatialField extends FormComponent {
 
     let formSchema = geospatialSchema.label(this.label).required()
 
+    formSchema = formSchema.max(50)
+
     if (options.required !== false) {
       formSchema = formSchema.min(1)
     }

src/server/plugins/engine/components/GeospatialField.ts

@@ -49,7 +49,14 @@ describe('Geospatial validation helpers', () => {
   test('it should validate an empty string', () => {
     const result = geospatialSchema.validate('')
 
+    expect(result.error).toBeUndefined()
+    expect(result.value).toEqual([])
+  })
+
+  test('it should validate an empty string with errors when required', () => {
+    const result = geospatialSchema.min(1).required().validate('')
+
     expect(result.error).toBeDefined()
-    expect(result.value).toBeUndefined()
+    expect(result.value).toEqual([])
   })
 })

src/server/plugins/engine/components/helpers/geospatial.test.js

@@ -20,7 +20,7 @@ const Joi = JoiBase.extend({
       if (typeof value === 'string') {
         if (value.trim() === '') {
           return {
-            value: undefined
+            value: []
           }
         }
 

src/server/plugins/engine/components/helpers/geospatial.ts

@@ -3,7 +3,8 @@ import {
   getCentroidGridRef,
   getCoordinateGridRef,
   initMaps,
-  makeTileRequestTransformer
+  makeTileRequestTransformer,
+  transformGeocodeRequest
 } from '~/src/client/javascripts/map.js'
 
 describe('Maps Client JS', () => {
@@ -1468,4 +1469,17 @@ describe('Maps Client JS', () => {
       expect(result).toBe('TQ 29472 80890')
     })
   })
+
+  describe('Geocode request transformer - temporarily needed until v0.0.18', () => {
+    test('it should return centroid gridref for a point feature', () => {
+      const result = transformGeocodeRequest({
+        url: '/a/b/c',
+        options: {
+          method: 'get'
+        }
+      })
+
+      expect(result instanceof Request).toBe(true)
+    })
+  })
 })