fix(dashboard): Page crashing when cross filter applied on adhoc column (#23215)

This commit is contained in:
Kamil Gabryjelski 2023-02-27 15:58:27 +01:00 committed by GitHub
parent dcd3e00f39
commit ad5ee1ce38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 6 deletions

View File

@ -20,10 +20,14 @@ import userEvent from '@testing-library/user-event';
import React from 'react';
import { render, screen } from 'spec/helpers/testing-library';
import { FilterBarOrientation } from 'src/dashboard/types';
import { IndicatorStatus } from '../../selectors';
import { CrossFilterIndicator, IndicatorStatus } from '../../selectors';
import CrossFilterTag from './CrossFilterTag';
const mockedProps = {
const mockedProps: {
filter: CrossFilterIndicator;
orientation: FilterBarOrientation;
removeCrossFilter: (filterId: number) => void;
} = {
filter: {
name: 'test',
emitterId: 1,
@ -46,6 +50,25 @@ test('CrossFilterTag should render', () => {
expect(container).toBeInTheDocument();
});
test('CrossFilterTag with adhoc column should render', () => {
const props = {
...mockedProps,
filter: {
...mockedProps.filter,
column: {
label: 'My column',
sqlExpression: 'country_name',
expressionType: 'SQL' as const,
},
},
};
const { container } = setup(props);
expect(container).toBeInTheDocument();
expect(screen.getByText('My column')).toBeInTheDocument();
expect(screen.getByText('Italy')).toBeInTheDocument();
});
test('Column and value should be visible', () => {
setup(mockedProps);
expect(screen.getByText('country_name')).toBeInTheDocument();

View File

@ -18,7 +18,7 @@
*/
import React from 'react';
import { styled, css, useTheme } from '@superset-ui/core';
import { styled, css, useTheme, getColumnLabel } from '@superset-ui/core';
import { CrossFilterIndicator } from 'src/dashboard/components/nativeFilters/selectors';
import { Tag } from 'src/components';
import { Tooltip } from 'src/components/Tooltip';
@ -62,6 +62,7 @@ const CrossFilterTag = (props: {
useCSSTextTruncation<HTMLSpanElement>();
const [valueRef, valueIsTruncated] = useCSSTextTruncation<HTMLSpanElement>();
const columnLabel = getColumnLabel(filter.column ?? '');
return (
<StyledTag
css={css`
@ -76,9 +77,9 @@ const CrossFilterTag = (props: {
closable
onClose={() => removeCrossFilter(filter.emitterId)}
>
<Tooltip title={columnIsTruncated ? filter.column : null}>
<Tooltip title={columnIsTruncated ? columnLabel : null}>
<StyledCrossFilterColumn ref={columnRef}>
{filter.column}
{columnLabel}
</StyledCrossFilterColumn>
</Tooltip>
<Tooltip title={valueIsTruncated ? filter.value : null}>

View File

@ -26,6 +26,7 @@ import {
isFeatureEnabled,
NativeFilterType,
NO_TIME_RANGE,
QueryFormColumn,
} from '@superset-ui/core';
import { TIME_FILTER_MAP } from 'src/explore/constants';
import { getChartIdsInFilterBoxScope } from 'src/dashboard/util/activeDashboardFilters';
@ -151,7 +152,7 @@ const getRejectedColumns = (chart: any): Set<string> =>
);
export type Indicator = {
column?: string;
column?: QueryFormColumn;
name: string;
value?: any;
status?: IndicatorStatus;