fix(validator): limits as warning instead of error

src/data-workspace/data-entry-cell/data-entry-cell.module.css

@@ -39,7 +39,6 @@
     z-index: 1;
 }
 
-
 .highlighted.active {
     outline-color: var(--theme-focus) !important;
 }
@@ -56,6 +55,15 @@
     );
 }
 
+.warning:not(.active) {
+    background: var(--colors-yellow100);
+    outline: 1px solid var(--colors-red600);
+}
+
+.warning:hover {
+    background: var(--colors-yellow200);
+}
+
 .invalid:not(.active) {
     background: var(--colors-red200);
     outline: 1px solid var(--colors-red600);
@@ -72,7 +80,6 @@
     background: #d8eeda;
 }
 
-
 .topRightIndicator {
     position: absolute;
     top: 0;
@@ -111,6 +118,6 @@
 
 @media print {
     .hideForPrint {
-        composes: hideForPrint from '../../app/app.css'
+        composes: hideForPrint from '../../app/app.css';
     }
-}
+}

src/data-workspace/data-entry-cell/inner-wrapper.js

@@ -9,6 +9,7 @@ import {
     useDataValueParams,
     useValueStore,
     useSyncErrorsStore,
+    useEntryFormStore,
 } from '../../shared/index.js'
 import styles from './data-entry-cell.module.css'
 import { ValidationTooltip } from './validation-tooltip.js'
@@ -94,22 +95,27 @@ export function InnerWrapper({
     const clearSyncError = useSyncErrorsStore(
         (state) => state.clearErrorByDataValueParams
     )
+    const warning = useEntryFormStore((state) => state.getWarning(fieldname))
+    const fieldErrorMessage = error ?? warning
 
     const errorMessage =
         error && syncError ? (
             <div className={styles.validationTooltipMessage}>
-                <div>{error}</div>
+                <div>{fieldErrorMessage}</div>
                 <div>{syncError.displayMessage}</div>
             </div>
         ) : (
-            error ?? syncError?.displayMessage
+            fieldErrorMessage ?? syncError?.displayMessage
         )
+
     const valueSynced = data.lastSyncedValue === value
     const showSynced = dirty && valueSynced
     // todo: maybe use mutation state to improve this style handling
     // see https://dhis2.atlassian.net/browse/TECH-1316
     const cellStateClassName = invalid
         ? styles.invalid
+        : warning
+        ? styles.warning
         : activeMutations === 0 && showSynced
         ? styles.synced
         : null
@@ -137,7 +143,7 @@ export function InnerWrapper({
         <ValidationTooltip
             fieldname={fieldname}
             active={active}
-            invalid={invalid || !!syncError}
+            invalid={warning || invalid || !!syncError}
             content={errorMessage}
         >
             <div

src/data-workspace/inputs/generic-input.js

@@ -5,12 +5,17 @@ import { useField } from 'react-final-form'
 import {
     NUMBER_TYPES,
     VALUE_TYPES,
+    useEntryFormStore,
     useSetDataValueMutation,
 } from '../../shared/index.js'
 import { useMinMaxLimits } from '../use-min-max-limits.js'
 import styles from './inputs.module.css'
 import { InputPropTypes } from './utils.js'
-import { validateByValueTypeWithLimits } from './validators.js'
+import {
+    validateByValueType,
+    limitValidator,
+    warningValidateByValueType,
+} from './validators.js'
 
 const htmlTypeAttrsByValueType = {
     [VALUE_TYPES.DATE]: 'date',
@@ -46,9 +51,24 @@ export const GenericInput = ({
             return value.trim()
         }
     }
+    const setWarning = useEntryFormStore((state) => state.setWarning)
+
     const { input, meta } = useField(fieldname, {
-        validate: validateByValueTypeWithLimits(valueType, limits),
-        subscription: { value: true, dirty: true, valid: true, data: true },
+        validate: (value) => {
+            const warningValidator = warningValidateByValueType(
+                valueType,
+                limits
+            )
+            const warningValidationResult = warningValidator(value)
+            setWarning(fieldname, warningValidationResult)
+            return validateByValueType(valueType, limits)(value)
+        },
+        subscription: {
+            value: true,
+            dirty: true,
+            valid: true,
+            data: true,
+        },
         format: formatValue,
         formatOnBlur: true,
         // This is required to ensure form is validated on first page load

src/data-workspace/inputs/validators.js

@@ -87,13 +87,19 @@ export const validatorsByValueType = {
     [VALUE_TYPES.URL]: url,
 }
 
-export const validateByValueTypeWithLimits = (valueType, limits) => {
+export const validateByValueType = (valueType) => {
     const validators = []
 
     if (validatorsByValueType[valueType]) {
         validators.push(validatorsByValueType[valueType])
     }
 
+    return composeValidators(...validators)
+}
+
+export const warningValidateByValueType = (valueType, limits) => {
+    const validators = []
+
     if (
         CAN_HAVE_LIMITS_TYPES.includes(valueType) &&
         Number.isFinite(limits?.min) &&

src/shared/stores/entry-form-store.js

@@ -1,15 +1,26 @@
+import { setIn, getIn } from 'final-form'
 import create from 'zustand'
-
+import { devtools } from 'zustand/middleware'
 const inititalState = {
     errors: {},
+    warnings: {},
 }
 
-export const useEntryFormStore = create((set, get) => ({
-    ...inititalState,
-    setErrors: (errors) => set({ errors: errors ?? {} }),
-    getErrors: () => get().errors,
-    getNumberOfErrors: () => countLeaves(get().getErrors()),
-}))
+export const useEntryFormStore = create(
+    devtools((set, get) => ({
+        ...inititalState,
+        setErrors: (errors) => set({ errors: errors ?? {} }),
+        getErrors: () => get().errors,
+        getNumberOfErrors: () => countLeaves(get().getErrors()),
+        getWarnings: () => get().warnings,
+        getWarning: (fieldname) => getIn(get().getWarnings(), fieldname),
+        setWarning: (fieldname, warning) => {
+            const warnings = get().getWarnings() || {}
+            const newWarnings = setIn(warnings, fieldname, warning)
+            set({ warnings: newWarnings })
+        },
+    }))
+)
 
 // errors object is the same shape as form-Values
 // eg. { [dataElementId] : {