From c2bd802fa45b79ca927bd0d0a7891f9d70246d5c Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Mon, 30 Dec 2024 08:17:12 -0800
Subject: [PATCH] UI - Refactor to TooltipWrapper and add offset to the
 tooltips on hover of the profile aggregate status indicators (#25039)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## #25038

Refactor to TooltipWrapper and add offset to the tooltips on hover of
the profile aggregate status indicators.

<img width="1345" alt="Screenshot 2024-12-29 at 9 00 38 PM"
src="https://github.com/user-attachments/assets/3bf5cf3c-e9fc-47dc-aa07-9cef42edcae0"
/>

- [x] Changes file added for user-visible changes in `changes/`,
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 ...-profile-status-aggregate-tooltips-spacing |  1 +
 .../StatusIndicatorWithIcon.tsx               | 32 ++++++++-----------
 .../StatusIndicatorWithIcon/_styles.scss      |  4 +++
 .../ProfileStatusAggregate/_styles.scss       |  4 +++
 4 files changed, 22 insertions(+), 19 deletions(-)
 create mode 100644 changes/25038-fix-profile-status-aggregate-tooltips-spacing

diff --git a/changes/25038-fix-profile-status-aggregate-tooltips-spacing b/changes/25038-fix-profile-status-aggregate-tooltips-spacing
new file mode 100644
index 000000000000..79504e60eca0
--- /dev/null
+++ b/changes/25038-fix-profile-status-aggregate-tooltips-spacing
@@ -0,0 +1 @@
+* Add offset to the tooltips on hover of the profile aggregate status indicators.
diff --git a/frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx b/frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx
index e0ae3cd20d7c..3ef8a5c8f767 100644
--- a/frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx
+++ b/frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx
@@ -1,11 +1,9 @@
 import React from "react";
-import ReactTooltip from "react-tooltip";
-import { uniqueId } from "lodash";
 import classnames from "classnames";
 
 import { IconNames } from "components/icons";
 import Icon from "components/Icon";
-import { COLORS } from "styles/var/colors";
+import TooltipWrapper from "components/TooltipWrapper";
 
 const baseClass = "status-indicator-with-icon";
 
@@ -46,7 +44,6 @@ const StatusIndicatorWithIcon = ({
   valueClassName,
 }: IStatusIndicatorWithIconProps) => {
   const classNames = classnames(baseClass, className);
-  const id = `status-${uniqueId()}`;
 
   const valueClasses = classnames(`${baseClass}__value`, valueClassName, {
     [`${baseClass}__value-vertical`]: layout === "vertical",
@@ -59,21 +56,18 @@ const StatusIndicatorWithIcon = ({
   );
 
   const indicatorContent = tooltip ? (
-    <>
-      <span data-tip data-for={id}>
-        {valueContent}
-      </span>
-      <ReactTooltip
-        className={`${baseClass}__tooltip`}
-        place={tooltip?.position ? tooltip.position : "top"}
-        type="dark"
-        effect="solid"
-        id={id}
-        backgroundColor={COLORS["tooltip-bg"]}
-      >
-        {tooltip.tooltipText}
-      </ReactTooltip>
-    </>
+    <TooltipWrapper
+      className={`${baseClass}__tooltip`}
+      tooltipClass="indicator-tip-text"
+      position="top"
+      tipContent={tooltip.tooltipText}
+      tipOffset={10}
+      showArrow
+      underline={false}
+      fixedPositionStrategy
+    >
+      {valueContent}
+    </TooltipWrapper>
   ) : (
     <span>{valueContent}</span>
   );
diff --git a/frontend/components/StatusIndicatorWithIcon/_styles.scss b/frontend/components/StatusIndicatorWithIcon/_styles.scss
index c5589de2d7c1..35009c7d9576 100644
--- a/frontend/components/StatusIndicatorWithIcon/_styles.scss
+++ b/frontend/components/StatusIndicatorWithIcon/_styles.scss
@@ -19,4 +19,8 @@
     flex-direction: column;
     gap: $pad-xsmall;
   }
+
+  .indicator-tip-text {
+    text-align: center;
+  }
 }
diff --git a/frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/_styles.scss b/frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/_styles.scss
index c37c7cf654bd..c945f7519150 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/_styles.scss
+++ b/frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/_styles.scss
@@ -42,4 +42,8 @@
   &__status-indicator-value {
     font-weight: $bold;
   }
+
+  .icon {
+    margin-right: initial;
+  }
 }