@defra/forms-engine-plugin 5.0.0-alpha.2 → 5.0.0-alpha.21

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

@@ -3,13 +3,33 @@ import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets';
 // @ts-expect-error - no types
 import createDrawPlugin from '@defra/interactive-map/plugins/draw-ml';
 import { bbox } from '@turf/bbox';
-import { EVENTS, createMap, defaultConfig, getCentroidGridRef, getCoordinateGridRef, getMapLayers } from "./map.js";
+import { DEFAULT_LANG, ENGLISH_LANG, WELSH_LANG } from "./map-constants.js";
+import { EVENTS, createMap, defaultConfig, getCentroidGridRef, getCoordinateGridRef, getMapCountryLayers, getMapLayers } from "./map.js";
 import sssiDataset from "./sssi-dataset.js";
 import { formatDelimtedList } from "./utils.js";
+import cy from "../../server/plugins/engine/i18n/translations/cy.json" with { type: 'json' };
+import enGB from "../../server/plugins/engine/i18n/translations/en-GB.json" with { type: 'json' };
+const englishTranslations = enGB.components.geospatialField.map;
+const welshTranslations = cy.components.geospatialField.map;
+
+/**
+ * @type {Record<LanguageCode, GeospatialLanguageTexts>}
+ */
+export const languageTexts = {
+  [ENGLISH_LANG]: englishTranslations,
+  [WELSH_LANG]: welshTranslations
+};
+
+/**
+ * Get the map texts for the given language code
+ * @param {LanguageCode} lang - the lanugae code
+ */
+export function getTexts(lang = DEFAULT_LANG) {
+  return languageTexts[lang];
+}
 const helpPanelConfig = {
   focus: false,
   showLabel: true,
-  label: 'How to use this map',
   mobile: {
     slot: 'drawer',
     open: true,
@@ -31,51 +51,70 @@ const helpPanelConfig = {
 };
 
 /**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-function getLineOrShapeText(allowLine, allowShape) {
+function getLineOrShapeText(texts, allowLine, allowShape) {
   if (allowLine && allowShape) {
-    return 'a line or shape';
+    return texts.lineOrShapeText;
   }
   if (allowLine) {
-    return 'a line';
+    return texts.lineText;
   }
   if (allowShape) {
-    return 'a shape';
+    return texts.shapeText;
   }
   return '';
 }
 
 /**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowPoint
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-function getAllowedTypesPhrase(allowPoint, allowLine, allowShape) {
+function getAllowedTypesPhrase(texts, allowPoint, allowLine, allowShape) {
   const items = [];
   if (allowPoint) {
-    items.push('points');
+    items.push(texts.typesPhrasePoint);
   }
   if (allowLine) {
-    items.push('lines');
+    items.push(texts.typesPhraseLine);
   }
   if (allowShape) {
-    items.push('shapes');
+    items.push(texts.typesPhraseShape);
   }
-  return formatDelimtedList(items, ',', 'or');
+  return formatDelimtedList(items, ',', texts.typesPhraseOr);
 }
 
 /**
+ * Gets the type description for a given feature
+ * @param {Feature} feature - the geojson feature
+ * @param {GeometryTexts} typeDescriptions
+ */
+function getTypeDescription(feature, typeDescriptions) {
+  switch (feature.geometry.type) {
+    case 'Point':
+      return typeDescriptions.point;
+    case 'LineString':
+      return typeDescriptions.line;
+    case 'Polygon':
+      return typeDescriptions.polygon;
+  }
+}
+
+/**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowPoint
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-export function getHelpPanelHtml(allowPoint, allowLine, allowShape) {
-  const lineOrShapeText = getLineOrShapeText(allowLine, allowShape);
-  const doneExtra = lineOrShapeText ? `<li>Double‑click, or select 'Done', when you have finished drawing ${lineOrShapeText}</li>` : '';
-  const allowedTypesText = getAllowedTypesPhrase(allowPoint, allowLine, allowShape);
-  return `<p class="govuk-body-s govuk-!-margin-bottom-2">You can add ${allowedTypesText} to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li>${doneExtra}<li>Give the location a name</li></ul>`;
+export function getHelpPanelHtml(texts, allowPoint, allowLine, allowShape) {
+  const lineOrShapeText = getLineOrShapeText(texts, allowLine, allowShape);
+  const point3 = lineOrShapeText ? `<li>${texts.point3} ${lineOrShapeText}</li>` : '';
+  const allowedTypesText = getAllowedTypesPhrase(texts, allowPoint, allowLine, allowShape);
+  return `<p class="govuk-body-s govuk-!-margin-bottom-2">${texts.ledeIntro} ${allowedTypesText} ${texts.ledeOutro}</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>${texts.point1}</li><li>${texts.point2}</li>${point3}<li>${texts.point4}</li></ul>`;
 }
 const lineFeatureProperties = {
   stroke: 'rgba(0, 11, 112, 1)',
@@ -87,15 +126,6 @@ const polygonFeatureProperties = {
   fill: 'rgba(255, 221, 0, 0.2)',
   strokeWidth: 2
 };
-
-/**
- * @type {Record<'Point' | 'LineString' | 'Polygon', string>}
- */
-const typeDescriptions = {
-  Point: 'Point',
-  LineString: 'Line',
-  Polygon: 'Shape'
-};
 const POINT_SVG = '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" />';
 const POLYGON_SVG = '<path d="M19.5 7v10M4.5 7v10M7 19.5h10M7 4.5h10"/><path d="M22 18v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zm0-15v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 18v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 3v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1z"/>';
 const LINE_SVG = '<path d="M5.706 16.294L16.294 5.706"/><path d="M21 2v3c0 .549-.451 1-1 1h-3c-.549 0-1-.451-1-1V2c0-.549.451-1 1-1h3c.549 0 1 .451 1 1zM6 17v3c0 .549-.451 1-1 1H2c-.549 0-1-.451-1-1v-3c0-.549.451-1 1-1h3c.549 0 1 .451 1 1z"/>';
@@ -151,37 +181,16 @@ export function processGeospatial(config, geospatial, index) {
   const plugins = [drawPlugin];
   const country = geospatial.dataset.country;
   const mapLayers = getMapLayers(geospatial.dataset.maplayers);
-  if (country) {
-    // Add the country bounds as a dataset plugin to show the valid area on the map
-    // and provide feedback to the user when they add features outside of the bounds.
-    const countriesDatasetPlugin = createDatasetsPlugin({
-      datasets: [{
-        id: 'invalid-area',
-        label: 'Invalid areas',
-        geojson: `${config.apiPath}/maps/countries.geojson?omit=${country}`,
-        showInKey: false,
-        showInMenu: false,
-        style: {
-          stroke: 'gray',
-          strokeWidth: 1,
-          fill: 'rgba(211,211,211,0.8)'
-        }
-      }, {
-        id: 'valid-area',
-        label: 'Valid areas',
-        geojson: `${config.apiPath}/maps/countries.geojson?only=${country}`,
-        showInKey: false,
-        showInMenu: false,
-        style: {
-          stroke: 'rgba(0,112,60,1)',
-          strokeWidth: 1
-        }
-      }]
-    });
-    plugins.push(countriesDatasetPlugin);
-  }
+  const datasets = getMapCountryLayers(config.apiPath, country);
   if (mapLayers.includes('sssi')) {
-    plugins.push(createDatasetsPlugin(sssiDataset));
+    datasets.push(...sssiDataset);
+  }
+
+  // Create a map dataset plugin if there are any present
+  if (datasets.length) {
+    plugins.push(createDatasetsPlugin({
+      datasets
+    }));
   }
   const initConfig = {
     ...defaultConfig,
@@ -198,12 +207,20 @@ export function processGeospatial(config, geospatial, index) {
   const options = {
     geometryTypes
   };
-  const uiManager = getUIManager(geojson, map, mapId, listEl, geospatialInput, options);
+  const lang = /** @type {LanguageCode} */
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+  geospatial.dataset.lang || DEFAULT_LANG;
+  const uiManager = getUIManager(geojson, map, mapId, listEl, geospatialInput, options, lang);
+  const languageManager = {
+    lang,
+    texts: getTexts(lang)
+  };
 
   /**
    * @type {Context}
    */
   const context = {
+    languageManager,
     map,
     featuresManager,
     activeFeatureManager,
@@ -248,10 +265,11 @@ export function addFeatureToMap(feature, drawPlugin, map) {
  * @param {string} mapId - the ID of the map
  * @param {boolean} [disabled] - render the list with disabled links
  * @param {boolean} [readonly] - render the list in readonly mode
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
-export function createFeaturesHTML(features, mapId, disabled = false, readonly = false) {
+export function createFeaturesHTML(features, mapId, disabled = false, readonly = false, lang = DEFAULT_LANG) {
   return `<dl class="govuk-summary-list">
-    ${features.map((feature, index) => createFeatureHTML(feature, index, mapId, disabled, readonly)).join('\n')}
+    ${features.map((feature, index) => createFeatureHTML(feature, index, mapId, disabled, readonly, lang)).join('\n')}
   </dl>`;
 }
 
@@ -271,8 +289,10 @@ export function focusFeature(feature, mapProvider) {
  * @param {string} mapId - the ID of the map
  * @param {boolean} [disabled] - render the list with disabled links
  * @param {boolean} [readonly] - render the list item in readonly mode
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
-export function createFeatureHTML(feature, index, mapId, disabled = false, readonly = false) {
+export function createFeatureHTML(feature, index, mapId, disabled = false, readonly = false, lang = DEFAULT_LANG) {
+  const texts = getTexts(lang);
   const flattened = feature.geometry.coordinates.flat(2);
   const points = [];
   for (let i = 0; i < flattened.length; i += 2) {
@@ -284,25 +304,26 @@ export function createFeatureHTML(feature, index, mapId, disabled = false, reado
   // Change action link
   const changeAction = () => `<li class="govuk-summary-list__actions-list-item">
   <a class="govuk-link govuk-link--no-visited-state ${disabled ? 'govuk-link--disabled' : ''}" href="#${mapId}" data-action="edit" data-id="${feature.id}"
-    data-type="${feature.geometry.type}">Update<span class="govuk-visually-hidden"> location</span></a>
+    data-type="${feature.geometry.type}">${texts.itemUpdateLink}<span class="govuk-visually-hidden"> ${texts.itemVisuallyHidden}</span></a>
 </li>`;
 
   // Delete action link
   const deleteAction = () => `<li class="govuk-summary-list__actions-list-item">
   <a class="govuk-link govuk-link--no-visited-state ${disabled ? 'govuk-link--disabled' : ''}" href="#" data-action="delete" data-id="${feature.id}"
-    data-type="${feature.geometry.type}">Delete<span class="govuk-visually-hidden"> location</span></a>
+    data-type="${feature.geometry.type}">${texts.itemDeleteLink}<span class="govuk-visually-hidden"> ${texts.itemVisuallyHidden}</span></a>
 </li>`;
 
   // Focus action link
   const focusAction = () => `<li class="govuk-summary-list__actions-list-item">
-  <a class="govuk-link govuk-link--no-visited-state" href="#${mapId}" data-action="focus" data-id="${feature.id}">Show<span class="govuk-visually-hidden"> location</span></a>
+  <a class="govuk-link govuk-link--no-visited-state" href="#${mapId}" data-action="focus" data-id="${feature.id}">${texts.itemFocusLink}<span class="govuk-visually-hidden"> ${texts.itemVisuallyHidden}</span></a>
 </li>`;
   const links = readonly ? focusAction() : `${changeAction()}${deleteAction()}`;
   const actions = `<ul class="govuk-summary-list__actions-list">${links}</ul>`;
+  const typeDescription = getTypeDescription(feature, texts.typeDescriptions);
   return `<div class="govuk-summary-list__row govuk-summary-list__row--no-border">
   <dt class="govuk-summary-list__key">
     <div class="govuk-form-group">
-      <label class="govuk-label govuk-label--s" ${readonly ? '' : `for="description_${index}"`}>Location ${index + 1} description</label>
+      <label class="govuk-label govuk-label--s" ${readonly ? '' : `for="description_${index}"`}>${texts.itemLabel1} ${index + 1} ${texts.itemLabel2}</label>
       ${description}
     </div>
   </dt>
@@ -313,24 +334,24 @@ export function createFeatureHTML(feature, index, mapId, disabled = false, reado
 <div class="govuk-summary-list__row">
   <details class="govuk-details govuk-!-margin-bottom-2">
     <summary class="govuk-details__summary">
-      <span class="govuk-details__summary-text">Coordinates</span>
+      <span class="govuk-details__summary-text">${texts.details.summary}</span>
     </summary>
     <div class="govuk-details__text">
       <dl class="govuk-summary-list">
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">Type</dt>
-          <dd class="govuk-summary-list__value">${typeDescriptions[feature.geometry.type]}</dd>
+          <dt class="govuk-summary-list__key">${texts.details.type}</dt>
+          <dd class="govuk-summary-list__value">${typeDescription}</dd>
         </div>
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">Centre grid reference</dt>
+          <dt class="govuk-summary-list__key">${texts.details.centroidGridReference}</dt>
           <dd class="govuk-summary-list__value">${feature.properties.centroidGridReference}</dd>
         </div>
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">First point grid reference</dt>
+          <dt class="govuk-summary-list__key">${texts.details.firstPointGridReference}</dt>
           <dd class="govuk-summary-list__value">${feature.properties.coordinateGridReference}</dd>
         </div>
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">Detailed coordinates</dt>
+          <dt class="govuk-summary-list__key">${texts.details.detailedCoordinates}</dt>
           <dd class="govuk-summary-list__value">
             <ol class="govuk-list govuk-list--number">${coordinates}</ol>
           </dd>
@@ -485,11 +506,12 @@ function getFeaturesManager(geojson) {
  * @param {string} mapId - the ID of the map
  * @param {HTMLDivElement} listEl - where to render the feature list
  * @param {Function} renderValue - function that renders the features JSON into the hidden textarea
+ * @param {LanguageCode} [lang] - the language for the feature details
  * @returns {RenderList}
  */
-function getListRenderer(geojson, mapId, listEl, renderValue) {
+function getListRenderer(geojson, mapId, listEl, renderValue, lang = DEFAULT_LANG) {
   return function renderList(disabled = false) {
-    const html = createFeaturesHTML(geojson.features, mapId, disabled);
+    const html = createFeaturesHTML(geojson.features, mapId, disabled, false, lang);
     listEl.innerHTML = html;
     renderValue();
   };
@@ -515,8 +537,9 @@ function getValueRenderer(geojson, geospatialInput) {
  * @param {HTMLDivElement} listEl - where to render the feature list
  * @param {HTMLTextAreaElement} geospatialInput - the geospatial textarea
  * @param { UIManagerOptions | undefined } options - extra options such as allowable geometry types
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
-export function getUIManager(geojson, map, mapId, listEl, geospatialInput, options) {
+export function getUIManager(geojson, map, mapId, listEl, geospatialInput, options, lang = DEFAULT_LANG) {
   /**
    * Get a CSV list of geometry types the user can create
    * @returns {string[]}
@@ -555,7 +578,7 @@ export function getUIManager(geojson, map, mapId, listEl, geospatialInput, optio
     }
   }
   const renderValue = getValueRenderer(geojson, geospatialInput);
-  const renderList = getListRenderer(geojson, mapId, listEl, renderValue);
+  const renderList = getListRenderer(geojson, mapId, listEl, renderValue, lang);
 
   /** @type {UIManager} */
   return {
@@ -633,16 +656,20 @@ function onMapReadyFactory(context) {
     const allowPoint = types.includes('point');
     const allowLine = types.includes('line');
     const allowShape = types.includes('shape');
+    const {
+      texts
+    } = context.languageManager;
 
     // Add info panel
     map.addPanel('info', {
       ...helpPanelConfig,
-      html: getHelpPanelHtml(allowPoint, allowLine, allowShape)
+      label: texts.helpPanel.label,
+      html: getHelpPanelHtml(texts.helpPanel, allowPoint, allowLine, allowShape)
     });
     if (allowPoint) {
       map.addButton('btnAddPoint', {
         variant: 'tertiary',
-        label: 'Add point',
+        label: texts.buttons.point,
         iconSvgContent: POINT_SVG,
         onClick: () => {
           resetActiveFeature();
@@ -664,7 +691,7 @@ function onMapReadyFactory(context) {
     if (allowShape) {
       map.addButton('btnAddPolygon', {
         variant: 'tertiary',
-        label: 'Add shape',
+        label: texts.buttons.polygon,
         iconSvgContent: POLYGON_SVG,
         onClick: () => {
           resetActiveFeature();
@@ -686,7 +713,7 @@ function onMapReadyFactory(context) {
     if (allowLine) {
       map.addButton('btnAddLine', {
         variant: 'tertiary',
-        label: 'Add line',
+        label: texts.buttons.line,
         iconSvgContent: LINE_SVG,
         onClick: () => {
           resetActiveFeature();
@@ -1159,6 +1186,7 @@ function onListElKeydownFactory() {
  * Renders the features into the list
  * @callback RenderList
  * @param {boolean} [disabled] - whether to render the list with disabled links
+ * @param {LanguageCode} [lang] - the language for the feature details
  * @returns {void}
  */
 
@@ -1213,8 +1241,59 @@ function onListElKeydownFactory() {
  * @property {GetAllowableGeometryTypes} getAllowableGeometryTypes - function that returns the array of geometry types a user can create
  */
 
+/**
+ * @typedef {object} GeometryTexts
+ * @property {string} point - the label for a point feature in the list
+ * @property {string} line - the label for a line string feature in the list
+ * @property {string} polygon - the label for a polygon feature in the list
+ */
+
+/**
+ * @typedef {object} GeospatialPanelTexts
+ * @property {string} label - the label for the info panel
+ * @property {string} ledeIntro - the lede intro text for the info panel
+ * @property {string} ledeOutro - the lede outro text for the info panel
+ * @property {string} lineText - the label for the info panel line text
+ * @property {string} shapeText - the label for the info panel shape text
+ * @property {string} point1 - the text for bullet point 1 in the info panel
+ * @property {string} point2 - the text for bullet point 2 in the info panel
+ * @property {string} point3 - the text for bullet point 3 in the info panel
+ * @property {string} point4 - the text for bullet point 4 in the info panel
+ * @property {string} lineOrShapeText - the label for the info panel line or shape text
+ * @property {string} typesPhrasePoint - the label for the info panel types phrase point
+ * @property {string} typesPhraseLine - the label for the info panel types phrase line
+ * @property {string} typesPhraseShape - the label for the info panel types phrase shape
+ * @property {string} typesPhraseOr - the label for the info panel types phrase "or"
+ */
+
+/**
+ * @typedef {object} GeospatialLanguageTexts
+ * @property {GeometryTexts} typeDescriptions - the descriptions of the geometry types
+ * @property {GeospatialPanelTexts} helpPanel - texts for the info panel
+ * @property {GeometryTexts} buttons - the labels for the action buttons
+ * @property {string} itemLabel1 - the first part of the label for a feature in the list
+ * @property {string} itemLabel2 - the second part of the label for a feature in the list
+ * @property {string} itemUpdateLink - the label for the "update" link for a feature in the list
+ * @property {string} itemDeleteLink - the label for the "delete" link for a feature in the list
+ * @property {string} itemFocusLink - the label for the "focus" link for a feature in the list
+ * @property {string} itemVisuallyHidden - visually hidden text to add context to action links
+ * @property {object} details - labels for the details section of a feature in the list
+ * @property {string} details.summary - label for the summary of a feature in the list
+ * @property {string} details.type - label for the type of a feature in the list
+ * @property {string} details.centroidGridReference - label for the centroid grid reference of a feature in the list
+ * @property {string} details.firstPointGridReference - label for the first point grid reference of a feature in the list
+ * @property {string} details.detailedCoordinates - label for the detailed coordinates of a feature in the list
+ */
+
+/**
+ * @typedef {object} LanguageManager
+ * @property {LanguageCode} lang - the language for the interactive map
+ * @property {GeospatialLanguageTexts} texts - the descriptions of the geometry types
+ */
+
 /**
  * @typedef {object} Context
+ * @property {LanguageManager} languageManager - the language manager for the interactive map
  * @property {InteractiveMap} map - the interactive map
  * @property {MapLibreMap} [mapProvider] - the interactive map provider
  * @property {FeaturesManager} featuresManager - the features manager
@@ -1225,6 +1304,7 @@ function onListElKeydownFactory() {
  */
 
 /**
+ * @import { LanguageCode } from '../../client/javascripts/map.js'
  * @import { MapLibreMap, UIManagerOptions } from '../../client/javascripts/map.js'
  */
 //# sourceMappingURL=geospatial-map.js.map