From 858d8586156f267aece133fb58ef568574e6fd58 Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Fri, 22 Sep 2023 11:05:20 +0200 Subject: [PATCH] feat(feel-popup): include feel popup module Closes #974 --- CHANGELOG.md | 4 + package-lock.json | 19 ++- package.json | 4 +- src/render/index.js | 5 +- test/spec/BpmnPropertiesPanelRenderer.spec.js | 157 +++++++++++++++++- 5 files changed, 174 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 52a8e0817..51558d39c 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/package-lock.json b/package-lock.json index 89f2c1bb4..29fb4d76c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,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", @@ -73,8 +73,11 @@ "webpack": "^5.74.0", "zeebe-bpmn-moddle": "^1.0.0" }, + "engines": { + "node": "*" + }, "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" @@ -626,9 +629,9 @@ } }, "node_modules/@bpmn-io/properties-panel": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-3.6.0.tgz", - "integrity": "sha512-ooe+y3wDYU8w8SXiXsXuFrlY8uEhWNOGkqSWlz/BSbYMSrvNwFu4Jxkii5UoJ3gjdPqq8kr3hOKa1gjQn+qRtA==", + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-3.7.0.tgz", + "integrity": "sha512-379nFK4iWxwsjJOc6ShhNWo8heK76PlZAHutmWpy48mba7SiDb8PLSbPkTa+KFcWb9AiRlvpDcLFIiIJzopkDA==", "dev": true, "dependencies": { "@bpmn-io/feel-editor": "^0.9.0", @@ -9609,9 +9612,9 @@ } }, "@bpmn-io/properties-panel": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-3.6.0.tgz", - "integrity": "sha512-ooe+y3wDYU8w8SXiXsXuFrlY8uEhWNOGkqSWlz/BSbYMSrvNwFu4Jxkii5UoJ3gjdPqq8kr3hOKa1gjQn+qRtA==", + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-3.7.0.tgz", + "integrity": "sha512-379nFK4iWxwsjJOc6ShhNWo8heK76PlZAHutmWpy48mba7SiDb8PLSbPkTa+KFcWb9AiRlvpDcLFIiIJzopkDA==", "dev": true, "requires": { "@bpmn-io/feel-editor": "^0.9.0", diff --git a/package.json b/package.json index 6ece19a92..329e49773 100644 --- a/package.json +++ b/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" diff --git a/src/render/index.js b/src/render/index.js index e0c6ea90e..a1b5ee7d4 100644 --- a/src/render/index.js +++ b/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' diff --git a/test/spec/BpmnPropertiesPanelRenderer.spec.js b/test/spec/BpmnPropertiesPanelRenderer.spec.js index 920070534..7d15b0f1f 100644 --- a/test/spec/BpmnPropertiesPanelRenderer.spec.js +++ b/test/spec/BpmnPropertiesPanelRenderer.spec.js @@ -913,20 +913,167 @@ describe('', 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 ', 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 ', 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`); }