feat(cloud-element-templates): add feel guidance

closes #606

src/provider/cloud-element-templates/properties/CustomProperties.js

@@ -286,7 +286,8 @@ function StringProperty(props) {
   const {
     description,
     editable,
-    label
+    label,
+    feel
   } = property;
 
   const bpmnFactory = useService('bpmnFactory'),
@@ -300,6 +301,7 @@ function StringProperty(props) {
     getValue: propertyGetter(element, property),
     id,
     label,
+    feel,
     description: PropertyDescription({ description }),
     setValue: propertySetter(bpmnFactory, commandStack, element, property),
     validate: propertyValidator(translate, property),
@@ -317,7 +319,8 @@ function TextAreaProperty(props) {
   const {
     description,
     editable,
-    label
+    label,
+    feel
   } = property;
 
   const bpmnFactory = useService('bpmnFactory'),
@@ -329,6 +332,7 @@ function TextAreaProperty(props) {
     element,
     id,
     label,
+    feel,
     description: PropertyDescription({ description }),
     getValue: propertyGetter(element, property),
     setValue: propertySetter(bpmnFactory, commandStack, element, property),

test/spec/provider/cloud-element-templates/properties/CustomProperties.feel.bpmn

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:zeebe="http://camunda.org/schema/zeebe/1.0" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_165ah7c" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="4.13.0-nightly.20220113" modeler:executionPlatform="Camunda Cloud" modeler:executionPlatformVersion="1.3.0">
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:userTask id="stringTask" name="Feel Task" zeebe:modelerTemplate="my.custom.FeelTask.String">
+    </bpmn:userTask>
+    <bpmn:userTask id="textTask" name="Text Feel Task" zeebe:modelerTemplate="my.custom.FeelTask.Text">
+    </bpmn:userTask>
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="Task_0zadlfo_di" bpmnElement="stringTask">
+        <dc:Bounds x="79" y="53" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Task_2_di" bpmnElement="textTask">
+        <dc:Bounds x="250" y="53" width="100" height="80" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/provider/cloud-element-templates/properties/CustomProperties.feel.json

@@ -0,0 +1,82 @@
+[
+  {
+    "name": "Custom FeelTask with Strings",
+    "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
+    "id": "my.custom.FeelTask.String",
+    "appliesTo": [
+      "bpmn:ServiceTask"
+    ],
+    "properties": [
+      {
+        "label": "A FEEL expression",
+        "type": "String",
+        "feel": "optional",
+        "editable": true,
+        "binding": {
+          "type": "property",
+          "name": "optionalFeelProp"
+        }
+      },
+      {
+        "label": "A required FEEL expression",
+        "type": "String",
+        "feel": "required",
+        "editable": true,
+        "binding": {
+          "type": "property",
+          "name": "feelProp"
+        }
+      },
+      {
+        "label": "A Normal Input",
+        "type": "String",
+        "editable": true,
+        "binding": {
+          "type": "property",
+          "name": "myCustomProp"
+        }
+      }
+    ],
+    "entriesVisible": false
+  },
+  {
+    "name": "Custom FeelTask with TextFields",
+    "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
+    "id": "my.custom.FeelTask.Text",
+    "appliesTo": [
+      "bpmn:ServiceTask"
+    ],
+    "properties": [
+      {
+        "label": "A FEEL expression",
+        "type": "Text",
+        "feel": "optional",
+        "editable": true,
+        "binding": {
+          "type": "property",
+          "name": "optionalFeelProp"
+        }
+      },
+      {
+        "label": "A required FEEL expression",
+        "type": "Text",
+        "feel": "required",
+        "editable": true,
+        "binding": {
+          "type": "property",
+          "name": "feelProp"
+        }
+      },
+      {
+        "label": "A Normal Input",
+        "type": "Text",
+        "editable": true,
+        "binding": {
+          "type": "property",
+          "name": "myCustomProp"
+        }
+      }
+    ],
+    "entriesVisible": false
+  }
+]

test/spec/provider/cloud-element-templates/properties/CustomProperties.spec.js

@@ -45,6 +45,9 @@ import descriptionElementTemplates from './CustomProperties.description.json';
 import editableDiagramXML from './CustomProperties.editable.bpmn';
 import editableElementTemplates from './CustomProperties.editable.json';
 
+import feelDiagramXML from './CustomProperties.feel.bpmn';
+import feelElementTemplates from './CustomProperties.feel.json';
+
 import defaultTypesDiagramXML from './CustomProperties.default-types.bpmn';
 import defaultTypesElementTemplates from './CustomProperties.default-types.json';
 
@@ -1145,6 +1148,98 @@ describe('provider/cloud-element-templates - CustomProperties', function() {
 
   });
 
+
+  describe('feel', function() {
+
+    beforeEach(bootstrapPropertiesPanel(feelDiagramXML, {
+      container,
+      debounceInput: false,
+      elementTemplates: feelElementTemplates,
+      moddleExtensions: {
+        zeebe: zeebeModdlePackage
+      },
+      modules: [
+        BpmnPropertiesPanel,
+        coreModule,
+        elementTemplatesModule,
+        modelingModule
+      ]
+    }));
+
+
+    describe('TextField', function() {
+
+      it('should not display icon by default', async function() {
+
+        // when
+        await expectSelected('stringTask');
+
+        // then
+        const entry = findEntry('custom-entry-my.custom.FeelTask.String-2', container);
+
+        const feelIcon = domQuery('.bio-properties-panel-feel-icon', entry);
+
+        expect(feelIcon).not.to.exist;
+
+      });
+
+
+      it('should display icons', async function() {
+
+        // when
+        await expectSelected('stringTask');
+
+        // then
+        const requiredEntry = findEntry('custom-entry-my.custom.FeelTask.String-0', container);
+        const optionalEntry = findEntry('custom-entry-my.custom.FeelTask.String-1', container);
+
+        const requiredIcon = domQuery('.bio-properties-panel-feel-icon', requiredEntry);
+        const optionalIcon = domQuery('.bio-properties-panel-feel-icon', optionalEntry);
+
+        expect(requiredIcon).to.exist;
+        expect(optionalIcon).to.exist;
+      });
+
+    });
+
+
+    describe('TextArea', function() {
+
+      it('should not display icon by default', async function() {
+
+        // when
+        await expectSelected('textTask');
+
+        // then
+        const entry = findEntry('custom-entry-my.custom.FeelTask.Text-2', container);
+
+        const feelIcon = domQuery('.bio-properties-panel-feel-icon', entry);
+
+        expect(feelIcon).not.to.exist;
+
+      });
+
+
+      it('should display icons on TextArea', async function() {
+
+        // when
+        await expectSelected('textTask');
+
+        // then
+        const requiredEntry = findEntry('custom-entry-my.custom.FeelTask.Text-0', container);
+        const optionalEntry = findEntry('custom-entry-my.custom.FeelTask.Text-1', container);
+
+        const requiredIcon = domQuery('.bio-properties-panel-feel-icon', requiredEntry);
+        const optionalIcon = domQuery('.bio-properties-panel-feel-icon', optionalEntry);
+
+        expect(requiredIcon).to.exist;
+        expect(optionalIcon).to.exist;
+      });
+
+    });
+
+  });
+
 });