feat: support info type

assets/css/bpmn-js-bpmnlint.css

@@ -49,6 +49,11 @@
   /* color: #f7c71a; */
 }
 
+.bjsl-icon-info {
+  background-color: hsl(205, 100%, 45%);
+  color: white;
+}
+
 .bjsl-overlay {
   position: relative;
 }
@@ -115,6 +120,10 @@
   color: #f7c71a;
 }
 
+.bjsl-issues .info svg {
+  color: hsl(205, 100%, 45%);
+}
+
 .bjsl-issues a {
   color: #444;
   margin-left: 8px;
@@ -195,3 +204,8 @@
   background-color: #f7c71a;
   color: white;
 }
+
+.bjsl-button-info {
+  background-color: hsl(205, 100%, 45%);
+  color: white;
+}

lib/Linting.js

@@ -20,6 +20,7 @@ import { is } from 'bpmn-js/lib/util/ModelUtil';
 import ErrorSvg from '../assets/svg/error.svg';
 import WarningSvg from '../assets/svg/warning.svg';
 import SuccessSvg from '../assets/svg/success.svg';
+import InfoSvg from '../assets/svg/info.svg';
 
 var OFFSET_TOP = -7,
     OFFSET_RIGHT = -7;
@@ -39,6 +40,7 @@ var stateToIcon = {
   error: ErrorSvg,
   warning: WarningSvg,
   success: SuccessSvg,
+  info: InfoSvg,
   inactive: SuccessSvg
 };
 
@@ -339,10 +341,19 @@ Linting.prototype._createElementIssues = function(elementId, elementIssues) {
 
   var errors = issuesByType.error,
       warnings = issuesByType.warn,
+      infos = issuesByType.info,
       childErrors = issuesByType.childerror,
-      childWarnings = issuesByType.childwarn;
-
-  if (!errors && !warnings && !childErrors && !childWarnings) {
+      childWarnings = issuesByType.childwarn,
+      childInfos = issuesByType.childinfo;
+
+  if (
+    !infos &&
+    !errors &&
+    !warnings &&
+    !childErrors &&
+    !childWarnings &&
+    !childInfos
+  ) {
     return;
   }
 
@@ -352,7 +363,9 @@ Linting.prototype._createElementIssues = function(elementId, elementIssues) {
 
   var $icon = (errors || childErrors)
     ? domify('<div class="bjsl-icon bjsl-icon-error">' + ErrorSvg + '</div>')
-    : domify('<div class="bjsl-icon bjsl-icon-warning">' + WarningSvg + '</div>');
+    : (warnings || childWarnings)
+      ? domify('<div class="bjsl-icon bjsl-icon-warning">' + WarningSvg + '</div>')
+      : domify('<div class="bjsl-icon bjsl-icon-info">' + InfoSvg + '</div>');
 
   var $dropdown = domify('<div class="bjsl-dropdown"></div>');
   var $dropdownContent = domify('<div class="bjsl-dropdown-content"></div>');
@@ -381,9 +394,13 @@ Linting.prototype._createElementIssues = function(elementId, elementIssues) {
     this._addWarnings($issueList, warnings);
   }
 
+  if (infos) {
+    this._addInfos($issueList, infos);
+  }
+
   // If errors or warnings for child elements of the current element are to be displayed,
   // then add an additional list
-  if (childErrors || childWarnings) {
+  if (childErrors || childWarnings || childInfos) {
     var $childIssues = domify('<div class="bjsl-child-issues"></div>');
     var $childIssueList = domify('<ul></ul>');
     var $childIssueLabel = domify('<a class="bjsl-issue-heading">Issues for child elements:</a>');
@@ -396,6 +413,10 @@ Linting.prototype._createElementIssues = function(elementId, elementIssues) {
       this._addWarnings($childIssueList, childWarnings);
     }
 
+    if (childInfos) {
+      this._addInfos($childIssueList, childInfos);
+    }
+
     if (errors || warnings) {
       var $childIssuesSeperator = domify('<hr/>');
       $childIssues.appendChild($childIssuesSeperator);
@@ -433,6 +454,15 @@ Linting.prototype._addWarnings = function($ul, warnings) {
   });
 };
 
+Linting.prototype._addInfos = function($ul, infos) {
+
+  var self = this;
+
+  infos.forEach(function(error) {
+    self._addEntry($ul, 'info', error);
+  });
+};
+
 Linting.prototype._addEntry = function($ul, state, entry) {
 
   var rule = entry.rule,
@@ -471,7 +501,7 @@ Linting.prototype._clearIssues = function() {
   this._clearOverlays();
 };
 
-Linting.prototype._setButtonState = function(state, errors, warnings) {
+Linting.prototype._setButtonState = function(state, errors, warnings, infos) {
   var button = this._button;
 
   var icon = stateToIcon[state];
@@ -503,21 +533,24 @@ Linting.prototype._updateButton = function() {
   }
 
   var errors = 0,
-      warnings = 0;
+      warnings = 0,
+      infos = 0;
 
   for (var id in this._issues) {
     this._issues[id].forEach(function(issue) {
       if (issue.category === 'error') {
         errors++;
       } else if (issue.category === 'warn') {
         warnings++;
+      } else if (issue.category === 'info') {
+        infos++;
       }
     });
   }
 
   var state = (errors && 'error') || (warnings && 'warning') || 'success';
 
-  this._setButtonState(state, errors, warnings);
+  this._setButtonState(state, errors, warnings, infos);
 };
 
 Linting.prototype._createButton = function() {

test/spec/.bpmnlintrc

@@ -1,3 +1,7 @@
 {
-  "extends": "bpmnlint:recommended"
+  "extends": "bpmnlint:recommended",
+  "rules": {
+    "fake-join": "info",
+    "start-event-required": "warn"
+  }
 }

test/spec/LintingSpec.js

@@ -260,7 +260,8 @@ describe('linting', function() {
             config: {
               extends: 'bpmnlint:recommended',
               rules: {
-                'foo/rule-error': 'error'
+                'foo/rule-error': 'error',
+                'no-implicit-start': 'info'
               }
             },
             resolver: new StaticResolver({
@@ -379,7 +380,7 @@ describe('linting', function() {
         (singleStart ? it.only : it)('should correctly count errors and warnings', function(done) {
 
           // given
-          const diagram = require('./9-errors-2-warnings.bpmn');
+          const diagram = require('./errors-and-warnings.bpmn');
 
           // when
           modeler.importXML(diagram).then(function() {
@@ -388,7 +389,7 @@ describe('linting', function() {
               // then
               const buttonSpan = el.querySelector('button.bjsl-button.bjsl-button-error span');
               expect(buttonSpan).to.exist;
-              expect(buttonSpan.innerText).to.equal('9 Errors, 2 Warnings');
+              expect(buttonSpan.innerText).to.equal('8 Errors, 2 Warnings');
 
               done();
             });
@@ -826,7 +827,7 @@ describe('i18n', function() {
 
           const buttonTextSpan = button.querySelector('span');
           expect(buttonTextSpan).to.exist;
-          expect(buttonTextSpan.innerText).to.equal('16 помилок, 1 попередженнь');
+          expect(buttonTextSpan.innerText).to.equal('16 помилок, 0 попередженнь');
 
           const endEventRequiredMessage = el.querySelector('a[data-rule="end-event-required"]');
           expect(endEventRequiredMessage).to.exist;