Repository: camunda/camunda-modeler (JavaScript)

Issue:
Show element template errors in the error panel
### Problem you would like to solve

As a user I don't see element template errors in the `Problems` panel. As a result I cannot batch fix issues related to re-usable building blocks:

![screely-1670929997045](https://user-images.githubusercontent.com/58601/207303100-52aa008a-b124-46e2-8db0-9e6e1c4d953f.png)


### Proposed solution

As validation + the `Problems` panel is the defined way to check diagram consistency we should represent all element template errors in a diagram on the errors panel:

* Template not found errors
* Template outdated (warnings)
* Template property validation errors


### Alternatives considered

None.

### Breakdown

- [x] Move Element Templates into separate project
  - [x] C7 - decouple from internal Property definitions that are re-used in element-templates (e.g. https://github.com/bpmn-io/bpmn-js-properties-panel/blob/e1d2cdbe248da88f6f3a546d5e42917bb9dc83d7/src/provider/element-templates/properties/ErrorProperties.js#L47-L51)
- [x] Commit erroneous values to XML so linting can be done
  - [x] needs to be done in `@bpmn-io/properties-panel`: https://github.com/bpmn-io/properties-panel/pull/252
  - [x] Validate that ID checking still works: https://github.com/bpmn-io/bpmn-js-properties-panel/pull/938
- [x] Create linter plugin reusing error checking logic https://github.com/bpmn-io/bpmn-js-element-templates/pull/3
- [x] Integrate Linter Plugin into Camunda Modeler: https://github.com/camunda/camunda-modeler/pull/3673
  - [x] Needs to be configured with available element templates as no bpmn-js instance is available to the linter plugin
_No response_



Fix (patch):
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 198bc0b550..32c06cfec6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ ___Note:__ Yet to be released changes appear here._
 
 ### General
 
+* `FEAT`: show element template errors in the errors panel ([#3357](https://github.com/camunda/camunda-modeler/issues/3357))
 * `FEAT`: add flags for default execution platform version ([#3515](https://github.com/camunda/camunda-modeler/issues/3515))
 * `DEPS`: update to `@bpmn-io/properties-panel@3.1.0`
 * `DEPS`: update to `bpmn-js-properties-panel@3.0.0`
diff --git a/client/package.json b/client/package.json
index 7a89cea539..e440bab4b7 100644
--- a/client/package.json
+++ b/client/package.json
@@ -26,6 +26,7 @@
     "@ibm/plex": "^6.0.0",
     "@sentry/browser": "^7.57.0",
     "bpmn-js": "^13.2.1",
+    "bpmn-js-element-templates": "^1.2.0",
     "bpmn-js-properties-panel": "^3.0.0",
     "bpmn-js-tracking": "0.3.2",
     "bpmn-moddle": "^8.0.1",
@@ -116,4 +117,4 @@
     "bpmn-io-modelers:test": "cross-env MODELERS=1 npm test",
     "bpmn-io-modelers:auto-test": "cross-env MODELERS=1 npm run auto-test"
   }
-}
+}
\ No newline at end of file
diff --git a/client/src/app/App.js b/client/src/app/App.js
index a469f38dcd..13f69e8192 100644
--- a/client/src/app/App.js
+++ b/client/src/app/App.js
@@ -883,7 +883,7 @@ export class App extends PureComponent {
 
     const plugins = this.getPlugins(`lintRules.${ type }`);
 
-    const linter = tabProvider.getLinter(plugins);
+    const linter = await tabProvider.getLinter(plugins, tab, this.getConfig);
 
     if (!linter) {
       return;
diff --git a/client/src/app/TabsProvider.js b/client/src/app/TabsProvider.js
index 0408a26ac0..1790d1020e 100644
--- a/client/src/app/TabsProvider.js
+++ b/client/src/app/TabsProvider.js
@@ -60,6 +60,9 @@ import DMNIcon from '../../resources/icons/file-types/DMN-16x16.svg';
 import FormIcon from '../../resources/icons/file-types/Form-16x16.svg';
 import { getDefaultVersion } from './tabs/EngineProfile';
 
+import { getCloudTemplates } from '../util/elementTemplates';
+import { CloudElementTemplatesLinterPlugin } from 'bpmn-js-element-templates';
+
 const BPMN_HELP_MENU = [
   {
     label: 'BPMN 2.0 Tutorial',
@@ -194,10 +197,16 @@ export default class TabsProvider {
             action: 'create-cloud-bpmn-diagram'
           } ];
         },
-        getLinter(plugins) {
+        async getLinter(plugins = [], tab, getConfig) {
+          const templates = await getConfig('bpmn.elementTemplates', tab.file) || [];
+          const cloudTemplates = getCloudTemplates(templates);
+
           return new BpmnLinter({
             modeler: 'desktop',
-            plugins
+            plugins: [
+              ...plugins,
+              CloudElementTemplatesLinterPlugin(cloudTemplates)
+            ]
           });
         }
       },
diff --git a/package-lock.json b/package-lock.json
index a872ab2295..980e045e7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -143,6 +143,7 @@
         "@ibm/plex": "^6.0.0",
         "@sentry/browser": "^7.57.0",
         "bpmn-js": "^13.2.1",
+        "bpmn-js-element-templates": "^1.2.0",
         "bpmn-js-properties-panel": "^3.0.0",
         "bpmn-js-tracking": "0.3.2",
         "bpmn-moddle": "^8.0.1",
@@ -36952,7 +36953,7 @@
         "@camunda/execution-platform": "^0.3.2",
         "@camunda/form-linting": "^0.9.0",
         "@camunda/form-playground": "^0.7.0",
-        "@camunda/linting": "3.3.0",
+        "@camunda/linting": "^3.3.0",
         "@codemirror/commands": "^6.1.3",
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-xml": "^6.0.1",
@@ -36965,6 +36966,7 @@
         "babel-loader": "^8.0.5",
         "babel-plugin-istanbul": "^5.1.3",
         "bpmn-js": "^13.2.1",
+        "bpmn-js-element-templates": "^1.2.0",
         "bpmn-js-properties-panel": "^3.0.0",
         "bpmn-js-tracking": "0.3.2",
         "bpmn-moddle": "^8.0.1",