fix(Explore): Show the tooltip only when label does not fit the conta…

…iner in METRICS/FILTERS/GROUP BY/SORT BY of the DATA panel (apache#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> (cherry picked from commit a1e18ed)
preset-io · Aug 19, 2021 · c178bbd · c178bbd
1 parent 906124a
commit c178bbd
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 22 deletions.
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
@@ -16,8 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useCallback, useMemo, useState } from 'react';
-import { FeatureFlag, isFeatureEnabled, tn } from '@superset-ui/core';
+import React, { useCallback, useMemo } from 'react';
+import { tn } from '@superset-ui/core';
 import { ColumnMeta } from '@superset-ui/chart-controls';
 import { isEmpty } from 'lodash';
 import { LabelProps } from 'src/explore/components/controls/DndColumnSelectControl/types';

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
@@ -26,7 +26,6 @@ import {
   t,
 } from '@superset-ui/core';
 import { ColumnMeta } from '@superset-ui/chart-controls';
-import { Tooltip } from 'src/components/Tooltip';
 import {
   OPERATOR_ENUM_TO_OPERATOR_TYPE,
   Operators,
@@ -299,6 +298,7 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => {
     () =>
       values.map((adhocFilter: AdhocFilter, index: number) => {
         const label = adhocFilter.getDefaultLabel();
+        const tooltipTitle = adhocFilter.getTooltipTitle();
         return (
           <AdhocFilterPopoverTrigger
             key={index}
@@ -311,14 +311,14 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => {
             <OptionWrapper
               key={index}
               index={index}
+              label={label}
+              tooltipTitle={tooltipTitle}
               clickClose={onClickClose}
               onShiftOptions={onShiftOptions}
               type={DndItemType.FilterOption}
               withCaret
               isExtra={adhocFilter.isExtra}
-            >
-              <Tooltip title={label}>{label}</Tooltip>
-            </OptionWrapper>
+            />
           </AdhocFilterPopoverTrigger>
         );
       }),

diff --git a/...et-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx b/...et-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.test.tsx
@@ -28,9 +28,8 @@ test('renders with default props', () => {
       clickClose={jest.fn()}
       type={'Column' as DndItemType}
       onShiftOptions={jest.fn()}
-    >
-      Option
-    </OptionWrapper>,
+      label="Option"
+    />,
     { useDnd: true },
   );
   expect(container).toBeInTheDocument();
@@ -46,17 +45,15 @@ test('triggers onShiftOptions on drop', () => {
         clickClose={jest.fn()}
         type={'Column' as DndItemType}
         onShiftOptions={onShiftOptions}
-      >
-        Option 1
-      </OptionWrapper>
+        label="Option 1"
+      />
       <OptionWrapper
         index={2}
         clickClose={jest.fn()}
         type={'Column' as DndItemType}
         onShiftOptions={onShiftOptions}
-      >
-        Option 2
-      </OptionWrapper>
+        label="Option 2"
+      />
     </>,
     { useDnd: true },
   );

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
@@ -23,8 +23,11 @@ import { DatasourcePanelDndItem } from '../../DatasourcePanel/types';
 import { DndItemType } from '../../DndItemType';
 
 export interface OptionProps {
-  children: ReactNode;
+  children?: ReactNode;
   index: number;
+  label?: string;
+  tooltipTitle?: string;
+  column?: ColumnMeta;
   clickClose: (index: number) => void;
   withCaret?: boolean;
   isExtra?: boolean;

diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -45,11 +45,10 @@ export const OptionControlContainer = styled.div<{
   border-radius: 3px;
   cursor: ${({ withCaret }) => (withCaret ? 'pointer' : 'default')};
 `;
-
 export const Label = styled.div`
   ${({ theme }) => `
     display: flex;
-    max-width: 100%;
+    width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     align-items: center;
@@ -71,6 +70,11 @@ export const Label = styled.div`
   `}
 `;
 
+const LabelText = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 export const CaretContainer = styled.div`
   height: 100%;
   border-left: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C;
@@ -197,6 +201,8 @@ export const OptionControlLabel = ({
 }) => {
   const theme = useTheme();
   const ref = useRef<HTMLDivElement>(null);
+  const labelRef = useRef<HTMLDivElement>(null);
+  const hasMetricName = savedMetric?.metric_name;
   const [, drop] = useDrop({
     accept: type,
     drop() {
@@ -250,7 +256,7 @@ export const OptionControlLabel = ({
       item.index = hoverIndex;
     },
   });
-  const [, drag] = useDrag({
+  const [{ isDragging }, drag] = useDrag({
     item: {
       type,
       index,
@@ -262,10 +268,34 @@ export const OptionControlLabel = ({
   });
 
   const getLabelContent = () => {
-    if (savedMetric?.metric_name) {
-      return <StyledMetricOption metric={savedMetric} />;
+    const shouldShowTooltip =
+      (!isDragging &&
+        typeof label === 'string' &&
+        tooltipTitle &&
+        label &&
+        tooltipTitle !== label) ||
+      (!isDragging &&
+        labelRef &&
+        labelRef.current &&
+        labelRef.current.scrollWidth > labelRef.current.clientWidth);
+
+    if (savedMetric && hasMetricName) {
+      return (
+        <StyledMetricOption
+          metric={savedMetric}
+          labelRef={labelRef}
+          showTooltip={!!shouldShowTooltip}
+        />
+      );
+    }
+    if (!shouldShowTooltip) {
+      return <LabelText ref={labelRef}>{label}</LabelText>;
     }
-    return <Tooltip title={tooltipTitle}>{label}</Tooltip>;
+    return (
+      <Tooltip title={tooltipTitle || label}>
+        <LabelText ref={labelRef}>{label}</LabelText>
+      </Tooltip>
+    );
   };
 
   const getOptionControlContent = () => (

diff --git a/superset-frontend/src/explore/components/optionRenderers.tsx b/superset-frontend/src/explore/components/optionRenderers.tsx
@@ -27,6 +27,7 @@ import {
 } from '@superset-ui/chart-controls';
 
 const OptionContainer = styled.div`
+  width: 100%;
   > span {
     display: flex;
     align-items: center;