From bf43f9dda3fb9ca42064932e5693b58f76e63ff6 Mon Sep 17 00:00:00 2001
From: Valentin Serra <valentin.serra@camunda.com>
Date: Mon, 22 Jan 2024 09:41:49 +0100
Subject: [PATCH] fix: repeatable entry parameters now validate with errors

Closes #966
---
 .../properties-panel/entries/NumberEntries.js |  4 +-
 .../entries/RepeatableEntry.js                |  2 +-
 .../simpleRangeIntegerEntryFactory.js         | 42 +++++++++++--------
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/NumberEntries.js b/packages/form-js-editor/src/features/properties-panel/entries/NumberEntries.js
index 5ca0b4ab8..b313813b5 100644
--- a/packages/form-js-editor/src/features/properties-panel/entries/NumberEntries.js
+++ b/packages/form-js-editor/src/features/properties-panel/entries/NumberEntries.js
@@ -1,10 +1,10 @@
 import { NumberFieldEntry, isNumberFieldEntryEdited, TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
-
-import Big from 'big.js';
 import { get } from 'min-dash';
 import { useService } from '../hooks';
 import { countDecimals, isValidNumber } from '../Util';
 
+import Big from 'big.js';
+
 export function NumberEntries(props) {
   const {
     editField,
diff --git a/packages/form-js-editor/src/features/properties-panel/entries/RepeatableEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/RepeatableEntry.js
index 3d2afdb11..91736b055 100644
--- a/packages/form-js-editor/src/features/properties-panel/entries/RepeatableEntry.js
+++ b/packages/form-js-editor/src/features/properties-panel/entries/RepeatableEntry.js
@@ -21,7 +21,7 @@ export function RepeatableEntry(props) {
       id: 'defaultRepetitions',
       path: [ 'defaultRepetitions' ],
       label: 'Default number of items',
-      min: 0,
+      min: 1,
       max: 20,
       props
     }),
diff --git a/packages/form-js-editor/src/features/properties-panel/entries/factories/simpleRangeIntegerEntryFactory.js b/packages/form-js-editor/src/features/properties-panel/entries/factories/simpleRangeIntegerEntryFactory.js
index 6b8d0bc4b..4b0e52121 100644
--- a/packages/form-js-editor/src/features/properties-panel/entries/factories/simpleRangeIntegerEntryFactory.js
+++ b/packages/form-js-editor/src/features/properties-panel/entries/factories/simpleRangeIntegerEntryFactory.js
@@ -1,6 +1,9 @@
 import { get } from 'min-dash';
 import { useService } from '../../hooks';
-import { NumberFieldEntry, isNumberFieldEntryEdited } from '@bpmn-io/properties-panel';
+import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
+import { isValidNumber } from '../../Util';
+
+import Big from 'big.js';
 
 export function simpleRangeIntegerEntryFactory(options) {
   const {
@@ -9,8 +12,7 @@ export function simpleRangeIntegerEntryFactory(options) {
     path,
     props,
     min,
-    max,
-    defaultValue
+    max
   } = options;
 
   const {
@@ -26,9 +28,8 @@ export function simpleRangeIntegerEntryFactory(options) {
     editField,
     min,
     max,
-    defaultValue,
     component: SimpleRangeIntegerEntry,
-    isEdited: isNumberFieldEntryEdited
+    isEdited: isTextFieldEntryEdited
   };
 }
 
@@ -39,31 +40,38 @@ const SimpleRangeIntegerEntry = (props) => {
     path,
     field,
     editField,
-    min,
-    max,
-    defaultValue
+    min = Number.MIN_SAFE_INTEGER,
+    max = Number.MAX_SAFE_INTEGER
   } = props;
 
   const debounce = useService('debounce');
 
   const getValue = () => {
-    const value = get(field, path, defaultValue);
-    return Number.isInteger(value) ? value : defaultValue;
+    const value = get(field, path);
+    const isValid = isValidNumber(value) && Number.isInteger(value);
+    return isValid ? value : null;
   };
 
-  const setValue = (value) => {
-    editField(field, path, value);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+
+    editField(field, path, Number(value));
   };
 
-  return NumberFieldEntry({
+  return TextFieldEntry({
     debounce,
     label,
     element: field,
-    step: 1,
-    min,
-    max,
     getValue,
     id,
-    setValue
+    setValue,
+    validate: (value) => {
+      if (value === undefined || value === null || value === '') { return; }
+      if (!Number.isInteger(Number(value))) { return 'Should be an integer.'; }
+      if (Big(value).cmp(min) < 0) { return `Should be at least ${min}.`; }
+      if (Big(value).cmp(max) > 0) { return `Should be at most ${max}.`; }
+    }
   });
 };