[superset] branch master updated: fix(dashboard): Fix hover labels for horizontal overflow native filter dividers (#22210)

[kgabryje]

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

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


The following commit(s) were added to refs/heads/master by this push:
     new 93158ea649 fix(dashboard): Fix hover labels for horizontal overflow 
native filter dividers (#22210)
93158ea649 is described below

commit 93158ea6495d86950eb7faf7ad7c0968846fd96a
Author: Cody Leff <c...@preset.io>
AuthorDate: Mon Nov 28 04:35:13 2022 -0700

    fix(dashboard): Fix hover labels for horizontal overflow native filter 
dividers (#22210)
    
    Co-authored-by: Kamil Gabryjelski <kamil.gabryjel...@gmail.com>
---
 .../FilterControls/FilterDivider.test.tsx          |  5 ++---
 .../FilterBar/FilterControls/FilterDivider.tsx     |  6 +++---
 .../hooks/useTruncation/useCSSTextTruncation.ts    | 25 ++++++++++++++++------
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git 
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.test.tsx
 
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.test.tsx
index 6aae27fc5e..8491c93d8f 100644
--- 
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.test.tsx
+++ 
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.test.tsx
@@ -59,6 +59,7 @@ test('horizontal mode, title', () => {
       orientation={FilterBarOrientation.HORIZONTAL}
       title={SAMPLE_TITLE}
       description=""
+      overflow
     />,
   );
 
@@ -88,9 +89,7 @@ test('horizontal mode, title and description', async () => {
   const descriptionIcon = screen.getByTestId('divider-description-icon');
   expect(descriptionIcon).toBeVisible();
   userEvent.hover(descriptionIcon);
-  const tooltip = await screen.findByRole('tooltip', {
-    name: SAMPLE_DESCRIPTION,
-  });
+  const tooltip = await screen.findByRole('tooltip');
 
   expect(tooltip).toBeInTheDocument();
   expect(tooltip).toHaveTextContent(SAMPLE_DESCRIPTION);
diff --git 
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
 
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
index 522bd977aa..4cdeed54c0 100644
--- 
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
+++ 
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
@@ -35,7 +35,7 @@ const VerticalDivider = ({ title, description }: 
FilterDividerProps) => (
 const HorizontalDivider = ({ title, description }: FilterDividerProps) => {
   const theme = useTheme();
   const [titleRef, titleIsTruncated] =
-    useCSSTextTruncation<HTMLHeadingElement>(title);
+    useCSSTextTruncation<HTMLHeadingElement>();
 
   const tooltipOverlay = (
     <>
@@ -95,10 +95,10 @@ const HorizontalOverflowDivider = ({
 }: FilterDividerProps) => {
   const theme = useTheme();
   const [titleRef, titleIsTruncated] =
-    useCSSTextTruncation<HTMLHeadingElement>(title);
+    useCSSTextTruncation<HTMLHeadingElement>();
 
   const [descriptionRef, descriptionIsTruncated] =
-    useCSSTextTruncation<HTMLHeadingElement>(description);
+    useCSSTextTruncation<HTMLHeadingElement>();
 
   return (
     <div
diff --git a/superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts 
b/superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts
index e9486f8705..4629331dd1 100644
--- a/superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts
+++ b/superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts
@@ -36,16 +36,27 @@ export const truncationCSS = css`
  * to be displayed, this hook returns a ref to attach to the text
  * element and a boolean for whether that element is currently truncated.
  */
-const useCSSTextTruncation = <T extends HTMLElement>(
-  text: string,
-): [React.RefObject<T>, boolean] => {
-  const ref = useRef<T>(null);
+const useCSSTextTruncation = <T extends HTMLElement>(): [
+  React.RefObject<T>,
+  boolean,
+] => {
   const [isTruncated, setIsTruncated] = useState(true);
+  const ref = useRef<T>(null);
+  const { offsetWidth, scrollWidth } = ref.current ?? {};
+  const prevWidths = useRef({ offsetWidth, scrollWidth });
+  const { offsetWidth: prevOffsetWidth, scrollWidth: prevScrollWidth } =
+    prevWidths.current;
+
   useEffect(() => {
-    if (ref.current) {
-      setIsTruncated(ref.current.offsetWidth < ref.current.scrollWidth);
+    if (
+      offsetWidth &&
+      scrollWidth &&
+      (offsetWidth !== prevOffsetWidth || scrollWidth !== prevScrollWidth)
+    ) {
+      prevWidths.current = { offsetWidth, scrollWidth };
+      setIsTruncated(offsetWidth < scrollWidth);
     }
-  }, [text]);
+  }, [offsetWidth, prevOffsetWidth, prevScrollWidth, scrollWidth]);
 
   return [ref, isTruncated];
 };