From 974bc008629c4d41826a2c3fb2cd589c1392a89f Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 8 Aug 2025 11:05:54 -0400
Subject: [PATCH] Fleet UI: Shows right status for vpp apps installed manually
 (#31674)

---
 .../VppInstallDetailsModal.tsx                | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx
index 9d3f7ccd76..9b666d96d8 100644
--- a/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx
@@ -29,6 +29,8 @@ import {
 
 interface IGetStatusMessageProps {
   isDUP?: boolean;
+  /** "pending" is an edge case here where VPP install activities that were added to the feed prior to v4.57
+   * (when we split pending into pending_install/pending_uninstall) will list the status as "pending" rather than "pending_install" */
   displayStatus: SoftwareInstallStatus | "pending";
   isMDMStatusNotNow: boolean;
   isMDMStatusAcknowledged: boolean;
@@ -56,6 +58,21 @@ export const getStatusMessage = ({
         })})`
       : null;
 
+  // Handles "pending" value prior to 4.57
+  const isPendingInstall = ["pending_install", "pending"].includes(
+    displayStatus
+  );
+
+  // Handles the case where software is installed manually by the user and not through Fleet
+  // This app_store_app modal matches software_packages installed manually shown with SoftwareInstallDetailsModal
+  if (displayStatus === "installed" && !commandUpdatedAt) {
+    return (
+      <>
+        <b>{appName}</b> is installed.
+      </>
+    );
+  }
+
   // Handle NotNow case separately
   if (isMDMStatusNotNow) {
     return (
@@ -75,7 +92,7 @@ export const getStatusMessage = ({
   }
 
   // VPP Verify command pending state
-  if (displayStatus === "pending_install" && isMDMStatusAcknowledged) {
+  if (isPendingInstall && isMDMStatusAcknowledged) {
     return (
       <>
         The MDM command (request) to install <b>{appName}</b>
@@ -117,7 +134,7 @@ export const getStatusMessage = ({
       <>
         {" "}
         on {formattedHost}
-        {displayStatus === "pending_install" && " when it comes online"}
+        {isPendingInstall && " when it comes online"}
         {displayTimeStamp && <> {displayTimeStamp}</>}
       </>
     );
@@ -216,8 +233,9 @@ export const VppInstallDetailsModal = ({
     }
   );
 
+  // Fallback to "installed" if no status is provided as Installed
   const displayStatus =
-    (fleetInstallStatus as SoftwareInstallStatus) || "pending_install";
+    (fleetInstallStatus as SoftwareInstallStatus) || "installed";
   const iconName = INSTALL_DETAILS_STATUS_ICONS[displayStatus];
 
   // Note: We need to reconcile status values from two different sources. From props, we