From 9ec9995560870a19bc6bf18ab1a6da3b318654ec Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Mon, 28 Apr 2025 17:09:42 +0100
Subject: [PATCH] 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            |  1 +
 .../components/ActivityItem/ActivityItem.tsx  |  2 +-
 frontend/pages/hosts/details/_styles.scss     | 13 +++++++++
 .../details/cards/HostSummary/HostSummary.tsx | 28 +++++++++++++++----
 4 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 changes/issue-27198-long-host-name

diff --git a/changes/issue-27198-long-host-name b/changes/issue-27198-long-host-name
new file mode 100644
index 0000000000..6fd6e7a53d
--- /dev/null
+++ b/changes/issue-27198-long-host-name
@@ -0,0 +1 @@
+- add truncation and a conditional tooltip for long host names on the host details page
diff --git a/frontend/components/ActivityItem/ActivityItem.tsx b/frontend/components/ActivityItem/ActivityItem.tsx
index 6c9656baef..e7f2f8e64b 100644
--- a/frontend/components/ActivityItem/ActivityItem.tsx
+++ b/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 });
diff --git a/frontend/pages/hosts/details/_styles.scss b/frontend/pages/hosts/details/_styles.scss
index 37731c8423..972c636c9a 100644
--- a/frontend/pages/hosts/details/_styles.scss
+++ b/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);
+      }
     }
   }
 
diff --git a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
index c6fcc20d55..176f425311 100644
--- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
+++ b/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()}