Add feedback if condition is valid

Author: dgodinez-dh

packages/iris-grid/src/sidebar/conditional-formatting/ConditionEditor.tsx

@@ -140,6 +140,7 @@ function getNumberInputs(
   handleValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
   handleStartValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
   handleEndValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
+  isInvalid: boolean,
   conditionValue?: string,
   startValue?: string,
   endValue?: string
@@ -154,7 +155,7 @@ function getNumberInputs(
       return (
         <input
           type="number"
-          className="form-control"
+          className={`form-control ${isInvalid ? 'is-invalid' : ''}`}
           placeholder="Enter value"
           value={conditionValue ?? ''}
           onChange={handleValueChange}
@@ -165,14 +166,16 @@ function getNumberInputs(
         <div className="d-flex flex-row">
           <input
             type="number"
-            className="form-control d-flex mr-2"
+            className={`form-control d-flex mr-2 ${
+              isInvalid ? 'is-invalid' : ''
+            }`}
             placeholder="Start value"
             value={startValue ?? ''}
             onChange={handleStartValueChange}
           />
           <input
             type="number"
-            className="form-control d-flex"
+            className={`form-control d-flex ${isInvalid ? 'is-invalid' : ''}`}
             placeholder="End value"
             value={endValue ?? ''}
             onChange={handleEndValueChange}
@@ -188,6 +191,7 @@ function getNumberInputs(
 function getStringInputs(
   selectedCondition: StringCondition,
   handleValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
+  isInvalid: boolean,
   conditionValue?: string
 ): JSX.Element | null {
   switch (selectedCondition) {
@@ -198,7 +202,7 @@ function getStringInputs(
       return (
         <input
           type="text"
-          className="form-control"
+          className={`form-control ${isInvalid ? 'is-invalid' : ''}`}
           placeholder="Enter value"
           value={conditionValue ?? ''}
           onChange={handleValueChange}
@@ -210,6 +214,7 @@ function getStringInputs(
 function getDateInputs(
   selectedCondition: DateCondition,
   handleValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
+  isInvalid: boolean,
   conditionValue?: string
 ): JSX.Element | null {
   switch (selectedCondition) {
@@ -220,7 +225,7 @@ function getDateInputs(
       return (
         <input
           type="text"
-          className="form-control"
+          className={`form-control ${isInvalid ? 'is-invalid' : ''}`}
           placeholder="Enter value"
           value={conditionValue ?? ''}
           onChange={handleValueChange}
@@ -236,6 +241,7 @@ function getBooleanInputs(): null {
 function getCharInputs(
   selectedCondition: CharCondition,
   handleValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
+  isInvalid: boolean,
   conditionValue?: string
 ): JSX.Element | null {
   switch (selectedCondition) {
@@ -246,7 +252,7 @@ function getCharInputs(
       return (
         <input
           type="text"
-          className="form-control"
+          className={`form-control ${isInvalid ? 'is-invalid' : ''}`}
           maxLength={1}
           placeholder="Enter value"
           value={conditionValue ?? ''}
@@ -264,6 +270,7 @@ function ConditionEditor(props: ConditionEditorProps): JSX.Element {
   const [conditionValue, setValue] = useState(config.value);
   const [startValue, setStartValue] = useState(config.start);
   const [endValue, setEndValue] = useState(config.end);
+  const [isValid, setIsValid] = useState(true);
 
   if (selectedColumnType !== prevColumnType) {
     // Column type changed, reset condition and value fields
@@ -329,13 +336,13 @@ function ConditionEditor(props: ConditionEditorProps): JSX.Element {
 
   useEffect(
     function changeCondition() {
-      let isValid = true;
+      let isConditionValid = true;
 
       if (selectedCondition === undefined) {
         log.debug(
           'Unable to create formatting rule. Condition is not selected.'
         );
-        isValid = false;
+        isConditionValid = false;
       } else if (
         TableUtils.isNumberType(column.type) &&
         !isNumberConditionValid(
@@ -349,7 +356,7 @@ function ConditionEditor(props: ConditionEditorProps): JSX.Element {
           'Unable to create formatting rule. Invalid value',
           conditionValue
         );
-        isValid = false;
+        isConditionValid = false;
       } else if (
         TableUtils.isDateType(column.type) &&
         !isDateConditionValid(
@@ -362,17 +369,18 @@ function ConditionEditor(props: ConditionEditorProps): JSX.Element {
           'Unable to create formatting rule. Invalid date condition',
           conditionValue
         );
-        isValid = false;
+        isConditionValid = false;
       }
 
+      setIsValid(isConditionValid);
       onChange(
         {
           condition: selectedCondition,
           value: conditionValue,
           start: startValue,
           end: endValue,
         },
-        isValid
+        isConditionValid
       );
     },
     [
@@ -397,6 +405,7 @@ function ConditionEditor(props: ConditionEditorProps): JSX.Element {
         handleValueChange,
         handleStartValueChange,
         handleEndValueChange,
+        !isValid,
         conditionValue,
         startValue,
         endValue
@@ -406,20 +415,23 @@ function ConditionEditor(props: ConditionEditorProps): JSX.Element {
       return getCharInputs(
         selectedCondition as CharCondition,
         handleValueChange,
+        !isValid,
         conditionValue
       );
     }
     if (TableUtils.isStringType(selectedColumnType)) {
       return getStringInputs(
         selectedCondition as StringCondition,
         handleValueChange,
+        !isValid,
         conditionValue
       );
     }
     if (TableUtils.isDateType(selectedColumnType)) {
       return getDateInputs(
         selectedCondition as DateCondition,
         handleValueChange,
+        !isValid,
         conditionValue
       );
     }
@@ -432,6 +444,7 @@ function ConditionEditor(props: ConditionEditorProps): JSX.Element {
     conditionValue,
     startValue,
     endValue,
+    isValid,
     handleValueChange,
     handleStartValueChange,
     handleEndValueChange,