From 888b0390c436a09b211fc2a264d26bab4b6b213f Mon Sep 17 00:00:00 2001
From: Philipp Fromme <philipp.fromme@camunda.com>
Date: Fri, 27 Sep 2024 11:31:14 +0200
Subject: [PATCH] feat: make FEEL popup links configurable

---
 src/PropertiesPanel.js                   |  5 +++-
 src/assets/properties-panel.css          |  6 ++++-
 src/components/entries/FEEL/FeelPopup.js | 33 ++++++++++++------------
 src/components/icons/Launch.svg          |  5 ++++
 src/components/icons/help.svg            |  1 -
 src/components/icons/index.js            |  6 ++---
 6 files changed, 34 insertions(+), 22 deletions(-)
 create mode 100644 src/components/icons/Launch.svg
 delete mode 100644 src/components/icons/help.svg

diff --git a/src/PropertiesPanel.js b/src/PropertiesPanel.js
index f2273059..43b24516 100644
--- a/src/PropertiesPanel.js
+++ b/src/PropertiesPanel.js
@@ -117,6 +117,7 @@ const DEFAULT_TOOLTIP = {};
  * @param {TooltipConfig} [props.tooltipConfig]
  * @param {Function} [props.tooltipLoaded]
  * @param {HTMLElement} [props.feelPopupContainer]
+ * @param {Function} [props.getFeelPopupLinks]
  * @param {Object} [props.eventBus]
  */
 export default function PropertiesPanel(props) {
@@ -132,6 +133,7 @@ export default function PropertiesPanel(props) {
     tooltipConfig,
     tooltipLoaded,
     feelPopupContainer,
+    getFeelPopupLinks,
     eventBus
   } = props;
 
@@ -243,7 +245,8 @@ export default function PropertiesPanel(props) {
                 <FeelPopupRoot
                   element={ element }
                   eventBus={ eventBus }
-                  popupContainer={ feelPopupContainer }>
+                  popupContainer={ feelPopupContainer }
+                  getPopupLinks={ getFeelPopupLinks }>
                   <div class="bio-properties-panel">
                     <Header
                       element={ element }
diff --git a/src/assets/properties-panel.css b/src/assets/properties-panel.css
index d5c77f3b..a407feba 100644
--- a/src/assets/properties-panel.css
+++ b/src/assets/properties-panel.css
@@ -1397,10 +1397,14 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-feel-popup__title-link {
-  margin-left: auto; 
+  margin-left: 8px; 
   display: flex;
 }
 
+.bio-properties-panel-feel-popup__title-link:first-of-type {
+  margin-left: auto;
+}
+
 .bio-properties-panel-feel-popup__title-link svg {
   width: var(--popup-header-line-height);
   height: var(--popup-header-line-height);
diff --git a/src/components/entries/FEEL/FeelPopup.js b/src/components/entries/FEEL/FeelPopup.js
index d1df6006..216a12ea 100644
--- a/src/components/entries/FEEL/FeelPopup.js
+++ b/src/components/entries/FEEL/FeelPopup.js
@@ -14,7 +14,7 @@ import { Popup } from '../../Popup';
 import CodeEditor from './FeelEditor';
 
 import TemplatingEditor from '../templating/TemplatingEditor';
-import { HelpIcon } from '../../icons';
+import { LaunchIcon } from '../../icons';
 
 export const FEEL_POPUP_WIDTH = 700;
 export const FEEL_POPUP_HEIGHT = 250;
@@ -31,7 +31,8 @@ export default function FEELPopupRoot(props) {
   const {
     element,
     eventBus = { fire() {}, on() {}, off() {} },
-    popupContainer
+    popupContainer,
+    getPopupLinks = () => []
   } = props;
 
   const prevElement = usePrevious(element);
@@ -121,6 +122,7 @@ export default function FEELPopupRoot(props) {
         <FeelPopupComponent
           onClose={ handleClose }
           container={ popupContainer }
+          getLinks={ getPopupLinks }
           sourceElement={ sourceElement }
           emit={ emit }
           { ...popupConfig } />
@@ -133,6 +135,7 @@ export default function FEELPopupRoot(props) {
 function FeelPopupComponent(props) {
   const {
     container,
+    getLinks,
     id,
     hostLanguage,
     onInput,
@@ -218,20 +221,18 @@ function FeelPopupComponent(props) {
         closeButtonTooltip="Save and close"
         onClose={ onClose }
         draggable>
-        {type === 'feel' && (
-          <a href="https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/" target="_blank" class="bio-properties-panel-feel-popup__title-link">
-            Learn FEEL expressions
-            <HelpIcon />
-          </a>
-        )
-        }
-        {type === 'feelers' && (
-          <a href="https://docs.camunda.io/docs/components/modeler/forms/configuration/forms-config-templating-syntax/" target="_blank" class="bio-properties-panel-feel-popup__title-link">
-            Learn templating
-            <HelpIcon />
-          </a>
-        )
-        }
+        <>
+          {
+            getLinks(type).map((link) => {
+              const { label, url } = link;
+
+              return <a href={ url } target="_blank" class="bio-properties-panel-feel-popup__title-link">
+                { label }
+                <LaunchIcon />
+              </a>;
+            })
+          }
+        </>
       </Popup.Title>
       <Popup.Body>
         <div
diff --git a/src/components/icons/Launch.svg b/src/components/icons/Launch.svg
new file mode 100644
index 00000000..e468ffb2
--- /dev/null
+++ b/src/components/icons/Launch.svg
@@ -0,0 +1,5 @@
+
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"/>
+  <polygon points="20 2 20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2"/>
+</svg>
diff --git a/src/components/icons/help.svg b/src/components/icons/help.svg
deleted file mode 100644
index 2f0ca40d..00000000
--- a/src/components/icons/help.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:none;}</style></defs><title>help</title><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><circle cx="16" cy="23.5" r="1.5"/><path d="M17,8H15.5A4.49,4.49,0,0,0,11,12.5V13h2v-.5A2.5,2.5,0,0,1,15.5,10H17a2.5,2.5,0,0,1,0,5H15v4.5h2V17a4.5,4.5,0,0,0,0-9Z"/><rect class="cls-1" width="32" height="32"/></svg>
\ No newline at end of file
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
index c64ff131..39c16dbf 100644
--- a/src/components/icons/index.js
+++ b/src/components/icons/index.js
@@ -1,9 +1,9 @@
 export { default as ArrowIcon } from './Arrow.svg';
+export { default as CloseIcon } from './Close.svg';
 export { default as CreateIcon } from './Create.svg';
 export { default as DeleteIcon } from './Delete.svg';
 export { default as DragIcon } from './Drag.svg';
 export { default as ExternalLinkIcon } from './ExternalLink.svg';
 export { default as FeelIcon } from './Feel.svg';
-export { default as HelpIcon } from './help.svg';
-export { default as PopupIcon } from './Popup.svg';
-export { default as CloseIcon } from './Close.svg';
\ No newline at end of file
+export { default as LaunchIcon } from './Launch.svg';
+export { default as PopupIcon } from './Popup.svg';
\ No newline at end of file