add truncation and tooltip to host details host with long name (#28547)

For [#27198](https://github.com/fleetdm/fleet/issues/27198)

Adds truncation and conditional tooltip to the host name on the host
details page.

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
- [x] Manual QA for all new/changed functionality

changes/issue-27198-long-host-name

@@ -0,0 +1 @@
+- add truncation and a conditional tooltip for long host names on the host details page

frontend/components/ActivityItem/ActivityItem.tsx

@@ -114,7 +114,7 @@ const ActivityItem = ({
   });
 
   const onShowActivityDetails = (e: React.MouseEvent<HTMLButtonElement>) => {
-    // added this stopPropagation to as there is some weirdness around the event
+    // added this stopPropagation as there is some weirdness around the event
     // bubbling up and calling the Modals onEnter handler.
     e.stopPropagation();
     onShowDetails({ type: activity.type, details: activity.details });

frontend/pages/hosts/details/_styles.scss

@@ -62,6 +62,19 @@
     .display-name {
       font-size: $large;
       font-weight: $bold;
+      @include ellipse-text(300px);
+
+      @media (min-width: $break-md) {
+        @include ellipse-text(500px);
+      }
+
+      @media (min-width: $break-lg) {
+        @include ellipse-text(800px);
+      }
+
+      @media (min-width: $break-xxl) {
+        @include ellipse-text(1000px);
+      }
     }
   }
 

frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import ReactTooltip from "react-tooltip";
 import classnames from "classnames";
 import { formatInTimeZone } from "date-fns-tz";
@@ -39,6 +39,7 @@ import {
   DATE_FNS_FORMAT_STRINGS,
   DEFAULT_EMPTY_CELL_VALUE,
 } from "utilities/constants";
+import { useCheckTruncatedElement } from "hooks/useCheckTruncatedElement";
 import { COLORS } from "styles/var/colors";
 
 import OSSettingsIndicator from "./OSSettingsIndicator";
@@ -205,6 +206,9 @@ const HostSummary = ({
   osSettings,
   hostMdmDeviceStatus,
 }: IHostSummaryProps): JSX.Element => {
+  const hostDisplayName = useRef<HTMLHeadingElement>(null);
+  const isTruncated = useCheckTruncatedElement(hostDisplayName);
+
   const {
     status,
     platform,
@@ -616,11 +620,23 @@ const HostSummary = ({
       <div className="header title">
         <div className="title__inner">
           <div className="display-name-container">
-            <h1 className="display-name">
-              {deviceUser
-                ? "My device"
-                : summaryData.display_name || DEFAULT_EMPTY_CELL_VALUE}
-            </h1>
+            <TooltipWrapper
+              disableTooltip={!isTruncated}
+              tipContent={
+                deviceUser
+                  ? "My device"
+                  : summaryData.display_name || DEFAULT_EMPTY_CELL_VALUE
+              }
+              underline={false}
+              position="top"
+              showArrow
+            >
+              <h1 className="display-name" ref={hostDisplayName}>
+                {deviceUser
+                  ? "My device"
+                  : summaryData.display_name || DEFAULT_EMPTY_CELL_VALUE}
+              </h1>
+            </TooltipWrapper>
 
             {renderDeviceStatusTag()}