feat(feel-popup): include feel popup module

CHANGELOG.md

@@ -6,6 +6,10 @@ All notable changes to [bpmn-js-properties-panel](https://github.com/bpmn-io/bpm
 
 ___Note:__ Yet to be released changes appear here._
 
+* `FEAT`: allow listen to `feelPopup.opened` and `feelPopup.closed` events ([#974](https://github.com/bpmn-io/bpmn-js-properties-panel/issues/974))
+* `FEAT`: provide `feelPopup` module to interact with FEEL popup ([#974](https://github.com/bpmn-io/bpmn-js-properties-panel/issues/974))
+* `DEPS`: update to `@bpmn-io/properties-panel@3.7.0`
+
 ## 5.3.0
 
 * `FEAT`: prioritize externally provided errors ([bpmn-io/properties-panel@`375838b7`](https://github.com/bpmn-io/properties-panel/commit/375838b7c82b559a579792a46479592efcd5f500))

package.json

@@ -66,7 +66,7 @@
     "@babel/plugin-transform-react-jsx": "^7.14.3",
     "@bpmn-io/element-template-chooser": "^1.0.0",
     "@bpmn-io/element-templates-icons-renderer": "^0.3.0",
-    "@bpmn-io/properties-panel": "^3.6.0",
+    "@bpmn-io/properties-panel": "^3.7.0",
     "@bpmn-io/variable-resolver": "^1.2.0",
     "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-babel": "^6.0.3",
@@ -116,7 +116,7 @@
     "zeebe-bpmn-moddle": "^1.0.0"
   },
   "peerDependencies": {
-    "@bpmn-io/properties-panel": ">= 3.5",
+    "@bpmn-io/properties-panel": ">= 3.7",
     "bpmn-js": ">= 11.5",
     "camunda-bpmn-js-behaviors": ">= 0.4",
     "diagram-js": ">= 11.9"

src/render/index.js

@@ -1,12 +1,13 @@
 import BpmnPropertiesPanelRenderer from './BpmnPropertiesPanelRenderer';
 
 import Commands from '../cmd';
-import { DebounceInputModule } from '@bpmn-io/properties-panel';
+import { DebounceInputModule, FeelPopupModule } from '@bpmn-io/properties-panel';
 
 export default {
   __depends__: [
     Commands,
-    DebounceInputModule
+    DebounceInputModule,
+    FeelPopupModule
   ],
   __init__: [
     'propertiesPanel'

test/spec/BpmnPropertiesPanelRenderer.spec.js

@@ -913,20 +913,167 @@ describe('<BpmnPropertiesPanelRenderer>', function() {
         selection.select(elementRegistry.get('ServiceTask_1'));
       });
 
-      const openPopupBtn = findOpenFeelPopup('ServiceTask_1-input-0-source', container);
+      const openPopupBtn = getOpenFeelPopup('ServiceTask_1-input-0-source', container);
 
       // when
       await act(() => {
         openPopupBtn.click();
       });
 
-      const feelPopup = domQuery('.bio-properties-panel-feel-popup', container);
+      const feelPopup = getFeelPopup(container);
 
       // then
       expect(feelPopup).to.exist;
       expect(feelPopup.parentNode).to.eql(container);
     });
 
+
+    describe('module support', function() {
+
+      let modeler;
+
+      beforeEach(async function() {
+
+        const diagramXml = require('test/fixtures/service-task.bpmn').default;
+
+        await act(async () => {
+          ({ modeler } = await createModeler(diagramXml, {
+            propertiesPanel: {
+              parent: propertiesContainer,
+              feelPopupContainer: container
+            }
+          }));
+        });
+
+        await act(() => {
+          const elementRegistry = modeler.get('elementRegistry'),
+                selection = modeler.get('selection');
+
+          selection.select(elementRegistry.get('ServiceTask_1'));
+        });
+      });
+
+
+      withPropertiesPanel('>=3.7')('should listen on <feelPopup.opened>', async function() {
+
+        // given
+        const spy = sinon.spy();
+
+        const openPopupBtn = getOpenFeelPopup('ServiceTask_1-input-0-source', container);
+
+        const eventBus = modeler.get('eventBus');
+
+        eventBus.on('feelPopup.opened', spy);
+
+        // when
+        await act(() => {
+          openPopupBtn.click();
+        });
+
+        // then
+        expect(spy).to.have.been.calledOnce;
+      });
+
+
+      withPropertiesPanel('>=3.7')('should listen on <feelPopup.closed>', async function() {
+
+        // given
+        const spy = sinon.spy();
+
+        const openPopupBtn = getOpenFeelPopup('ServiceTask_1-input-0-source', container);
+
+        const eventBus = modeler.get('eventBus');
+
+        eventBus.on('feelPopup.closed', spy);
+
+        await act(() => {
+          openPopupBtn.click();
+        });
+
+        // assume
+        expect(getFeelPopup(container)).to.exist;
+
+        await act(() => {
+          const closeBtn = domQuery('.bio-properties-panel-feel-popup__close-btn', container);
+          closeBtn.click();
+        });
+
+        // then
+        expect(spy).to.have.been.calledOnce;
+      });
+
+
+      withPropertiesPanel('>=3.7')('#open', async function() {
+
+        // given
+        const feelPopup = modeler.get('feelPopup');
+
+        // when
+        await act(() => {
+          feelPopup.open(
+            'ServiceTask_1-input-0-source',
+            { type: 'feel' },
+            document.body
+          );
+        });
+
+        // then
+        expect(getFeelPopup(container)).to.exist;
+      });
+
+
+      withPropertiesPanel('>=3.7')('#close', async function() {
+
+        // given
+        const feelPopup = modeler.get('feelPopup');
+
+        await act(() => {
+          feelPopup.open(
+            'ServiceTask_1-input-0-source',
+            { type: 'feel' },
+            document.body
+          );
+        });
+
+        // assume
+        expect(getFeelPopup(container)).to.exist;
+
+        // when
+        await act(() => {
+          feelPopup.close();
+        });
+
+        // then
+        expect(getFeelPopup(container)).to.not.exist;
+      });
+
+
+      withPropertiesPanel('>=3.7')('#isOpen', async function() {
+
+        // given
+        const feelPopup = modeler.get('feelPopup');
+
+        await act(() => {
+          feelPopup.open(
+            'ServiceTask_1-input-0-source',
+            { type: 'feel' },
+            document.body
+          );
+        });
+
+        // assume
+        expect(feelPopup.isOpen()).to.be.true;
+
+        // when
+        await act(() => {
+          feelPopup.close();
+        });
+
+        // then
+        expect(feelPopup.isOpen()).to.be.false;
+      });
+    });
+
   });
 
 
@@ -1015,6 +1162,10 @@ function getHeaderName(container) {
   return domQuery('.bio-properties-panel-header-label', container).innerText;
 }
 
-function findOpenFeelPopup(id, container) {
+function getFeelPopup(container) {
+  return domQuery('.bio-properties-panel-feel-popup', container);
+}
+
+function getOpenFeelPopup(id, container) {
   return container.querySelector(`[data-entry-id="${id}"] .bio-properties-panel-open-feel-popup`);
 }