Improve properties panel text area entries with isEdited prop (Condition Indicator) (#123)

* Improve properties panel text area entries with isEdited prop

* Update user instructions group IDs in properties panel

Author: theaubmov

app/spiffworkflow/conditions/propertiesPanel/ConditionsPropertiesProvider.js

@@ -1,6 +1,7 @@
 import { is } from 'bpmn-js/lib/util/ModelUtil';
 import {
-  TextAreaEntry
+  TextAreaEntry,
+  isTextAreaEntryEdited
 } from '@bpmn-io/properties-panel';
 import { useService } from 'bpmn-js-properties-panel';
 
@@ -68,6 +69,7 @@ function conditionGroup(element, moddle, label, description, commandStack) {
       label,
       description,
       commandStack,
+      isEdited: isTextAreaEntryEdited,
     },
   ];
 }
@@ -76,14 +78,18 @@ function ConditionExpressionTextField(props) {
   const { element } = props;
   const { moddle } = props;
   const { label } = props;
+  const { commandStack } = props;
 
   const debounce = useService('debounceInput');
+
   const getValue = () => {
     let conditionExpression;
     if (is(element, 'bpmn:SequenceFlow')) {
       conditionExpression = element.businessObject.conditionExpression;
     } else if (is(element, 'bpmn:Event')) {
-      const eventDef = element.businessObject.eventDefinitions.find(ev => is(ev, 'bpmn:ConditionalEventDefinition'));
+      const eventDef = element.businessObject.eventDefinitions.find((ev) =>
+        is(ev, 'bpmn:ConditionalEventDefinition')
+      );
       conditionExpression = eventDef.condition;
     }
     if (conditionExpression) {
@@ -99,16 +105,24 @@ function ConditionExpressionTextField(props) {
     }
     conditionExpressionModdleElement.body = value;
     if (is(element, 'bpmn:SequenceFlow')) {
-      element.businessObject.conditionExpression = conditionExpressionModdleElement;
+      element.businessObject.conditionExpression =
+        conditionExpressionModdleElement;
     } else if (is(element, 'bpmn:Event')) {
-      const eventDef = element.businessObject.eventDefinitions.find(ev => is(ev, 'bpmn:ConditionalEventDefinition'));
+      const eventDef = element.businessObject.eventDefinitions.find((ev) =>
+        is(ev, 'bpmn:ConditionalEventDefinition')
+      );
       eventDef.condition = conditionExpressionModdleElement;
     }
+
+    commandStack.execute('element.updateModdleProperties', {
+      element,
+      moddleElement: conditionExpressionModdleElement,
+    });
   };
 
   return TextAreaEntry({
     element,
-    id: `the-id`,
+    id: 'condition_expression',
     label,
     getValue,
     setValue,

app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.jsx

@@ -3,6 +3,7 @@ import {
   ListGroup,
   CheckboxEntry,
   isCheckboxEntryEdited,
+  isTextAreaEntryEdited
 } from '@bpmn-io/properties-panel';
 import { is, isAny } from 'bpmn-js/lib/util/ModelUtil';
 import scriptGroup, { SCRIPT_TYPE } from './SpiffScriptGroup';
@@ -321,16 +322,18 @@ function createUserInstructionsGroup(element, translate, moddle, commandStack) {
     label: translate('Instructions'),
     entries: [
       {
+        id: 'extension_spiffworkflow:InstructionsForEndUser',
         element,
         moddle,
         commandStack,
         component: SpiffExtensionTextArea,
         name: 'spiffworkflow:InstructionsForEndUser',
         label: 'Instructions',
-        description:
-          'Displayed above user forms or when this task is executing.',
+        description: 'Displayed above user forms or when this task is executing.',
+        isEdited: isTextAreaEntryEdited
       },
       {
+        id: 'extension_spiffworkflow:InstructionsForEndUser',
         element,
         moddle,
         commandStack,

app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextArea.jsx

@@ -12,7 +12,8 @@ export function SpiffExtensionTextArea(props) {
     moddle = props.moddle;
   const name = props.name,
     label = props.label,
-    description = props.description;
+    description = props.description,
+    id = props.id;
   const debounce = useService('debounceInput');
 
   const getValue = () => {
@@ -25,7 +26,7 @@ export function SpiffExtensionTextArea(props) {
 
   return (
     <TextAreaEntry
-      id={'extension_' + name}
+      id={(id !== undefined) ? id : 'extension_' + name}
       element={element}
       description={description}
       label={label}