fix(render): use template version

Related to camunda/camunda-modeler#2920
bpmn-io · Apr 22, 2022 · 1e5c414 · 1e5c414
1 parent 90eaf24
commit 1e5c414
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 3 deletions.
diff --git a/src/render/PanelHeaderProvider.js b/src/render/PanelHeaderProvider.js
@@ -184,8 +184,7 @@ function getTemplatesService() {
 }
 
 function getTemplate(element, elementTemplates) {
-  const templateId = elementTemplates._getTemplateId(element);
-  return templateId && elementTemplates.get(templateId);
+  return elementTemplates.get(element);
 }
 
 function getTemplateDocumentation(element, elementTemplates) {

diff --git a/test/spec/PanelHeaderProvider.spec.js b/test/spec/PanelHeaderProvider.spec.js
@@ -298,6 +298,43 @@ describe('<PanelHeaderProvider>', function() {
       expect(templateIconNode.src).to.eql(template.icon.contents);
     });
 
+
+    it('should get template icon - versioned', function() {
+
+      // given
+      const element = createElement('bpmn:Task');
+
+      const template = {
+        id: 'foo',
+        version: 1,
+        icon: {
+          contents: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /%3E%3C/svg%3E"
+        }
+      };
+
+      const elementTemplates = {
+        get: () => { return template; },
+        getTemplateId: () => 'foo',
+        getTemplateVersion: () => 1
+      };
+
+      const context = {
+        getService: () => {
+          return new ElementTemplates(elementTemplates);
+        }
+      };
+
+      // when
+      const result = createHeader({ container, element, context });
+
+      const iconNode = domQuery('.bio-properties-panel-header-icon', result.container);
+      const templateIconNode = domQuery('.bio-properties-panel-header-template-icon', iconNode);
+
+      // then
+      expect(templateIconNode).to.exist;
+      expect(templateIconNode.src).to.eql(template.icon.contents);
+    });
+
   });
 
 
@@ -378,6 +415,36 @@ describe('<PanelHeaderProvider>', function() {
       expect(typeNode.innerText).to.equal('TEMPLATE TASK');
     });
 
+
+    it('should get element template name - versioned', function() {
+
+      // given
+      const element = createElement('bpmn:Task', {
+        name: 'foo'
+      });
+
+      const elementTemplates = {
+        get: () => { return { id: 'foo', version: 1, name: 'Template Task' }; },
+        getTemplateId: () => 'foo',
+        getTemplateVersion: () => '1'
+      };
+
+      const context = {
+        getService: () => {
+          return new ElementTemplates(elementTemplates);
+        }
+      };
+
+      // when
+      const result = createHeader({ container, element, context });
+
+      const typeNode = domQuery('.bio-properties-panel-header-type', result.container);
+
+      // then
+      expect(typeNode).to.exist;
+      expect(typeNode.innerText).to.equal('TEMPLATE TASK');
+    });
+
   });
 
 
@@ -865,6 +932,36 @@ describe('<PanelHeaderProvider>', function() {
       expect(documentationNode.href).to.eql('https://example.com/');
     });
 
+
+    it('should get element template documentationRef - versioned', function() {
+
+      // given
+      const element = createElement('bpmn:Task', {
+        name: 'foo'
+      });
+
+      const elementTemplates = {
+        get: () => { return { id: 'foo', version: 1, documentationRef: 'https://example.com/' }; },
+        getTemplateId: () => true,
+        getTemplateVersion: () => '1'
+      };
+
+      const context = {
+        getService: () => {
+          return new ElementTemplates(elementTemplates);
+        }
+      };
+
+      // when
+      const result = createHeader({ container, element, context });
+
+      const documentationNode = domQuery('.bio-properties-panel-header-link', result.container);
+
+      // then
+      expect(documentationNode).to.exist;
+      expect(documentationNode.href).to.eql('https://example.com/');
+    });
+
   });
 
 });
@@ -876,11 +973,13 @@ class ElementTemplates {
   constructor(options = {}) {
     const {
       get,
-      getTemplateId
+      getTemplateId,
+      getTemplateVersion
     } = options;
 
     this._getFn = get;
     this._getTemplateIdFn = getTemplateId;
+    this._getTemplateVersionFn = getTemplateVersion;
   }
 
   get(element) {
@@ -890,6 +989,10 @@ class ElementTemplates {
   _getTemplateId(element) {
     return this._getTemplateIdFn ? this._getTemplateIdFn(element) : null;
   }
+
+  _getTemplateVersion(element) {
+    return this._getTemplateVersionFn ? this._getTemplateVersionFn(element) : null;
+  }
 }
 
 function createHeader(options = {}) {

diff --git a/test/spec/provider/cloud-element-templates/fixtures/complex.json b/test/spec/provider/cloud-element-templates/fixtures/complex.json
@@ -212,6 +212,10 @@
     "appliesTo": [
       "bpmn:ServiceTask"
     ],
+    "documentationRef": "https://docs.camunda.io",
+    "icon": {
+      "contents": "data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 2.5H8A5.5 5.5 0 0 0 2.5 8v8A5.5 5.5 0 0 0 8 21.5h8a5.5 5.5 0 0 0 5.5-5.5V8A5.5 5.5 0 0 0 16 2.5ZM8 1a7 7 0 0 0-7 7v8a7 7 0 0 0 7 7h8a7 7 0 0 0 7-7V8a7 7 0 0 0-7-7H8Z' fill='%23505562'/%3E%3Cpath d='M8.283 6.76v1.21c-.224 0-.416.02-.578.06a.612.612 0 0 0-.357.21c-.077.099-.106.242-.088.429l.17 1.622c.044.41-.001.742-.137.995a1.328 1.328 0 0 1-.61.584 3.306 3.306 0 0 1-.963.28c.392.059.724.154.995.286.272.132.47.323.594.572.125.25.165.583.121 1.001l-.17 1.623c-.018.183.011.326.088.429a.62.62 0 0 0 .363.209c.161.04.352.06.572.06v1.21c-.506 0-.935-.037-1.287-.11-.352-.073-.634-.19-.847-.352a1.214 1.214 0 0 1-.435-.627c-.077-.257-.097-.57-.06-.94l.165-1.573c.03-.28-.018-.497-.143-.655-.121-.158-.3-.268-.54-.33a3.102 3.102 0 0 0-.824-.099v-1.408c.308 0 .581-.031.82-.094.238-.066.42-.177.544-.335.125-.158.172-.376.143-.654L5.654 8.8c-.04-.378-.022-.697.055-.957.08-.26.225-.47.434-.627.213-.162.495-.277.847-.347a6.54 6.54 0 0 1 1.293-.11ZM9.527 16v-1.166h.77v-3.52h-.77v-1.155h2.096l.319 1.314c.209-.502.474-.876.797-1.122.326-.245.724-.368 1.194-.368a2.535 2.535 0 0 1 .962.176l-.528 1.435a2.48 2.48 0 0 0-.67-.087c-.382 0-.718.155-1.007.467-.286.312-.505.708-.655 1.188v1.672h1.155V16H9.527Zm3.955-3.399v-1.705l.258-.737h1.155l-.324 2.442h-1.09Zm2.239-5.841c.506 0 .935.037 1.287.11.352.073.633.19.842.352.212.158.36.367.44.627.08.257.1.57.06.94l-.165 1.574c-.029.278.019.496.143.654.125.158.305.27.54.335.238.063.513.094.824.094v1.408c-.308 0-.58.033-.82.099a.985.985 0 0 0-.544.33c-.124.158-.172.376-.143.655l.165 1.561c.04.378.02.697-.06.957-.077.26-.222.47-.435.628-.209.16-.491.276-.847.346a6.44 6.44 0 0 1-1.287.11v-1.21c.224 0 .415-.02.572-.06a.59.59 0 0 0 .358-.21c.08-.102.112-.245.093-.428l-.17-1.623c-.044-.414 0-.746.132-.995.136-.253.34-.446.616-.578.275-.136.598-.231.968-.286a3.52 3.52 0 0 1-1.001-.286 1.251 1.251 0 0 1-.594-.572c-.125-.253-.165-.587-.121-1.001l.17-1.622c.019-.187-.012-.33-.093-.43a.59.59 0 0 0-.358-.208 2.338 2.338 0 0 0-.572-.061V6.76Z' fill='%23505562'/%3E%3C/svg%3E"
+    },
     "version": 1,
     "properties": [
       {
@@ -283,6 +287,10 @@
     "appliesTo": [
       "bpmn:ServiceTask"
     ],
+    "documentationRef": "https://docs.camunda.io",
+    "icon": {
+      "contents": "data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 2.5H8A5.5 5.5 0 0 0 2.5 8v8A5.5 5.5 0 0 0 8 21.5h8a5.5 5.5 0 0 0 5.5-5.5V8A5.5 5.5 0 0 0 16 2.5ZM8 1a7 7 0 0 0-7 7v8a7 7 0 0 0 7 7h8a7 7 0 0 0 7-7V8a7 7 0 0 0-7-7H8Z' fill='%23505562'/%3E%3Cpath d='M8.283 6.76v1.21c-.224 0-.416.02-.578.06a.612.612 0 0 0-.357.21c-.077.099-.106.242-.088.429l.17 1.622c.044.41-.001.742-.137.995a1.328 1.328 0 0 1-.61.584 3.306 3.306 0 0 1-.963.28c.392.059.724.154.995.286.272.132.47.323.594.572.125.25.165.583.121 1.001l-.17 1.623c-.018.183.011.326.088.429a.62.62 0 0 0 .363.209c.161.04.352.06.572.06v1.21c-.506 0-.935-.037-1.287-.11-.352-.073-.634-.19-.847-.352a1.214 1.214 0 0 1-.435-.627c-.077-.257-.097-.57-.06-.94l.165-1.573c.03-.28-.018-.497-.143-.655-.121-.158-.3-.268-.54-.33a3.102 3.102 0 0 0-.824-.099v-1.408c.308 0 .581-.031.82-.094.238-.066.42-.177.544-.335.125-.158.172-.376.143-.654L5.654 8.8c-.04-.378-.022-.697.055-.957.08-.26.225-.47.434-.627.213-.162.495-.277.847-.347a6.54 6.54 0 0 1 1.293-.11ZM9.527 16v-1.166h.77v-3.52h-.77v-1.155h2.096l.319 1.314c.209-.502.474-.876.797-1.122.326-.245.724-.368 1.194-.368a2.535 2.535 0 0 1 .962.176l-.528 1.435a2.48 2.48 0 0 0-.67-.087c-.382 0-.718.155-1.007.467-.286.312-.505.708-.655 1.188v1.672h1.155V16H9.527Zm3.955-3.399v-1.705l.258-.737h1.155l-.324 2.442h-1.09Zm2.239-5.841c.506 0 .935.037 1.287.11.352.073.633.19.842.352.212.158.36.367.44.627.08.257.1.57.06.94l-.165 1.574c-.029.278.019.496.143.654.125.158.305.27.54.335.238.063.513.094.824.094v1.408c-.308 0-.58.033-.82.099a.985.985 0 0 0-.544.33c-.124.158-.172.376-.143.655l.165 1.561c.04.378.02.697-.06.957-.077.26-.222.47-.435.628-.209.16-.491.276-.847.346a6.44 6.44 0 0 1-1.287.11v-1.21c.224 0 .415-.02.572-.06a.59.59 0 0 0 .358-.21c.08-.102.112-.245.093-.428l-.17-1.623c-.044-.414 0-.746.132-.995.136-.253.34-.446.616-.578.275-.136.598-.231.968-.286a3.52 3.52 0 0 1-1.001-.286 1.251 1.251 0 0 1-.594-.572c-.125-.253-.165-.587-.121-1.001l.17-1.622c.019-.187-.012-.33-.093-.43a.59.59 0 0 0-.358-.208 2.338 2.338 0 0 0-.572-.061V6.76Z' fill='%23505562'/%3E%3C/svg%3E"
+    },
     "version": 2,
     "properties": [
       {

diff --git a/test/spec/provider/element-templates/fixtures/complex.json b/test/spec/provider/element-templates/fixtures/complex.json
@@ -223,6 +223,7 @@
     "appliesTo": [
       "bpmn:Task"
     ],
+    "documentationRef": "https://docs.camunda.io",
     "properties": [
       {
         "id": "1",
@@ -244,6 +245,7 @@
     "appliesTo": [
       "bpmn:Task"
     ],
+    "documentationRef": "https://docs.camunda.io",
     "properties": [
       {
         "id": "1",