diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx index 0ba8dd31ba0..ea3d53bb5ab 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx @@ -273,6 +273,7 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => { onShiftOptions={onShiftOptions} type={DndItemType.FilterOption} withCaret + isExtra={adhocFilter.isExtra} > {label} diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx index 7a85997dbfe..744fe03a095 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx @@ -44,6 +44,17 @@ test('renders with caret', () => { expect(screen.getByRole('img', { name: 'caret-right' })).toBeInTheDocument(); }); +test('renders with extra triangle', () => { + render( + , + ); + expect( + screen.getByRole('button', { name: 'Show info tooltip' }), + ).toBeInTheDocument(); +}); + test('triggers onClose', () => { const clickClose = jest.fn(); render( diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx index 5b589f0972c..11c68a6373e 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx @@ -17,7 +17,7 @@ * under the License. */ import React from 'react'; -import { useTheme } from '@superset-ui/core'; +import { styled, t, useTheme } from '@superset-ui/core'; import Icons from 'src/components/Icons'; import { CaretContainer, @@ -26,6 +26,11 @@ import { Label, } from 'src/explore/components/controls/OptionControls'; import { OptionProps } from 'src/explore/components/controls/DndColumnSelectControl/types'; +import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; + +const StyledInfoTooltipWithTrigger = styled(InfoTooltipWithTrigger)` + margin: 0 ${({ theme }) => theme.gridUnit}px; +`; export default function Option(props: OptionProps) { const theme = useTheme(); @@ -42,6 +47,17 @@ export default function Option(props: OptionProps) { + {props.isExtra && ( + + )} {props.withCaret && ( diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx index cf947074d17..40da4c4ff57 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx @@ -43,6 +43,7 @@ export default function OptionWrapper( onShiftOptions, clickClose, withCaret, + isExtra, children, ...rest } = props; @@ -107,7 +108,12 @@ export default function OptionWrapper( return ( - diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts index 5ba1e06abb4..da2c51a1d5a 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts @@ -27,6 +27,7 @@ export interface OptionProps { index: number; clickClose: (index: number) => void; withCaret?: boolean; + isExtra?: boolean; } export interface OptionItemInterface {