feat(popup-menu): add ability to refresh without reopening

Closes #804
bpmn-io · Feb 21, 2024 · fe6ae72 · fe6ae72
1 parent 2b82e8f
commit fe6ae72
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 3 deletions.
diff --git a/lib/features/popup-menu/PopupMenu.js b/lib/features/popup-menu/PopupMenu.js
@@ -101,7 +101,7 @@ PopupMenu.prototype._render = function() {
 
   const {
     position: _position,
-    className,
+    providerId: className,
     entries,
     headerEntries,
     emptyPlaceholder,
@@ -179,7 +179,7 @@ PopupMenu.prototype.open = function(target, providerId, position, options) {
 
   this._current = {
     position,
-    className: providerId,
+    providerId,
     target,
     entries,
     headerEntries,
@@ -195,6 +195,37 @@ PopupMenu.prototype.open = function(target, providerId, position, options) {
   this._render();
 };
 
+/**
+ * Refresh the popup menu entries without changing the target or position.
+ */
+PopupMenu.prototype.refresh = function() {
+  if (!this.isOpen()) {
+    return;
+  }
+
+  const {
+    target,
+    providerId
+  } = this._current;
+
+  const {
+    entries,
+    headerEntries,
+    emptyPlaceholder
+  } = this._getContext(target, providerId);
+
+  this._current = {
+    ...this._current,
+    entries,
+    headerEntries,
+    emptyPlaceholder
+  };
+
+  this._emit('refresh');
+
+  this._render();
+};
+
 
 PopupMenu.prototype._getContext = function(target, provider) {
 

diff --git a/test/spec/features/popup-menu/PopupMenuSpec.js b/test/spec/features/popup-menu/PopupMenuSpec.js
@@ -558,6 +558,85 @@ describe('features/popup-menu', function() {
   });
 
 
+  describe('#refresh', function() {
+
+    it('should refresh', inject(function(eventBus, popupMenu) {
+
+      // given
+      var refreshSpy = sinon.spy();
+
+      eventBus.on('popupMenu.refresh', refreshSpy);
+
+      var dynamicMenuProvider = {
+        getPopupMenuEntries: function() {
+          return {
+            foo: { label: 'Foo' },
+            bar: { label: 'Bar' }
+          };
+        },
+        getHeaderEntries: function() {
+          return {
+            foo: { id: 'foo', label: 'Foo' },
+            bar: { id: 'bar', label: 'Bar' }
+          };
+        }
+      };
+
+      popupMenu.registerProvider('menu', dynamicMenuProvider);
+
+      popupMenu.open({}, 'menu', { x: 100, y: 100 });
+
+      expect(popupMenu._current).to.exist;
+      expect(popupMenu._current.entries).to.have.keys('foo', 'bar');
+      expect(popupMenu._current.entries).not.to.have.keys('baz');
+      expect(popupMenu._current.headerEntries).to.have.keys('foo', 'bar');
+      expect(popupMenu._current.headerEntries).not.to.have.keys('baz');
+
+      // when
+      dynamicMenuProvider.getPopupMenuEntries = function() {
+        return {
+          foo: { label: 'Foo' },
+          bar: { label: 'Bar' },
+          baz: { label: 'Baz' }
+        };
+      };
+
+      dynamicMenuProvider.getHeaderEntries = function() {
+        return {
+          foo: { id: 'foo', label: 'Foo' },
+          bar: { id: 'bar', label: 'Bar' },
+          baz: { id: 'baz', label: 'Baz' }
+        };
+      };
+
+      popupMenu.refresh();
+
+      // then
+      expect(refreshSpy).to.have.been.calledOnce;
+
+      expect(popupMenu._current).to.exist;
+      expect(popupMenu._current.entries).to.have.keys('foo', 'bar', 'baz');
+      expect(popupMenu._current.headerEntries).to.have.keys('foo', 'bar', 'baz');
+    }));
+
+
+    it('should not refresh', inject(function(eventBus, popupMenu) {
+
+      // given
+      var refreshSpy = sinon.spy();
+
+      eventBus.on('popupMenu.refresh', refreshSpy);
+
+      // when
+      popupMenu.refresh();
+
+      // then
+      expect(refreshSpy).not.to.have.been.called;
+    }));
+
+  });
+
+
   describe('#close', function() {
 
     beforeEach(inject(async function(eventBus, popupMenu) {
@@ -842,7 +921,6 @@ describe('features/popup-menu', function() {
       });
     }));
 
-
   });