From 475d6fcab03d624aa51a66fe1bc779616c91cd97 Mon Sep 17 00:00:00 2001
From: Niklas Kiefer <niklas.kiefer@camunda.com>
Date: Thu, 20 Jan 2022 11:28:26 +0100
Subject: [PATCH] feat(output-properties): render HTML descriptions

Closes #547
Closes #375
---
 .../properties/OutputProperties.js            |  6 ++++-
 .../properties/OutputProperties.json          |  8 ++++++
 .../properties/OutputProperties.spec.js       | 27 +++++++++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/provider/element-templates/properties/OutputProperties.js b/src/provider/element-templates/properties/OutputProperties.js
index 7ae4a70dd..8ac2baaf1 100644
--- a/src/provider/element-templates/properties/OutputProperties.js
+++ b/src/provider/element-templates/properties/OutputProperties.js
@@ -13,6 +13,8 @@ import { useService } from '../../../hooks';
 
 import { without } from 'min-dash';
 
+import { PropertyDescription } from '../components/PropertyDescription';
+
 import { createElement } from '../../../utils/ElementUtil';
 
 import { createOutputParameter } from '../CreateHelper';
@@ -89,7 +91,9 @@ function Description(props) {
   } = props;
 
   return <div class="bio-properties-panel-entry" data-entry-id={ id }>
-    <div class="bio-properties-panel-description">{ text }</div>
+    <div class="bio-properties-panel-description">
+      <PropertyDescription description={ text } />
+    </div>
   </div>;
 }
 
diff --git a/test/spec/provider/element-templates/properties/OutputProperties.json b/test/spec/provider/element-templates/properties/OutputProperties.json
index c00613216..50095ee29 100644
--- a/test/spec/provider/element-templates/properties/OutputProperties.json
+++ b/test/spec/provider/element-templates/properties/OutputProperties.json
@@ -58,6 +58,14 @@
           "type": "camunda:outputParameter",
           "source": "notCreated_2"
         }
+      },
+      {
+        "label": "withHtmlDescription",
+        "description": "By the way, you can use <a target='_blank' href=\"https://freemarker.apache.org/\">freemarker templates</a> here",
+        "binding": {
+          "type": "camunda:outputParameter",
+          "source": "html"
+        }
       }
     ]
   },
diff --git a/test/spec/provider/element-templates/properties/OutputProperties.spec.js b/test/spec/provider/element-templates/properties/OutputProperties.spec.js
index 838332d50..3f3d1139c 100644
--- a/test/spec/provider/element-templates/properties/OutputProperties.spec.js
+++ b/test/spec/provider/element-templates/properties/OutputProperties.spec.js
@@ -165,6 +165,33 @@ describe('provider/element-templates - OutputProperties', function() {
       expect(description.innerText).to.equal('foo bar');
     });
 
+
+    it('should render HTML description', async function() {
+
+      // when
+      await expectSelected('SimpleTask');
+
+      // then
+      const entry = findEntry('SimpleTask-outputParameter-7', container);
+
+      expect(entry).to.exist;
+
+      const description = findEntry('SimpleTask-outputParameter-7-description', entry);
+
+      expect(description).to.exist;
+      expect(description.innerHTML).to.eql(
+        '<div class="bio-properties-panel-description">' +
+          '<div class="markup">' +
+            '<div xmlns="http://www.w3.org/1999/xhtml">' +
+              'By the way, you can use ' +
+              '<a href="https://freemarker.apache.org/" target="_blank" rel="noopener">freemarker templates</a> '+
+              'here' +
+            '</div>' +
+          '</div>' +
+        '</div>'
+      );
+    });
+
   });