fix(dashboard): Page crashing when cross filter applied on adhoc colu…

…mn (#23215)
apache · Feb 27, 2023 · ad5ee1c · ad5ee1c
1 parent dcd3e00
commit ad5ee1c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/...end/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.test.tsx b/...end/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/...frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx b/...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<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}>

diff --git 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<string> =>
   );
 
 export type Indicator = {
-  column?: string;
+  column?: QueryFormColumn;
   name: string;
   value?: any;
   status?: IndicatorStatus;