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 {