Zeebe User Tasks

lib/camunda-cloud/features/modeling/behavior/FormDefinitionBehavior.js

@@ -0,0 +1,196 @@
+
+import inherits from 'inherits';
+
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+
+import elementHelper from 'bpmn-js-properties-panel/lib/helper/ElementHelper';
+
+import {
+  getBusinessObject,
+  is
+} from 'bpmn-js/lib/util/ModelUtil';
+
+import {
+  remove as collectionRemove,
+  add as collectionAdd
+} from 'diagram-js/lib/util/Collections';
+
+import {
+  createFormDefinition,
+  createFormId,
+  createFormKey,
+  createUserTaskForm,
+  getFormDefinition,
+  getUserTaskForm
+} from '../../../helper/FormsHelper';
+
+
+/**
+ * Zeebe specific form definition behavior.
+ */
+export default function FormDefinitionBehavior(
+    eventBus, bpmnFactory) {
+
+  CommandInterceptor.call(this, eventBus);
+
+  /**
+   * ensures a zeebe:userTaskForm is cleaned up when user task got removed
+   */
+  this.executed('shape.delete', function(context) {
+    const {
+      shape,
+      oldParent
+    } = context;
+
+    const rootElement = getRootElement(oldParent);
+
+    const userTaskForm = getUserTaskForm(shape, rootElement);
+
+    const rootExtensionElements = rootElement.get('extensionElements');
+
+    if (!is(shape, 'bpmn:UserTask') || !userTaskForm) {
+      return;
+    }
+
+    collectionRemove(rootExtensionElements.get('values'), userTaskForm);
+
+    context.removedUserTaskForm = userTaskForm;
+  }, true);
+
+  this.revert('shape.delete', function(context) {
+    const {
+      removedUserTaskForm,
+      oldParent
+    } = context;
+
+    const rootElement = getRootElement(oldParent);
+
+    const rootExtensionElements = rootElement.get('extensionElements');
+
+    if (!removedUserTaskForm) {
+      return;
+    }
+
+    collectionAdd(rootExtensionElements.get('values'), removedUserTaskForm);
+  }, true);
+
+
+  /**
+   * create fresh new copied form definition + user task form
+   */
+  this.executed('shape.create', function(context) {
+    const {
+      shape,
+    } = context;
+
+    const oldFormDefinition = getFormDefinition(shape);
+
+    if (!is(shape, 'bpmn:UserTask') || !oldFormDefinition) {
+      return;
+    }
+
+    const oldUserTaskForm = getUserTaskForm(shape);
+
+    const rootElement = getRootElement(shape);
+
+    const businessObject = getBusinessObject(shape);
+
+    const extensionElements = businessObject.get('extensionElements');
+
+    let rootExtensionElements = rootElement.get('extensionElements');
+
+    // (1) ensure extension elements in root
+    if (!rootExtensionElements) {
+
+      rootExtensionElements = elementHelper.createElement(
+        'bpmn:ExtensionElements',
+        { values: [] },
+        rootElement,
+        bpmnFactory
+      );
+
+      rootElement.set('extensionElements', rootExtensionElements);
+    }
+
+    // (2) remove existing form definition
+    context.oldFormDefinition = oldFormDefinition;
+
+    collectionRemove(extensionElements.get('values'), oldFormDefinition);
+
+    const formId = createFormId();
+
+    // (3) create new form definition
+    const formDefinition = createFormDefinition(
+      {
+        formKey: createFormKey(formId)
+      },
+      extensionElements,
+      bpmnFactory
+    );
+
+    collectionAdd(extensionElements.get('values'), formDefinition);
+
+    // (4) create new user task form
+    const userTaskForm = createUserTaskForm(
+      {
+        id: formId,
+        body: oldUserTaskForm ? oldUserTaskForm.get('body') : ''
+      },
+      rootExtensionElements,
+      bpmnFactory
+    );
+
+    collectionAdd(rootExtensionElements.get('values'), userTaskForm);
+  }, true);
+
+  this.revert('shape.create', function(context) {
+    const {
+      shape,
+      oldFormDefinition
+    } = context;
+
+    const businessObject = getBusinessObject(shape);
+
+    const extensionElements = businessObject.get('extensionElements');
+
+    const formDefinition = getFormDefinition(shape);
+
+    const userTaskForm = getUserTaskForm(shape);
+
+    const rootElement = getRootElement(shape);
+
+    const rootExtensionElements = rootElement.get('extensionElements');
+
+    if (!is(shape, 'bpmn:UserTask') || !userTaskForm) {
+      return;
+    }
+
+    // we need to cover the old form definition to make <redo> possible
+    collectionRemove(extensionElements.get('values'), formDefinition);
+    collectionAdd(extensionElements.get('values'), oldFormDefinition);
+
+    collectionRemove(rootExtensionElements.get('values'), userTaskForm);
+  }, true);
+
+}
+
+FormDefinitionBehavior.$inject = [
+  'eventBus',
+  'bpmnFactory'
+];
+
+inherits(FormDefinitionBehavior, CommandInterceptor);
+
+
+// helpers //////////////
+
+function getRootElement(element) {
+  var businessObject = getBusinessObject(element),
+      parent = businessObject;
+
+  while (parent.$parent && !is(parent, 'bpmn:Process')) {
+    parent = parent.$parent;
+  }
+
+  return parent;
+}

lib/camunda-cloud/features/modeling/behavior/index.js

@@ -1,15 +1,18 @@
 import CreateZeebeBoundaryEventBehavior from './CreateZeebeBoundaryEventBehavior';
 import CreateZeebeCallActivityBehavior from './CreateZeebeCallActivityBehavior';
 import UpdatePropagateAllChildVariablesBehavior from './UpdatePropagateAllChildVariablesBehavior';
+import FormDefinitionBehavior from './FormDefinitionBehavior';
 
 
 export default {
   __init__: [
     'createZeebeBoundaryEventBehavior',
     'createZeebeCallActivityBehavior',
-    'updatePropagateAllChildVariablesBehavior'
+    'updatePropagateAllChildVariablesBehavior',
+    'formDefinitionBehavior'
   ],
   createZeebeBoundaryEventBehavior: [ 'type', CreateZeebeBoundaryEventBehavior ],
   createZeebeCallActivityBehavior: [ 'type', CreateZeebeCallActivityBehavior ],
-  updatePropagateAllChildVariablesBehavior: [ 'type', UpdatePropagateAllChildVariablesBehavior ]
+  updatePropagateAllChildVariablesBehavior: [ 'type', UpdatePropagateAllChildVariablesBehavior ],
+  formDefinitionBehavior: [ 'type', FormDefinitionBehavior ]
 };

lib/camunda-cloud/features/popup-menu/ReplaceOptions.js

@@ -31,7 +31,8 @@ export const REPLACE_OPTIONS = [
   'replace-with-non-interrupting-timer-start',
   'replace-with-expanded-pool',
   'replace-with-collapsed-pool',
-  'replace-with-call-activity'
+  'replace-with-call-activity',
+  'replace-with-user-task'
 ];
 
 export const HEADER_OPTIONS = [

lib/camunda-cloud/features/properties-provider/ZeebePropertiesProvider.js

@@ -26,6 +26,8 @@ import errorProps from './parts/ErrorProps';
 
 import callActivityProps from './parts/CallActivityProps';
 
+import formProps from './parts/FormProps';
+
 import { is } from 'bpmn-js/lib/util/ModelUtil';
 
 function getIdOptions(element) {
@@ -78,6 +80,21 @@ function createGeneralTabGroups(element, bpmnFactory, canvas, translate) {
   ];
 }
 
+function createFormsGroups(element, bpmnFactory, translate) {
+
+  const formsGroups = {
+    id: 'forms-properties',
+    label: translate('Forms'),
+    entries: []
+  };
+  formProps(formsGroups, element, bpmnFactory, translate);
+
+
+  return [
+    formsGroups
+  ];
+}
+
 function createHeadersGroups(element, bpmnFactory, translate) {
 
   const headersGroup = {
@@ -144,6 +161,14 @@ export default class ZeebePropertiesProvider extends PropertiesActivator {
         element, this._bpmnFactory, this._canvas, this._translate)
     };
 
+    const formsTab = {
+      id: 'forms',
+      label: this._translate('Forms'),
+      groups: createFormsGroups(
+        element, this._bpmnFactory, this._translate
+      )
+    };
+
     const inputOutputTab = {
       id: 'input-output',
       label: this._translate('Input/Output'),
@@ -160,6 +185,7 @@ export default class ZeebePropertiesProvider extends PropertiesActivator {
 
     return [
       generalTab,
+      formsTab,
       inputOutputTab,
       headersTab
     ];

lib/camunda-cloud/features/properties-provider/parts/FormProps.js

@@ -0,0 +1,14 @@
+import {
+  isAny
+} from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
+
+import formDefinition from './implementation/FormDefinition';
+
+export default function(group, element, bpmnFactory, translate) {
+
+  if (!isAny(element, [ 'bpmn:UserTask' ])) {
+    return;
+  }
+
+  group.entries = group.entries.concat(formDefinition(element, bpmnFactory, translate));
+}

lib/camunda-cloud/features/properties-provider/parts/HeadersProps.js

@@ -5,12 +5,12 @@ import elementHelper from 'bpmn-js-properties-panel/lib/helper/ElementHelper';
 import cmdHelper from 'bpmn-js-properties-panel/lib/helper/CmdHelper';
 
 import {
-  is
-} from 'bpmn-js/lib/util/ModelUtil';
+  isAny
+} from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
 
 export default function(group, element, bpmnFactory, translate) {
 
-  if (!is(element, 'bpmn:ServiceTask')) {
+  if (!canHaveHeaders(element)) {
     return;
   }
 
@@ -38,3 +38,13 @@ export default function(group, element, bpmnFactory, translate) {
   }
 
 }
+
+
+// helpers ////////////////
+
+function canHaveHeaders(element) {
+  return isAny(element, [
+    'bpmn:ServiceTask',
+    'bpmn:UserTask'
+  ]);
+}