feat(templates): indicate newest element template

Closes #399
bpmn-io · Dec 16, 2020 · 8900300 · 8900300
1 parent 1e839b3
commit 8900300
Show file tree

Hide file tree

Showing 5 changed files with 276 additions and 35 deletions.
diff --git a/lib/provider/camunda/CamundaPropertiesProvider.js b/lib/provider/camunda/CamundaPropertiesProvider.js
@@ -148,14 +148,24 @@ function getProcessOptions(element) {
   }
 }
 
-function createElementTemplateGroups(element, bpmnFactory, canvas, elementTemplates, modeling, replace, selection, translate) {
+function createElementTemplateGroups(
+    element,
+    bpmnFactory,
+    canvas,
+    commandStack,
+    elementTemplates,
+    modeling,
+    replace,
+    selection,
+    translate) {
   var templateId = getTemplateId(element);
 
   if (!templateId) {
     return [];
   }
 
-  var descriptionGroup = elementTemplateDescriptionProps(element, elementTemplates, modeling, replace, selection, translate);
+  var descriptionGroup = elementTemplateDescriptionProps(
+    element, commandStack, elementTemplates, modeling, replace, selection, translate);
 
   var idOptions = getIdOptions(element) || {};
 
@@ -485,6 +495,7 @@ function createExtensionElementsGroups(element, bpmnFactory, elementRegistry, tr
 function CamundaPropertiesProvider(
     bpmnFactory,
     canvas,
+    commandStack,
     elementRegistry,
     elementTemplates,
     eventBus,
@@ -509,7 +520,16 @@ function CamundaPropertiesProvider(
       id: 'element-template',
       label: translate('Template'),
       groups: createElementTemplateGroups(
-        element, bpmnFactory, canvas, elementTemplates, modeling, replace, selection, translate)
+        element,
+        bpmnFactory,
+        canvas,
+        commandStack,
+        elementTemplates,
+        modeling,
+        replace,
+        selection,
+        translate
+      )
     };
 
     var variablesTab = {
@@ -588,6 +608,7 @@ function CamundaPropertiesProvider(
 CamundaPropertiesProvider.$inject = [
   'bpmnFactory',
   'canvas',
+  'commandStack',
   'elementRegistry',
   'elementTemplates',
   'eventBus',

diff --git a/lib/provider/camunda/element-templates/parts/DescriptionProps.js b/lib/provider/camunda/element-templates/parts/DescriptionProps.js
@@ -8,19 +8,39 @@ var domClasses = require('min-dom').classes,
     domify = require('min-dom').domify,
     domQuery = require('min-dom').query;
 
+var isUndefined = require('lodash/isUndefined');
+
 var getBusinessObject = require('bpmn-js/lib/util/ModelUtil').getBusinessObject;
 
 var MAX_DESCRIPTION_LENGTH = 200;
 
-module.exports = function(element, elementTemplates, modeling, replace, selection, translate) {
-  var elementTemplate = elementTemplates.get(element);
+module.exports = function(
+    element,
+    commandStack,
+    elementTemplates,
+    modeling,
+    replace,
+    selection,
+    translate) {
+  var currentElementTemplate = elementTemplates.get(element);
 
   var entries = [];
 
-  var description;
+  var description,
+      newestElementTemplate;
+
+  if (currentElementTemplate) {
+    newestElementTemplate = findNewestElementTemplate(elementTemplates, currentElementTemplate);
+
+    if (newestElementTemplate) {
+      entries.push({
+        id: 'element-template-update',
+        cssClasses: [ 'bpp-entry--warning' ],
+        html: createUpdateTemplateEntry(element, currentElementTemplate, newestElementTemplate, commandStack, translate)
+      });
+    }
 
-  if (elementTemplate) {
-    description = elementTemplate.description;
+    description = currentElementTemplate.description;
 
     if (description) {
       entries.push(createDescriptionEntry(description, translate));
@@ -33,7 +53,7 @@ module.exports = function(element, elementTemplates, modeling, replace, selectio
     });
   }
 
-  var version = getTemplateVersion(element);
+  var version = getVersionOrDateFromElement(element);
 
   if (version) {
     entries.push({
@@ -44,7 +64,7 @@ module.exports = function(element, elementTemplates, modeling, replace, selectio
 
   return {
     id: 'elementTemplateDescription',
-    label: elementTemplate ? elementTemplate.name : translate('Missing Template'),
+    label: currentElementTemplate ? currentElementTemplate.name : translate('Missing Template'),
     dropdown: {
       menu: [
         {
@@ -175,4 +195,102 @@ function createTemplateNotFoundEntry(element, modeling, translate) {
   });
 
   return html;
+}
+
+function createUpdateTemplateEntry(element, oldElementTemplate, newElementTemplate, commandStack, translate) {
+  var newElementTemplateVersion = getVersionOrDateFromTemplate(newElementTemplate);
+
+  var html = domify(
+    '<p>' +
+    translate(
+      'A new version of the Template ({newElementTemplateVersion}) is available.',
+      { newElementTemplateVersion: newElementTemplateVersion }
+    ) +
+    '</p>' +
+    '<p style="text-align: right;">' +
+    '<a class="bpp-entry-link bpp-entry-link-button">Update</a>' +
+    '</p>'
+  );
+
+  domQuery('.bpp-entry-link', html).addEventListener('click', function() {
+    commandStack.execute('propertiesPanel.camunda.changeTemplate', {
+      element: element,
+      newTemplate: newElementTemplate,
+      oldTemplate: oldElementTemplate
+    });
+  });
+
+  return html;
+}
+
+function findNewestElementTemplate(elementTemplates, currentElementTemplate) {
+  if (isUndefined(currentElementTemplate.version)) {
+    return null;
+  }
+
+  return elementTemplates
+    .getAll()
+    .filter(function(elementTemplate) {
+      return currentElementTemplate.id === elementTemplate.id && !isUndefined(elementTemplate.version);
+    })
+    .reduce(function(newestElementTemplate, elementTemplate) {
+      if (currentElementTemplate.version < elementTemplate.version) {
+        return elementTemplate;
+      }
+
+      if (newestElementTemplate && newestElementTemplate.version < elementTemplate.version) {
+        return elementTemplate;
+      }
+
+      return newestElementTemplate;
+    }, null);
+}
+
+function leftPad(string, length, character) {
+  while (string.length < length) {
+    string = character + string;
+  }
+
+  return string;
+}
+
+function getVersionOrDateFromElement(element) {
+  var version = getTemplateVersion(element);
+
+  if (isUndefined(version)) {
+    return null;
+  }
+
+  return 'Version ' + (toDateString(version) || version);
+}
+
+function getVersionOrDateFromTemplate(template) {
+  var metadata = template.metadata,
+      version = template.version;
+
+  if (metadata) {
+    if (!isUndefined(metadata.created)) {
+      return 'Version ' + toDateString(metadata.created);
+    } else if (!isUndefined(metadata.updated)) {
+      return 'Version ' + toDateString(metadata.updated);
+    }
+  }
+
+  if (isUndefined(version)) {
+    return null;
+  }
+
+  return 'Version ' + version;
+}
+
+function toDateString(timestamp) {
+  var date = new Date(timestamp);
+
+  var year = date.getFullYear();
+
+  var month = leftPad(String(date.getMonth() + 1), 2, '0');
+
+  var day = leftPad(String(date.getDate()), 2, '0');
+
+  return day + '.' + month + '.' + year;
 }
diff --git a/test/spec/provider/camunda/element-templates/parts/DescriptionProps.bpmn b/test/spec/provider/camunda/element-templates/parts/DescriptionProps.bpmn
@@ -1,32 +1,39 @@
 <?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:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_1ysjldv" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="4.0.0">
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_1ysjldv" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="4.5.0-nightly.20201214">
   <bpmn:process id="Process_1" isExecutable="true">
-    <bpmn:task id="Task" name="Task" camunda:modelerTemplate="task" />
-    <bpmn:task id="Task_Description" name="Task_Description" camunda:modelerTemplate="task.description" camunda:modelerTemplateVersion="1" camunda:asyncBefore="true" />
-    <bpmn:task id="Task_TemplateNotFound" name="Task_TemplateNotFound" camunda:modelerTemplate="task.noTemplate" camunda:modelerTemplateVersion="1" />
-    <bpmn:startEvent id="StartEvent_Template" name="StartEvent_Template" camunda:modelerTemplate="StartEvent_Template" camunda:modelerTemplateVersion="1" camunda:asyncBefore="true">
+    <bpmn:task id="Task" name="Task" camunda:modelerTemplate="Task" />
+    <bpmn:task id="Task_Description" name="Task_Description v1" camunda:modelerTemplate="Task_Description" camunda:modelerTemplateVersion="1" camunda:asyncBefore="true" />
+    <bpmn:task id="Task_TemplateNotFound" name="Task_TemplateNotFound v1" camunda:modelerTemplate="Task_TemplateNotFound" camunda:modelerTemplateVersion="1" />
+    <bpmn:startEvent id="StartEvent" name="StartEvent v1" camunda:modelerTemplate="StartEvent" camunda:modelerTemplateVersion="1">
       <bpmn:conditionalEventDefinition id="ConditionalEventDefinition_1iu9k3o">
         <bpmn:condition xsi:type="bpmn:tFormalExpression" />
       </bpmn:conditionalEventDefinition>
     </bpmn:startEvent>
+    <bpmn:endEvent id="EndEvent" name="EndEvent v2" camunda:modelerTemplate="EndEvent" camunda:modelerTemplateVersion="2" />
   </bpmn:process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
-      <bpmndi:BPMNShape id="Activity_147d7ub_di" bpmnElement="Task">
+      <bpmndi:BPMNShape id="Task_di" bpmnElement="Task">
         <dc:Bounds x="160" y="60" width="100" height="80" />
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNShape id="Activity_1ydrgd8_di" bpmnElement="Task_Description">
+      <bpmndi:BPMNShape id="Task_Description_di" bpmnElement="Task_Description">
         <dc:Bounds x="350" y="60" width="100" height="80" />
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNShape id="Activity_01zv0pp_di" bpmnElement="Task_TemplateNotFound">
+      <bpmndi:BPMNShape id="Task_TemplateNotFound_di" bpmnElement="Task_TemplateNotFound">
         <dc:Bounds x="540" y="60" width="100" height="80" />
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNShape id="Event_10cvtz7_di" bpmnElement="StartEvent_Template">
+      <bpmndi:BPMNShape id="StartEvent_di" bpmnElement="StartEvent">
         <dc:Bounds x="192" y="232" width="36" height="36" />
         <bpmndi:BPMNLabel>
           <dc:Bounds x="167" y="275" width="87" height="27" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="EndEvent_di" bpmnElement="EndEvent">
+        <dc:Bounds x="382" y="232" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="360" y="275" width="84" height="27" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
 </bpmn:definitions>
diff --git a/test/spec/provider/camunda/element-templates/parts/DescriptionProps.json b/test/spec/provider/camunda/element-templates/parts/DescriptionProps.json
@@ -1,20 +1,16 @@
 [
   {
-    "name": "Task",
-    "id": "task",
-    "version": 1,
+    "name": "Task v1",
+    "id": "Task",
     "appliesTo": [
       "bpmn:Task"
     ],
     "properties": []
   },
   {
-    "name": "Task_Description",
+    "name": "Task_Description v1",
     "description": "Description",
-    "metadata": {
-      "lastModified": 1000000000000
-    },
-    "id": "task.description",
+    "id": "Task_Description",
     "version": 1,
     "appliesTo": [
       "bpmn:Task"
@@ -32,12 +28,8 @@
     ]
   },
   {
-    "name": "StartEvent_Template",
-    "description": "Description",
-    "metadata": {
-      "lastModified": 1000000000000
-    },
-    "id": "startEvent.template",
+    "name": "StartEvent v1",
+    "id": "StartEvent",
     "version": 1,
     "appliesTo": [
       "bpmn:StartEvent"
@@ -53,5 +45,42 @@
         }
       }
     ]
+  },
+  {
+    "name": "StartEvent v2",
+    "id": "StartEvent",
+    "version": 2,
+    "appliesTo": [
+      "bpmn:StartEvent"
+    ],
+    "properties": [
+      {
+        "label": "Async Before",
+        "type": "Boolean",
+        "value": true,
+        "binding": {
+          "type": "property",
+          "name": "camunda:asyncBefore"
+        }
+      }
+    ]
+  },
+  {
+    "name": "EndEvent v1",
+    "id": "EndEvent",
+    "version": 1,
+    "appliesTo": [
+      "bpmn:EndEvent"
+    ],
+    "properties": []
+  },
+  {
+    "name": "EndEvent v2",
+    "id": "EndEvent",
+    "version": 2,
+    "appliesTo": [
+      "bpmn:EndEvent"
+    ],
+    "properties": []
   }
 ]