feat(render): display template name in header

src/render/PanelHeaderProvider.js

@@ -13,6 +13,10 @@ import {
   isInterrupting
 } from 'bpmn-js/lib/util/DiUtil';
 
+import {
+  useService
+} from '../hooks';
+
 import iconsByType from '../icons';
 
 export function getConcreteType(element) {
@@ -79,6 +83,18 @@ export const PanelHeaderProvider = {
   },
 
   getTypeLabel: (element) => {
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const elementTemplates = useService('elementTemplates', false);
+
+    if (elementTemplates) {
+      const template = getTemplate(element, elementTemplates);
+
+      if (template && template.name) {
+        return template.name;
+      }
+    }
+
     const concreteType = getConcreteType(element);
 
     return concreteType
@@ -137,12 +153,15 @@ function isConditionalFlow(element) {
   return businessObject.conditionExpression && is(sourceBusinessObject, 'bpmn:Activity');
 }
 
-
-// helpers //////////
 function isPlane(element) {
 
   // Backwards compatibility for bpmn-js<8
   const di = element && (element.di || getBusinessObject(element).di);
 
   return is(di, 'bpmndi:BPMNPlane');
+}
+
+function getTemplate(element, elementTemplates) {
+  const templateId = elementTemplates._getTemplateId(element);
+  return templateId && elementTemplates.get(templateId);
 }

test/spec/PanelHeaderProvider.spec.js

@@ -21,6 +21,10 @@ import {
   getConcreteType
 } from 'src/render/PanelHeaderProvider';
 
+import {
+  BpmnPropertiesPanelContext
+} from 'src/context';
+
 insertCoreStyles();
 
 const noop = () => {};
@@ -178,6 +182,86 @@ describe('<PanelHeaderProvider>', function() {
   });
 
 
+  describe('#getTypeLabel', function() {
+
+    it('should get element type - no element templates', function() {
+
+      // given
+      const element = createElement('bpmn:Task', {
+        name: 'foo'
+      });
+
+      // when
+      const result = createHeader({ container, element });
+
+      const typeNode = domQuery('.bio-properties-panel-header-type', result.container);
+
+      // then
+      expect(typeNode).to.exist;
+      expect(typeNode.innerText).to.equal('TASK');
+    });
+
+
+    it('should get element type - no template name', function() {
+
+      // given
+      const element = createElement('bpmn:Task', {
+        name: 'foo'
+      });
+
+      const elementTemplates = {
+        get: () => { return { id: 'foo' }; },
+        getTemplateId: () => 'foo'
+      };
+
+      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('TASK');
+    });
+
+
+    it('should get element template name', function() {
+
+      // given
+      const element = createElement('bpmn:Task', {
+        name: 'foo'
+      });
+
+      const elementTemplates = {
+        get: () => { return { id: 'foo', name: 'Template Task' }; },
+        getTemplateId: () => 'foo'
+      };
+
+      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');
+    });
+
+  });
+
+
   describe('#getConcreteType', function() {
 
     it('should get type - task', async function() {
@@ -591,17 +675,40 @@ describe('<PanelHeaderProvider>', function() {
 
 // helpers //////////////////////////
 
+class ElementTemplates {
+  constructor(options = {}) {
+    const {
+      get,
+      getTemplateId
+    } = options;
+
+    this._getFn = get;
+    this._getTemplateIdFn = getTemplateId;
+  }
+
+  get(element) {
+    return this._getFn ? this._getFn(element) : null;
+  }
+
+  _getTemplateId(element) {
+    return this._getTemplateIdFn ? this._getTemplateIdFn(element) : null;
+  }
+}
+
 function createHeader(options = {}) {
   const {
     element = noopElement,
     headerProvider = PanelHeaderProvider,
+    context = { getService: noop },
     container
   } = options;
 
   return render(
-    <Header
-      element={ element }
-      headerProvider={ headerProvider } />,
+    <BpmnPropertiesPanelContext.Provider value={ context }>
+      <Header
+        element={ element }
+        headerProvider={ headerProvider } />
+    </BpmnPropertiesPanelContext.Provider>,
     {
       container
     }