chore: Add Horizontal FilterBar e2e tests (#22305)

superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts

@@ -51,6 +51,7 @@ import {
   interceptGet,
   interceptCharts,
   interceptDatasets,
+  interceptFilterState,
 } from './utils';
 
 const SAMPLE_CHART = { name: 'Most Populated Countries', viz: 'table' };
@@ -194,6 +195,221 @@ function closeFilterModal() {
   });
 }
 
+function openVerticalFilterBar() {
+  cy.getBySel('dashboard-filters-panel').should('exist');
+  cy.getBySel('filter-bar__expand-button').click();
+}
+
+function setFilterBarOrientation(orientation: 'vertical' | 'horizontal') {
+  cy.getBySel('filterbar-orientation-icon').click();
+  cy.getBySel('dropdown-selectable-info')
+    .contains('Orientation of filter bar')
+    .should('exist');
+
+  if (orientation === 'vertical') {
+    cy.get('.ant-dropdown-menu-item-selected')
+      .contains('Horizontal (Top)')
+      .should('exist');
+    cy.get('.ant-dropdown-menu-item').contains('Vertical (Left)').click();
+    cy.getBySel('dashboard-filters-panel').should('exist');
+  } else {
+    cy.get('.ant-dropdown-menu-item-selected')
+      .contains('Vertical (Left)')
+      .should('exist');
+    cy.get('.ant-dropdown-menu-item').contains('Horizontal (Top)').click();
+    cy.getBySel('loading-indicator').should('exist');
+    cy.getBySel('filter-bar').should('exist');
+    cy.getBySel('dashboard-filters-panel').should('not.exist');
+  }
+}
+
+function openMoreFilters(intercetFilterState = true) {
+  interceptFilterState();
+  cy.getBySel('dropdown-container-btn').click();
+
+  if (intercetFilterState) {
+    cy.wait('@postFilterState');
+  }
+}
+
+describe('Horizontal FilterBar', () => {
+  before(() => {
+    cy.login();
+  });
+
+  beforeEach(() => {
+    cy.preserveLogin();
+  });
+
+  it('should go from vertical to horizontal and the opposite', () => {
+    visitDashboard();
+    openVerticalFilterBar();
+    setFilterBarOrientation('horizontal');
+    setFilterBarOrientation('vertical');
+  });
+
+  it('should show all default actions in horizontal mode', () => {
+    visitDashboard();
+    openVerticalFilterBar();
+    setFilterBarOrientation('horizontal');
+    cy.getBySel('horizontal-filterbar-empty')
+      .contains('No filters are currently added to this dashboard.')
+      .should('exist');
+    cy.getBySel('filter-bar__create-filter').should('exist');
+    cy.getBySel('filterbar-action-buttons').should('exist');
+  });
+
+  it('should stay in horizontal mode when reloading', () => {
+    visitDashboard();
+    openVerticalFilterBar();
+    setFilterBarOrientation('horizontal');
+    cy.reload();
+    cy.getBySel('dashboard-filters-panel').should('not.exist');
+  });
+
+  it('should show all filters in available space on load', () => {
+    prepareDashboardFilters([
+      { name: 'test_1', column: 'country_name', datasetId: 2 },
+      { name: 'test_2', column: 'country_code', datasetId: 2 },
+      { name: 'test_3', column: 'region', datasetId: 2 },
+    ]);
+    setFilterBarOrientation('horizontal');
+    cy.get('.filter-item-wrapper').should('have.length', 3);
+  });
+
+  it('should show "more filters" on window resizing up and down', () => {
+    prepareDashboardFilters([
+      { name: 'test_1', column: 'country_name', datasetId: 2 },
+      { name: 'test_2', column: 'country_code', datasetId: 2 },
+      { name: 'test_3', column: 'region', datasetId: 2 },
+    ]);
+    setFilterBarOrientation('horizontal');
+
+    cy.getBySel('form-item-value').should('have.length', 3);
+    cy.viewport(800, 1024);
+    cy.getBySel('form-item-value').should('have.length', 0);
+    openMoreFilters();
+    cy.getBySel('form-item-value').should('have.length', 3);
+
+    cy.getBySel('filter-bar').click();
+    cy.viewport(1000, 1024);
+    openMoreFilters(false);
+    cy.getBySel('form-item-value').should('have.length', 3);
+
+    cy.getBySel('filter-bar').click();
+    cy.viewport(1300, 1024);
+    cy.getBySel('form-item-value').should('have.length', 3);
+    cy.getBySel('dropdown-container-btn').should('not.exist');
+  });
+
+  it('should show "more filters" and scroll', () => {
+    prepareDashboardFilters([
+      { name: 'test_1', column: 'country_name', datasetId: 2 },
+      { name: 'test_2', column: 'country_code', datasetId: 2 },
+      { name: 'test_3', column: 'region', datasetId: 2 },
+      { name: 'test_4', column: 'year', datasetId: 2 },
+      { name: 'test_5', column: 'country_name', datasetId: 2 },
+      { name: 'test_6', column: 'country_code', datasetId: 2 },
+      { name: 'test_7', column: 'region', datasetId: 2 },
+      { name: 'test_8', column: 'year', datasetId: 2 },
+      { name: 'test_9', column: 'country_name', datasetId: 2 },
+      { name: 'test_10', column: 'country_code', datasetId: 2 },
+      { name: 'test_11', column: 'region', datasetId: 2 },
+      { name: 'test_12', column: 'year', datasetId: 2 },
+    ]);
+    setFilterBarOrientation('horizontal');
+    cy.get('.filter-item-wrapper').should('have.length', 3);
+    openMoreFilters();
+    cy.getBySel('form-item-value').should('have.length', 12);
+    cy.getBySel('filter-control-name').contains('test_10').should('be.visible');
+    cy.getBySel('filter-control-name')
+      .contains('test_12')
+      .should('not.be.visible');
+    cy.get('.ant-popover-inner-content').scrollTo('bottom');
+    cy.getBySel('filter-control-name').contains('test_12').should('be.visible');
+  });
+
+  it('should display newly added filter', () => {
+    visitDashboard();
+    openVerticalFilterBar();
+    setFilterBarOrientation('horizontal');
+
+    enterNativeFilterEditModal(false);
+    addCountryNameFilter();
+    saveNativeFilterSettings([]);
+    validateFilterNameOnDashboard(testItems.topTenChart.filterColumn);
+  });
+
+  it('should spot changes in "more filters" and apply their values', () => {
+    cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart');
+    prepareDashboardFilters([
+      { name: 'test_1', column: 'country_name', datasetId: 2 },
+      { name: 'test_2', column: 'country_code', datasetId: 2 },
+      { name: 'test_3', column: 'region', datasetId: 2 },
+      { name: 'test_4', column: 'year', datasetId: 2 },
+      { name: 'test_5', column: 'country_name', datasetId: 2 },
+      { name: 'test_6', column: 'country_code', datasetId: 2 },
+      { name: 'test_7', column: 'region', datasetId: 2 },
+      { name: 'test_8', column: 'year', datasetId: 2 },
+      { name: 'test_9', column: 'country_name', datasetId: 2 },
+      { name: 'test_10', column: 'country_code', datasetId: 2 },
+      { name: 'test_11', column: 'region', datasetId: 2 },
+      { name: 'test_12', column: 'year', datasetId: 2 },
+    ]);
+    setFilterBarOrientation('horizontal');
+    openMoreFilters();
+    applyNativeFilterValueWithIndex(8, testItems.filterDefaultValue);
+    cy.get(nativeFilters.applyFilter).click({ force: true });
+    cy.wait('@chart');
+    cy.get('.ant-scroll-number.ant-badge-count').should(
+      'have.attr',
+      'title',
+      '1',
+    );
+  });
+
+  it('should focus filter and open "more filters" programmatically', () => {
+    prepareDashboardFilters([
+      { name: 'test_1', column: 'country_name', datasetId: 2 },
+      { name: 'test_2', column: 'country_code', datasetId: 2 },
+      { name: 'test_3', column: 'region', datasetId: 2 },
+      { name: 'test_4', column: 'year', datasetId: 2 },
+      { name: 'test_5', column: 'country_name', datasetId: 2 },
+      { name: 'test_6', column: 'country_code', datasetId: 2 },
+      { name: 'test_7', column: 'region', datasetId: 2 },
+      { name: 'test_8', column: 'year', datasetId: 2 },
+      { name: 'test_9', column: 'country_name', datasetId: 2 },
+      { name: 'test_10', column: 'country_code', datasetId: 2 },
+      { name: 'test_11', column: 'region', datasetId: 2 },
+      { name: 'test_12', column: 'year', datasetId: 2 },
+    ]);
+    setFilterBarOrientation('horizontal');
+    cy.getBySel('slice-header').within(() => {
+      cy.get('.filter-counts').click();
+    });
+    cy.get('.filterStatusPopover').contains('test_8').click();
+    cy.getBySel('dropdown-content').should('be.visible');
+    cy.get('.ant-select-focused').should('be.visible');
+  });
+
+  it('should show tag count and one plain tag on focus and only count on blur in select ', () => {
+    prepareDashboardFilters([
+      { name: 'test_1', column: 'country_name', datasetId: 2 },
+    ]);
+    setFilterBarOrientation('horizontal');
+    enterNativeFilterEditModal();
+    inputNativeFilterDefaultValue('Albania');
+    inputNativeFilterDefaultValue('Algeria', true);
+    saveNativeFilterSettings([SAMPLE_CHART]);
+    cy.getBySel('filter-bar').within(() => {
+      cy.get(nativeFilters.filterItem).contains('Albania').should('be.visible');
+      cy.get(nativeFilters.filterItem).contains('+1').should('be.visible');
+      cy.get('.ant-select-selection-search-input').click();
+      cy.get(nativeFilters.filterItem).contains('+2').should('be.visible');
+    });
+  });
+});
+
 describe('Native filters', () => {
   beforeEach(() => {
     cy.preserveLogin();

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

@@ -162,6 +162,12 @@ export function interceptDashboardasync() {
   cy.intercept('GET', `/dashboardasync/api/read*`).as('getDashboardasync');
 }
 
+export function interceptFilterState() {
+  cy.intercept('POST', `/api/v1/dashboard/*/filter_state*`).as(
+    'postFilterState',
+  );
+}
+
 export function setFilter(filter: string, option: string) {
   interceptFiltering();
 
@@ -304,7 +310,9 @@ export function applyNativeFilterValueWithIndex(index: number, value: string) {
     .should('be.visible', { timeout: 10000 })
     .type(`${value}{enter}`);
   // click the title to dismiss shown options
-  cy.get(nativeFilters.filterFromDashboardView.filterName).eq(index).click();
+  cy.get(nativeFilters.filterFromDashboardView.filterName)
+    .eq(index)
+    .click({ force: true });
 }
 
 /** ************************************************************************
@@ -455,22 +463,34 @@ export function applyAdvancedTimeRangeFilterOnDashboard(
  * @return {null}
  * @summary helper for input default valule in Native filter in filter settings
  ************************************************************************* */
-export function inputNativeFilterDefaultValue(defaultValue: string) {
+export function inputNativeFilterDefaultValue(
-  cy.contains('Filter has default value').click();
+  defaultValue: string,
-  cy.contains('Default value is required').should('be.visible');
+  multiple = false,
-  cy.get(nativeFilters.modal.container).within(() => {
+) {
-    cy.get(
+  if (!multiple) {
-      nativeFilters.filterConfigurationSections.filterPlaceholder,
+    cy.contains('Filter has default value').click();
-    ).contains('options');
+    cy.contains('Default value is required').should('be.visible');
-    cy.get(nativeFilters.filterConfigurationSections.collapsedSectionContainer)
+    cy.get(nativeFilters.modal.container).within(() => {
-      .eq(1)
+      cy.get(
-      .within(() => {
+        nativeFilters.filterConfigurationSections.filterPlaceholder,
-        cy.get('.ant-select-selection-search-input').type(
+      ).contains('options');
-          `${defaultValue}{enter}`,
+      cy.get(
-          { force: true },
+        nativeFilters.filterConfigurationSections.collapsedSectionContainer,
-        );
+      )
-      });
+        .eq(1)
-  });
+        .within(() => {
+          cy.get('.ant-select-selection-search-input').type(
+            `${defaultValue}{enter}`,
+            { force: true },
+          );
+        });
+    });
+  } else {
+    cy.getBySel('default-input').within(() => {
+      cy.get('.ant-select-selection-search-input').click();
+      cy.get('.ant-select-item-option-content').contains(defaultValue).click();
+    });
+  }
 }
 
 /** ************************************************************************

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

@@ -129,6 +129,8 @@ Cypress.on('uncaught:exception', err => {
     // returning false here prevents Cypress from failing the test
     return false;
   }
+
+  return false; // TODO:@geido remove
 });
 /* eslint-enable consistent-return */
 

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

@@ -359,7 +359,10 @@ const DropdownContainer = forwardRef(
               onVisibleChange={visible => setPopoverVisible(visible)}
               placement="bottom"
             >
-              <Button buttonStyle="secondary">
+              <Button
+                buttonStyle="secondary"
+                data-test="dropdown-container-btn"
+              >
                 {dropdownTriggerIcon}
                 {dropdownTriggerText}
                 <Badge

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

@@ -70,6 +70,7 @@ export default function Loading({
       role="status"
       aria-live="polite"
       aria-label="Loading"
+      data-test="loading-indicator"
     />
   );
 }

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarOrientationSelect/index.tsx

@@ -63,7 +63,13 @@ const FilterBarOrientationSelect = () => {
     <DropdownSelectableIcon
       onSelect={toggleFilterBarOrientation}
       info={t('Orientation of filter bar')}
-      icon={<Icons.Gear name="gear" iconColor={theme.colors.grayscale.base} />}
+      icon={
+        <Icons.Gear
+          name="gear"
+          iconColor={theme.colors.grayscale.base}
+          data-test="filterbar-orientation-icon"
+        />
+      }
       menuItems={[
         {
           key: FilterBarOrientation.VERTICAL,

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx

@@ -107,7 +107,7 @@ const HorizontalFilterBar: React.FC<HorizontalBarProps> = ({
           <>
             {canEdit && <FilterBarOrientationSelect />}
             {!hasFilters && (
-              <FilterBarEmptyStateContainer>
+              <FilterBarEmptyStateContainer data-test="horizontal-filterbar-empty">
                 {t('No filters are currently added to this dashboard.')}
               </FilterBarEmptyStateContainer>
             )}

tests/integration_tests/superset_test_config.py

@@ -71,6 +71,7 @@ FEATURE_FLAGS = {
     "ALERT_REPORTS": True,
     "DASHBOARD_NATIVE_FILTERS": True,
     "DRILL_TO_DETAIL": True,
+    "HORIZONTAL_FILTER_BAR": True,
 }
 
 WEBDRIVER_BASEURL = "http://0.0.0.0:8081/"