feat(editor): edit FEEL in validation properties

bpmn-io · Jun 12, 2023 · 9ead324 · 9ead324
1 parent 65b7e62
commit 9ead324
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 17 deletions.
diff --git a/packages/form-js-editor/src/features/properties-panel/groups/ValidationGroup.js b/packages/form-js-editor/src/features/properties-panel/groups/ValidationGroup.js
@@ -6,14 +6,14 @@ import {
 import {
   CheckboxEntry,
   isCheckboxEntryEdited,
-  isNumberFieldEntryEdited,
+  isFeelEntryEdited,
+  FeelNumberEntry,
   isTextFieldEntryEdited,
-  NumberFieldEntry,
   TextFieldEntry,
   SelectEntry
 } from '@bpmn-io/properties-panel';
 
-import { useService } from '../hooks';
+import { useService, useVariables } from '../hooks';
 
 import { INPUTS } from '../Util';
 
@@ -87,15 +87,15 @@ export default function ValidationGroup(field, editField) {
         component: MinLength,
         getValue,
         field,
-        isEdited: isNumberFieldEntryEdited,
+        isEdited: isFeelEntryEdited,
         onChange
       },
       {
         id: 'maxLength',
         component: MaxLength,
         getValue,
         field,
-        isEdited: isNumberFieldEntryEdited,
+        isEdited: isFeelEntryEdited,
         onChange
       }
     );
@@ -121,15 +121,15 @@ export default function ValidationGroup(field, editField) {
         component: Min,
         getValue,
         field,
-        isEdited: isNumberFieldEntryEdited,
+        isEdited: isFeelEntryEdited,
         onChange
       },
       {
         id: 'max',
         component: Max,
         getValue,
         field,
-        isEdited: isNumberFieldEntryEdited,
+        isEdited: isFeelEntryEdited,
         onChange
       }
     );
@@ -169,14 +169,18 @@ function MinLength(props) {
 
   const debounce = useService('debounce');
 
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({ name }));
+
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('minLength'),
     id,
     label: 'Minimum length',
     min: 0,
-    setValue: onChange('minLength')
+    setValue: onChange('minLength'),
+    variables
   });
 }
 
@@ -190,14 +194,18 @@ function MaxLength(props) {
 
   const debounce = useService('debounce');
 
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({ name }));
+
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('maxLength'),
     id,
     label: 'Maximum length',
     min: 0,
-    setValue: onChange('maxLength')
+    setValue: onChange('maxLength'),
+    variables
   });
 }
 
@@ -231,14 +239,18 @@ function Min(props) {
 
   const debounce = useService('debounce');
 
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({ name }));
+
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     id,
     label: 'Minimum',
     step: 'any',
     getValue: getValue('min'),
-    setValue: onChange('min')
+    setValue: onChange('min'),
+    variables
   });
 }
 
@@ -252,14 +264,18 @@ function Max(props) {
 
   const debounce = useService('debounce');
 
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({ name }));
+
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     id,
     label: 'Maximum',
     step: 'any',
     getValue: getValue('max'),
-    setValue: onChange('max')
+    setValue: onChange('max'),
+    variables
   });
 }
 

diff --git a/packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanel.spec.js b/packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanel.spec.js
@@ -2060,7 +2060,8 @@ describe('properties panel', function() {
             });
 
             // assume
-            const input = screen.getByLabelText('Maximum length');
+            // the fx toggle is screened as well
+            const input = screen.getAllByLabelText('Maximum length').find((el) => el.type === 'number');
 
             expect(input.min).to.equal('0');
 
@@ -2097,7 +2098,7 @@ describe('properties panel', function() {
             });
 
             // assume
-            const input = screen.getByLabelText('Minimum length');
+            const input = screen.getAllByLabelText('Minimum length').find((el) => el.type === 'number');
 
             expect(input.min).to.equal('0');
 

diff --git a/packages/form-js-editor/test/spec/features/properties-panel/groups/ValidationGroup.spec.js b/packages/form-js-editor/test/spec/features/properties-panel/groups/ValidationGroup.spec.js
@@ -8,6 +8,8 @@ import { ValidationGroup } from '../../../../../src/features/properties-panel/gr
 
 import { WithPropertiesPanelContext, WithPropertiesPanel } from '../helper';
 
+import { setEditorValue } from '../../../../helper';
+
 
 describe('ValidationGroup', function() {
 
@@ -78,6 +80,7 @@ describe('ValidationGroup', function() {
 
   });
 
+
   describe('validationType', function() {
 
     it('should render for textfield', function() {
@@ -462,6 +465,21 @@ describe('ValidationGroup', function() {
     });
 
 
+    it('should read (expression)', function() {
+
+      // given
+      const field = { type: 'number', validate: { min: '=2' } };
+
+      // when
+      const { container } = renderValidationGroup({ field });
+
+      // then
+      const minInput = findTextbox('min', container);
+
+      expect(minInput.textContent).to.eql('2');
+    });
+
+
     it('should write', function() {
 
       // given
@@ -487,6 +505,34 @@ describe('ValidationGroup', function() {
     });
 
 
+    it('should write (expression)', async function() {
+
+      // given
+      const field = {
+        type: 'number',
+        validate: {
+          min: '=3'
+        }
+      };
+
+      const editFieldSpy = sinon.spy();
+
+      const { container } = renderValidationGroup({ field, editField: editFieldSpy });
+
+      const minInput = findTextbox('min', container);
+
+      // assume
+      expect(minInput.textContent).to.equal('3');
+
+      // when
+      await setEditorValue(minInput, '2');
+
+      // then
+      expect(editFieldSpy).to.have.been.calledOnce;
+      expect(field.validate.min).to.equal('=2');
+    });
+
+
     it('should write decimal', function() {
 
       // given
@@ -567,6 +613,21 @@ describe('ValidationGroup', function() {
     });
 
 
+    it('should read (expression)', function() {
+
+      // given
+      const field = { type: 'number', validate: { max: '=2' } };
+
+      // when
+      const { container } = renderValidationGroup({ field });
+
+      // then
+      const maxInput = findTextbox('max', container);
+
+      expect(maxInput.textContent).to.eql('2');
+    });
+
+
     it('should write', function() {
 
       // given
@@ -592,6 +653,34 @@ describe('ValidationGroup', function() {
     });
 
 
+    it('should write (expression)', async function() {
+
+      // given
+      const field = {
+        type: 'number',
+        validate: {
+          max: '=3'
+        }
+      };
+
+      const editFieldSpy = sinon.spy();
+
+      const { container } = renderValidationGroup({ field, editField: editFieldSpy });
+
+      const maxInput = findTextbox('max', container);
+
+      // assume
+      expect(maxInput.textContent).to.equal('3');
+
+      // when
+      await setEditorValue(maxInput, '2');
+
+      // then
+      expect(editFieldSpy).to.have.been.calledOnce;
+      expect(field.validate.max).to.equal('=2');
+    });
+
+
     it('should write decimal', function() {
 
       // given
@@ -643,4 +732,8 @@ function findInput(id, container) {
 
 function findSelect(id, container) {
   return container.querySelector(`select[name="${id}"]`);
+}
+
+function findTextbox(id, container) {
+  return container.querySelector(`[name=${id}] [role="textbox"]`);
 }