feat: Move cross filters to Dashboard (#22785)

apache · Jan 25, 2023 · 9ed2326 · 9ed2326
1 parent 262c947
commit 9ed2326
Show file tree

Hide file tree

Showing 87 changed files with 811 additions and 637 deletions.
diff --git a/superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts b/superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts
@@ -23,91 +23,35 @@ import { setFilter } from '../explore/utils';
 describe('Charts filters', () => {
   before(() => {
     cy.visit(CHART_LIST);
+    setGridMode('card');
   });
 
   beforeEach(() => {
     clearAllInputs();
   });
 
-  describe('card-view', () => {
-    before(() => {
-      setGridMode('card');
-    });
-
-    xit('should filter by owners correctly', () => {
-      setFilter('Owner', 'alpha user');
-      cy.getBySel('styled-card').should('not.exist');
-      setFilter('Owner', 'admin user');
-      cy.getBySel('styled-card').should('exist');
-    });
-
-    xit('should filter by created by correctly', () => {
-      setFilter('Created by', 'alpha user');
-      cy.getBySel('styled-card').should('not.exist');
-      setFilter('Created by', 'admin user');
-      cy.getBySel('styled-card').should('exist');
-    });
-
-    it('should filter by viz type correctly', () => {
-      setFilter('Chart type', 'Area Chart (legacy)');
-      cy.getBySel('styled-card').should('have.length', 3);
-      setFilter('Chart type', 'Bubble Chart');
-      cy.getBySel('styled-card').should('have.length', 2);
-    });
-
-    it('should filter by datasource correctly', () => {
-      setFilter('Dataset', 'energy_usage');
-      cy.getBySel('styled-card').should('have.length', 3);
-      setFilter('Dataset', 'unicode_test');
-      cy.getBySel('styled-card').should('have.length', 1);
-    });
-
-    it('should filter by dashboards correctly', () => {
-      setFilter('Dashboards', 'Unicode Test');
-      cy.getBySel('styled-card').should('have.length', 1);
-      setFilter('Dashboards', 'Tabbed Dashboard');
-      cy.getBySel('styled-card').should('have.length', 9);
-    });
+  it('should allow filtering by "Owner"', () => {
+    setFilter('Owner', 'alpha user');
+    setFilter('Owner', 'admin user');
   });
 
-  describe('list-view', () => {
-    before(() => {
-      setGridMode('list');
-    });
-
-    xit('should filter by owners correctly', () => {
-      setFilter('Owner', 'alpha user');
-      cy.getBySel('table-row').should('not.exist');
-      setFilter('Owner', 'admin user');
-      cy.getBySel('table-row').should('exist');
-    });
-
-    xit('should filter by created by correctly', () => {
-      setFilter('Created by', 'alpha user');
-      cy.getBySel('table-row').should('not.exist');
-      setFilter('Created by', 'admin user');
-      cy.getBySel('table-row').should('exist');
-    });
+  it('should allow filtering by "Created by" correctly', () => {
+    setFilter('Created by', 'alpha user');
+    setFilter('Created by', 'admin user');
+  });
 
-    it('should filter by viz type correctly', () => {
-      setFilter('Chart type', 'Area Chart (legacy)');
-      cy.getBySel('table-row').should('have.length', 3);
-      setFilter('Chart type', 'Bubble Chart');
-      cy.getBySel('table-row').should('have.length', 2);
-    });
+  it('should allow filtering by "Chart type" correctly', () => {
+    setFilter('Chart type', 'Area Chart (legacy)');
+    setFilter('Chart type', 'Bubble Chart');
+  });
 
-    it('should filter by datasource correctly', () => {
-      setFilter('Dataset', 'energy_usage');
-      cy.getBySel('table-row').should('have.length', 3);
-      setFilter('Dataset', 'unicode_test');
-      cy.getBySel('table-row').should('have.length', 1);
-    });
+  it('should allow filtering by "Dataset" correctly', () => {
+    setFilter('Dataset', 'energy_usage');
+    setFilter('Dataset', 'unicode_test');
+  });
 
-    it('should filter by dashboards correctly', () => {
-      setFilter('Dashboards', 'Unicode Test');
-      cy.getBySel('table-row').should('have.length', 1);
-      setFilter('Dashboards', 'Tabbed Dashboard');
-      cy.getBySel('table-row').should('have.length', 9);
-    });
+  it('should allow filtering by "Dashboards" correctly', () => {
+    setFilter('Dashboards', 'Unicode Test');
+    setFilter('Dashboards', 'Tabbed Dashboard');
   });
 });
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts
@@ -128,6 +128,7 @@ function prepareDashboardFilters(
         label_colors: {},
         shared_label_colors: {},
         color_scheme_domain: [],
+        cross_filters_enabled: false,
         positions: {
           DASHBOARD_VERSION_KEY: 'v2',
           ROOT_ID: { type: 'ROOT', id: 'ROOT_ID', children: ['GRID_ID'] },
@@ -203,9 +204,10 @@ function openVerticalFilterBar() {
 function setFilterBarOrientation(orientation: 'vertical' | 'horizontal') {
   cy.getBySel('filterbar-orientation-icon').click();
   cy.wait(250);
-  cy.getBySel('dropdown-selectable-info')
+  cy.getBySel('dropdown-selectable-icon-submenu')
     .contains('Orientation of filter bar')
-    .should('exist');
+    .should('exist')
+    .trigger('mouseover');
 
   if (orientation === 'vertical') {
     cy.get('.ant-dropdown-menu-item-selected')

diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard_list/filter.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard_list/filter.test.ts
@@ -23,63 +23,25 @@ import { setFilter } from '../dashboard/utils';
 describe('Dashboards filters', () => {
   before(() => {
     cy.visit(DASHBOARD_LIST);
+    setGridMode('card');
   });
 
   beforeEach(() => {
     clearAllInputs();
   });
 
-  describe('card-view', () => {
-    before(() => {
-      setGridMode('card');
-    });
-
-    xit('should filter by owners correctly', () => {
-      setFilter('Owner', 'alpha user');
-      cy.getBySel('styled-card').should('not.exist');
-      setFilter('Owner', 'admin user');
-      cy.getBySel('styled-card').should('exist');
-    });
-
-    xit('should filter by created by correctly', () => {
-      setFilter('Created by', 'alpha user');
-      cy.getBySel('styled-card').should('not.exist');
-      setFilter('Created by', 'admin user');
-      cy.getBySel('styled-card').should('exist');
-    });
-
-    it('should filter by published correctly', () => {
-      setFilter('Status', 'Published');
-      cy.getBySel('styled-card').should('have.length', 3);
-      setFilter('Status', 'Draft');
-      cy.getBySel('styled-card').should('have.length', 2);
-    });
+  it('should allow filtering by "Owner" correctly', () => {
+    setFilter('Owner', 'alpha user');
+    setFilter('Owner', 'admin user');
   });
 
-  describe('list-view', () => {
-    before(() => {
-      setGridMode('list');
-    });
-
-    xit('should filter by owners correctly', () => {
-      setFilter('Owner', 'alpha user');
-      cy.getBySel('table-row').should('not.exist');
-      setFilter('Owner', 'admin user');
-      cy.getBySel('table-row').should('exist');
-    });
-
-    xit('should filter by created by correctly', () => {
-      setFilter('Created by', 'alpha user');
-      cy.getBySel('table-row').should('not.exist');
-      setFilter('Created by', 'admin user');
-      cy.getBySel('table-row').should('exist');
-    });
+  it('should allow filtering by "Created by" correctly', () => {
+    setFilter('Created by', 'alpha user');
+    setFilter('Created by', 'admin user');
+  });
 
-    it('should filter by published correctly', () => {
-      setFilter('Status', 'Published');
-      cy.getBySel('table-row').should('have.length', 3);
-      setFilter('Status', 'Draft');
-      cy.getBySel('table-row').should('have.length', 2);
-    });
+  it('should allow filtering by "Status" correctly', () => {
+    setFilter('Status', 'Published');
+    setFilter('Status', 'Draft');
   });
 });
diff --git a/superset-frontend/cypress-base/cypress/utils/index.ts b/superset-frontend/cypress-base/cypress/utils/index.ts
@@ -34,7 +34,11 @@ export function toggleBulkSelect() {
 }
 
 export function clearAllInputs() {
-  cy.get('[aria-label="close-circle"]').click({ multiple: true, force: true });
+  cy.get('body').then($body => {
+    if ($body.find('.ant-select-clear').length) {
+      cy.get('.ant-select-clear').click({ multiple: true, force: true });
+    }
+  });
 }
 
 const toSlicelike = ($chart: JQuery<HTMLElement>): Slice => ({

diff --git a/...rset-frontend/packages/superset-ui-chart-controls/src/sections/echartsTimeSeriesQuery.tsx b/...rset-frontend/packages/superset-ui-chart-controls/src/sections/echartsTimeSeriesQuery.tsx
@@ -20,7 +20,6 @@ import { hasGenericChartAxes, t } from '@superset-ui/core';
 import { ControlPanelSectionConfig, ControlSetRow } from '../types';
 import {
   contributionModeControl,
-  emitFilterControl,
   xAxisSortControl,
   xAxisSortAscControl,
 } from '../shared-controls';
@@ -30,7 +29,6 @@ const controlsWithoutXAxis: ControlSetRow[] = [
   ['groupby'],
   [contributionModeControl],
   ['adhoc_filters'],
-  emitFilterControl,
   ['limit'],
   ['timeseries_limit_metric'],
   ['order_desc'],

diff --git a/...chart-controls/src/shared-controls/components/ColumnConfigControl/ColumnConfigControl.tsx b/...chart-controls/src/shared-controls/components/ColumnConfigControl/ColumnConfigControl.tsx
@@ -40,7 +40,6 @@ export type ColumnConfigControlProps<T extends ColumnConfig> =
     queryResponse?: ChartDataResponseResult;
     configFormLayout?: ColumnConfigFormLayout;
     appliedColumnNames?: string[];
-    emitFilter: boolean;
   };
 
 /**
@@ -57,24 +56,8 @@ export default function ColumnConfigControl<T extends ColumnConfig>({
   value,
   onChange,
   configFormLayout = DEFAULT_CONFIG_FORM_LAYOUT,
-  emitFilter,
   ...props
 }: ColumnConfigControlProps<T>) {
-  if (emitFilter) {
-    Object.values(configFormLayout).forEach(array_of_array => {
-      if (!array_of_array.some(arr => arr.includes('emitTarget'))) {
-        array_of_array.push(['emitTarget']);
-      }
-    });
-  } else {
-    Object.values(configFormLayout).forEach(array_of_array => {
-      const index = array_of_array.findIndex(arr => arr.includes('emitTarget'));
-      if (index > -1) {
-        array_of_array.splice(index, 1);
-      }
-    });
-  }
-
   const { colnames: _colnames, coltypes: _coltypes } = queryResponse || {};
   let colnames: string[] = [];
   let coltypes: GenericDataType[] = [];

diff --git a/...perset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx b/...perset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx
@@ -35,25 +35,13 @@ export type SharedColumnConfigProp =
   | 'colorPositiveNegative'
   | 'columnWidth'
   | 'fractionDigits'
-  | 'emitTarget'
   | 'd3NumberFormat'
   | 'd3SmallNumberFormat'
   | 'd3TimeFormat'
   | 'horizontalAlign'
   | 'truncateLongCells'
   | 'showCellBars';
 
-const emitTarget: ControlFormItemSpec<'Input'> = {
-  controlType: 'Input',
-  label: t('Emit Target'),
-  description: t(
-    'If you wish to specify a different target column than the original column, it can be entered here',
-  ),
-  defaultValue: '',
-  debounceDelay: 500,
-  validators: undefined,
-};
-
 const d3NumberFormat: ControlFormItemSpec<'Select'> = {
   controlType: 'Select',
   label: t('D3 format'),
@@ -156,7 +144,6 @@ const truncateLongCells: ControlFormItemSpec<'Checkbox'> = {
  */
 export const SHARED_COLUMN_CONFIG_PROPS = {
   d3NumberFormat,
-  emitTarget,
   d3SmallNumberFormat: {
     ...d3NumberFormat,
     label: t('Small number format'),

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx
@@ -20,36 +20,17 @@
 import {
   ContributionType,
   ensureIsArray,
-  FeatureFlag,
   getColumnLabel,
   getMetricLabel,
   isDefined,
   isEqualArray,
-  isFeatureEnabled,
   QueryFormColumn,
   QueryFormMetric,
   t,
 } from '@superset-ui/core';
 import { ControlPanelState, ControlState, ControlStateMapping } from '../types';
 import { isTemporalColumn } from '../utils';
 
-export const emitFilterControl = isFeatureEnabled(
-  FeatureFlag.DASHBOARD_CROSS_FILTERS,
-)
-  ? [
-      {
-        name: 'emit_filter',
-        config: {
-          type: 'CheckboxControl',
-          label: t('Enable dashboard cross filters'),
-          default: false,
-          renderTrigger: true,
-          description: t('Enable dashboard cross filters'),
-        },
-      },
-    ]
-  : [];
-
 export const contributionModeControl = {
   name: 'contributionMode',
   config: {

diff --git a/superset-frontend/packages/superset-ui-core/src/chart/models/ChartProps.ts b/superset-frontend/packages/superset-ui-core/src/chart/models/ChartProps.ts
@@ -144,6 +144,8 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
 
   inContextMenu?: boolean;
 
+  emitCrossFilters?: boolean;
+
   theme: SupersetTheme;
 
   constructor(config: ChartPropsConfig & { formData?: FormData } = {}) {
@@ -164,6 +166,7 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
       isRefreshing,
       inputRef,
       inContextMenu = false,
+      emitCrossFilters = false,
       theme,
     } = config;
     this.width = width;
@@ -184,6 +187,7 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
     this.isRefreshing = isRefreshing;
     this.inputRef = inputRef;
     this.inContextMenu = inContextMenu;
+    this.emitCrossFilters = emitCrossFilters;
     this.theme = theme;
   }
 }
@@ -207,6 +211,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
     input => input.isRefreshing,
     input => input.inputRef,
     input => input.inContextMenu,
+    input => input.emitCrossFilters,
     input => input.theme,
     (
       annotationData,
@@ -225,6 +230,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
       isRefreshing,
       inputRef,
       inContextMenu,
+      emitCrossFilters,
       theme,
     ) =>
       new ChartProps({
@@ -244,6 +250,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
         isRefreshing,
         inputRef,
         inContextMenu,
+        emitCrossFilters,
         theme,
       }),
   );