[superset] 05/05: fix(sqllab): Have table name tooltip only show when name is truncated (#17386)

[el...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

elizabeth pushed a commit to branch 1.4
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 9468bdf0c16444861e12d2b636c04a87e78636ca
Author: Corbin Robb <31...@users.noreply.github.com>
AuthorDate: Fri Nov 19 10:34:28 2021 -0700

    fix(sqllab): Have table name tooltip only show when name is truncated (#17386)
    
    * Add conditional to table name tooltip to only show when overflowing
    
    * Remove uneccessary state and useEffect, a little clean up and slight refactoring
    
    Co-authored-by: Corbin Robb <co...@Corbins-MacBook-Pro.local>
    (cherry picked from commit 8e1619b1055e50c9ee7cbab650f777ec6a64ef3e)
---
 .../src/SqlLab/components/TableElement/index.tsx   | 72 +++++++++++++---------
 1 file changed, 42 insertions(+), 30 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/TableElement/index.tsx b/superset-frontend/src/SqlLab/components/TableElement/index.tsx
index 4be3935..0d1624d 100644
--- a/superset-frontend/src/SqlLab/components/TableElement/index.tsx
+++ b/superset-frontend/src/SqlLab/components/TableElement/index.tsx
@@ -77,6 +77,7 @@ const Fade = styled.div`
 const TableElement = ({ table, actions, ...props }: TableElementProps) => {
   const [sortColumns, setSortColumns] = useState(false);
   const [hovered, setHovered] = useState(false);
+  const tableNameRef = React.useRef<HTMLInputElement>(null);
 
   const setHover = (hovered: boolean) => {
     debounce(() => setHovered(hovered), 100)();
@@ -213,39 +214,50 @@ const TableElement = ({ table, actions, ...props }: TableElementProps) => {
     );
   };
 
-  const renderHeader = () => (
-    <div
-      className="clearfix header-container"
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-    >
-      <Tooltip
-        id="copy-to-clipboard-tooltip"
-        placement="topLeft"
-        style={{ cursor: 'pointer' }}
-        title={table.name}
-        trigger={['hover']}
-      >
-        <StyledSpan data-test="collapse" className="table-name">
-          <strong>{table.name}</strong>
-        </StyledSpan>
-      </Tooltip>
+  const renderHeader = () => {
+    const element: HTMLInputElement | null = tableNameRef.current;
+    let trigger: string[] = [];
+    if (element && element.offsetWidth < element.scrollWidth) {
+      trigger = ['hover'];
+    }
 
-      <div className="pull-right header-right-side">
-        {table.isMetadataLoading || table.isExtraMetadataLoading ? (
-          <Loading position="inline" />
-        ) : (
-          <Fade
-            data-test="fade"
-            hovered={hovered}
-            onClick={e => e.stopPropagation()}
+    return (
+      <div
+        className="clearfix header-container"
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+      >
+        <Tooltip
+          id="copy-to-clipboard-tooltip"
+          style={{ cursor: 'pointer' }}
+          title={table.name}
+          trigger={trigger}
+        >
+          <StyledSpan
+            data-test="collapse"
+            ref={tableNameRef}
+            className="table-name"
           >
-            {renderControls()}
-          </Fade>
-        )}
+            <strong>{table.name}</strong>
+          </StyledSpan>
+        </Tooltip>
+
+        <div className="pull-right header-right-side">
+          {table.isMetadataLoading || table.isExtraMetadataLoading ? (
+            <Loading position="inline" />
+          ) : (
+            <Fade
+              data-test="fade"
+              hovered={hovered}
+              onClick={e => e.stopPropagation()}
+            >
+              {renderControls()}
+            </Fade>
+          )}
+        </div>
       </div>
-    </div>
-  );
+    );
+  };
 
   const renderBody = () => {
     let cols;