Fixing frontend issue displaying pending details. (#45068)

frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/OSSettingStatusCell.tests.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { render, screen, waitFor } from "@testing-library/react";
 import { createCustomRenderer } from "test/test-utils";
+import { createMockHostMdmProfile } from "__mocks__/hostMock";
 import {
   FLEET_ANDROID_CERTIFICATE_TEMPLATE_PROFILE_ID,
   ProfileOperationType,
@@ -138,6 +139,41 @@ describe("OS setting status cell", () => {
       ).toBeInTheDocument();
     });
   });
+  it("Shows the profile detail in the tooltip when a pending Android profile is waiting for a certificate", async () => {
+    const customRender = createCustomRenderer();
+
+    const detailMessage =
+      'Waiting for certificate "WiFi-Cert" to be installed on the host before applying this profile.';
+
+    const profile = createMockHostMdmProfile({
+      profile_uuid: "gf6dc58e8-d4c7-4d4b-8fa1-47de2bcb162c",
+      name: "01-wifi-eap-tls-WiFi-Cert.onc",
+      platform: "android",
+      operation_type: "install",
+      status: "pending",
+      detail: detailMessage,
+    });
+
+    const { user } = customRender(
+      <OSSettingStatusCell
+        profileName={profile.name}
+        status="pending"
+        operationType="install"
+        hostPlatform="android"
+        profileUUID={profile.profile_uuid}
+        profile={profile}
+      />
+    );
+
+    const statusText = screen.getByText("Enforcing");
+    expect(statusText).toBeInTheDocument();
+
+    await user.hover(statusText);
+    await waitFor(() => {
+      expect(screen.getByText(detailMessage)).toBeInTheDocument();
+    });
+  });
+
   it("Displays Pending UI for 'delivered' status with optype 'remove'", async () => {
     const customRender = createCustomRenderer();
 

frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/OSSettingStatusCell.tsx

@@ -129,9 +129,18 @@ const OSSettingStatusCell = ({
 
     // For failed status, use the error detail as tooltip content
     const errorTooltip = profile ? generateErrorTooltip(profile) : null;
+    // For pending profiles, prefer a backend-provided detail message (e.g.
+    // Android Wi-Fi profiles waiting for their certificate) over the generic
+    // "Enforcing" tooltip.
+    const pendingDetailTooltip =
+      profile?.status === "pending" && profile.detail ? profile.detail : null;
 
     let tipContent: React.ReactNode;
-    if (tooltip) {
+    if (pendingDetailTooltip) {
+      tipContent = (
+        <span className="tooltip__tooltip-text">{pendingDetailTooltip}</span>
+      );
+    } else if (tooltip) {
       if (status !== "action_required") {
         tipContent = (
           <span className="tooltip__tooltip-text">