feat(filter): adding inputs to Numerical Range Filter

superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.noInitState.test.ts

@@ -192,23 +192,34 @@ describe('Native filters', () => {
         testItems.filterNumericalColumn,
       );
       saveNativeFilterSettings([]);
-      // assertions
-      cy.get(nativeFilters.slider.slider).should('be.visible').click('center');
+
+      // Assertions
+      cy.get('[data-test="native-filter-from-input"]')
+        .should('be.visible')
+        .click();
+
+      cy.get('[data-test="native-filter-from-input"]').type('{selectall}5');
+
+      cy.get('[data-test="native-filter-to-input"]')
+        .should('be.visible')
+        .click();
+
+      cy.get('[data-test="native-filter-to-input"]').type('{selectall}50');
       cy.get(nativeFilters.applyFilter).click();
-      // assert that the url contains 'native_filters' in the url
+
+      // Assert that the URL contains 'native_filters'
       cy.url().then(u => {
         const ur = new URL(u);
         expect(ur.search).to.include('native_filters');
-        // assert that the start handle has a value
-        cy.get(nativeFilters.slider.startHandle)
-          .invoke('attr', 'aria-valuenow')
-          .should('exist');
-        // assert that the end handle has a value
-        cy.get(nativeFilters.slider.endHandle)
-          .invoke('attr', 'aria-valuenow')
-          .should('exist');
-        // assert slider text matches what we should have
-        cy.get(nativeFilters.slider.sliderText).should('have.text', '49');
+
+        cy.get('[data-test="native-filter-from-input"]')
+          .invoke('val')
+          .should('equal', '5');
+
+        // Assert that the "To" input has the correct value
+        cy.get('[data-test="native-filter-to-input"]')
+          .invoke('val')
+          .should('equal', '50');
       });
     });
 

superset-frontend/cypress-base/cypress/support/e2e.ts

@@ -169,7 +169,7 @@ Cypress.Commands.add('login', () => {
   }).then(response => {
     if (response.status === 302) {
       // If there's a redirect, follow it manually
-      const redirectUrl = response.headers['location'];
+      const redirectUrl = response.headers.location;
       cy.request({
         method: 'GET',
         url: redirectUrl,

superset-frontend/src/components/Metadata/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { styled } from '@superset-ui/core';
+
+const MetadataWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 100%;
+  margin-top: ${({ theme }) => theme.gridUnit}px;
+`;
+
+const MetadataText = styled.span`
+  font-size: ${({ theme }) => theme.typography.sizes.xs}px;
+  color: ${({ theme }) => theme.colors.grayscale.light1};
+  font-weight: ${({ theme }) => theme.typography.weights.medium};
+`;
+
+export type MetadataProps = {
+  value: string;
+};
+
+const Metadata: React.FC<MetadataProps> = ({ value }) => (
+  <MetadataWrapper>
+    <MetadataText>{value}</MetadataText>
+  </MetadataWrapper>
+);
+
+export default Metadata;

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx

@@ -1249,7 +1249,10 @@ const FiltersConfigForm = (
                     rules={[
                       {
                         validator: () => {
-                          if (formFilter?.defaultDataMask?.filterState?.value) {
+                          if (
+                            formFilter?.defaultDataMask?.filterState?.value !==
+                            undefined
+                          ) {
                             // requires managing the error as the DefaultValue
                             // component does not use an Antdesign compatible input
                             const formValidationFields = form.getFieldsError();

superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { AppSection, GenericDataType } from '@superset-ui/core';
-import { render, screen } from 'spec/helpers/testing-library';
+import { fireEvent, render, screen } from 'spec/helpers/testing-library';
 import RangeFilterPlugin from './RangeFilterPlugin';
 import { SingleValueType } from './SingleValueType';
 import transformProps from './transformProps';
@@ -100,6 +100,48 @@ describe('RangeFilterPlugin', () => {
     jest.clearAllMocks();
   });
 
+  it('should render two numerical inputs', () => {
+    getWrapper();
+
+    const inputs = screen.getAllByRole('spinbutton');
+    expect(inputs).toHaveLength(2);
+
+    expect(inputs[0]).toHaveValue('10');
+    expect(inputs[1]).toHaveValue('70');
+  });
+
+  it('should set the "To" input to be equal to "From" when a lower value is entered', () => {
+    getWrapper();
+
+    const inputs = screen.getAllByRole('spinbutton');
+    const fromInput = inputs[0];
+    const toInput = inputs[1];
+
+    fireEvent.change(fromInput, { target: { value: 20 } });
+
+    fireEvent.change(toInput, { target: { value: 10 } });
+
+    fireEvent.blur(toInput);
+
+    expect(toInput).toHaveValue('20');
+  });
+
+  it('should set the "From" input to be equal to "To" when a higher value is entered', () => {
+    getWrapper();
+
+    const inputs = screen.getAllByRole('spinbutton');
+    const fromInput = inputs[0];
+    const toInput = inputs[1];
+
+    fireEvent.change(toInput, { target: { value: 30 } });
+
+    fireEvent.change(fromInput, { target: { value: 40 } });
+
+    fireEvent.blur(fromInput);
+
+    expect(fromInput).toHaveValue('30');
+  });
+
   it('should call setDataMask with correct filter', () => {
     getWrapper();
     expect(setDataMask).toHaveBeenCalledWith({
@@ -139,7 +181,8 @@ describe('RangeFilterPlugin', () => {
         value: [20, 100],
       },
     });
-    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '20');
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveValue('20');
   });
 
   it('should call setDataMask with correct less than filter', () => {
@@ -162,7 +205,8 @@ describe('RangeFilterPlugin', () => {
         value: [10, 60],
       },
     });
-    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '60');
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveValue('60');
   });
 
   it('should call setDataMask with correct exact filter', () => {