diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx index 0ba8dd31b..ea3d53bb5 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 7a85997db..744fe03a0 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 5b589f097..11c68a637 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 cf947074d..40da4c4ff 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 5ba1e06ab..da2c51a1d 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 {