Repository: ProcessMaker/modeler (js)

Issue:
Change name of 'Call Activity' element to 'Sub Process'.

Pull request:
Renamed all references of 'call activity' to 'sub process'
Closes #890.

Patch:
diff --git a/src/assets/toolpanel/generic-intermediate-event.svg b/src/assets/toolpanel/generic-intermediate-event.svg
new file mode 100644
index 00000000..c35c716e
--- /dev/null
+++ b/src/assets/toolpanel/generic-intermediate-event.svg
@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22Z" fill="white"/>
+<path d="M11 21.5C16.799 21.5 21.5 16.799 21.5 11C21.5 5.20101 16.799 0.5 11 0.5C5.20101 0.5 0.5 5.20101 0.5 11C0.5 16.799 5.20101 21.5 11 21.5Z" stroke="#788793"/>
+<path d="M11 19.5C15.6944 19.5 19.5 15.6944 19.5 11C19.5 6.30558 15.6944 2.5 11 2.5C6.30558 2.5 2.5 6.30558 2.5 11C2.5 15.6944 6.30558 19.5 11 19.5Z" stroke="#788793"/>
+</svg>
diff --git a/src/assets/toolpanel/callActivity.svg b/src/assets/toolpanel/subProcess.svg
similarity index 100%
rename from src/assets/toolpanel/callActivity.svg
rename to src/assets/toolpanel/subProcess.svg
diff --git a/src/components/crownDropdown.vue b/src/components/crownDropdown.vue
index 87f39e33..be9ee228 100644
--- a/src/components/crownDropdown.vue
+++ b/src/components/crownDropdown.vue
@@ -21,8 +21,8 @@
 export default {
   name: 'CrownDropdown',
   props: {
-    dropdownData: {},
-    node: {},
+    dropdownData: Array,
+    node: Object,
     showDropdown: {
       type: Boolean,
       required: true,
diff --git a/src/components/inspectors/InspectorPanel.vue b/src/components/inspectors/InspectorPanel.vue
index 5ab9ae6b..f1c5c9cf 100644
--- a/src/components/inspectors/InspectorPanel.vue
+++ b/src/components/inspectors/InspectorPanel.vue
@@ -15,18 +15,9 @@
 <script>
 import Vue from 'vue';
 
-import { VueFormRenderer, renderer } from '@processmaker/screen-builder';
-
-import {
-  FormInput,
-  FormSelect,
-  FormTextArea,
-  FormCheckbox,
-  FormRadioButtonGroup,
-  FormAccordion,
-  FormDatePicker,
-  FormMultiSelect,
-} from '@processmaker/vue-form-elements';
+import { renderer, VueFormRenderer } from '@processmaker/screen-builder';
+
+import { FormAccordion, FormCheckbox, FormDatePicker, FormInput, FormMultiSelect, FormRadioButtonGroup, FormSelect, FormTextArea } from '@processmaker/vue-form-elements';
 import '@processmaker/vue-form-elements/dist/vue-form-elements.css';
 import store from '@/store';
 import { id as sequenceFlowId } from '@/components/nodes/sequenceFlow';
@@ -103,16 +94,16 @@ export default {
         sequenceFlowConfigurationFormElements.push(expressionConfig);
       }
 
-      if (this.isSequenceFlow(type) && this.isConnectedToCallActivity(definition)) {
+      if (this.isSequenceFlow(type) && this.isConnectedToSubProcess(definition)) {
         const startEventConfig = {
           component: SequenceFlowFormSelect,
           config: {
-            label: 'Call Activity Start Event',
+            label: 'Sub Process Start Event',
             name: 'startEvent',
-            targetCallActivity: definition.targetRef,
+            targetSubProcess: definition.targetRef,
             helper: definition.targetRef.calledElement
               ? ''
-              : 'Please select a valid process on the connected call activity.',
+              : 'Please select a valid process on the connected sub process.',
           },
         };
 
@@ -167,7 +158,7 @@ export default {
     isConnectedToGateway(definition) {
       return ['bpmn:ExclusiveGateway', 'bpmn:InclusiveGateway'].includes(definition.sourceRef.$type);
     },
-    isConnectedToCallActivity(definition) {
+    isConnectedToSubProcess(definition) {
       return definition.targetRef.$type === 'bpmn:CallActivity';
     },
     customInspectorHandler(value) {
diff --git a/src/components/inspectors/SequenceFlowFormSelect.vue b/src/components/inspectors/SequenceFlowFormSelect.vue
index c2825d93..c562858b 100644
--- a/src/components/inspectors/SequenceFlowFormSelect.vue
+++ b/src/components/inspectors/SequenceFlowFormSelect.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <form-select
-      v-if="targetCallActivity.calledElement"
+      v-if="targetSubProcess.calledElement"
       v-bind="$attrs"
       v-on="$listeners"
       :disabled="eventList.length === 0"
@@ -10,9 +10,9 @@
     <div v-else>
       <div class="error-title">
         <font-awesome-icon :icon="faExclamationTriangle" />
-        Call Activity Start Event
+        Sub Process Start Event
       </div>
-      <p>A process has not been configured in the connected Call Activity task.</p>
+      <p>A process has not been configured in the connected Sub Process task.</p>
     </div>
   </div>
 </template>
@@ -24,14 +24,14 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default {
   inheritAttrs: false,
-  components : {
+  components: {
     FontAwesomeIcon,
   },
   data() {
     return { faExclamationTriangle };
   },
   props: {
-    targetCallActivity: { type: Object, required: true },
+    targetSubProcess: { type: Object, required: true },
   },
   computed: {
     dropdownList() {
@@ -43,7 +43,7 @@ export default {
       const list = [];
       store.getters.globalProcesses.forEach((process) => {
         process.events.forEach((event) => {
-          if (this.targetCallActivity.calledElement === event.ownerProcessId + '-' + String(process.id)) {
+          if (this.targetSubProcess.calledElement === event.ownerProcessId + '-' + String(process.id)) {
             list.push(this.toDropdownFormat(event));
           }
         });
diff --git a/src/components/nodes/index.js b/src/components/nodes/index.js
index 07e5bb3f..8b2618da 100644
--- a/src/components/nodes/index.js
+++ b/src/components/nodes/index.js
@@ -15,7 +15,9 @@ export { default as intermediateTimerEvent } from './intermediateTimerEvent';
 export { default as intermediateMessageCatchEvent } from './intermediateMessageCatchEvent';
 export { default as intermediateMessageThrowEvent } from './intermediateMessageThrowEvent';
 export { default as task } from './userTask';
-export { default as callActivity } from './callActivity';
+export { default as subProcess } from './subProcess';
+//This export is deprecated and will be removed in a future version
+export { default as callActivity } from './subProcess';
 export { default as scriptTask } from './scriptTask';
 export { default as serviceTask } from './serviceTask';
 export { default as textAnnotation } from './textAnnotation';
diff --git a/src/components/nodes/intermediateEvent/intermediateEvent.vue b/src/components/nodes/intermediateEvent/intermediateEvent.vue
index f89a19d3..553e6c34 100644
--- a/src/components/nodes/intermediateEvent/intermediateEvent.vue
+++ b/src/components/nodes/intermediateEvent/intermediateEvent.vue
@@ -11,9 +11,8 @@
     :process-node="processNode"
     :plane-elements="planeElements"
     :is-rendering="isRendering"
-    @remove-node="$emit('remove-node', $event)"
-    @add-node="$emit('add-node', $event)"
-    @save-state="$emit('save-state', $event)"
+    :dropdownData="dropdownData"
+    v-on="$listeners"
   />
 </template>
 
@@ -47,6 +46,7 @@ export default {
     return {
       shape: null,
       definition: null,
+      dropdownData: [],
     };
   },
   watch: {
diff --git a/src/components/nodes/intermediateMessageCatchEvent/index.js b/src/components/nodes/intermediateMessageCatchEvent/index.js
index 7e3dd7be..110887ac 100644
--- a/src/components/nodes/intermediateMessageCatchEvent/index.js
+++ b/src/components/nodes/intermediateMessageCatchEvent/index.js
@@ -8,6 +8,7 @@ import omit from 'lodash/omit';
 export default merge(cloneDeep(intermediateMessageEventConfig), {
   id: 'processmaker-modeler-intermediate-message-catch-event',
   component,
+  control: false,
   bpmnType: 'bpmn:IntermediateCatchEvent',
   icon: require('@/assets/toolpanel/intermediate-mail-event.svg'),
   label: 'Intermediate Message Catch Event',
diff --git a/src/components/nodes/intermediateMessageThrowEvent/index.js b/src/components/nodes/intermediateMessageThrowEvent/index.js
index 58315f1a..dc88c089 100644
--- a/src/components/nodes/intermediateMessageThrowEvent/index.js
+++ b/src/components/nodes/intermediateMessageThrowEvent/index.js
@@ -7,6 +7,7 @@ import omit from 'lodash/omit';
 export default merge(cloneDeep(intermediateMessageEventConfig), {
   id: 'processmaker-modeler-intermediate-message-throw-event',
   component,
+  control: false,
   bpmnType: 'bpmn:IntermediateThrowEvent',
   label: 'Intermediate Message Throw Event',
   icon: require('@/assets/toolpanel/intermediate-mail-event-alt.svg'),
diff --git a/src/components/nodes/intermediateTimerEvent/index.js b/src/components/nodes/intermediateTimerEvent/index.js
index 2da68719..b7def9ef 100644
--- a/src/components/nodes/intermediateTimerEvent/index.js
+++ b/src/components/nodes/intermediateTimerEvent/index.js
@@ -11,8 +11,8 @@ export default {
   bpmnType: 'bpmn:IntermediateCatchEvent',
   control: true,
   category: 'BPMN',
-  icon: require('@/assets/toolpanel/intermediate-time-event.svg'),
-  label: 'Intermediate Timer Event',
+  icon: require('@/assets/toolpanel/generic-intermediate-event.svg'),
+  label: 'Intermediate Event',
   definition(moddle, $t) {
     return moddle.create('bpmn:IntermediateCatchEvent', {
       name: $t('Intermediate Timer Event'),
diff --git a/src/components/nodes/intermediateTimerEvent/intermediateTimerEvent.vue b/src/components/nodes/intermediateTimerEvent/intermediateTimerEvent.vue
index fad3a60a..766f125c 100644
--- a/src/components/nodes/intermediateTimerEvent/intermediateTimerEvent.vue
+++ b/src/components/nodes/intermediateTimerEvent/intermediateTimerEvent.vue
@@ -7,5 +7,25 @@ export default {
   mounted() {
     this.shape.attr('image/xlink:href', clockIcon);
   },
+  data() {
+    return {
+      dropdownData: [
+        {
+          label: 'Intermediate Timer Event',
+          nodeType: 'processmaker-modeler-intermediate-catch-timer-event',
+        },
+        {
+          label: 'Intermediate Message Catch Event',
+          nodeType: 'processmaker-modeler-intermediate-message-catch-event',
+          dataTest: 'switch-to-intermediate-message-catch-event',
+        },
+        {
+          label: 'Intermediate Message Throw Event',
+          nodeType: 'processmaker-modeler-intermediate-message-throw-event',
+          dataTest: 'switch-to-intermediate-message-throw-event',
+        },
+      ],
+    };
+  },
 };
 </script>
diff --git a/src/components/nodes/sequenceFlow/sequenceFlow.vue b/src/components/nodes/sequenceFlow/sequenceFlow.vue
index e48009be..eae7e756 100644
--- a/src/components/nodes/sequenceFlow/sequenceFlow.vue
+++ b/src/components/nodes/sequenceFlow/sequenceFlow.vue
@@ -24,7 +24,7 @@ import get from 'lodash/get';
 import { id as laneId } from '../poolLane';
 import { expressionPosition } from './sequenceFlowConfig';
 import store from '@/store';
-import { id as callActivityId } from '@/components/nodes/callActivity';
+import { id as subProcessId } from '@/components/nodes/subProcess';
 import CrownConfig from '@/components/crownConfig';
 
 export default {
@@ -73,7 +73,7 @@ export default {
       return ['bpmn:ExclusiveGateway', 'bpmn:InclusiveGateway'].includes(this.node.definition.sourceRef.$type);
     },
     targetIsCallActivity() {
-      return this.targetType === callActivityId;
+      return this.targetType === subProcessId;
     },
   },
   watch: {
diff --git a/src/components/nodes/callActivity/CallActivityFormSelect.vue b/src/components/nodes/subProcess/SubProcessFormSelect.vue
similarity index 100%
rename from src/components/nodes/callActivity/CallActivityFormSelect.vue
rename to src/components/nodes/subProcess/SubProcessFormSelect.vue
diff --git a/src/components/nodes/callActivity/elementIdParser.js b/src/components/nodes/subProcess/elementIdParser.js
similarity index 100%
rename from src/components/nodes/callActivity/elementIdParser.js
rename to src/components/nodes/subProcess/elementIdParser.js
diff --git a/src/components/nodes/callActivity/index.js b/src/components/nodes/subProcess/index.js
similarity index 84%
rename from src/components/nodes/callActivity/index.js
rename to src/components/nodes/subProcess/index.js
index ca95e174..dae7f583 100644
--- a/src/components/nodes/callActivity/index.js
+++ b/src/components/nodes/subProcess/index.js
@@ -1,5 +1,5 @@
-import component from './callActivity';
-import CallActivityFormSelect from './CallActivityFormSelect';
+import component from './subProcess';
+import SubProcessFormSelect from './SubProcessFormSelect';
 import idConfigSettings from '@/components/inspectors/idConfigSettings';
 import nameConfigSettings from '@/components/inspectors/nameConfigSettings';
 
@@ -12,11 +12,11 @@ export default {
   bpmnType: 'bpmn:CallActivity',
   control: true,
   category: 'BPMN',
-  icon: require('@/assets/toolpanel/callActivity.svg'),
-  label: 'Call Activity',
+  icon: require('@/assets/toolpanel/subProcess.svg'),
+  label: 'Sub Process',
   definition(moddle, $t) {
     return moddle.create('bpmn:CallActivity', {
-      name: $t('New Call Activity'),
+      name: $t('New Sub Process'),
       calledElement: '',
     });
   },
@@ -44,7 +44,7 @@ export default {
   },
   inspectorConfig: [
     {
-      name: 'Call Activity',
+      name: 'Sub Process',
       items: [
         {
           component: 'FormAccordion',
@@ -60,11 +60,11 @@ export default {
               component: 'FormInput',
               config: {
                 ...nameConfigSettings,
-                helper: 'The Name of the Call Activity',
+                helper: 'The Name of the Sub Process',
               },
             },
             {
-              component: CallActivityFormSelect,
+              component: SubProcessFormSelect,
               config: {
                 label: 'Process',
                 name: 'calledElement',
diff --git a/src/components/nodes/callActivity/callActivity.vue b/src/components/nodes/subProcess/subProcess.vue
similarity index 89%
rename from src/components/nodes/callActivity/callActivity.vue
rename to src/components/nodes/subProcess/subProcess.vue
index 5337b77f..e49ee0e1 100644
--- a/src/components/nodes/callActivity/callActivity.vue
+++ b/src/components/nodes/subProcess/subProcess.vue
@@ -26,7 +26,7 @@ import store from '@/store';
 import uniqBy from 'lodash/uniqBy';
 import hasMarkers, { markerSize } from '@/mixins/hasMarkers';
 import hideLabelOnDrag from '@/mixins/hideLabelOnDrag';
-import { elementIdParser } from '@/components/nodes/callActivity/elementIdParser';
+import { elementIdParser } from '@/components/nodes/subProcess/elementIdParser';
 import CrownConfig from '@/components/crownConfig';
 import highlightConfig from '@/mixins/highlightConfig';
 
@@ -74,12 +74,12 @@ export default {
 
       const { ownerProcessId, processId } = elementIdParser(calledElement);
 
-      const calledProcess = store.getters.globalProcesses
+      const calledSubProcess = store.getters.globalProcesses
         .find(process => process.id == processId);
 
-      let calledElementName = calledProcess.name;
-      if (uniqBy(calledProcess.events, 'ownerProcessName').length > 1) {
-        const calledSubProcess = calledProcess.events.find(event => event.ownerProcessId == ownerProcessId);
+      let calledElementName = calledSubProcess.name;
+      if (uniqBy(calledSubProcess.events, 'ownerProcessName').length > 1) {
+        const calledSubProcess = calledSubProcess.events.find(event => event.ownerProcessId == ownerProcessId);
         calledElementName += ` (${calledSubProcess.ownerProcessName})`;
       }
 
diff --git a/src/mixins/boundaryEventSwitcher.js b/src/mixins/boundaryEventSwitcher.js
index 91d46615..63fdf72e 100644
--- a/src/mixins/boundaryEventSwitcher.js
+++ b/src/mixins/boundaryEventSwitcher.js
@@ -1,5 +1,5 @@
 import { id as taskId } from '@/components/nodes/task';
-import { id as callActivityId } from '@/components/nodes/callActivity';
+import { id as subProcessId } from '@/components/nodes/subProcess';
 import { id as manualTaskId } from '@/components/nodes/manualTask';
 import { id as scriptTaskId } from '@/components/nodes/scriptTask';
 import { boundaryTimerEvent, intermediateTimerEvent } from '@/components/nodes';
@@ -10,7 +10,7 @@ export default {
     getTaskUnderShape() {
       const taskIds = [
         taskId,
-        callActivityId,
+        subProcessId,
         manualTaskId,
         scriptTaskId,
       ];
diff --git a/src/setup/registerNodes.js b/src/setup/registerNodes.js
index da8e5a7d..f4d1fd02 100644
--- a/src/setup/registerNodes.js
+++ b/src/setup/registerNodes.js
@@ -1,10 +1,9 @@
 import {
   association,
   boundaryErrorEvent,
+  boundaryEscalationEvent,
   boundaryMessageEvent,
   boundaryTimerEvent,
-  boundaryEscalationEvent,
-  callActivity,
   endEvent,
   errorEndEvent,
   eventBasedGateway,
@@ -14,8 +13,9 @@ import {
   intermediateMessageThrowEvent,
   intermediateTimerEvent,
   manualTask,
-  messageFlow,
   messageEndEvent,
+  messageFlow,
+  messageStartEvent,
   parallelGateway,
   pool,
   poolLane,
@@ -23,8 +23,8 @@ import {
   sequenceFlow,
   serviceTask,
   startEvent,
-  messageStartEvent,
   startTimerEvent,
+  subProcess,
   task,
   textAnnotation,
 } from '@/components/nodes';
@@ -35,7 +35,7 @@ const nodeTypes = [
   task,
   scriptTask,
   manualTask,
-  callActivity,
+  subProcess,
   serviceTask,
   exclusiveGateway,
   inclusiveGateway,


Test patch:
diff --git a/tests/e2e/specs/BoundaryEscalationEvent.spec.js b/tests/e2e/specs/BoundaryEscalationEvent.spec.js
index 71221f91..0392b555 100644
--- a/tests/e2e/specs/BoundaryEscalationEvent.spec.js
+++ b/tests/e2e/specs/BoundaryEscalationEvent.spec.js
@@ -1,16 +1,11 @@
-import {
-  dragFromSourceToDest,
-  getElementAtPosition,
-  getGraphElements,
-  waitToRenderAllShapes,
-} from '../support/utils';
+import { dragFromSourceToDest, getElementAtPosition, getGraphElements, waitToRenderAllShapes } from '../support/utils';
 import { nodeTypes } from '../support/constants';
 
 describe.skip('Boundary Escalation Event', () => {
 
   it('can toggle interrupting on Boundary Escalation Events', function() {
     const taskPosition = { x: 200, y: 200 };
-    dragFromSourceToDest(nodeTypes.callActivity, taskPosition);
+    dragFromSourceToDest(nodeTypes.subProcess, taskPosition);
 
     const boundaryEscalationEventPosition = { x: 260, y: 260 };
     dragFromSourceToDest(nodeTypes.boundaryEscalationEvent, boundaryEscalationEventPosition);
@@ -32,11 +27,11 @@ describe.skip('Boundary Escalation Event', () => {
     cy.get(interrupting).should('not.be.checked');
   });
 
-  it('can only embed onto a call activity', function() {
+  it('can only embed onto a sub process', function() {
     const initialNumberOfElements = 1;
     const inValidBoundaryEscalationEventTargets = [
       { type: nodeTypes.task, position: { x: 100, y: 300 } },
-      { type: nodeTypes.callActivity, position: { x: 240, y: 300 } },
+      { type: nodeTypes.subProcess, position: { x: 240, y: 300 } },
       { type: nodeTypes.scriptTask, position: { x: 380, y: 300 } },
       { type: nodeTypes.manualTask, position: { x: 100, y: 400 } },
       { type: nodeTypes.sendTweet, position: { x: 240, y: 400 } },
diff --git a/tests/e2e/specs/BoundaryEventCommonBehaviour.spec.js b/tests/e2e/specs/BoundaryEventCommonBehaviour.spec.js
index 26dbef9d..61c6888f 100644
--- a/tests/e2e/specs/BoundaryEventCommonBehaviour.spec.js
+++ b/tests/e2e/specs/BoundaryEventCommonBehaviour.spec.js
@@ -32,13 +32,13 @@ const boundaryEventData = [{
   skip: true,
   nodeType: nodeTypes.boundaryEscalationEvent,
   eventXMLSnippet: '<bpmn:boundaryEvent id="node_3" name="New Boundary Escalation Event" attachedToRef="node_2"><bpmn:escalationEventDefinition /></bpmn:boundaryEvent>',
-  taskType: nodeTypes.callActivity,
+  taskType: nodeTypes.subProcess,
   invalidTargets: [{ type: nodeTypes.startEvent }, { type: nodeTypes.task, color: defaultNodeColor }],
 }, {
   type: 'Boundary Message Event',
   nodeType: nodeTypes.boundaryMessageEvent,
   eventXMLSnippet: '<bpmn:boundaryEvent id="node_3" name="New Boundary Message Event" attachedToRef="node_2"><bpmn:messageEventDefinition /></bpmn:boundaryEvent>',
-  taskType: nodeTypes.callActivity,
+  taskType: nodeTypes.subProcess,
   invalidTargets: [{ type: nodeTypes.startEvent }],
 }];
 
@@ -119,7 +119,7 @@ boundaryEventData.forEach(({ type, nodeType, eventXMLSnippet, taskType, invalidT
           expect(xml).to.contain(eventXMLSnippet);
         });
 
-      moveElementRelativeTo({x: 400, y: 400}, 50, 50);
+      moveElementRelativeTo({ x: 400, y: 400 }, 50, 50);
       waitToRenderAllShapes();
       cy.get(boundaryEventSelector).then($boundaryEvent => {
         cy.get(taskSelector).then($task => {
@@ -351,13 +351,13 @@ boundaryEventData.forEach(({ type, nodeType, eventXMLSnippet, taskType, invalidT
       dragFromSourceToDest(taskType, taskPosition);
       dragFromSourceToDest(nodeType, taskPosition);
       getElementAtPosition(taskPosition, nodeType).then($boundaryEvent => {
-        const overPoolPosition = {x: 450, y: 450};
-        const overTaskPosition = {x: 550, y: 350};
+        const overPoolPosition = { x: 450, y: 450 };
+        const overTaskPosition = { x: 550, y: 350 };
 
-        [overPoolPosition, overTaskPosition].forEach(({x, y}) => {
+        [overPoolPosition, overTaskPosition].forEach(({ x, y }) => {
           cy.wrap($boundaryEvent)
-            .trigger('mousedown', {which: 1, force: true})
-            .trigger('mousemove', {clientX: x, clientY: y, force: true});
+            .trigger('mousedown', { which: 1, force: true })
+            .trigger('mousemove', { clientX: x, clientY: y, force: true });
 
           waitToRenderAllShapes();
 
diff --git a/tests/e2e/specs/BoundaryMessageEvent.spec.js b/tests/e2e/specs/BoundaryMessageEvent.spec.js
index ebd4480c..9fbb9153 100644
--- a/tests/e2e/specs/BoundaryMessageEvent.spec.js
+++ b/tests/e2e/specs/BoundaryMessageEvent.spec.js
@@ -2,7 +2,7 @@ import { dragFromSourceToDest, getElementAtPosition, removeIndentationAndLinebre
 import { nodeTypes } from '../support/constants';
 
 describe('Boundary Message Event', () => {
-  const taskType = nodeTypes.callActivity;
+  const taskType = nodeTypes.subProcess;
 
   it('Render an interrupting boundary message event', function() {
     const taskPosition = { x: 200, y: 200 };
diff --git a/tests/e2e/specs/BoundaryTimerEvent.spec.js b/tests/e2e/specs/BoundaryTimerEvent.spec.js
index 07d43a3f..17c9f6ac 100644
--- a/tests/e2e/specs/BoundaryTimerEvent.spec.js
+++ b/tests/e2e/specs/BoundaryTimerEvent.spec.js
@@ -68,7 +68,7 @@ describe('Boundary Timer Event', () => {
 
     const validBoundaryTimerEventTargets = [
       { type: nodeTypes.task, position: { x: 100, y: 300 } },
-      { type: nodeTypes.callActivity, position: { x: 240, y: 300 } },
+      { type: nodeTypes.subProcess, position: { x: 240, y: 300 } },
       { type: nodeTypes.scriptTask, position: { x: 380, y: 300 } },
       { type: nodeTypes.manualTask, position: { x: 100, y: 400 } },
       { type: nodeTypes.sendTweet, position: { x: 240, y: 400 } },
diff --git a/tests/e2e/specs/ErrorEndEvent.spec.js b/tests/e2e/specs/ErrorEndEvent.spec.js
index 7a729f48..377b8229 100644
--- a/tests/e2e/specs/ErrorEndEvent.spec.js
+++ b/tests/e2e/specs/ErrorEndEvent.spec.js
@@ -23,7 +23,7 @@ describe('Error End Event', () => {
   });
 
   it('Can create an error end event', function() {
-    assertDownloadedXmlContainsExpected(errorEndEventXml, '<bpmn:error id="node_2_error" name="node_2_error" />');
+    assertDownloadedXmlContainsExpected(errorEndEventXml, '<bpmn:error id="node_3_error" name="node_3_error" />');
   });
 
   it('can edit the error end event name', () => {
diff --git a/tests/e2e/specs/EventBasedGateway.spec.js b/tests/e2e/specs/EventBasedGateway.spec.js
index 5f8e2d4c..47191626 100644
--- a/tests/e2e/specs/EventBasedGateway.spec.js
+++ b/tests/e2e/specs/EventBasedGateway.spec.js
@@ -34,7 +34,8 @@ describe('Event-Based Gateway', () => {
     connectNodesWithFlow('sequence-flow-button', eventBasedGatewayPosition, intermediateCatchEventPosition);
 
     const intermediateMessageCatchEventPosition = { x: 500, y: 100 };
-    dragFromSourceToDest(nodeTypes.intermediateMessageCatchEvent, intermediateMessageCatchEventPosition);
+    dragFromSourceToDest(nodeTypes.intermediateCatchEvent, intermediateMessageCatchEventPosition);
+    cy.get('[data-test=switch-to-intermediate-message-catch-event]').click();
     connectNodesWithFlow('sequence-flow-button', eventBasedGatewayPosition, intermediateMessageCatchEventPosition);
 
     const endEventPosition = { x: 500, y: 350 };
diff --git a/tests/e2e/specs/IntermediateMessageThrowEvent.spec.js b/tests/e2e/specs/IntermediateMessageThrowEvent.spec.js
index c45b4a0b..1da56ae1 100644
--- a/tests/e2e/specs/IntermediateMessageThrowEvent.spec.js
+++ b/tests/e2e/specs/IntermediateMessageThrowEvent.spec.js
@@ -1,76 +1,68 @@
 import {
+  assertDownloadedXmlContainsExpected,
+  assertDownloadedXmlDoesNotContainExpected,
   dragFromSourceToDest,
   getCrownButtonForElement,
   getElementAtPosition,
-  removeIndentationAndLinebreaks,
   typeIntoTextInput,
   waitToRenderAllShapes,
 } from '../support/utils';
 
 import { nodeTypes } from '../support/constants';
 
-const messageRef = 'node_2_message';
+const messageRef = 'node_3_message';
 const messageName = 'awesome message name';
-const eventXMLSnippet = `<bpmn:intermediateThrowEvent id="node_2" name="Intermediate Message Throw Event"><bpmn:messageEventDefinition messageRef="${ messageRef }" /></bpmn:intermediateThrowEvent>`;
+const eventXMLSnippet = `
+  <bpmn:intermediateThrowEvent id="node_3" name="Intermediate Message Throw Event">
+    <bpmn:messageEventDefinition messageRef="${messageRef}" />
+  </bpmn:intermediateThrowEvent>
+`;
 const messageXMLSnippet = `<bpmn:message id="${ messageRef }" name="${ messageName }" />`;
 const intermediateMessageThrowEventPosition = { x: 300, y: 200 };
 
 describe('Intermediate Message Throw Event', () => {
   it('can render an intermediate message throw event', function() {
-    dragFromSourceToDest(nodeTypes.intermediateMessageThrowEvent, intermediateMessageThrowEventPosition);
+    dragFromSourceToDest(nodeTypes.intermediateCatchEvent, intermediateMessageThrowEventPosition);
+    cy.get('[data-test=switch-to-intermediate-message-throw-event]').click();
 
     getElementAtPosition(intermediateMessageThrowEventPosition).click();
 
-    cy.get('[data-test=downloadXMLBtn]').click();
-
-    cy.window().its('xml').then(removeIndentationAndLinebreaks).then(xml => {
-      expect(xml).to.contain(eventXMLSnippet);
-    });
+    assertDownloadedXmlContainsExpected(eventXMLSnippet);
   });
 
   it('can create a message when intermediate message throw event is dragged on', function() {
-    dragFromSourceToDest(nodeTypes.intermediateMessageThrowEvent, intermediateMessageThrowEventPosition);
+    dragFromSourceToDest(nodeTypes.intermediateCatchEvent, intermediateMessageThrowEventPosition);
+    cy.get('[data-test=switch-to-intermediate-message-throw-event]').click();
 
     getElementAtPosition(intermediateMessageThrowEventPosition).click();
 
     typeIntoTextInput('[name=messageName]', messageName);
 
-    cy.get('[data-test=downloadXMLBtn]').click();
-
-    cy.window().its('xml').then(removeIndentationAndLinebreaks).then(xml => {
-      expect(xml).to.contain(eventXMLSnippet);
-      expect(xml).to.contain(messageXMLSnippet);
-    });
+    assertDownloadedXmlContainsExpected(eventXMLSnippet, messageXMLSnippet);
   });
 
   it('can remove the message when intermediate message throw event is deleted', function() {
-    dragFromSourceToDest(nodeTypes.intermediateMessageThrowEvent, intermediateMessageThrowEventPosition);
+    dragFromSourceToDest(nodeTypes.intermediateCatchEvent, intermediateMessageThrowEventPosition);
+    cy.get('[data-test=switch-to-intermediate-message-throw-event]').click();
 
     getElementAtPosition(intermediateMessageThrowEventPosition).click();
 
     typeIntoTextInput('[name=messageName]', messageName);
 
-    cy.get('[data-test=downloadXMLBtn]').click();
-
-    cy.window().its('xml').then(removeIndentationAndLinebreaks).then(xml => {
-      expect(xml).to.contain(messageXMLSnippet);
-    });
+    assertDownloadedXmlContainsExpected(messageXMLSnippet);
 
     getElementAtPosition(intermediateMessageThrowEventPosition).click().then($intermediateMessageThrowEvent => {
       getCrownButtonForElement($intermediateMessageThrowEvent, 'delete-button').click();
     });
 
-    cy.get('[data-test=downloadXMLBtn]').click();
-
-    cy.window().its('xml').then(removeIndentationAndLinebreaks).then(xml => {
-      expect(xml).to.not.contain(messageXMLSnippet);
-    });
+    assertDownloadedXmlDoesNotContainExpected(messageXMLSnippet);
   });
 
   it('retains new message name when clicking off and on intermediate message throw event', function() {
     const startEventPosition = { x: 150, y: 150 };
 
-    dragFromSourceToDest(nodeTypes.intermediateMessageThrowEvent, intermediateMessageThrowEventPosition);
+    dragFromSourceToDest(nodeTypes.intermediateCatchEvent, intermediateMessageThrowEventPosition);
+    cy.get('[data-test=switch-to-intermediate-message-throw-event]').click();
 
     getElementAtPosition(intermediateMessageThrowEventPosition).click();
 
@@ -84,10 +76,16 @@ describe('Intermediate Message Throw Event', () => {
 
   it('can associate and rename message on intermediate message catch event', function() {
     const intermediateMessageCatchEventPosition = { x: 200, y: 300 };
-    const catchEventXMLSnippet = `<bpmn:intermediateCatchEvent id="node_3" name="Intermediate Message Catch Event"><bpmn:messageEventDefinition messageRef="${ messageRef }" /></bpmn:intermediateCatchEvent>`;
+    const catchEventXMLSnippet = `
+      <bpmn:intermediateCatchEvent id="node_5" name="Intermediate Message Catch Event">
+        <bpmn:messageEventDefinition messageRef="${messageRef}" />
+      </bpmn:intermediateCatchEvent>
+    `;
 
-    dragFromSourceToDest(nodeTypes.intermediateMessageThrowEvent, intermediateMessageThrowEventPosition);
-    dragFromSourceToDest(nodeTypes.intermediateMessageCatchEvent, intermediateMessageCatchEventPosition);
+    dragFromSourceToDest(nodeTypes.intermediateCatchEvent, intermediateMessageThrowEventPosition);
+    cy.get('[data-test=switch-to-intermediate-message-throw-event]').click();
+    dragFromSourceToDest(nodeTypes.intermediateCatchEvent, intermediateMessageCatchEventPosition);
+    cy.get('[data-test=switch-to-intermediate-message-catch-event]').click();
 
     getElementAtPosition(intermediateMessageCatchEventPosition).click();
     cy.get('[name=messageRef]').select(messageRef);
@@ -98,12 +96,6 @@ describe('Intermediate Message Throw Event', () => {
     getElementAtPosition(intermediateMessageCatchEventPosition).click();
     cy.get('[name=messageRef]').should('contain', messageName);
 
-    cy.get('[data-test=downloadXMLBtn]').click();
-
-    cy.window().its('xml').then(removeIndentationAndLinebreaks).then(xml => {
-      expect(xml).to.contain(eventXMLSnippet);
-      expect(xml).to.contain(catchEventXMLSnippet);
-      expect(xml).to.contain(messageXMLSnippet);
-    });
+    assertDownloadedXmlContainsExpected(eventXMLSnippet, catchEventXMLSnippet, messageXMLSnippet);
   });
 });
diff --git a/tests/e2e/specs/MessageStartEvent.spec.js b/tests/e2e/specs/MessageStartEvent.spec.js
index 64e0c615..3e6f34ba 100644
--- a/tests/e2e/specs/MessageStartEvent.spec.js
+++ b/tests/e2e/specs/MessageStartEvent.spec.js
@@ -1,6 +1,4 @@
-import {
-  dragFromSourceToDest, assertDownloadedXmlContainsExpected, getElementAtPosition,
-} from '../support/utils';
+import { assertDownloadedXmlContainsExpected, dragFromSourceToDest, getElementAtPosition } from '../support/utils';
 import { nodeTypes } from '../support/constants';
 
 describe('Message Start Event', () => {
@@ -16,13 +14,14 @@ describe('Message Start Event', () => {
     `);
 
     const intermediateMessageThrowEvent = { x: 350, y: 350 };
-    dragFromSourceToDest(nodeTypes.intermediateMessageThrowEvent, intermediateMessageThrowEvent);
+    dragFromSourceToDest(nodeTypes.intermediateCatchEvent, intermediateMessageThrowEvent);
+    cy.get('[data-test=switch-to-intermediate-message-throw-event]').click();
     getElementAtPosition(messageStartEventPosition).click();
-    cy.contains('Listen For Message').next('select').select('node_4_message');
+    cy.contains('Listen For Message').next('select').select('node_5_message');
 
     assertDownloadedXmlContainsExpected(`
       <bpmn:startEvent id="node_3" name="Message Start Event">
-        <bpmn:messageEventDefinition messageRef="node_4_message" />
+        <bpmn:messageEventDefinition messageRef="node_5_message" />
       </bpmn:startEvent>
     `);
   });
diff --git a/tests/e2e/specs/Tasks.spec.js b/tests/e2e/specs/Tasks.spec.js
index 75aa0f37..5ad27871 100644
--- a/tests/e2e/specs/Tasks.spec.js
+++ b/tests/e2e/specs/Tasks.spec.js
@@ -34,16 +34,16 @@ describe('Tasks', () => {
     getElementAtPosition(taskPosition).getType().should('equal', nodeTypes.task);
   });
 
-  it('Can create call activity flow', function() {
+  it('Can create sub process flow', function() {
     const startEventPosition = { x: 150, y: 150 };
-    const callActivityPosition = { x: 250, y: 250 };
+    const subProcessPosition = { x: 250, y: 250 };
 
-    dragFromSourceToDest(nodeTypes.callActivity, callActivityPosition);
+    dragFromSourceToDest(nodeTypes.subProcess, subProcessPosition);
 
-    getElementAtPosition(callActivityPosition).should('exist');
+    getElementAtPosition(subProcessPosition).should('exist');
 
-    connectNodesWithFlow('sequence-flow-button', startEventPosition, callActivityPosition);
-    getElementAtPosition(callActivityPosition)
+    connectNodesWithFlow('sequence-flow-button', startEventPosition, subProcessPosition);
+    getElementAtPosition(subProcessPosition)
       .then(getLinksConnectedToElement)
       .then($links => $links[0])
       .click({ force: true });
@@ -51,10 +51,10 @@ describe('Tasks', () => {
     waitToRenderAllShapes();
 
     cy.get('.inspector-container')
-      .should('contain', 'A process has not been configured in the connected Call Activity task.');
+      .should('contain', 'A process has not been configured in the connected Sub Process task.');
     cy.get('[name=startEvent]').should('not.exist');
 
-    getElementAtPosition(callActivityPosition).click({ force: true });
+    getElementAtPosition(subProcessPosition).click({ force: true });
 
     cy.get('.inspector-container').contains('Open Process').should('not.exist');
     cy.get('.multiselect')
@@ -68,7 +68,7 @@ describe('Tasks', () => {
 
     waitToRenderAllShapes();
 
-    getElementAtPosition(callActivityPosition)
+    getElementAtPosition(subProcessPosition)
       .then(getLinksConnectedToElement)
       .then($links => $links[0])
       .click({ force: true });
@@ -76,11 +76,11 @@ describe('Tasks', () => {
     waitToRenderAllShapes();
 
     cy.get('.inspector-container')
-      .should('not.contain', 'A process has not been configured in the connected Call Activity task.');
+      .should('not.contain', 'A process has not been configured in the connected Sub Process task.');
     cy.get('[name=startEvent]').select('awesome start event');
 
     const sequenceFlowXml = '<bpmn:sequenceFlow id="node_3" name="New Sequence Flow" sourceRef="node_1" targetRef="node_2" pm:startEvent="node_2" />';
-    const callActivityXml = `<bpmn:callActivity id="node_2" name="Process with start event" calledElement="ProcessId-3">
+    const subProcessXml = `<bpmn:callActivity id="node_2" name="Process with start event" calledElement="ProcessId-3">
       <bpmn:incoming>node_3</bpmn:incoming>
     </bpmn:callActivity>`;
 
@@ -90,24 +90,24 @@ describe('Tasks', () => {
       .then(xml => xml.trim())
       .then(xml => {
         expect(xml).to.contain(sequenceFlowXml.trim());
-        expect(xml).to.contain(callActivityXml.trim());
+        expect(xml).to.contain(subProcessXml.trim());
       });
 
-    getElementAtPosition(callActivityPosition).click({ force: true });
+    getElementAtPosition(subProcessPosition).click({ force: true });
     cy.get('.multiselect')
       .click()
       .get('.multiselect__content')
       .contains('Process with start event')
       .click();
 
-    getElementAtPosition(callActivityPosition)
+    getElementAtPosition(subProcessPosition)
       .then(getLinksConnectedToElement)
       .then($links => $links[0])
       .click({ force: true });
 
     waitToRenderAllShapes();
     cy.get('.inspector-container')
-      .should('contain', 'A process has not been configured in the connected Call Activity task.');
+      .should('contain', 'A process has not been configured in the connected Sub Process task.');
 
     const emptyCallActivityXml = 'calledElement=""';
     cy.get('[data-test=downloadXMLBtn]').click();
diff --git a/tests/e2e/support/constants.js b/tests/e2e/support/constants.js
index 28d2dc69..7b8cc6ec 100644
--- a/tests/e2e/support/constants.js
+++ b/tests/e2e/support/constants.js
@@ -25,7 +25,7 @@ export const nodeTypes = {
   intermediateCatchEvent: 'processmaker-modeler-intermediate-catch-timer-event',
   intermediateMessageCatchEvent: 'processmaker-modeler-intermediate-message-catch-event',
   intermediateMessageThrowEvent: 'processmaker-modeler-intermediate-message-throw-event',
-  callActivity: 'processmaker-modeler-call-activity',
+  subProcess: 'processmaker-modeler-call-activity',
   testConnector: 'connectors-test-message',
   sendTweet: 'processmaker-connectors-social-twitter-send',
   boundaryEvent: 'processmaker-modeler-boundary-event',
diff --git a/tests/e2e/support/utils.js b/tests/e2e/support/utils.js
index 42886c79..8fbfef17 100644
--- a/tests/e2e/support/utils.js
+++ b/tests/e2e/support/utils.js
@@ -251,9 +251,11 @@ export function getXml() {
     .then(removeIndentationAndLinebreaks);
 }
 
-export function assertDownloadedXmlContainsExpected(xmlString) {
+export function assertDownloadedXmlContainsExpected(...xmlStrings) {
   getXml().then(xml => {
-    expect(xml).to.contain(removeIndentationAndLinebreaks(xmlString));
+    xmlStrings.forEach(xmlString => {
+      expect(xml).to.contain(removeIndentationAndLinebreaks(xmlString));
+    });
   });
 }
 
diff --git a/tests/unit/elementIdParser.spec.js b/tests/unit/elementIdParser.spec.js
index 4a9ce62f..5c62463e 100644
--- a/tests/unit/elementIdParser.spec.js
+++ b/tests/unit/elementIdParser.spec.js
@@ -1,4 +1,4 @@
-import { elementIdParser } from '@/components/nodes/callActivity/elementIdParser';
+import { elementIdParser } from '@/components/nodes/subProcess/elementIdParser';
 
 describe('element id parser', () => {
   it.each(['abcd-1234', 'ghghghghghgh-123', 'abcd-efgh-12345'])('should correctly parse element id %s', elementId => {