Fix add filter for numeric scripted field (opensearch-project#7022)

* Fix add filter for scripted field

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* add unit test

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* change from nested ternary to if else

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* add more unit tests

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* change unit tests

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* fix typo

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

---------

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

src/plugins/data/public/ui/filter_bar/filter_editor/value_input_type.test.tsx

@@ -0,0 +1,80 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { ValueInputType } from './value_input_type';
+
+let onChangeMock: any;
+
+describe('Value input type', () => {
+  beforeAll(() => {
+    onChangeMock = jest.fn();
+  });
+  it('is number', async () => {
+    const valueInputProps = {
+      value: 1,
+      type: 'number',
+      onChange: onChangeMock,
+      onBlur: () => {},
+      placeholder: '',
+    };
+    const component = mountWithIntl(<ValueInputType {...valueInputProps} />);
+    expect(component.find('EuiFieldNumber').exists()).toBeTruthy();
+    expect(component.find('EuiFieldNumber').prop('value')).toBe(1);
+  });
+
+  it('is string', async () => {
+    const valueInputProps = {
+      value: 'value',
+      type: 'string',
+      onChange: () => {},
+      onBlur: () => {},
+      placeholder: '',
+    };
+    const component = mountWithIntl(<ValueInputType {...valueInputProps} />);
+    expect(component.find('EuiFieldText').exists()).toBeTruthy();
+    expect(component.find('EuiFieldText').prop('value')).toBe('value');
+  });
+
+  it('is boolean', async () => {
+    const valueInputProps = {
+      value: 'true',
+      type: 'boolean',
+      onChange: () => {},
+      onBlur: () => {},
+      placeholder: '',
+    };
+    const component = mountWithIntl(<ValueInputType {...valueInputProps} />);
+    expect(component.find('EuiSelect').exists()).toBeTruthy();
+    expect(component.find('EuiSelect').prop('value')).toBe('true');
+  });
+
+  it('is date', async () => {
+    const valueInputProps = {
+      value: 'Jun 18, 2024 @ 12:01:55.000',
+      type: 'date',
+      onChange: () => {},
+      onBlur: () => {},
+      placeholder: '',
+    };
+    const component = mountWithIntl(<ValueInputType {...valueInputProps} />);
+    expect(component.find('EuiFieldText').exists()).toBeTruthy();
+    expect(component.find('EuiFieldText').prop('value')).toBe('Jun 18, 2024 @ 12:01:55.000');
+  });
+
+  it('is ip', async () => {
+    const valueInputProps = {
+      value: '127.0.0.1',
+      type: 'ip',
+      onChange: () => {},
+      onBlur: () => {},
+      placeholder: '',
+    };
+    const component = mountWithIntl(<ValueInputType {...valueInputProps} />);
+    expect(component.find('EuiFieldText').exists()).toBeTruthy();
+    expect(component.find('EuiFieldText').prop('value')).toBe('127.0.0.1');
+  });
+});

src/plugins/data/public/ui/filter_bar/filter_editor/value_input_type.tsx

@@ -79,7 +79,7 @@ class ValueInputTypeUI extends Component<Props> {
                 ? (value as BigInt).toString()
                 : value
             }
-            onChange={this.onChange}
+            onChange={this.onNumberChange}
             controlOnly={this.props.controlOnly}
             className={this.props.className}
           />
@@ -151,6 +151,17 @@ class ValueInputTypeUI extends Component<Props> {
     this.props.onChange(boolValue);
   };
 
+  private onNumberChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const params = event.target.value;
+    let numValue;
+    if (typeof params === 'string') {
+      numValue = parseFloat(params);
+    } else if (typeof params === 'bigint') {
+      numValue = (params as BigInt).toString();
+    }
+    this.props.onChange(numValue ?? params);
+  };
+
   private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const params = event.target.value;
     this.props.onChange(params);