feat(render): add documentationRef to header

Closes #616
bpmn-io · Mar 29, 2022 · 37f7f27 · 37f7f27
1 parent cc35a6d
commit 37f7f27
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 0 deletions.
diff --git a/src/render/BpmnPropertiesPanel.js b/src/render/BpmnPropertiesPanel.js
@@ -185,6 +185,7 @@ export default function BpmnPropertiesPanel(props) {
   return <BpmnPropertiesPanelContext.Provider value={ bpmnPropertiesPanelContext }>
     <PropertiesPanel
       element={ selectedElement }
+      eventBus={ eventBus }
       headerProvider={ PanelHeaderProvider }
       groups={ groups }
       layoutConfig={ layoutConfig }

diff --git a/src/render/PanelHeaderProvider.js b/src/render/PanelHeaderProvider.js
@@ -68,6 +68,16 @@ export function getConcreteType(element) {
 
 export const PanelHeaderProvider = {
 
+  getDocumentationRef: (element) => {
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const elementTemplates = useService('elementTemplates', false);
+
+    if (elementTemplates) {
+      return getTemplateDocumentation(element, elementTemplates);
+    }
+  },
+
   getElementLabel: (element) => {
     if (is(element, 'bpmn:Process')) {
       return getBusinessObject(element).name;
@@ -164,4 +174,10 @@ function isPlane(element) {
 function getTemplate(element, elementTemplates) {
   const templateId = elementTemplates._getTemplateId(element);
   return templateId && elementTemplates.get(templateId);
+}
+
+function getTemplateDocumentation(element, elementTemplates) {
+  const template = getTemplate(element, elementTemplates);
+
+  return template && template.documentationRef;
 }
diff --git a/test/spec/PanelHeaderProvider.spec.js b/test/spec/PanelHeaderProvider.spec.js
@@ -670,6 +670,84 @@ describe('<PanelHeaderProvider>', function() {
 
   });
 
+
+  describe('#getDocumentationRef', function() {
+
+    it('should NOT get documentationRef - no element templates', function() {
+
+      // given
+      const element = createElement('bpmn:Task', {
+        name: 'foo'
+      });
+
+      // when
+      const result = createHeader({ container, element });
+
+      const documentationNode = domQuery('.bio-properties-panel-header-link', result.container);
+
+      // then
+      expect(documentationNode).to.not.exist;
+    });
+
+
+    it('should NOT get documentationRef - no value', function() {
+
+      // given
+      const element = createElement('bpmn:Task', {
+        name: 'foo'
+      });
+
+      const elementTemplates = {
+        get: () => { return { id: 'foo' }; },
+        getTemplateId: () => true
+      };
+
+      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.not.exist;
+    });
+
+
+    it('should get element template documentationRef', function() {
+
+      // given
+      const element = createElement('bpmn:Task', {
+        name: 'foo'
+      });
+
+      const elementTemplates = {
+        get: () => { return { id: 'foo', documentationRef: 'https://example.com/' }; },
+        getTemplateId: () => true
+      };
+
+      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/');
+    });
+
+  });
+
 });
 
 

diff --git a/test/spec/provider/cloud-element-templates/fixtures/complex.bpmn b/test/spec/provider/cloud-element-templates/fixtures/complex.bpmn
@@ -54,6 +54,7 @@
       </bpmn:extensionElements>
     </bpmn:serviceTask>
     <bpmn:serviceTask id="Activity_1k5y89v" name="feel" zeebe:modelerTemplate="io.camunda.connectors.RestConnector-feel" />
+    <bpmn:serviceTask id="Activity_1ftabot" name="documentationRef" zeebe:modelerTemplate="io.camunda.connectors.RestConnector-documentationRef" />
   </bpmn:process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_0vvlc66">
@@ -92,6 +93,9 @@
       <bpmndi:BPMNShape id="BPMNShape_0dk5at4" bpmnElement="Activity_1k5y89v">
         <dc:Bounds x="270" y="470" width="100" height="80" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_1ftabot_di" bpmnElement="Activity_1ftabot">
+        <dc:Bounds x="270" y="580" width="100" height="80" />
+      </bpmndi:BPMNShape>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
 </bpmn:definitions>
diff --git a/test/spec/provider/cloud-element-templates/fixtures/complex.json b/test/spec/provider/cloud-element-templates/fixtures/complex.json
@@ -525,5 +525,24 @@
         "feel": "required"
       }
     ]
+  },
+  {
+    "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
+    "name": "REST Connector (with Docs)",
+    "id": "io.camunda.connectors.RestConnector-documentationRef",
+    "description": "A generic REST service.",
+    "appliesTo": [
+      "bpmn:ServiceTask"
+    ],
+    "documentationRef": "https://docs.camunda.io",
+    "properties": [
+      {
+        "type": "Hidden",
+        "value": "http",
+        "binding": {
+          "type": "zeebe:taskDefinition:type"
+        }
+      }
+    ]
   }
 ]