Fix Form Linting

client/package.json

@@ -17,12 +17,12 @@
     "@ibm/plex": "^6.0.0",
     "@sentry/browser": "^6.3.6",
     "bpmn-js": "^9.0.3",
-    "bpmn-js-properties-panel": "^1.0.0-alpha.10",
+    "bpmn-js-properties-panel": "^1.0.0-alpha.12",
     "bpmn-moddle": "^7.1.2",
     "bpmnlint": "^7.6.0",
-    "bpmnlint-plugin-camunda-compat": "^0.5.0",
-    "camunda-bpmn-js": "^0.13.0-alpha.7",
-    "camunda-bpmn-moddle": "^6.1.1",
+    "bpmnlint-plugin-camunda-compat": "^0.6.1",
+    "camunda-bpmn-js": "^0.13.0-alpha.8",
+    "camunda-bpmn-moddle": "^6.1.2",
     "camunda-cmmn-moddle": "^1.0.0",
     "camunda-dmn-js": "^0.2.2",
     "camunda-dmn-moddle": "^1.1.0",
@@ -32,7 +32,7 @@
     "cmmn-js-properties-panel": "^0.8.3",
     "codemirror": "^5.65.2",
     "debug": "^4.1.1",
-    "diagram-js": "^7.8.2",
+    "diagram-js": "^8.2.1",
     "diagram-js-direct-editing": "^1.6.3",
     "diagram-js-origin": "^1.3.2",
     "dmn-js": "^12.1.0",
@@ -52,7 +52,7 @@
     "semver-compare": "^1.0.0",
     "sourcemapped-stacktrace": "^1.1.9",
     "ua-parser-js": "^0.7.28",
-    "zeebe-bpmn-moddle": "^0.11.0"
+    "zeebe-bpmn-moddle": "^0.12.1"
   },
   "homepage": ".",
   "devDependencies": {

client/src/app/tabs/cloud-bpmn/BpmnEditor.js

@@ -854,6 +854,10 @@ function showLintError(modeler, error) {
 
   const element = elementRegistry.get(id);
 
+  if (!element) {
+    return;
+  }
+
   if (element !== canvas.getRootElement()) {
     canvas.scrollToElement(element);
   }

client/src/app/tabs/cloud-bpmn/linting/__tests__/CloudBpmnLinterSpec.js

@@ -62,11 +62,11 @@ describe('CloudBpmnLinter', function() {
 
 
   [
-    [ 'Zeebe 1.0', camundaCloud10XML, camundaCloud10ErrorsXML ],
-    [ 'Zeebe 1.1', camundaCloud11XML ],
-    [ 'Zeebe 1.2', camundaCloud12XML ],
-    [ 'Zeebe 1.3', camundaCloud13XML ],
-    [ 'Camunda Platform 8.0', camundaCloud80XML ]
+    [ 'Camunda Platform 8 (Zeebe 1.0)', camundaCloud10XML, camundaCloud10ErrorsXML ],
+    [ 'Camunda Platform 8 (Zeebe 1.1)', camundaCloud11XML ],
+    [ 'Camunda Platform 8 (Zeebe 1.2)', camundaCloud12XML ],
+    [ 'Camunda Platform 8 (Zeebe 1.3)', camundaCloud13XML ],
+    [ 'Camunda Platform 8', camundaCloud80XML ]
   ].forEach(([ engineProfile, noErrorsXML, errorsXML ]) => {
 
     describe(engineProfile, function() {
@@ -89,13 +89,17 @@ describe('CloudBpmnLinter', function() {
 
         // then
         expect(results).to.exist;
-        expect(results).to.eql([
-          {
-            id: 'Activity_1',
-            message: `Element of type <bpmn:BusinessRuleTask> not supported by ${ engineProfile }`,
-            category: 'error'
-          }
-        ]);
+        expect(results).to.have.length(1);
+        expect(results[ 0 ]).to.eql({
+          id: 'Activity_1',
+          label: 'Task',
+          message: `A <Business Rule Task> is not supported by ${ engineProfile }`,
+          error: {
+            type: 'elementType',
+            element: 'bpmn:BusinessRuleTask'
+          },
+          category: 'error'
+        });
       });
 
     });

client/src/app/tabs/form/linting/FormLinter.js

@@ -25,14 +25,25 @@ const formJSVersions = {
     '1.0': '0.0.1',
     '1.1': '0.1.0',
     '1.2': '0.1.0',
-    '1.3': '0.1.0'
+    '1.3': '0.1.0',
+    '8.0': '0.2.0'
   },
   'Camunda Platform': {
     '7.15': '0.0.1',
-    '7.16': '0.1.0'
+    '7.16': '0.1.0',
+    '7.17': '0.2.0'
   }
 };
 
+const executionPlatformLabels = {
+  'Camunda Cloud': {
+    '1.0': 'Camunda Platform 8 (Zeebe 1.0)',
+    '1.1': 'Camunda Platform 8 (Zeebe 1.1)',
+    '1.2': 'Camunda Platform 8 (Zeebe 1.2)',
+    '1.3': 'Camunda Platform 8 (Zeebe 1.3)',
+    '8.0': 'Camunda Platform 8'
+  }
+};
 
 export default class FormLinter {
   static lint(contents) {
@@ -86,8 +97,8 @@ export default class FormLinter {
       if (!types.includes(type)) {
         results.push({
           id,
-          label: label || textToLabel(text),
-          message: `Form field of type <${ type }> not supported by ${ executionPlatform } ${ executionPlatformVersion }`,
+          label: label || (text && textToLabel(text)) || id,
+          message: `A <${ capitalize(type) }> is not supported by ${ getExecutionPlatformLabel(executionPlatform, executionPlatformVersion) }`,
           category: 'error'
         });
       }
@@ -114,3 +125,15 @@ function getFormJSVersion(executionPlatform, executionPlatformVersion) {
 
   return formJSVersions[ executionPlatform ][ executionPlatformVersion ];
 }
+
+function getExecutionPlatformLabel(executionPlatform, executionPlatformVersion) {
+  if (executionPlatformLabels[ executionPlatform ] && executionPlatformLabels[ executionPlatform ][ executionPlatformVersion ]) {
+    return executionPlatformLabels[ executionPlatform ][ executionPlatformVersion ];
+  }
+
+  return `${ executionPlatform } ${ executionPlatformVersion }`;
+}
+
+function capitalize(string) {
+  return `${ string.slice(0, 1).toUpperCase()}${ string.slice(1) }`;
+}

client/src/app/tabs/form/linting/__tests__/FormLinterSpec.js

@@ -16,6 +16,7 @@ import camundaCloud11 from './camunda-cloud-1-1.json';
 import camundaCloud12 from './camunda-cloud-1-2.json';
 import camundaCloud120 from './camunda-cloud-1-2-0.json';
 import camundaCloud13 from './camunda-cloud-1-3.json';
+import camundaCloud8 from './camunda-cloud-8.json';
 import camundaPlatform715 from './camunda-platform-7-15.json';
 import camundaPlatform715Errors from './camunda-platform-7-15-errors.json';
 import camundaPlatform716 from './camunda-platform-7-16.json';
@@ -62,11 +63,12 @@ describe('FormLinter', function() {
     [ 'Camunda Platform 7.15', camundaPlatform715, camundaPlatform715Errors ],
     [ 'Camunda Platform 7.16', camundaPlatform716 ],
     [ 'Camunda Platform 7.16.0', camundaPlatform7160 ],
-    [ 'Camunda Cloud 1.0', camundaCloud10, camundaCloud10Errors ],
-    [ 'Camunda Cloud 1.1', camundaCloud11 ],
-    [ 'Camunda Cloud 1.2', camundaCloud12 ],
-    [ 'Camunda Cloud 1.2', camundaCloud120 ],
-    [ 'Camunda Cloud 1.3', camundaCloud13 ]
+    [ 'Camunda Platform 8 (Zeebe 1.0)', camundaCloud10, camundaCloud10Errors ],
+    [ 'Camunda Platform 8 (Zeebe 1.1)', camundaCloud11 ],
+    [ 'Camunda Platform 8 (Zeebe 1.2)', camundaCloud12 ],
+    [ 'Camunda Platform 8 (Zeebe 1.2)', camundaCloud120 ],
+    [ 'Camunda Platform 8 (Zeebe 1.3)', camundaCloud13 ],
+    [ 'Camunda Platform 8', camundaCloud8 ]
   ].forEach(([ engineProfile, noErrorsSchema, errorsSchema ]) => {
 
     describe(engineProfile, function() {
@@ -93,7 +95,7 @@ describe('FormLinter', function() {
           {
             id: 'Field_3',
             label: 'Approved',
-            message: `Form field of type <checkbox> not supported by ${ engineProfile }`,
+            message: `A <Checkbox> is not supported by ${ engineProfile }`,
             category: 'error'
           }
         ]);

client/src/app/tabs/form/linting/__tests__/camunda-cloud-8.json

@@ -0,0 +1,52 @@
+{
+  "components": [
+    {
+      "id": "Field_1",
+      "key": "creditor",
+      "label": "Creditor",
+      "type": "textfield",
+      "validate": {
+        "required": true
+      }
+    },
+    {
+      "description": "An invoice number in the format: C-123.",
+      "id": "Field_2",
+      "key": "invoiceNumber",
+      "label": "Invoice Number",
+      "type": "textfield",
+      "validate": {
+        "pattern": "^C-[0-9]+$"
+      }
+    },
+    {
+      "id": "Field_3",
+      "key": "approved",
+      "label": "Approved",
+      "type": "checkbox"
+    },
+    {
+      "id": "Field_4",
+      "key": "approvedBy",
+      "label": "Approved By",
+      "type": "textfield"
+    },
+    {
+      "id": "Field_5",
+      "key": "submit",
+      "label": "Submit",
+      "type": "button"
+    },
+    {
+      "id": "Field_6",
+      "action": "reset",
+      "key": "reset",
+      "label": "Reset",
+      "type": "button"
+    }
+  ],
+  "executionPlatform": "Camunda Cloud",
+  "executionPlatformVersion": "8.0.0",
+  "id": "Form_1",
+  "type": "default"
+}

client/src/app/tabs/panel/tabs/LintingTab.js

@@ -40,7 +40,7 @@ export default function LintingTab(props) {
     priority={ 1 }>
     { linting.length ? null : <span className={ classnames(css.LintingIssue, 'linting-issue') }>No errors.</span> }
     {
-      linting.map((issue => {
+      sortIssues(linting).map((issue => {
         const {
           id,
           message
@@ -70,7 +70,17 @@ function LintingIssue(props) {
   return <div className={ classnames(css.LintingIssue, 'linting-issue') }>
     <ErrorIcon />
     <div className="linting-issue__text">
-      Error : <span className="linting-issue__link" onClick={ onClick }>{label || id}</span> - <span className="linting-issue__message">{message}</span>
+      Error : <span className="linting-issue__link" onClick={ onClick }>{ label || id }</span> - <span className="linting-issue__message">{message}</span>
     </div>
   </div>;
+}
+
+function sortIssues(issues) {
+  return issues.sort((a, b) => {
+    if ((a.label || a.id).toLowerCase() <= (b.label || b.id).toLowerCase()) {
+      return -1;
+    } else {
+      return 1;
+    }
+  });
 }

client/src/app/tabs/panel/tabs/__tests__/LintingTabSpec.js

@@ -67,6 +67,42 @@ describe('<LintingTab>', function() {
   });
 
 
+  it('should sort', function() {
+
+    // when
+    const wrapper = renderLintingTab({
+      linting: [
+        {
+          category: 'error',
+          id: 'foo',
+          label: 'Foo',
+          path: [],
+          message: 'foo error'
+        },
+        {
+          category: 'error',
+          id: 'bar',
+          label: 'Bar',
+          path: [],
+          message: 'bar error'
+        },
+        {
+          category: 'error',
+          id: 'baz',
+          path: [],
+          message: 'baz error'
+        }
+      ]
+    });
+
+    // then
+    expect(wrapper.find('.linting-issue__text')).to.have.length(3);
+    expect(wrapper.find('.linting-issue__text').at(0).text()).to.equal('Error : Bar - bar error');
+    expect(wrapper.find('.linting-issue__text').at(1).text()).to.equal('Error : baz - baz error');
+    expect(wrapper.find('.linting-issue__text').at(2).text()).to.equal('Error : Foo - foo error');
+  });
+
+
   it('should show lint error on click', function() {
 
     // when