fix(column-header-tooltip): make that hide the tooltip when the cloum…

superset-frontend/src/components/FilterableTable/FilterableTable.tsx

@@ -31,6 +31,7 @@ import {
 } from 'react-virtualized';
 import { getMultipleTextDimensions, t, styled } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
+import TooltipParagraph from 'src/components/TooltipParagraph';
 import Button from '../Button';
 import CopyToClipboard from '../CopyToClipboard';
 import ModalTrigger from '../ModalTrigger';
@@ -213,13 +214,14 @@ export default class FilterableTable extends PureComponent<
       // we can't use Math.max(...colWidths.slice(...)) here since the number
       // of elements might be bigger than the number of allowed arguments in a
       // Javascript function
-      widthsByColumnKey[key] =
+      const value =
         colWidths
           .slice(
             index * (this.list.length + 1),
             (index + 1) * (this.list.length + 1),
           )
           .reduce((a, b) => Math.max(a, b)) + PADDING;
+      widthsByColumnKey[key] = value;
     });
 
     return widthsByColumnKey;
@@ -413,6 +415,7 @@ export default class FilterableTable extends PureComponent<
       this.props.expandedColumns.indexOf(label) > -1
         ? 'header-style-disabled'
         : 'header-style';
+
     return (
       <Tooltip
         id="header-tooltip"
@@ -445,32 +448,52 @@ export default class FilterableTable extends PureComponent<
         ? 'header-style-disabled'
         : 'header-style';
     return (
-      <Tooltip
-        key={key}
-        id="header-tooltip"
-        title={label}
-        placement="topLeft"
-        css={{ display: 'block' }}
+      <div
+        style={{
+          ...style,
+          top:
+            typeof style.top === 'number'
+              ? style.top - GRID_POSITION_ADJUSTMENT
+              : style.top,
+        }}
+        className={`${className} grid-cell grid-header-cell`}
+        role="columnheader"
+        tabIndex={columnIndex}
+        onClick={() => this.sortGrid(label)}
       >
-        <div
-          style={{
-            ...style,
-            top:
-              typeof style.top === 'number'
-                ? style.top - GRID_POSITION_ADJUSTMENT
-                : style.top,
-          }}
-          className={`${className} grid-cell grid-header-cell`}
-          role="columnheader"
-          tabIndex={columnIndex}
-          onClick={() => this.sortGrid(label)}
-        >
+        <TooltipParagraph key={key} id="header-tooltip">
           {label}
-          {this.state.sortBy === label && (
-            <SortIndicator sortDirection={this.state.sortDirection} />
-          )}
-        </div>
-      </Tooltip>
+        </TooltipParagraph>
+        {this.state.sortBy === label && (
+          <SortIndicator sortDirection={this.state.sortDirection} />
+        )}
+      </div>
+      // <Tooltip
+      //   key={key}
+      //   id="header-tooltip"
+      //   title={label}
+      //   placement="topLeft"
+      //   css={{ display: 'block' }}
+      // >
+      //   <div
+      //     style={{
+      //       ...style,
+      //       top:
+      //         typeof style.top === 'number'
+      //           ? style.top - GRID_POSITION_ADJUSTMENT
+      //           : style.top,
+      //     }}
+      //     className={`${className} grid-cell grid-header-cell`}
+      //     role="columnheader"
+      //     tabIndex={columnIndex}
+      //     onClick={() => this.sortGrid(label)}
+      //   >
+      //     {label}
+      //     {this.state.sortBy === label && (
+      //       <SortIndicator sortDirection={this.state.sortDirection} />
+      //     )}
+      //   </div>
+      // </Tooltip>
     );
   }
 

superset-frontend/src/components/TooltipParagraph/index.tsx

@@ -0,0 +1,43 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useState } from 'react';
+import { Tooltip } from 'antd';
+import Paragraph, { ParagraphProps } from 'antd/es/typography/Paragraph';
+
+const TooltipParagraph: React.FC<ParagraphProps> = ({
+  children,
+  ellipsis,
+  ...props
+}) => {
+  const [truncated, setTruncated] = useState(false);
+
+  return (
+    <Tooltip title={truncated ? children : undefined}>
+      <Paragraph
+        {...props}
+        ellipsis={{ ...(ellipsis as any), onEllipsis: setTruncated }}
+      >
+        {/* NOTE: Fragment is necessary to avoid showing the title */}
+        <>{children}</>
+      </Paragraph>
+    </Tooltip>
+  );
+};
+
+export default TooltipParagraph;