feat: make FEEL popup links configurable

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 }

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);

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

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';
+export { default as LaunchIcon } from './Launch.svg';
+export { default as PopupIcon } from './Popup.svg';