Add the ability to use template strings for asset descriptions

src/components/Summary/Summary.tsx

@@ -133,13 +133,9 @@ const Summary: FC<SummaryProps> = ({
       <div>
         {selection?.map((item) => {
           const { id, type } = item || {}
-          const { description } =
-            featureTypes.find(({ typeValue }) => typeValue === type) ?? {}
 
           const summaryDescription =
-            type !== NEARBY_TYPE
-              ? [description, id].filter(Boolean).join(' - ')
-              : undefined
+            type !== NEARBY_TYPE ? item.label : undefined
           const iconSrc = getIconSrc(item, featureTypes)
 
           return (

src/signals/incident/components/form/MapSelectors/Asset/AssetList/AssetList.tsx

@@ -117,11 +117,9 @@ export const AssetListItem: FunctionComponent<AssetListItem> = ({
   const { get, data } = useFetch<FeatureCollection<Point, Properties>>()
   const { category, subcategory } = useSelector(makeSelectCategory)
   const { id, type, status } = item
-  const { description, icon }: Partial<FeatureType> =
+  const { icon }: Partial<FeatureType> =
     featureTypes?.find(({ typeValue }) => typeValue === type) ?? {}
 
-  const label = [description, id].filter(Boolean).join(' - ')
-
   const featureStatusType = featureStatusTypes.find(
     ({ typeValue }) => typeValue === status
   )
@@ -175,7 +173,7 @@ export const AssetListItem: FunctionComponent<AssetListItem> = ({
         >
           <ItemWrapper>
             <StyledLabel>
-              {label}
+              {item.label}
               {featureStatusType?.description && (
                 <StyledStatusDescription status={featureStatusType.typeValue}>
                   {featureStatusType?.description}

src/signals/incident/components/form/MapSelectors/Asset/Selector/WfsLayer/AssetLayer/AssetLayer.tsx

@@ -20,6 +20,12 @@ import type {
 
 import { Marker } from '@amsterdam/arm-core'
 import { FeatureStatus } from 'signals/incident/components/form/MapSelectors/types'
+
+import {
+  isTemplateString,
+  parseTemplateString,
+} from 'utils/parseTemplateString'
+
 import WfsDataContext from '../context'
 import { getFeatureStatusType } from '../../StatusLayer/utils'
 
@@ -64,12 +70,17 @@ export const AssetLayer: FC = () => {
     const onClick = async () => {
       if (typeValue !== FeatureStatus.REPORTED) {
         const location: Location = { coordinates }
+
+        const label = isTemplateString(description)
+          ? parseTemplateString(description, feature.properties)
+          : [description, id].filter(Boolean).join(' - ')
+
         const item: Item = {
           id,
           type: typeValue,
           description,
           status: featureStatusType?.typeValue,
-          label: [description, id].filter(Boolean).join(' - '),
+          label,
           coordinates,
         }
 

src/utils/__tests__/parseTemplateString.test.ts

@@ -0,0 +1,29 @@
+// SPDX-License-Identifier: MPL-2.0
+// Copyright (C) 2022 Delta10 B.V.
+import { isTemplateString, parseTemplateString } from '../parseTemplateString'
+
+describe('parseTemplateString', () => {
+  it('should correctly detect a templateString', () => {
+    const templateString = 'This contains {{ a_template }} string'
+    const noTemplateString = 'This does not contain a template string'
+
+    expect(isTemplateString(templateString)).toEqual(true)
+    expect(isTemplateString(noTemplateString)).toEqual(false)
+  })
+
+  it('should correctly parse a templateString', () => {
+    const templateString = 'The {{ animal }} jumps over the {{ item }}'
+    const context = { animal: 'dog', item: 'fence' }
+    expect(parseTemplateString(templateString, context)).toEqual(
+      'The dog jumps over the fence'
+    )
+  })
+
+  it('should correctly parse a nested templateString', () => {
+    const templateString = 'The {{ my.animal }} jumps over the {{ item }}'
+    const context = { my: { animal: 'cow' }, item: 'fence' }
+    expect(parseTemplateString(templateString, context)).toEqual(
+      'The cow jumps over the fence'
+    )
+  })
+})

src/utils/parseTemplateString.ts

@@ -0,0 +1,18 @@
+// SPDX-License-Identifier: MPL-2.0
+// Copyright (C) 2012 Delta10 B.V.
+
+const TEMPLATE_REGEX = /\{\{.+?\}\}/g
+
+export function isTemplateString(template: string): boolean {
+  return (template.match(TEMPLATE_REGEX) || []).length > 0
+}
+
+export function parseTemplateString(template: string, context: any): string {
+  return template.replace(TEMPLATE_REGEX, (match: string) => {
+    const fallback = match
+    const path = match.substr(2, match.length - 4).trim()
+    return String(
+      path.split('.').reduce((res, key) => res[key] || fallback, context)
+    )
+  })
+}