From 3d43aeb563ae3ca569dfd7bd19475d965ae5530e Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 3 Oct 2024 08:05:36 -0700
Subject: [PATCH] Fleet UI: Add tooltips to battery condition (#22550)

---
 changes/19619-win-battery                     |  3 ++-
 .../pages/hosts/details/cards/About/About.tsx | 12 +++++++++--
 frontend/utilities/constants.tsx              | 21 +++++++++++++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/changes/19619-win-battery b/changes/19619-win-battery
index 124e581140..4ea9aca94f 100644
--- a/changes/19619-win-battery
+++ b/changes/19619-win-battery
@@ -1 +1,2 @@
-- Windows host details now include battery status
\ No newline at end of file
+- Windows host details now include battery status
+- UI includes information on how battery health is defined
diff --git a/frontend/pages/hosts/details/cards/About/About.tsx b/frontend/pages/hosts/details/cards/About/About.tsx
index f1667f8900..67a54f9777 100644
--- a/frontend/pages/hosts/details/cards/About/About.tsx
+++ b/frontend/pages/hosts/details/cards/About/About.tsx
@@ -13,6 +13,7 @@ import {
 import {
   DEFAULT_EMPTY_CELL_VALUE,
   MDM_STATUS_TOOLTIP,
+  BATTERY_TOOLTIP,
 } from "utilities/constants";
 import DataSet from "components/DataSet";
 
@@ -173,14 +174,21 @@ const About = ({
   const renderBattery = () => {
     if (
       aboutData.batteries === null ||
-      typeof aboutData.batteries !== "object"
+      typeof aboutData.batteries !== "object" ||
+      aboutData.batteries?.[0]?.health === "Unknown"
     ) {
       return null;
     }
     return (
       <DataSet
         title="Battery condition"
-        value={aboutData.batteries?.[0]?.health}
+        value={
+          <TooltipWrapper
+            tipContent={BATTERY_TOOLTIP[aboutData.batteries?.[0]?.health]}
+          >
+            {aboutData.batteries?.[0]?.health}
+          </TooltipWrapper>
+        }
       />
     );
   };
diff --git a/frontend/utilities/constants.tsx b/frontend/utilities/constants.tsx
index 4b780aebc9..513e6dacf8 100644
--- a/frontend/utilities/constants.tsx
+++ b/frontend/utilities/constants.tsx
@@ -336,6 +336,27 @@ export const MDM_STATUS_TOOLTIP: Record<string, string | React.ReactNode> = {
   ),
 };
 
+export const BATTERY_TOOLTIP: Record<string, string | React.ReactNode> = {
+  Normal: (
+    <span>
+      Current maximum capacity is at least
+      <br />
+      80% of its designed capacity and the
+      <br />
+      cycle count is below 1000.
+    </span>
+  ),
+  "Service recommended": (
+    <span>
+      Current maximum capacity has fallen
+      <br />
+      below 80% of its designed capacity
+      <br />
+      or the cycle count has reached 1000.
+    </span>
+  ),
+};
+
 export const DEFAULT_CREATE_USER_ERRORS = {
   email: "",
   name: "",