Add tooltip explaining no Refetch button for Android hosts on Host details page (#50666)

Follow up PR for the following quick win based on feedback here:
- https://github.com/fleetdm/fleet/issues/50001
<img width="899" height="217" alt="Screenshot 2026-08-06 at 10 32 24 AM"
src="https://github.com/user-attachments/assets/462df6ae-ec09-433d-831b-9a0e3c242081"
/>

- [x] QA'd all new/changed functionality manually


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Android host details now display a disabled **Refetch** button with an
explanatory tooltip.
* The tooltip explains automatic synchronization and links to manual
Android synchronization instructions in a new tab.
* The **Last fetched** information is displayed directly without an
additional tooltip.

* **Documentation**
* Updated Android host documentation to reflect the disabled Refetch
control and manual synchronization guidance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: LeAnn Gove <leann@fleetdm.com>
Co-authored-by: LeAnn <97471894+Leanngove@users.noreply.github.com>

changes/50001-android-refetch-tooltip

@@ -1 +1 @@
-- Added a tooltip to "Last fetched" on the Host details page for Android hosts, explaining why there's no Refetch button (Android hosts sync data automatically when they change).
+- Added a disabled Refetch button with a tooltip on the Host details page for Android hosts, explaining that Android hosts sync data automatically and linking to how to sync manually.

frontend/pages/hosts/details/cards/HostHeader/HostHeader.tests.tsx

@@ -43,7 +43,7 @@ describe("HostHeader", () => {
     expect(screen.getByText("My device")).toBeInTheDocument();
     expect(screen.getByText(/unavailable/i)).toBeInTheDocument();
   });
-  it("does not render refetch button for Android", () => {
+  it("renders a disabled refetch button for Android", () => {
     render(
       <HostHeader
         summaryData={{ ...defaultSummaryData, platform: "android" }}
@@ -53,10 +53,10 @@ describe("HostHeader", () => {
         hostMdmEnrollmentStatus={null}
       />
     );
-    expect(screen.queryByText("Refetch")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /refetch/i })).toBeDisabled();
   });
 
-  it("shows a tooltip explaining the missing refetch button for Android hosts", async () => {
+  it("shows a tooltip on the disabled refetch button explaining why Android hosts can't be refetched", async () => {
     const { user } = renderWithSetup(
       <HostHeader
         summaryData={{ ...defaultSummaryData, platform: "android" }}
@@ -67,11 +67,9 @@ describe("HostHeader", () => {
       />
     );
 
-    await user.hover(screen.getByText(/Last fetched/i));
+    await user.hover(screen.getByText("Refetch"));
 
-    expect(
-      await screen.findByText(/there's no Refetch button/i)
-    ).toBeInTheDocument();
+    expect(await screen.findByText(/there's no manual/i)).toBeInTheDocument();
   });
 
   it("disables refetch button when host is offline", () => {

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

@@ -101,7 +101,14 @@ const HostHeader = ({
 
   const renderRefetch = () => {
     if (isAndroid(platform)) {
-      return null;
+      return (
+        <RefetchButton
+          isDisabled
+          isFetching={false}
+          tooltip={ANDROID_NO_REFETCH_TOOLTIP_MESSAGE}
+          onRefetchHost={onRefetchHost}
+        />
+      );
     }
 
     const isOnline = summaryData.status === "online";
@@ -213,16 +220,7 @@ const HostHeader = ({
           {renderDeviceStatusTag()}
 
           <div className={`${baseClass}__last-fetched`}>
-            <TooltipWrapper
-              disableTooltip={!isAndroid(platform)}
-              tipContent={ANDROID_NO_REFETCH_TOOLTIP_MESSAGE}
-              underline={isAndroid(platform)}
-              position="bottom"
-              showArrow
-            >
-              {"Last fetched"} {lastFetched}
-              &nbsp;
-            </TooltipWrapper>
+            {"Last fetched"} {lastFetched}
           </div>
         </div>
       </div>

frontend/pages/hosts/details/cards/HostHeader/helpers.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { isMacOS, isIPadOrIPhone } from "interfaces/platform";
+import CustomLink from "components/CustomLink";
+import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";
 import { HostMdmDeviceStatusUIState } from "../../helpers";
 
 interface IDeviceStatusTag {
@@ -170,7 +172,14 @@ export const REFETCH_TOOLTIP_MESSAGES: Record<
 
 export const ANDROID_NO_REFETCH_TOOLTIP_MESSAGE = (
   <>
-    For Android hosts, there&apos;s no Refetch button on the Host details page
-    in Fleet because Android hosts sync data automatically when they change.
+    There&apos;s no manual <b>Refetch</b> button because Android hosts sync data
+    automatically when they change. If changes aren&apos;t appearing,{" "}
+    <CustomLink
+      url={`${LEARN_MORE_ABOUT_BASE_LINK}/android-manual-sync`}
+      text="learn how to sync manually"
+      newTab
+      variant="tooltip-link"
+    />
+    .
   </>
 );