Skip to content

Commit

Permalink
feat: Move cross filters to Dashboard (#22785)
Browse files Browse the repository at this point in the history
  • Loading branch information
geido authored Jan 25, 2023
1 parent 262c947 commit 9ed2326
Show file tree
Hide file tree
Showing 87 changed files with 811 additions and 637 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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'] },
Expand Down Expand Up @@ -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')
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
6 changes: 5 additions & 1 deletion superset-frontend/cypress-base/cypress/utils/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 => ({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { hasGenericChartAxes, t } from '@superset-ui/core';
import { ControlPanelSectionConfig, ControlSetRow } from '../types';
import {
contributionModeControl,
emitFilterControl,
xAxisSortControl,
xAxisSortAscControl,
} from '../shared-controls';
Expand All @@ -30,7 +29,6 @@ const controlsWithoutXAxis: ControlSetRow[] = [
['groupby'],
[contributionModeControl],
['adhoc_filters'],
emitFilterControl,
['limit'],
['timeseries_limit_metric'],
['order_desc'],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ export type ColumnConfigControlProps<T extends ColumnConfig> =
queryResponse?: ChartDataResponseResult;
configFormLayout?: ColumnConfigFormLayout;
appliedColumnNames?: string[];
emitFilter: boolean;
};

/**
Expand All @@ -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[] = [];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down Expand Up @@ -156,7 +144,6 @@ const truncateLongCells: ControlFormItemSpec<'Checkbox'> = {
*/
export const SHARED_COLUMN_CONFIG_PROPS = {
d3NumberFormat,
emitTarget,
d3SmallNumberFormat: {
...d3NumberFormat,
label: t('Small number format'),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,8 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {

inContextMenu?: boolean;

emitCrossFilters?: boolean;

theme: SupersetTheme;

constructor(config: ChartPropsConfig & { formData?: FormData } = {}) {
Expand All @@ -164,6 +166,7 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
isRefreshing,
inputRef,
inContextMenu = false,
emitCrossFilters = false,
theme,
} = config;
this.width = width;
Expand All @@ -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;
}
}
Expand All @@ -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,
Expand All @@ -225,6 +230,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
isRefreshing,
inputRef,
inContextMenu,
emitCrossFilters,
theme,
) =>
new ChartProps({
Expand All @@ -244,6 +250,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
isRefreshing,
inputRef,
inContextMenu,
emitCrossFilters,
theme,
}),
);
Expand Down
Loading

0 comments on commit 9ed2326

Please sign in to comment.