C7 Template groups

package.json

@@ -47,7 +47,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@bpmn-io/element-templates-validator": "^0.3.0",
+    "@bpmn-io/element-templates-validator": "^0.4.0",
     "@bpmn-io/extract-process-variables": "^0.4.4",
     "array-move": "^3.0.1",
     "classnames": "^2.3.1",

src/provider/element-templates/properties/CustomProperties.js

@@ -1,4 +1,7 @@
 import {
+  forEach,
+  find,
+  groupBy,
   isArray,
   isString,
   isUndefined
@@ -85,6 +88,11 @@ const PRIMITIVE_MODDLE_TYPES = [
   'String'
 ];
 
+const DEFAULT_CUSTOM_GROUP = {
+  id: 'ElementTemplates__CustomProperties',
+  label: 'Custom properties'
+};
+
 
 export function CustomProperties(props) {
   const {
@@ -96,58 +104,102 @@ export function CustomProperties(props) {
 
   const {
     id,
+    properties,
+    groups: propertyGroups,
     scopes
   } = elementTemplate;
 
-  const customPropertiesGroup = {
-    id: 'ElementTemplates__CustomProperties',
-    label: 'Custom properties',
-    component: Group,
-    entries: []
-  };
+  // (1) group properties by group id
+  const groupedProperties = groupByGroupId(properties);
+  const defaultProps = [];
 
-  elementTemplate.properties.forEach((property, index) => {
-    const entry = createCustomEntry(`custom-entry-${ id }-${ index }`, element, property);
+  forEach(groupedProperties, (properties, groupId) => {
 
-    if (entry) {
-      customPropertiesGroup.entries.push(entry);
+    const group = findCustomGroup(propertyGroups, groupId);
+
+    if (!group) {
+      return defaultProps.push(...properties);
     }
+
+    addCustomGroup(groups, {
+      element,
+      id: `ElementTemplates__CustomProperties-${groupId}`,
+      label: group.label,
+      properties: properties,
+      templateId: `${id}-${groupId}`
+    });
   });
 
-  if (customPropertiesGroup.entries.length) {
-    groups.push(customPropertiesGroup);
+  // (2) add default custom props
+  if (defaultProps.length) {
+    addCustomGroup(groups, {
+      ...DEFAULT_CUSTOM_GROUP,
+      element,
+      properties: defaultProps,
+      templateId: id
+    });
   }
 
+  // (3) add custom scopes props
   if (isArray(scopes)) {
     scopes.forEach((scope) => {
-      const { type } = scope;
+      const {
+        properties,
+        type
+      } = scope;
 
       const id = type.replace(/:/g, '-');
 
-      const scopeGroup = {
+      addCustomGroup(groups, {
+        element,
         id: `ElementTemplates__CustomGroup-${ id }`,
         label: `Custom properties for scope <${ type }>`,
-        component: Group,
-        entries: []
-      };
-
-      scope.properties.forEach((property, index) => {
-        const entry = createCustomEntry(`custom-entry-${ id }-${ index }`, element, property, scope);
-
-        if (entry) {
-          scopeGroup.entries.push(entry);
-        }
+        properties,
+        templateId: id,
+        scope
       });
-
-      if (scopeGroup.entries.length) {
-        groups.push(scopeGroup);
-      }
     });
   }
 
   return groups;
 }
 
+function addCustomGroup(groups, props) {
+
+  const {
+    element,
+    id,
+    label,
+    properties,
+    scope,
+    templateId
+  } = props;
+
+  const customPropertiesGroup = {
+    id,
+    label,
+    component: Group,
+    entries: []
+  };
+
+  properties.forEach((property, index) => {
+    const entry = createCustomEntry(
+      `custom-entry-${ templateId }-${ index }`,
+      element,
+      property,
+      scope
+    );
+
+    if (entry) {
+      customPropertiesGroup.entries.push(entry);
+    }
+  });
+
+  if (customPropertiesGroup.entries.length) {
+    groups.push(customPropertiesGroup);
+  }
+}
+
 function createCustomEntry(id, element, property, scope) {
   let { type } = property;
 
@@ -934,4 +986,12 @@ function isEmptyString(string) {
 
 function matchesPattern(string, pattern) {
   return new RegExp(pattern).test(string);
+}
+
+function groupByGroupId(properties) {
+  return groupBy(properties, 'group');
+}
+
+function findCustomGroup(groups, id) {
+  return find(groups, g => g.id === id);
 }

test/spec/provider/element-templates/Validator.spec.js

@@ -594,5 +594,42 @@ describe('provider/element-templates - Validator', function() {
     });
 
 
+    describe('grouping', function() {
+
+      it('should accept groups', function() {
+
+        // given
+        const templates = new Validator();
+
+        const templateDescriptor = require('./fixtures/groups');
+
+        // when
+        templates.addAll(templateDescriptor);
+
+        // then
+        expect(errors(templates)).to.be.empty;
+
+        expect(valid(templates)).to.have.length(templateDescriptor.length);
+      });
+
+
+      it('should not accept missing group id', function() {
+
+        // given
+        const templates = new Validator();
+
+        const templateDescriptor = require('./fixtures/error-groups-missing-id');
+
+        // when
+        templates.addAll(templateDescriptor);
+
+        // then
+        expect(errors(templates)).to.contain('template(id: <example.com.missingGroupId>, name: <Missing group id>): missing id for group "0"');
+
+        expect(valid(templates)).to.be.empty;
+      });
+
+    });
+
   });
 });

test/spec/provider/element-templates/fixtures/complex.bpmn

@@ -164,6 +164,20 @@
         </camunda:inputOutput>
       </bpmn:extensionElements>
     </bpmn:serviceTask>
+    <bpmn:task id="Activity_1r9ysfw" name="MailTask (groups)" camunda:modelerTemplate="my.mail.Task-groups">
+      <bpmn:extensionElements>
+        <camunda:inputOutput>
+          <camunda:inputParameter name="recipient" />
+          <camunda:inputParameter name="messageBody">
+            <camunda:script scriptFormat="freemarker">Hello ${firstName}!</camunda:script>
+          </camunda:inputParameter>
+          <camunda:inputParameter name="hiddenField">SECRET</camunda:inputParameter>
+          <camunda:outputParameter name="mailResult">
+            <camunda:script scriptFormat="freemarker">${mailResult}</camunda:script>
+          </camunda:outputParameter>
+        </camunda:inputOutput>
+      </bpmn:extensionElements>
+    </bpmn:task>
   </bpmn:process>
   <bpmn:error id="Error_error-1_xyz" name="error-name" errorCode="my-code" camunda:errorMessage="foo" />
   <bpmn:error id="Error_error-1_20b3oqr" name="error-name" errorCode="my-code" camunda:errorMessage="error-message" />
@@ -268,6 +282,9 @@
       <bpmndi:BPMNShape id="Activity_03q2cpk_di" bpmnElement="Activity_1cut0pe">
         <dc:Bounds x="760" y="440" width="100" height="80" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_1r9ysfw_di" bpmnElement="Activity_1r9ysfw">
+        <dc:Bounds x="930" y="80" width="100" height="80" />
+      </bpmndi:BPMNShape>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
 </bpmn:definitions>

test/spec/provider/element-templates/fixtures/complex.json

@@ -155,6 +155,65 @@
       }
     ]
   },
+  {
+    "name": "MailTask (Groups)",
+    "id": "my.mail.Task-groups",
+    "appliesTo": [
+      "bpmn:Task"
+    ],
+    "groups": [
+      {
+        "id": "input",
+        "label": "Request parameters"
+      },
+      {
+        "id": "output",
+        "label": "Response mapping"
+      }
+    ],
+    "properties": [
+      {
+        "label": "Recipient",
+        "group": "input",
+        "type": "String",
+        "binding": {
+          "type": "camunda:inputParameter",
+          "name": "recipient"
+        }
+      },
+      {
+        "label": "Template",
+        "group": "input",
+        "type": "Text",
+        "description": "By the way, you can use freemarker templates ${...} here",
+        "value": "Hello ${firstName}!",
+        "binding": {
+          "type": "camunda:inputParameter",
+          "name": "messageBody",
+          "scriptFormat": "freemarker"
+        }
+      },
+      {
+        "label": "Ergebnisvariable",
+        "type": "String",
+        "group": "output",
+        "value": "mailResult",
+        "binding": {
+          "type": "camunda:outputParameter",
+          "source": "${mailResult}",
+          "scriptFormat": "freemarker"
+        }
+      },
+      {
+        "type": "Hidden",
+        "value": "SECRET",
+        "binding": {
+          "type": "camunda:inputParameter",
+          "name": "hiddenField"
+        }
+      }
+    ]
+  },
   {
     "name": "OldAsyncAwesomeTask",
     "id": "my.awesome.Task",

test/spec/provider/element-templates/fixtures/error-groups-missing-id.json

@@ -0,0 +1,23 @@
+[
+  {
+    "name": "Missing group id",
+    "id": "example.com.missingGroupId",
+    "appliesTo": [
+      "bpmn:ServiceTask"
+    ],
+    "properties": [],
+    "groups": [
+      {
+        "label": "Group one"
+      },
+      {
+        "id": "two",
+        "label": "Group two"
+      },
+      {
+        "id": "three",
+        "label": "Group three"
+      }
+    ]
+  }
+]