Fleet UI: Fix VPP pending bugs (#31787)

frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx

@@ -151,7 +151,8 @@ export const getStatusMessage = ({
 const baseClass = "vpp-install-details-modal";
 
 export type IVppInstallDetails = {
-  fleetInstallStatus: SoftwareInstallStatus;
+  /** Status: null when a host manually installed not using Fleet */
+  fleetInstallStatus: SoftwareInstallStatus | null;
   hostDisplayName: string;
   appName: string;
   commandUuid?: string;
@@ -233,11 +234,17 @@ export const VppInstallDetailsModal = ({
     }
   );
 
-  // Fallback to "installed" if no status is provided as Installed
-  const displayStatus =
-    (fleetInstallStatus as SoftwareInstallStatus) || "installed";
+  // Fallback to "installed" if no status is provided
+  const displayStatus = fleetInstallStatus ?? "installed";
   const iconName = INSTALL_DETAILS_STATUS_ICONS[displayStatus];
 
+  // Handles "pending" value prior to 4.57 AND never shows error state on pending_install
+  // as some cases have command results not available for pending_installs
+  // which we don't want to show a UI error state for
+  const isPendingInstall = ["pending_install", "pending"].includes(
+    displayStatus
+  );
+
   // Note: We need to reconcile status values from two different sources. From props, we
   // get the status of the Fleet install operation (which can be "failed", "pending", or
   // "installed"). From the command results API response, we also receive the raw status
@@ -248,7 +255,7 @@ export const VppInstallDetailsModal = ({
 
   const excludeVersions =
     !deviceAuthToken &&
-    ["pending_install", "failed_install"].includes(fleetInstallStatus);
+    ["pending_install", "failed_install", "pending"].includes(displayStatus);
 
   const isInstalledByFleet = hostSoftware
     ? !!hostSoftware.app_store_app?.last_install
@@ -304,7 +311,7 @@ export const VppInstallDetailsModal = ({
       return <Spinner />;
     }
 
-    if (isErrorVPPCommandResult) {
+    if (isErrorVPPCommandResult && !isPendingInstall) {
       if (errorVPPCommandResult?.status === 404) {
         return deviceAuthToken ? (
           <DeviceUserError />
@@ -335,7 +342,7 @@ export const VppInstallDetailsModal = ({
           <span>{statusMessage}</span>
         </div>
         {hostSoftware && !excludeVersions && renderInventoryVersionsSection()}
-        {fleetInstallStatus !== "pending_install" &&
+        {!isPendingInstall &&
           isInstalledByFleet &&
           renderInstallDetailsSection()}
       </div>
@@ -343,7 +350,7 @@ export const VppInstallDetailsModal = ({
   };
 
   const renderCta = () => {
-    if (deviceAuthToken && fleetInstallStatus === "failed_install") {
+    if (deviceAuthToken && displayStatus === "failed_install") {
       return (
         <div className="modal-cta-wrap">
           <Button type="submit" onClick={onClickRetry}>

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

@@ -576,8 +576,7 @@ const HostSoftwareLibrary = ({
       {selectedVPPInstallDetails && (
         <VppInstallDetailsModal
           details={{
-            fleetInstallStatus:
-              selectedVPPInstallDetails.status || "pending_install",
+            fleetInstallStatus: selectedVPPInstallDetails.status,
             hostDisplayName,
             appName: selectedVPPInstallDetails.name,
             commandUuid: selectedVPPInstallDetails.commandUuid,

frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx

@@ -887,8 +887,7 @@ const SoftwareSelfService = ({
         <VppInstallDetailsModal
           deviceAuthToken={deviceToken}
           details={{
-            fleetInstallStatus:
-              selectedVPPInstallDetails.status || "pending_install",
+            fleetInstallStatus: selectedVPPInstallDetails.status,
             hostDisplayName,
             appName: selectedVPPInstallDetails.name,
             commandUuid: selectedVPPInstallDetails.commandUuid,