feat: bonus: add parsing error highlighting

Author: r0b1n

packages/shared/widget-plugin-filtering/src/controllers/input/NumberInputController.ts

@@ -88,7 +88,9 @@ export class NumberFilterController {
         disposers.push(
             autorun(() => {
                 this.input1.setValue(this.filter.arg1.displayValue);
+                this.input1.setIsValid(this.filter.arg1.isValid);
                 this.input2.setValue(this.filter.arg2.displayValue);
+                this.input2.setIsValid(this.filter.arg2.isValid);
             })
         );
 

packages/shared/widget-plugin-filtering/src/controls/input/InputWithFilters.tsx

@@ -11,7 +11,7 @@ export function InputWithFiltersComponent<Fn extends AllFunctions>(props: InputC
     } = props;
     return (
         <div
-            className={classNames("filter-container", props.className)}
+            className={classNames("filter-container", props.className, { "has-error": !input1.isValid })}
             data-focusindex={props.tabIndex ?? 0}
             style={props.styles}
         >
@@ -24,6 +24,7 @@ export function InputWithFiltersComponent<Fn extends AllFunctions>(props: InputC
                 />
             )}
             <input
+                aria-invalid={input1.isValid ? undefined : true}
                 aria-label={props.screenReaderInputCaption}
                 className={classNames("form-control", { "filter-input": props.adjustable })}
                 disabled={props.disableInputs}

packages/shared/widget-plugin-filtering/src/stores/input/InputStore.ts

@@ -2,12 +2,14 @@ import { makeObservable, observable, action } from "mobx";
 
 export class InputStore {
     value: string;
+    isValid = true;
 
     constructor(init = "") {
         this.value = init;
 
         makeObservable(this, {
             value: observable,
+            isValid: observable,
             setValue: action,
             onChange: action
         });
@@ -17,6 +19,10 @@ export class InputStore {
         this.value = value;
     }
 
+    setIsValid(value: boolean): void {
+        this.isValid = value;
+    }
+
     onChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
         this.setValue(event.target.value);
     };