Show/hide tooltips (#16192)

superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/DatasourcePanelDragOption.test.tsx

@@ -21,37 +21,33 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { render, screen } from 'spec/helpers/testing-library';
 import { DndItemType } from 'src/explore/components/DndItemType';
-import DatasourcePanelDragWrapper from '.';
+import DatasourcePanelDragOption from '.';
 
 test('should render', () => {
   render(
     <DndProvider backend={HTML5Backend}>
-      <DatasourcePanelDragWrapper
+      <DatasourcePanelDragOption
         value={{ metric_name: 'test' }}
         type={DndItemType.Metric}
-      >
-        <div data-test="children" />
-      </DatasourcePanelDragWrapper>
+      />
     </DndProvider>,
   );
 
-  expect(screen.getByTestId('DatasourcePanelDragWrapper')).toBeInTheDocument();
-  expect(screen.getByTestId('children')).toBeInTheDocument();
+  expect(screen.getByTestId('DatasourcePanelDragOption')).toBeInTheDocument();
+  expect(screen.getByText('test')).toBeInTheDocument();
 });
 
 test('should have attribute draggable:true', () => {
   render(
     <DndProvider backend={HTML5Backend}>
-      <DatasourcePanelDragWrapper
+      <DatasourcePanelDragOption
         value={{ metric_name: 'test' }}
         type={DndItemType.Metric}
-      >
-        <div data-test="children" />
-      </DatasourcePanelDragWrapper>
+      />
     </DndProvider>,
   );
 
-  expect(screen.getByTestId('DatasourcePanelDragWrapper')).toHaveAttribute(
+  expect(screen.getByTestId('DatasourcePanelDragOption')).toHaveAttribute(
     'draggable',
     'true',
   );

superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx

@@ -16,9 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { useDrag } from 'react-dnd';
-import { styled } from '@superset-ui/core';
+import { Metric, styled } from '@superset-ui/core';
+import { DndItemType } from 'src/explore/components/DndItemType';
+import {
+  StyledColumnOption,
+  StyledMetricOption,
+} from 'src/explore/components/optionRenderers';
+import { ColumnMeta } from '@superset-ui/chart-controls';
 import { DatasourcePanelDndItem } from '../types';
 
 const DatasourceItemContainer = styled.div`
@@ -37,23 +43,42 @@ const DatasourceItemContainer = styled.div`
   }
 `;
 
-interface DatasourcePanelDragWrapperProps extends DatasourcePanelDndItem {
-  children?: ReactNode;
+interface DatasourcePanelDragOptionProps extends DatasourcePanelDndItem {
+  labelRef?: React.RefObject<any>;
+  showTooltip?: boolean;
 }
 
-export default function DatasourcePanelDragWrapper(
-  props: DatasourcePanelDragWrapperProps,
+type MetricOption = Omit<Metric, 'id'> & {
+  label?: string;
+};
+
+export default function DatasourcePanelDragOption(
+  props: DatasourcePanelDragOptionProps,
 ) {
-  const [, drag] = useDrag({
+  const { labelRef, showTooltip, type, value } = props;
+  const [{ isDragging }, drag] = useDrag({
     item: {
       value: props.value,
       type: props.type,
     },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
   });
 
+  const optionProps = {
+    labelRef,
+    showTooltip: !isDragging && showTooltip,
+    showType: true,
+  };
+
   return (
-    <DatasourceItemContainer data-test="DatasourcePanelDragWrapper" ref={drag}>
-      {props.children}
+    <DatasourceItemContainer data-test="DatasourcePanelDragOption" ref={drag}>
+      {type === DndItemType.Column ? (
+        <StyledColumnOption column={value as ColumnMeta} {...optionProps} />
+      ) : (
+        <StyledMetricOption metric={value as MetricOption} {...optionProps} />
+      )}
     </DatasourceItemContainer>
   );
 }

superset-frontend/src/explore/components/DatasourcePanel/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { styled, t } from '@superset-ui/core';
 import Collapse from 'src/components/Collapse';
 import { ControlConfig, DatasourceMeta } from '@superset-ui/chart-controls';
@@ -26,7 +26,7 @@ import { FAST_DEBOUNCE } from 'src/constants';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import { ExploreActions } from 'src/explore/actions/exploreActions';
 import Control from 'src/explore/components/Control';
-import DatasourcePanelDragWrapper from './DatasourcePanelDragWrapper';
+import DatasourcePanelDragOption from './DatasourcePanelDragOption';
 import { DndItemType } from '../DndItemType';
 import { StyledColumnOption, StyledMetricOption } from '../optionRenderers';
 
@@ -87,7 +87,7 @@ const DatasourceContainer = styled.div`
   }
 `;
 
-const LabelContainer = styled.div`
+const LabelWrapper = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
 
@@ -110,6 +110,42 @@ const LabelContainer = styled.div`
   }
 `;
 
+const LabelContainer = (props: {
+  children: React.ReactElement;
+  className: string;
+}) => {
+  const labelRef = useRef<HTMLDivElement>(null);
+  const [showTooltip, setShowTooltip] = useState(true);
+  const isLabelTruncated = () =>
+    !!(
+      labelRef &&
+      labelRef.current &&
+      labelRef.current.scrollWidth > labelRef.current.clientWidth
+    );
+  const handleShowTooltip = () => {
+    const shouldShowTooltip = isLabelTruncated();
+    if (shouldShowTooltip !== showTooltip) {
+      setShowTooltip(shouldShowTooltip);
+    }
+  };
+  const handleResetTooltip = () => {
+    setShowTooltip(true);
+  };
+  const extendedProps = {
+    labelRef,
+    showTooltip,
+  };
+  return (
+    <LabelWrapper
+      onMouseEnter={handleShowTooltip}
+      onMouseLeave={handleResetTooltip}
+      className={props.className}
+    >
+      {React.cloneElement(props.children, extendedProps)}
+    </LabelWrapper>
+  );
+};
+
 const enableExploreDnd = isFeatureEnabled(
   FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP,
 );
@@ -245,12 +281,10 @@ export default function DataSourcePanel({
             {metricSlice.map(m => (
               <LabelContainer key={m.metric_name} className="column">
                 {enableExploreDnd ? (
-                  <DatasourcePanelDragWrapper
+                  <DatasourcePanelDragOption
                     value={m}
                     type={DndItemType.Metric}
-                  >
-                    <StyledMetricOption metric={m} showType />
-                  </DatasourcePanelDragWrapper>
+                  />
                 ) : (
                   <StyledMetricOption metric={m} showType />
                 )}
@@ -276,12 +310,10 @@ export default function DataSourcePanel({
             {columnSlice.map(col => (
               <LabelContainer key={col.column_name} className="column">
                 {enableExploreDnd ? (
-                  <DatasourcePanelDragWrapper
+                  <DatasourcePanelDragOption
                     value={col}
                     type={DndItemType.Column}
-                  >
-                    <StyledColumnOption column={col} showType />
-                  </DatasourcePanelDragWrapper>
+                  />
                 ) : (
                   <StyledColumnOption column={col} showType />
                 )}