From 10f472a158c595ce93f1cdd229d01e235258452d Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Thu, 21 Nov 2024 16:15:31 +0100
Subject: [PATCH] :sparkles: [open-formulieren/open-forms#2173] Add background
 configuration to map edit

---
 src/components/ComponentConfiguration.tsx |  2 ++
 src/context.ts                            | 13 ++++++++
 src/registry/map/edit.tsx                 | 37 +++++++++++++++++++++--
 src/registry/map/preview.tsx              | 17 +++++++++--
 4 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/src/components/ComponentConfiguration.tsx b/src/components/ComponentConfiguration.tsx
index eca05a25..1b06f08f 100644
--- a/src/components/ComponentConfiguration.tsx
+++ b/src/components/ComponentConfiguration.tsx
@@ -33,6 +33,7 @@ const ComponentConfiguration: React.FC<ComponentConfigurationProps> = ({
   uniquifyKey,
   supportedLanguageCodes = ['nl', 'en'],
   richTextColors,
+  leafletMapBackgrounds,
   theme,
   getFormComponents,
   getValidatorPlugins,
@@ -60,6 +61,7 @@ const ComponentConfiguration: React.FC<ComponentConfigurationProps> = ({
         uniquifyKey,
         supportedLanguageCodes,
         richTextColors,
+        leafletMapBackgrounds,
         theme,
         getFormComponents,
         getValidatorPlugins,
diff --git a/src/context.ts b/src/context.ts
index 3d42eb93..ee66e16a 100644
--- a/src/context.ts
+++ b/src/context.ts
@@ -29,6 +29,17 @@ export interface DocumentTypeOption {
   description: string;
 }
 
+/*
+  Leaflet map background options
+
+  This datastructure is created by the Open Forms backend.
+ */
+export interface LeafletMapOption {
+  identifier: string;
+  url: string;
+  label: string;
+}
+
 /*
   Builder
  */
@@ -48,6 +59,7 @@ export interface BuilderContextType {
   getDocumentTypes: () => Promise<Array<DocumentTypeOption>>;
   getConfidentialityLevels: () => Promise<SelectOption[]>;
   getAuthPlugins: () => Promise<AuthPluginOption[]>;
+  leafletMapBackgrounds: LeafletMapOption[];
 }
 
 const BuilderContext = React.createContext<BuilderContextType>({
@@ -65,6 +77,7 @@ const BuilderContext = React.createContext<BuilderContextType>({
   getDocumentTypes: async () => [],
   getConfidentialityLevels: async () => [],
   getAuthPlugins: async () => [],
+  leafletMapBackgrounds: [],
 });
 
 BuilderContext.displayName = 'BuilderContext';
diff --git a/src/registry/map/edit.tsx b/src/registry/map/edit.tsx
index f4613db4..8d890969 100644
--- a/src/registry/map/edit.tsx
+++ b/src/registry/map/edit.tsx
@@ -1,6 +1,6 @@
 import {MapComponentSchema} from '@open-formulieren/types';
 import {useFormikContext} from 'formik';
-import {useEffect} from 'react';
+import {useContext, useEffect} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
 import {
@@ -20,7 +20,8 @@ import {
   useDeriveComponentKey,
 } from '@/components/builder';
 import {LABELS} from '@/components/builder/messages';
-import {Checkbox, TabList, TabPanel, Tabs} from '@/components/formio';
+import {Checkbox, Select, TabList, TabPanel, Tabs} from '@/components/formio';
+import {BuilderContext} from '@/context';
 import {useErrorChecker} from '@/utils/errors';
 
 import {EditFormDefinition} from '../types';
@@ -62,7 +63,8 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
             'isSensitiveData',
             'useConfigDefaultMapSettings',
             'defaultZoom',
-            'initialCenter'
+            'initialCenter',
+            'backgroundIdentifier'
           )}
         />
         <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
@@ -83,6 +85,7 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
         <IsSensitiveData />
         <UseConfigDefaultMapSettings />
         {!values.useConfigDefaultMapSettings && <MapConfiguration />}
+        <Background />
       </TabPanel>
 
       {/* Advanced tab */}
@@ -134,6 +137,7 @@ EditForm.defaultValues = {
     lat: undefined,
     lng: undefined,
   },
+  backgroundIdentifier: undefined,
   defaultValue: null,
   // Advanced tab
   conditional: {
@@ -174,4 +178,31 @@ const UseConfigDefaultMapSettings: React.FC<{}> = () => {
   );
 };
 
+const Background: React.FC = () => {
+  const {leafletMapBackgrounds} = useContext(BuilderContext);
+
+  const intl = useIntl();
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'backgroundIdentifier' builder field",
+    defaultMessage: 'The background to use as the map.',
+  });
+  return (
+    <Select
+      name="backgroundIdentifier"
+      label={
+        <FormattedMessage
+          description="Label for 'backgroundIdentifier' builder field"
+          defaultMessage="Background"
+        />
+      }
+      isClearable
+      tooltip={tooltip}
+      options={leafletMapBackgrounds?.map(background => ({
+        label: background.label,
+        value: background.identifier,
+      }))}
+    />
+  );
+};
+
 export default EditForm;
diff --git a/src/registry/map/preview.tsx b/src/registry/map/preview.tsx
index fd373264..f76d05da 100644
--- a/src/registry/map/preview.tsx
+++ b/src/registry/map/preview.tsx
@@ -1,9 +1,10 @@
 import {CRS_RD, TILE_LAYER_RD} from '@open-formulieren/leaflet-tools';
 import {MapComponentSchema} from '@open-formulieren/types';
-import {useLayoutEffect} from 'react';
+import {useContext, useLayoutEffect} from 'react';
 import {MapContainer, TileLayer, useMap} from 'react-leaflet';
 
 import {Component, Description} from '@/components/formio';
+import {BuilderContext} from '@/context';
 
 import {ComponentPreviewProps} from '../types';
 
@@ -37,10 +38,22 @@ const Preview: React.FC<ComponentPreviewProps<MapComponentSchema>> = ({component
     validate = {},
     defaultZoom,
     initialCenter = {},
+    backgroundIdentifier,
   } = component;
+  const {leafletMapBackgrounds} = useContext(BuilderContext);
   const {required = false} = validate;
   const {lat = 52.1326332, lng = 5.291266} = initialCenter;
   const zoom = defaultZoom ?? 8;
+
+  const url = (): string => {
+    if (!leafletMapBackgrounds?.length || !backgroundIdentifier) {
+      return TILE_LAYER_RD.url;
+    }
+    return (
+      leafletMapBackgrounds?.find(background => background.identifier === backgroundIdentifier)
+        ?.url ?? TILE_LAYER_RD.url
+    );
+  };
   return (
     <Component
       type={component.type}
@@ -61,7 +74,7 @@ const Preview: React.FC<ComponentPreviewProps<MapComponentSchema>> = ({component
           minBlockSize: '400px',
         }}
       >
-        <TileLayer {...TILE_LAYER_RD} />
+        <TileLayer {...TILE_LAYER_RD} url={url()} />
         <MapView lat={lat} lng={lng} zoom={zoom} />
       </MapContainer>
       {description && <Description text={description} />}