Make FEEL Popup Links Configurable

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes to [`@bpmn-io/properties-panel`](https://github.com/bpmn-io/
 
 ___Note:__ Yet to be released changes appear here._
 
+* `FEAT`: links shown in FEEL popup are configurable ([#382](https://github.com/bpmn-io/properties-panel/pull/382))
+
 ## 3.24.1
 
 * `FIX`: validate first item access gracefully ([#381](https://github.com/bpmn-io/properties-panel/pull/381))

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,28 +221,16 @@ function FeelPopupComponent(props) {
         closeButtonTooltip="Save and close"
         onClose={ onClose }
         draggable>
-        {type === 'feel' && (
-          <a
-            rel="noreferrer"
-            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
-            rel="noreferrer"
-            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, index) => {
+              return <a key={ index } rel="noreferrer" href={ link.href } target="_blank" class="bio-properties-panel-feel-popup__title-link">
+                { link.title}
+                <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';

test/spec/components/FeelPopup.spec.js

@@ -12,7 +12,8 @@ import TestContainer from 'mocha-test-container-support';
 import EventBus from 'diagram-js/lib/core/EventBus';
 
 import {
-  query as domQuery
+  query as domQuery,
+  queryAll as domQueryAll
 } from 'min-dom';
 
 import {
@@ -78,6 +79,49 @@ describe('<FeelPopup>', function() {
   });
 
 
+  it('should render links', async function() {
+
+    // given
+    const parent = document.createElement('div');
+
+    // when
+    createFeelPopup({
+      popupContainer: parent,
+      getPopupLinks: (type) => {
+        if (type === 'foo') {
+          return [
+            { href: 'https://foo.com/', title: 'Foo' },
+            { href: 'https://bar.com/', title: 'Bar' }
+          ];
+        }
+
+        return [];
+      },
+      type: 'foo'
+    }, container);
+
+    const childComponent = domQuery('.child-component', container);
+
+    const btn = domQuery('button', childComponent);
+
+    // when
+    await act(() => {
+      btn.click();
+    });
+
+    // then
+    const links = domQueryAll('.bio-properties-panel-feel-popup__title-link', parent);
+
+    expect(links.length).to.equal(2);
+
+    expect(links[0].href).to.equal('https://foo.com/');
+    expect(links[0].textContent).to.equal('Foo');
+
+    expect(links[1].href).to.equal('https://bar.com/');
+    expect(links[1].textContent).to.equal('Bar');
+  });
+
+
   it('should restore focus on source element', async function() {
 
     // given
@@ -412,25 +456,6 @@ describe('<FeelPopup>', function() {
     });
 
 
-    it('should link to <feel> documentation', async function() {
-
-      // given
-      createFeelPopup({ type: 'feel' }, container);
-
-      const childComponent = domQuery('.child-component', container);
-      const btn = domQuery('button', childComponent);
-
-      // when
-      await act(() => {
-        btn.click();
-      });
-
-      // then
-      const link = domQuery('.bio-properties-panel-feel-popup__title-link', document.body);
-      expect(link).to.exist;
-    });
-
-
     it('should focus <feel> editor', async function() {
 
       // given
@@ -587,25 +612,6 @@ describe('<FeelPopup>', function() {
     });
 
 
-    it('should link to <feelers> documentation', async function() {
-
-      // given
-      createFeelPopup({ type: 'feelers' }, container);
-
-      const childComponent = domQuery('.child-component', container);
-      const btn = domQuery('button', childComponent);
-
-      // when
-      await act(() => {
-        btn.click();
-      });
-
-      // then
-      const link = domQuery('.bio-properties-panel-feel-popup__title-link', document.body);
-      expect(link).to.exist;
-    });
-
-
     it('should focus <feelers> editor', async function() {
 
       // given
@@ -738,13 +744,14 @@ describe('<FeelPopup>', function() {
 function createFeelPopup(props, container) {
   const {
     popupContainer,
+    getPopupLinks,
     element = noopElement,
     eventBus = new EventBus(),
     type
   } = props;
 
   return render(
-    <FEELPopupRoot popupContainer={ popupContainer } element={ element } eventBus={ eventBus }>
+    <FEELPopupRoot popupContainer={ popupContainer } getPopupLinks={ getPopupLinks } element={ element } eventBus={ eventBus }>
       <ChildComponent type={ type } />
     </FEELPopupRoot>,
     { container }