feat: show documentation URL for rules

  This embeds a link to the actual documentation, if provided
  via `meta?.documentation?.url`.

  Related to bpmn-io/bpmnlint#165

  Closes #92

feat: show rule name with report

  This simplifies things, i.e. users are able to learn about the source of rules.

assets/css/bpmn-js-bpmnlint.css

@@ -148,12 +148,18 @@
   --icon-color: var(--bjsl-color-info);
 }
 
-.bjsl-issues a {
+.bjsl-issues .message {
   color: var(--bjsl-font-color);
-  margin-left: 8px;
+  margin-left: .5em;
   text-decoration: none;
 }
 
+.bjsl-issues .rule {
+  color: var(--bjsl-font-color);
+  margin-left: .5em;
+  font-family: monospace;
+}
+
 .bjsl-issues .bjsl-issue-heading {
   margin-left: 0px;
   font-weight: bold;

lib/Linting.js

@@ -468,25 +468,24 @@ Linting.prototype._addInfos = function($ul, infos) {
 Linting.prototype._addEntry = function($ul, state, entry) {
 
   var rule = entry.rule,
+      documentationUrl = entry.meta?.documentation.url,
       message = this._translate(entry.message),
       actualElementId = entry.actualElementId;
 
   var icon = stateToIcon[state];
 
-  var $entry = domify(
-    '<li class="' + state + '">' +
-      '<span class="icon"> ' + icon + '</span>' +
-      '<a title="' + escapeHTML(rule) + ': ' + escapeHTML(message) + '" ' +
-         'data-rule="' + escapeHTML(rule) + '" ' +
-         'data-message="' + escapeHTML(message) + '"' +
-      '>' +
-        escapeHTML(message) +
-      '</a>' +
-      (actualElementId
-        ? '<a class="bjsl-id-hint"><code>' + actualElementId + '</code></a>'
-        : '') +
-    '</li>'
-  );
+  var $entry = domify(`
+    <li class="${ state }" data-rule="${ escapeHTML(rule) }">
+      <span class="icon">${ icon }</span>
+      <span class="message">${ escapeHTML(message) }</span>
+      <span class="rule">(${ documentationUrl
+    ? `<a href="${ escapeHTML(documentationUrl) }" target="_blank">${ escapeHTML(rule) }</a>`
+    : escapeHTML(rule) })</span>
+      ${ actualElementId
+    ? `<span class="bjsl-id-hint"><code>${ escapeHTML(actualElementId) }</code></span>`
+    : '' }
+    </li>
+  `);
 
   $ul.appendChild($entry);
 };

package.json

@@ -36,7 +36,7 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "bpmn-js": "^18.3.0",
-    "bpmnlint": "^11.0.0",
+    "bpmnlint": "^11.2.0",
     "bpmnlint-loader": "^0.1.6",
     "chai": "^4.5.0",
     "cpx2": "^8.0.0",

test/spec/LintingSpec.js

@@ -505,13 +505,22 @@ describe('linting - ui', function() {
 
         // then
         const errorEntry = el.querySelector(
-          'a' +
-          '[title="label-required: Element is missing label/name"]' +
-          '[data-rule="label-required"]' +
-          '[data-message="Element is missing label/name"]'
+          '[data-rule="label-required"]'
         );
         expect(errorEntry).to.exist;
-        expect(errorEntry.innerText).to.equal('Element is missing label/name');
+
+        const messageEntry = errorEntry.querySelector('.message');
+        expect(messageEntry).to.exist;
+        expect(messageEntry.textContent).to.eql('Element is missing label/name');
+
+        const ruleEntry = errorEntry.querySelector('.rule');
+        expect(ruleEntry).to.exist;
+        expect(ruleEntry.textContent).to.eql('(label-required)');
+
+        const documentationLink = ruleEntry.querySelector('a');
+        expect(documentationLink).to.exist;
+        expect(documentationLink.href).to.eql('https://github.com/bpmn-io/bpmnlint/blob/main/docs/rules/label-required.md');
+        expect(documentationLink.textContent).to.eql('label-required');
       });
 
     });
@@ -728,9 +737,9 @@ describe('linting - i18n', function() {
     const buttonText = button.textContent;
     expect(buttonText.trim()).to.equal('16 помилок, 0 попередженнь');
 
-    const endEventRequiredMessage = el.querySelector('a[data-rule="end-event-required"]');
+    const endEventRequiredMessage = el.querySelector('[data-rule="end-event-required"] .message');
     expect(endEventRequiredMessage).to.exist;
-    expect(endEventRequiredMessage.dataset.message).to.equal('У процеса відсутня завершальна подія');
+    expect(endEventRequiredMessage.textContent).to.equal('У процеса відсутня завершальна подія');
   });
 
   it('should translate child issues grouping text', async function() {