fix(Explore): Show the tooltip only when label does not fit the container in METRICS/FILTERS/GROUP BY/SORT BY of the DATA panel (#16060)

* Implement dynamic tooltip

* Normalize and consolidate

* Clean up

* Refactor and clean up

* Remove unnecessary var

* Fix type import

* Update superset-frontend/src/explore/components/controls/OptionControls/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Remove unnecessary styled span

* Show full tooltip title

* Force show tooltip

* Force show tooltip D&D off

Co-authored-by: Ville Brofeldt <ville.v.brofeldt@gmail.com>
Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx

@@ -28,8 +28,19 @@ import {
   OptionProps,
   OptionItemInterface,
 } from 'src/explore/components/controls/DndColumnSelectControl/types';
+import { Tooltip } from 'src/components/Tooltip';
+import { StyledColumnOption } from 'src/explore/components/optionRenderers';
+import { styled } from '@superset-ui/core';
+import { ColumnMeta } from '@superset-ui/chart-controls';
 import Option from './Option';
 
+export const OptionLabel = styled.div`
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 export default function OptionWrapper(
   props: OptionProps & {
     type: string;
@@ -38,16 +49,19 @@ export default function OptionWrapper(
 ) {
   const {
     index,
+    label,
+    tooltipTitle,
+    column,
     type,
     onShiftOptions,
     clickClose,
     withCaret,
     isExtra,
     canDelete = true,
-    children,
     ...rest
   } = props;
   const ref = useRef<HTMLDivElement>(null);
+  const labelRef = useRef<HTMLDivElement>(null);
 
   const item: OptionItemInterface = useMemo(
     () => ({
@@ -56,7 +70,7 @@ export default function OptionWrapper(
     }),
     [index, type],
   );
-  const [, drag] = useDrag({
+  const [{ isDragging }, drag] = useDrag({
     item,
     collect: (monitor: DragSourceMonitor) => ({
       isDragging: monitor.isDragging(),
@@ -107,6 +121,51 @@ export default function OptionWrapper(
     },
   });
 
+  const shouldShowTooltip =
+    (!isDragging && tooltipTitle && label && tooltipTitle !== label) ||
+    (!isDragging &&
+      labelRef &&
+      labelRef.current &&
+      labelRef.current.scrollWidth > labelRef.current.clientWidth);
+
+  const LabelContent = () => {
+    if (!shouldShowTooltip) {
+      return <span>{label}</span>;
+    }
+    return (
+      <Tooltip title={tooltipTitle || label}>
+        <span>{label}</span>
+      </Tooltip>
+    );
+  };
+
+  const ColumnOption = () => (
+    <StyledColumnOption
+      column={column as ColumnMeta}
+      labelRef={labelRef}
+      showTooltip={!!shouldShowTooltip}
+      showType
+    />
+  );
+
+  const Label = () => {
+    if (label) {
+      return (
+        <OptionLabel ref={labelRef}>
+          <LabelContent />
+        </OptionLabel>
+      );
+    }
+    if (column) {
+      return (
+        <OptionLabel>
+          <ColumnOption />
+        </OptionLabel>
+      );
+    }
+    return null;
+  };
+
   drag(drop(ref));
 
   return (
@@ -118,7 +177,7 @@ export default function OptionWrapper(
         isExtra={isExtra}
         canDelete={canDelete}
       >
-        {children}
+        <Label />
       </Option>
     </DragContainer>
   );