fix: better input status for ThresholdValueInput (#3640)

Author: ChitlangeSahas

cypress/e2e/shared/notificationRules.test.ts

@@ -69,7 +69,7 @@ describe('NotificationRules', () => {
               .click()
               .type('{backspace}{backspace}')
               .invoke('attr', 'type')
-              .should('equal', 'text')
+              .should('equal', 'number')
               .getByTestID('input-field-CRIT--error')
               .should('have.length', 1)
               .and('have.value', '')

src/alerting/components/builder/ThresholdValueInput.tsx

@@ -1,8 +1,8 @@
 // Libraries
-import React, {FC} from 'react'
+import React, {FC, useState} from 'react'
 
 // Components
-import {FlexBox, Input, InputType} from '@influxdata/clockface'
+import {ComponentStatus, FlexBox, Input, InputType} from '@influxdata/clockface'
 import {GreaterThreshold, LesserThreshold} from 'src/types'
 
 // Utils
@@ -20,17 +20,28 @@ const ThresholdValueStatement: FC<Props> = ({
   changeValue,
   level,
 }) => {
+  const [value, setValue] = useState(threshold.value.toString())
+
   const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value)
     changeValue(convertUserInputToNumOrNaN(e))
   }
+  const getInputStatus = (): ComponentStatus => {
+    if (Number(value)) {
+      return ComponentStatus.Default
+    }
+
+    return ComponentStatus.Error
+  }
   return (
     <FlexBox.Child testID="component-spacer--flex-child">
       <Input
         onChange={onChangeValue}
         name=""
         type={InputType.Number}
-        value={threshold.value}
+        value={value}
         testID={`input-field-${level}`}
+        status={getInputStatus()}
       />
     </FlexBox.Child>
   )