feat: handle long properties name in properties section in config panel

#1984
awslabs · Oct 26, 2023 · fda011f · fda011f
1 parent d425c57
commit fda011f
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 77 deletions.
diff --git a/packages/dashboard/src/components/tooltip/constants.ts b/packages/dashboard/src/components/tooltip/constants.ts
@@ -0,0 +1,5 @@
+export const MAX_TOOLTIP_WIDTH = 390;
+
+export const WRAPPED_TOOLTIP_WIDTH = 410;
+
+export const TOP_TOOLTIP_MARGIN = '-100';
diff --git a/packages/dashboard/src/components/tooltip/tooltip.css b/packages/dashboard/src/components/tooltip/tooltip.css
@@ -5,18 +5,18 @@
 
 .tooltip-text {
   position: absolute;
-  white-space: nowrap;
   visibility: hidden;
-  z-index: 9999;
+  z-index: 99;
+  text-align: center;
 }
 
 .tooltip-container:hover .tooltip-text {
   visibility: visible;
 }
 
 .top {
-  bottom: 30%;
-  left: 35%;
+  bottom: -30%;
+  left: 40%;
   transform: translateX(-50%) translateY(-100%);
 }
 

diff --git a/packages/dashboard/src/components/tooltip/tooltip.tsx b/packages/dashboard/src/components/tooltip/tooltip.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import './tooltip.css';
 import {
   colorBackgroundHomeHeader,
@@ -8,6 +8,7 @@ import {
   spaceStaticXs,
   spaceStaticXxxs,
 } from '@cloudscape-design/design-tokens';
+import { MAX_TOOLTIP_WIDTH, TOP_TOOLTIP_MARGIN, WRAPPED_TOOLTIP_WIDTH } from './constants';
 
 const Tooltip = ({
   content,
@@ -18,21 +19,49 @@ const Tooltip = ({
   position: 'top' | 'bottom' | 'left' | 'right';
   children: React.ReactNode;
 }) => {
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [isContentWrapped, setIsContentWrapped] = useState(false);
   const tooltipStyle = {
     fontSize: spaceScaledM,
     color: colorBackgroundHomeHeader,
     backgroundColor: colorBackgroundLayoutMain,
     padding: spaceStaticS,
     borderRadius: spaceStaticXs,
     border: `${spaceStaticXxxs} solid ${colorBackgroundHomeHeader}`,
+    maxWidth: `${MAX_TOOLTIP_WIDTH}px`,
+    ...(isContentWrapped && { width: `${MAX_TOOLTIP_WIDTH}px`, bottom: `${TOP_TOOLTIP_MARGIN}%` }),
+  };
+
+  const handleMouseEnter = () => {
+    if (contentRef.current) {
+      setIsContentWrapped(contentRef.current.clientWidth > WRAPPED_TOOLTIP_WIDTH);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setIsContentWrapped(false);
+  };
+
+  const handleOnClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
   };
 
   return (
-    <div className='tooltip-container'>
+    <div className='tooltip-container' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       {children}
-      <div className={`tooltip-text ${position}`} style={tooltipStyle}>
-        {content}
-      </div>
+      {content && (
+        <span
+          className={`tooltip-text ${position}`}
+          style={{
+            ...tooltipStyle,
+            whiteSpace: !isContentWrapped ? 'nowrap' : 'pre-wrap',
+          }}
+          ref={contentRef}
+          onClick={handleOnClick}
+        >
+          {content}
+        </span>
+      )}
     </div>
   );
 };

diff --git a/...rd/src/customization/propertiesSections/propertiesAndAlarmsSettings/propertyComponent.css b/...rd/src/customization/propertiesSections/propertiesAndAlarmsSettings/propertyComponent.css
@@ -13,47 +13,10 @@
   align-items: center;
 }
 
-.property-display-toggle {
-  position: relative;
-}
-
-.property-display-toggle .tooltiptext {
-  position: absolute;
-  border-style: solid;
-  text-align: center;
-  z-index: 9;
-  visibility: hidden;
-  transform: translateX(-50%);
-  min-width: 60px;
-  left: 50%;
-  bottom: 100%;
-}
-
-.property-display-toggle .tooltiptext::before,
-.property-display-toggle .tooltiptext::after {
-  content: "";
-  position: absolute;
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  left: 50%;
-  right: 50%;
-  margin: auto;
-  margin-left: -10px;
-  top: 100%;
-}
-
-.property-display-toggle .tooltiptext::before {
-  border-top: 11px solid #9ba7b6;
-  margin-bottom: 5px;
-}
-
-.property-display-toggle .tooltiptext::after {
-  border-top: 10px solid var(--colors-white);
-  margin-top: -2px;
-  z-index: 1;
-}
-
-.property-display-toggle:hover .tooltiptext {
-  visibility: visible;
-  display: block;
+.property-display-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: normal;
+  width: 288px;
 }
diff --git a/.../customization/propertiesSections/propertiesAndAlarmsSettings/styledPropertyComponent.tsx b/.../customization/propertiesSections/propertiesAndAlarmsSettings/styledPropertyComponent.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Button,
   SpaceBetween,
@@ -16,19 +16,13 @@ import './propertyComponent.css';
 import { StyledAssetPropertyQuery, YAxisOptions } from '~/customization/widgets/types';
 import { getPropertyDisplay } from './getPropertyDisplay';
 import type { AssetSummary } from '~/hooks/useAssetDescriptionQueries';
-import {
-  colorBackgroundHomeHeader,
-  colorBackgroundLayoutMain,
-  colorBorderButtonNormalDisabled,
-  spaceScaledM,
-  spaceScaledXxxs,
-  spaceStaticXs,
-} from '@cloudscape-design/design-tokens';
 import {
   StatusEyeHidden,
   StatusEyeVisible,
 } from '~/customization/propertiesSections/propertiesAndAlarmsSettings/icons';
 import { ClickDetail, NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';
+import Tooltip from '~/components/tooltip/tooltip';
+import { spaceStaticXxs } from '@cloudscape-design/design-tokens';
 
 const numberOrUndefined = (number: string) => {
   const parsed = Number(number);
@@ -125,16 +119,8 @@ export const StyledPropertyComponent: FC<StyledPropertyComponentProps> = ({
   const [onMouseOver, setOnMouseOver] = useState(false);
   const isAssetQueryVisible = !onMouseOver ? isPropertyVisible : !isPropertyVisible;
   const propertyVisibilityIcon = isAssetQueryVisible ? StatusEyeVisible : StatusEyeHidden;
-  const tooltipStyle = {
-    fontSize: spaceScaledM,
-    color: colorBackgroundHomeHeader,
-    backgroundColor: colorBackgroundLayoutMain,
-    padding: `${spaceStaticXs} ${spaceStaticXs}`,
-    borderRadius: spaceStaticXs,
-    borderWidth: spaceScaledXxxs,
-    borderColor: colorBorderButtonNormalDisabled,
-    boxShadow: `${spaceScaledXxxs} ${spaceScaledXxxs} ${spaceScaledXxxs} ${colorBorderButtonNormalDisabled}`,
-  };
+  const labelRef = useRef<HTMLDivElement | null>(null);
+  const [isNameTruncated, setIsNameTruncated] = useState(false);
 
   const onToggleAssetQuery: NonCancelableEventHandler<ClickDetail> = (e) => {
     e.stopPropagation();
@@ -153,17 +139,26 @@ export const StyledPropertyComponent: FC<StyledPropertyComponentProps> = ({
     updateStyle(styleToReset); // as we add more sections, reset style values here
   };
 
+  useEffect(() => {
+    if (labelRef.current) {
+      setIsNameTruncated(labelRef.current.scrollWidth > labelRef.current.clientWidth);
+    }
+  }, [label]);
+
   const YAxisHeader = (
     <SpaceBetween size='s' direction='horizontal'>
       {colorable && display === 'property' && (
         <ColorPicker color={property.color || ''} updateColor={(newColor) => updateStyle({ color: newColor })} />
       )}
-      <div style={{ fontWeight: 'normal' }}>{label}</div>
-      <div className='property-display-toggle' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-        <Button onClick={onToggleAssetQuery} variant='icon' iconSvg={propertyVisibilityIcon} />
-        <span className='tooltiptext' style={tooltipStyle}>
-          {onMouseOver && isPropertyVisible ? 'hide' : 'unhide'}
-        </span>
+      <Tooltip content={isNameTruncated ? label : ''} position='top'>
+        <div className='property-display-label' style={{ marginBlock: spaceStaticXxs }} ref={labelRef}>
+          {label}
+        </div>
+      </Tooltip>
+      <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+        <Tooltip content={onMouseOver && isPropertyVisible ? 'hide' : 'unhide'} position='top'>
+          <Button onClick={onToggleAssetQuery} variant='icon' iconSvg={propertyVisibilityIcon} />
+        </Tooltip>
       </div>
 
       <Button onClick={onDeleteAssetQuery} variant='icon' iconName='remove' />