feat(replace-menu): update label of collapsed pool

* Indicate the action in a clearer, more standard-compliant way --> replaces an expanded pool with an empty "black box" + removing its content.
* We will not update the action identifier (`replace-with-collapsed-pool`) to avoid breaking changes.
* Make it possible to retrieve label via function

Related to camunda/camunda-modeler#2022

lib/features/popup-menu/ReplaceMenuProvider.js

@@ -390,10 +390,15 @@ ReplaceMenuProvider.prototype._createMenuEntry = function(definition, element, a
     return replaceElement(element, definition.target);
   };
 
+  var label = definition.label;
+  if (label && typeof label === 'function') {
+    label = label(element);
+  }
+
   action = action || replaceAction;
 
   var menuEntry = {
-    label: translate(definition.label),
+    label: translate(label),
     className: definition.className,
     id: definition.actionName,
     action: action

lib/features/replace/ReplaceOptions.js

@@ -829,7 +829,15 @@ export var PARTICIPANT = [
     }
   },
   {
-    label: 'Collapsed Pool',
+    label: function(element) {
+      var label = 'Empty Pool';
+
+      if (element.children && element.children.length) {
+        label += ' (removes content)';
+      }
+
+      return label;
+    },
     actionName: 'replace-with-collapsed-pool',
 
     // TODO(@janstuemmel): maybe design new icon

test/spec/features/popup-menu/ReplaceMenuProvider.pools.bpmn

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
+  <bpmn:collaboration id="Collaboration_1">
+    <bpmn:participant id="Participant_1" name="Participant 1" processRef="Process_1" />
+    <bpmn:participant id="Participant_2" name="Participant 2" processRef="Process_2" />
+  </bpmn:collaboration>
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:startEvent id="StartEvent_1">
+      <bpmn:outgoing>Flow_1</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:task id="Task_1">
+      <bpmn:incoming>Flow_1</bpmn:incoming>
+      <bpmn:outgoing>Flow_2</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_1" />
+    <bpmn:endEvent id="EndEvent_1">
+      <bpmn:incoming>Flow_2</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:sequenceFlow id="Flow_2" sourceRef="Task_1" targetRef="EndEvent_1" />
+  </bpmn:process>
+  <bpmn:process id="Process_2" />
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1">
+      <bpmndi:BPMNShape id="Participant_1_di" bpmnElement="Participant_1" isHorizontal="true">
+        <dc:Bounds x="170" y="70" width="600" height="250" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2">
+        <di:waypoint x="490" y="190" />
+        <di:waypoint x="582" y="190" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1">
+        <di:waypoint x="298" y="190" />
+        <di:waypoint x="390" y="190" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
+        <dc:Bounds x="262" y="172" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Task_1_di" bpmnElement="Task_1">
+        <dc:Bounds x="390" y="150" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1">
+        <dc:Bounds x="582" y="172" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Participant_2_di" bpmnElement="Participant_2" isHorizontal="true">
+        <dc:Bounds x="170" y="350" width="600" height="250" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/features/popup-menu/ReplaceMenuProviderSpec.js

@@ -190,6 +190,7 @@ describe('features/popup-menu - replace menu provider', function() {
     }));
   });
 
+
   describe('toggle', function() {
 
     beforeEach(bootstrapModeler(diagramXMLMarkers, { modules: testModules }));
@@ -1179,6 +1180,7 @@ describe('features/popup-menu - replace menu provider', function() {
 
     });
 
+
     describe('collapsed subprocesses', function() {
 
       var diagramXML = require('./ReplaceMenuProvider.collapsedSubProcess.bpmn');
@@ -1203,6 +1205,47 @@ describe('features/popup-menu - replace menu provider', function() {
     });
 
 
+    describe('pools', function() {
+
+      var diagramXML = require('./ReplaceMenuProvider.pools.bpmn');
+
+      beforeEach(bootstrapModeler(diagramXML, { modules: testModules }));
+
+
+      it('should indicate removing content', inject(function(elementRegistry) {
+
+        // given
+        var expandedPool = elementRegistry.get('Participant_1');
+
+        // when
+        openPopup(expandedPool);
+
+        var emptyPoolLabel = queryEntryLabel('replace-with-collapsed-pool');
+
+        // then
+        expect(emptyPoolLabel).to.exist;
+        expect(emptyPoolLabel.innerHTML).to.eql('Empty Pool (removes content)');
+      }));
+
+
+      it('should NOT indicate removing content', inject(function(elementRegistry) {
+
+        // given
+        var expandedPool = elementRegistry.get('Participant_2');
+
+        // when
+        openPopup(expandedPool);
+
+        var emptyPoolLabel = queryEntryLabel('replace-with-collapsed-pool');
+
+        // then
+        expect(emptyPoolLabel).to.exist;
+        expect(emptyPoolLabel.innerHTML).to.eql('Empty Pool');
+      }));
+
+    });
+
+
     describe('data object', function() {
 
       beforeEach(bootstrapModeler(diagramXMLDataElements, { modules: testModules }));
@@ -2138,6 +2181,12 @@ function queryEntries() {
   return domQueryAll('.djs-popup .entry', container);
 }
 
+function queryEntryLabel(id) {
+  var entry = queryEntry(id);
+
+  return domQuery('span', entry);
+}
+
 function triggerAction(id) {
   var entry = queryEntry(id);