From 3da43f014e0e7d1f37e0a517d35e9b496f06e9a8 Mon Sep 17 00:00:00 2001
From: Martin Stamm <martin.stamm@camunda.com>
Date: Wed, 12 Jul 2023 09:44:16 +0200
Subject: [PATCH] feat: add Linter element-templates linter plugin

---
 client/src/app/App.js                        |   2 +-
 client/src/app/TabsProvider.js               |  13 ++-
 client/src/app/__tests__/TabsProviderSpec.js | 110 +++++++++++++++----
 3 files changed, 98 insertions(+), 27 deletions(-)

diff --git a/client/src/app/App.js b/client/src/app/App.js
index a469f38dcd..5ba73db69f 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);
 
     if (!linter) {
       return;
diff --git a/client/src/app/TabsProvider.js b/client/src/app/TabsProvider.js
index 0408a26ac0..9537ceea90 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, app) {
+          const templates = await app.getConfig('bpmn.elementTemplates', tab.file) || [];
+          const cloudTemplates = getCloudTemplates(templates);
+
           return new BpmnLinter({
             modeler: 'desktop',
-            plugins
+            plugins: [
+              ...plugins,
+              CloudElementTemplatesLinterPlugin(cloudTemplates)
+            ]
           });
         }
       },
diff --git a/client/src/app/__tests__/TabsProviderSpec.js b/client/src/app/__tests__/TabsProviderSpec.js
index f22f382f3e..b550c44f62 100644
--- a/client/src/app/__tests__/TabsProviderSpec.js
+++ b/client/src/app/__tests__/TabsProviderSpec.js
@@ -951,7 +951,7 @@ describe('TabsProvider', function() {
       'dmn'
     ].forEach((type) => {
 
-      it(type, function() {
+      it(type, async function() {
 
         // given
         Flags.init({
@@ -961,7 +961,7 @@ describe('TabsProvider', function() {
         const tabsProvider = new TabsProvider().getProvider(type);
 
         // when
-        const linter = tabsProvider.getLinter();
+        const linter = await tabsProvider.getLinter();
 
         // then
         expect(linter).to.be.null;
@@ -976,13 +976,17 @@ describe('TabsProvider', function() {
       'form'
     ].forEach((type) => {
 
-      it(type, function() {
+      it(type, async function() {
 
         // given
         const tabsProvider = new TabsProvider().getProvider(type);
 
         // when
-        const linter = tabsProvider.getLinter();
+        const linter = await tabsProvider.getLinter(
+          [],
+          { },
+          { getConfig: () => {} }
+        );
 
         // then
         expect(linter).to.exist;
@@ -991,32 +995,90 @@ describe('TabsProvider', function() {
     });
 
 
-    [
-      'bpmn',
-      'cloud-bpmn'
-    ].forEach((type) => {
+    it('cloud-bpmn should configure element template plugin', async function() {
 
-      it(`${ type } plugins`, function() {
+      // given
+      const tabsProvider = new TabsProvider().getProvider('cloud-bpmn');
+      const templates = [
+        {
+          '$schema': 'https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json',
+          'name': 'empty',
+          'id': 'constraints.empty',
+          'appliesTo': [
+            'bpmn:Task'
+          ],
+          'properties': []
+        }
+      ];
+      const appMock = {
+        getConfig: () => templates
+      };
 
-        // given
-        const plugin = {
-          config: {},
-          resolver: {
-            resolveConfig() {},
-            resolveRule() {}
-          }
-        };
+      const tabMock = { file: 'foo' };
 
-        const tabsProvider = new TabsProvider().getProvider(type);
+      // when
+      const linter = await tabsProvider.getLinter(
+        [],
+        tabMock,
+        appMock
+      );
 
-        // when
-        const linter = tabsProvider.getLinter([ plugin ]);
+      // then
+      const plugins = linter.getPlugins();
 
-        // then
-        expect(linter).to.exist;
-        expect(linter.getPlugins()).to.have.length(1);
-      });
+      expect(linter).to.exist;
+      expect(plugins).to.have.length(1);
 
+      const rules = plugins[0].config.rules;
+      expect(rules['element-templates/validate']).to.exist;
+      expect(rules['element-templates/validate'][1].templates).to.eql(templates);
+    });
+
+
+    it('cloud-bpmn plugins', async function() {
+
+      // given
+      const plugin = {
+        config: {},
+        resolver: {
+          resolveConfig() {},
+          resolveRule() {}
+        }
+      };
+
+      const tabsProvider = new TabsProvider().getProvider('cloud-bpmn');
+
+      // when
+      const linter = await tabsProvider.getLinter(
+        [ plugin ],
+        {},
+        { getConfig: () => {} });
+
+      // then
+      expect(linter).to.exist;
+      expect(linter.getPlugins()).to.have.length(2);
+    });
+
+
+    it('bpmn plugins', async function() {
+
+      // given
+      const plugin = {
+        config: {},
+        resolver: {
+          resolveConfig() {},
+          resolveRule() {}
+        }
+      };
+
+      const tabsProvider = new TabsProvider().getProvider('bpmn');
+
+      // when
+      const linter = await tabsProvider.getLinter([ plugin ]);
+
+      // then
+      expect(linter).to.exist;
+      expect(linter.getPlugins()).to.have.length(1);
     });
 
   });