fix(dnd): add isExtra prop to Option (#15080)

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}
           >
             <Tooltip title={label}>{label}</Tooltip>
           </OptionWrapper>

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(
+    <Option index={1} clickClose={jest.fn()} isExtra>
+      Option
+    </Option>,
+  );
+  expect(
+    screen.getByRole('button', { name: 'Show info tooltip' }),
+  ).toBeInTheDocument();
+});
+
 test('triggers onClose', () => {
   const clickClose = jest.fn();
   render(

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) {
         <Icons.XSmall iconColor={theme.colors.grayscale.light1} />
       </CloseContainer>
       <Label data-test="control-label">{props.children}</Label>
+      {props.isExtra && (
+        <StyledInfoTooltipWithTrigger
+          icon="exclamation-triangle"
+          placement="top"
+          bsStyle="warning"
+          tooltip={t(`
+                This filter was inherited from the dashboard's context.
+                It won't be saved when saving the chart.
+              `)}
+        />
+      )}
       {props.withCaret && (
         <CaretContainer>
           <Icons.CaretRight iconColor={theme.colors.grayscale.light1} />

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 (
     <DragContainer ref={ref} {...rest}>
-      <Option index={index} clickClose={clickClose} withCaret={withCaret}>
+      <Option
+        index={index}
+        clickClose={clickClose}
+        withCaret={withCaret}
+        isExtra={isExtra}
+      >
         {children}
       </Option>
     </DragContainer>

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 {