Show disabled refetch button with tooltip for Android hosts

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

@@ -22,7 +22,7 @@
         showRefetchSpinner={false}
         onRefetchHost={jest.fn()}
         renderActionsDropdown={renderActionDropdown}
-      />
+      />,
     );
     expect(screen.getByText("Test Host")).toBeInTheDocument();
     expect(screen.getByText(/Last fetched/i)).toBeInTheDocument();
@@ -36,21 +36,31 @@
         onRefetchHost={jest.fn()}
         renderActionsDropdown={renderActionDropdown}
         deviceUser
-      />
+      />,
     );
     expect(screen.getByText("My device")).toBeInTheDocument();
     expect(screen.getByText(/unavailable/i)).toBeInTheDocument();
   });
-  it("does not render refetch button for Android", () => {
-    render(
+  it("renders a disabled refetch button with tooltip for Android", async () => {
+    const { user } = renderWithSetup(
       <HostHeader
         summaryData={{ ...defaultSummaryData, platform: "android" }}
         showRefetchSpinner={false}
         onRefetchHost={jest.fn()}
         renderActionsDropdown={renderActionDropdown}
-      />
+      />,
     );
-    expect(screen.queryByText("Refetch")).not.toBeInTheDocument();
+    const refetchButton = screen.getByRole("button", { name: /refetch/i });
+    expect(refetchButton).toBeDisabled();
+
+    await user.hover(screen.getByText("Refetch"));
+
+    expect(
+      await screen.findByText(/Android hosts sync data automatically/i),
+    ).toBeInTheDocument();
+    const learnLink = screen.getByText("Learn how to manually sync");
+    expect(learnLink).toBeInTheDocument();
+    expect(learnLink.closest("a")).toHaveAttribute("target", "_blank");
   });
 
   it("disables refetch button when host is offline", () => {
@@ -60,7 +70,7 @@
         showRefetchSpinner={false}
         onRefetchHost={jest.fn()}
         renderActionsDropdown={renderActionDropdown}
-      />
+      />,
     );
     const refetchButton = screen.getByRole("button", { name: /refetch/i });
     expect(refetchButton).toBeDisabled();
@@ -73,7 +83,7 @@
         showRefetchSpinner
         onRefetchHost={jest.fn()}
         renderActionsDropdown={renderActionDropdown}
-      />
+      />,
     );
     expect(screen.getByText(/Fetching fresh vitals/i)).toBeInTheDocument();
   });
@@ -86,7 +96,7 @@
         showRefetchSpinner={false}
         onRefetchHost={onRefetchHost}
         renderActionsDropdown={renderActionDropdown}
-      />
+      />,
     );
     fireEvent.click(screen.getByText("Refetch"));
     expect(onRefetchHost).toHaveBeenCalled();
@@ -99,7 +109,7 @@
         showRefetchSpinner={false}
         onRefetchHost={jest.fn()}
         renderActionsDropdown={renderActionDropdown}
-      />
+      />,
     );
 
     await user.hover(screen.getByText("Refetch"));
@@ -115,7 +125,7 @@
         onRefetchHost={jest.fn()}
         renderActionsDropdown={renderActionDropdown}
         hostMdmDeviceStatus={"locked" as HostMdmDeviceStatusUIState}
-      />
+      />,
     );
 
     await user.hover(screen.getByText("Refetch"));
@@ -131,7 +141,7 @@
         onRefetchHost={jest.fn()}
         renderActionsDropdown={renderActionDropdown}
         hostMdmDeviceStatus={"locked" as HostMdmDeviceStatusUIState}
-      />
+      />,
     );
 
     await user.hover(screen.getByText("Locked"));

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

@@ -93,7 +93,14 @@ const HostHeader = ({
 
   const renderRefetch = () => {
     if (isAndroid(platform)) {
-      return null;
+      return (
+        <RefetchButton
+          isDisabled
+          isFetching={false}
+          tooltip={REFETCH_TOOLTIP_MESSAGES.android}
+          onRefetchHost={onRefetchHost}
+        />
+      );
     }
 
     const isOnline = summaryData.status === "online";

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { isMacOS, isIPadOrIPhone } from "interfaces/platform";
 import { HostMdmDeviceStatusUIState } from "../../helpers";
+import CustomLink from "components/CustomLink";
 
 interface IDeviceStatusTag {
   title: string;
@@ -116,9 +117,24 @@ export const DEVICE_STATUS_TAGS: DeviceStatusTagConfig = {
 
 // We exclude "unlocked" as we dont display a tooltip for it.
 export const REFETCH_TOOLTIP_MESSAGES: Record<
-  HostMdmDeviceStatusUIStateNoUnlock | "offline",
+  HostMdmDeviceStatusUIStateNoUnlock | "offline" | "android",
   JSX.Element
 > = {
+  android: (
+    <>
+      Android hosts sync data automatically when they
+      <br />
+      change, but changes may not appear immediately
+      <br />
+      due to Google rate limiting.{" "}
+      <CustomLink
+        url="https://fleetdm.com/learn-more-about/android-manual-sync"
+        text="Learn how to manually sync"
+        variant="tooltip-link"
+        newTab
+      />
+    </>
+  ),
   offline: (
     <>
       You can&apos;t fetch data from <br /> an offline host.

website/config/routes.js

@@ -1235,6 +1235,7 @@ module.exports.routes = {
   'GET /learn-more-about/unlock-ios-ipados': 'https://fleetdm.com/guides/lock-wipe-hosts#how-to-unlock-offline-ios-and-ipados-hosts',
   'GET /learn-more-about/certificates': '/guides/connect-end-user-to-wifi-with-certificate',
   'GET /learn-more-about/enrollment-profiles': 'https://developer.apple.com/documentation/devicemanagement/profile?changes=l_11_5',
+  'GET /learn-more-about/android-manual-sync': '/guides/how-to-manually-sync-an-android-device'
 
   // Sitemap
   // =============================================================================================================