feat(filter): Add Slider Range Inputs Option for Numerical Range Filters

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

@@ -183,7 +183,7 @@ describe('Native filters', () => {
       validateFilterContentOnDashboard(testItems.topTenChart.filterColumnYear);
     });
 
-    it('User can create a numerical range filter', () => {
+    it('User can create a numerical range filter with different display modes', () => {
       visitDashboard();
       enterNativeFilterEditModal(false);
       fillNativeFilterForm(
@@ -192,35 +192,140 @@ describe('Native filters', () => {
         testItems.datasetForNativeFilter,
         testItems.filterNumericalColumn,
       );
-      saveNativeFilterSettings([]);
 
-      // Assertions
-      cy.get('[data-test="range-filter-from-input"]')
+      // 1. First test "Range Inputs" mode
+      // First expand the Filter Configuration section if it's not already expanded
+      cy.get('.ant-collapse-header')
+        .contains('Filter Configuration')
+        .then($header => {
+          // Check if panel is already expanded
+          const isExpanded = $header
+            .closest('.ant-collapse-item')
+            .hasClass('ant-collapse-item-active');
+          if (!isExpanded) {
+            cy.wrap($header).click();
+            cy.wait(1000); // Give it more time to fully expand
+          }
+        });
+
+      cy.contains('Range Type')
         .should('be.visible')
-        .click();
+        .closest('.ant-form-item')
+        .find('.ant-select-selector')
+        .click({ force: true });
+
+      // Select Range Inputs option from dropdown
+      cy.get('.ant-select-dropdown:visible')
+        .contains('.ant-select-item-option', 'Range Input')
+        .click({ force: true });
 
+      saveNativeFilterSettings([]);
+
+      // Test inputs functionality
+      cy.get('[data-test="range-filter-from-input"]').should('be.visible');
+      cy.get('[data-test="range-filter-from-input"]').click();
       cy.get('[data-test="range-filter-from-input"]').type('{selectall}5');
 
+      cy.get('[data-test="range-filter-to-input"]').should('be.visible');
+      cy.get('[data-test="range-filter-to-input"]').click();
+      cy.get('[data-test="range-filter-to-input"]').type('{selectall}50');
+
+      cy.get(nativeFilters.applyFilter).click();
+
+      // Verify inputs have correct values
+      cy.get('[data-test="range-filter-from-input"]')
+        .invoke('val')
+        .should('equal', '5');
+
       cy.get('[data-test="range-filter-to-input"]')
+        .invoke('val')
+        .should('equal', '50');
+
+      // 2. Now test "Slider" mode
+      enterNativeFilterEditModal(false);
+
+      cy.get('.ant-collapse-header')
+        .contains('Filter Configuration')
+        .then($header => {
+          const isExpanded = $header
+            .closest('.ant-collapse-item')
+            .hasClass('ant-collapse-item-active');
+          if (!isExpanded) {
+            cy.wrap($header).click();
+            cy.wait(1000); // Give it more time to fully expand
+          }
+        });
+
+      cy.contains('Range Type')
         .should('be.visible')
-        .click();
+        .closest('.ant-form-item')
+        .find('.ant-select-selector')
+        .click({ force: true });
+
+      // Select Slider option from dropdown
+      cy.get('.ant-select-dropdown:visible')
+        .contains('.ant-select-item-option', 'Slider')
+        .click({ force: true });
+
+      saveNativeFilterSettings([]);
+
+      // Verify slider exists and inputs don't
+
+      cy.get('[data-test="range-filter-from-input"]').should('not.exist');
+      cy.get('[data-test="range-filter-to-input"]').should('not.exist');
+
+      // 3. Finally test "Slider and range input" mode (default)
+      enterNativeFilterEditModal(false);
+
+      // First expand the Filter Configuration section if it's not already expanded
+      cy.get('.ant-collapse-header')
+        .contains('Filter Configuration')
+        .then($header => {
+          // Check if panel is already expanded
+          const isExpanded = $header
+            .closest('.ant-collapse-item')
+            .hasClass('ant-collapse-item-active');
+          if (!isExpanded) {
+            cy.wrap($header).click();
+            cy.wait(1000); // Give it more time to fully expand
+          }
+        });
+
+      // Now find the Range Type field in the filter modal
+      cy.contains('Range Type')
+        .should('be.visible')
+        .closest('.ant-form-item')
+        .find('.ant-select-selector')
+        .click({ force: true });
+
+      // Select Slider and range input option from dropdown
+      cy.get('.ant-select-dropdown:visible')
+        .contains('.ant-select-item-option', 'Slider and range input')
+        .click({ force: true });
+
+      saveNativeFilterSettings([]);
+
+      // Test inputs still work in combined mode
+      cy.get('[data-test="range-filter-from-input"]').click();
+      cy.get('[data-test="range-filter-from-input"]').type('{selectall}10');
+
+      cy.get('[data-test="range-filter-to-input"]').click();
+      cy.get('[data-test="range-filter-to-input"]').type('{selectall}40');
 
-      cy.get('[data-test="range-filter-to-input"]').type('{selectall}50');
       cy.get(nativeFilters.applyFilter).click();
 
-      // Assert that the URL contains 'native_filters'
+      // Final assertions - both inputs should have updated values
       cy.url().then(u => {
         const ur = new URL(u);
         expect(ur.search).to.include('native_filters');
 
         cy.get('[data-test="range-filter-from-input"]')
           .invoke('val')
-          .should('equal', '5');
+          .should('equal', '10');
 
-        // Assert that the "To" input has the correct value
         cy.get('[data-test="range-filter-to-input"]')
           .invoke('val')
-          .should('equal', '50');
+          .should('equal', '40');
       });
     });
 

superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts

@@ -293,15 +293,20 @@ export function fillNativeFilterForm(
   }
   cy.get(nativeFilters.silentLoading).should('not.exist');
   if (filterColumn) {
-    cy.get(nativeFilters.filtersPanel.filterInfoInput)
-      .last()
-      .click({ force: true });
-    cy.get(nativeFilters.filtersPanel.filterInfoInput)
-      .last()
-      .type(filterColumn);
-    cy.get(nativeFilters.filtersPanel.inputDropdown)
-      .should('be.visible', { timeout: 20000 })
-      .last()
+    // Target and alias the column field
+    cy.contains('label', 'Column').closest('.ant-form-item').as('columnField');
+
+    cy.get('@columnField').find('.ant-select-selector').click();
+
+    cy.get('@columnField')
+      .find('.ant-select-selection-search-input')
+      .should('be.visible')
+      .type(filterColumn, { delay: 100 });
+
+    cy.get('.ant-select-dropdown')
+      .should('be.visible')
+      .contains('.ant-select-item-option', filterColumn)
+      .should('be.visible')
       .click();
   }
   cy.get(nativeFilters.silentLoading).should('not.exist');
@@ -362,9 +367,26 @@ export function saveNativeFilterSettings(charts: ChartSpec[]) {
   cy.get(nativeFilters.modal.footer)
     .contains('Save')
     .should('be.visible')
-    .click();
+    .click({ force: true });
+
+  // Wait for modal to either close or remain open
+  cy.get('body').should($body => {
+    const modalExists = $body.find(nativeFilters.modal.container).length > 0;
+    if (modalExists) {
+      cy.get(nativeFilters.modal.footer)
+        .contains('Save')
+        .should('be.visible')
+        .click({ force: true });
+    }
+  });
+
+  // Ensure modal is closed
   cy.get(nativeFilters.modal.container).should('not.exist');
-  charts.forEach(waitForChartLoad);
+
+  // Wait for all charts to load
+  charts.forEach(chart => {
+    waitForChartLoad(chart);
+  });
 }
 
 /** ************************************************************************

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

@@ -252,9 +252,11 @@ const DropdownContainer = forwardRef(
             ? items.length - overflowedItems.length
             : index;
 
+        // After determining overflow index, check if the last visible item overlaps with dropdown button
+
+        const button = current?.children.item(1);
         if (width > previousWidth) {
           // Calculates remaining space in the container
-          const button = current?.children.item(1);
           const buttonRight = button?.getBoundingClientRect().right || 0;
           const containerRight = current?.getBoundingClientRect().right || 0;
           const remainingSpace = containerRight - buttonRight;
@@ -271,6 +273,23 @@ const DropdownContainer = forwardRef(
           }
         }
 
+        // Check if the last visible item would overlap with the dropdown button
+        if (
+          button &&
+          newOverflowingIndex > 0 &&
+          childrenArray[newOverflowingIndex - 1]
+        ) {
+          const lastVisibleItem = childrenArray[newOverflowingIndex - 1];
+          const lastItemRect = lastVisibleItem.getBoundingClientRect();
+          const buttonRect = button.getBoundingClientRect();
+
+          // If the gap between last item and button is less than 16px, or there's an overlap,
+          // move the last item to the dropdown
+          const minimumGap = 16; // pixels
+          if (buttonRect.left - lastItemRect.right < minimumGap) {
+            newOverflowingIndex = Math.max(0, newOverflowingIndex - 1);
+          }
+        }
         setOverflowingIndex(newOverflowingIndex);
       }
     }, [

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx

@@ -154,7 +154,7 @@ const HorizontalFormItem = styled(StyledFormItem)<{
   }
 
   .ant-form-item-control {
-    width: ${({ inverseSelection }) => (inverseSelection ? 252 : 164)}px;
+    min-width: ${({ inverseSelection }) => (inverseSelection ? 252 : 164)}px;
   }
 
   .select-container {