diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.test.tsx index 72f831dcfa391..b4b0435543075 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.test.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.test.tsx @@ -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(); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx index e59070df7aff5..3a1145c7db233 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx @@ -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(); const [valueRef, valueIsTruncated] = useCSSTextTruncation(); + const columnLabel = getColumnLabel(filter.column ?? ''); return ( removeCrossFilter(filter.emitterId)} > - + - {filter.column} + {columnLabel} diff --git a/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts b/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts index 871a8d402ef82..cec2ecc2e952b 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts +++ b/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts @@ -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 => ); export type Indicator = { - column?: string; + column?: QueryFormColumn; name: string; value?: any; status?: IndicatorStatus;