From 3b34bbf1ef4c7243f3075d3d3574e2a760ebda8d Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Wed, 7 Aug 2024 10:00:56 -0700
Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20Read=20"unavailable"=20when=20?=
 =?UTF-8?q?iPad/iPhone=20refetch=20is=20unsuccessful=20(#21120)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Addresses #21119

<img width="1498" alt="Screenshot 2024-08-06 at 8 32 15 PM"
src="https://github.com/user-attachments/assets/03df66be-ea29-4169-8bb3-9254fe82ed68">

- [x] Manual QA for all new/changed functionality

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 frontend/interfaces/platform.ts                           | 4 ++++
 .../hosts/details/HostDetailsPage/HostDetailsPage.tsx     | 8 ++++++--
 .../pages/hosts/details/cards/Software/HostSoftware.tsx   | 4 ++--
 .../Software/HostSoftwareTable/HostSoftwareTable.tsx      | 4 ++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/interfaces/platform.ts b/frontend/interfaces/platform.ts
index 0d1c153b6a..d3d25bec55 100644
--- a/frontend/interfaces/platform.ts
+++ b/frontend/interfaces/platform.ts
@@ -108,3 +108,7 @@ export const isAppleDevice = (platform: string) => {
     platform as typeof HOST_APPLE_PLATFORMS[number]
   );
 };
+
+// TODO - improve all platform types to be Platform
+export const isIPadOrIPhone = (platform: string | Platform) =>
+  ["ios", "ipados"].includes(platform);
diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
index cf63e55962..2d72768f93 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
@@ -53,7 +53,7 @@ import {
   HOST_OSQUERY_DATA,
 } from "utilities/constants";
 
-import { Platform } from "interfaces/platform";
+import { isIPadOrIPhone, Platform } from "interfaces/platform";
 
 import Spinner from "components/Spinner";
 import TabsWrapper from "components/TabsWrapper";
@@ -335,7 +335,11 @@ const HostDetailsPage = ({
               } else {
                 renderFlash(
                   "error",
-                  `This host is offline. Please try refetching host vitals later.`
+                  `This host is ${
+                    isIPadOrIPhone(returnedHost.platform)
+                      ? "unavailable"
+                      : "offline"
+                  }. Please try refetching host vitals later.`
                 );
                 setShowRefetchSpinner(false);
               }
diff --git a/frontend/pages/hosts/details/cards/Software/HostSoftware.tsx b/frontend/pages/hosts/details/cards/Software/HostSoftware.tsx
index c2f57cc0e1..b98ab946b5 100644
--- a/frontend/pages/hosts/details/cards/Software/HostSoftware.tsx
+++ b/frontend/pages/hosts/details/cards/Software/HostSoftware.tsx
@@ -12,7 +12,7 @@ import deviceAPI, {
   IGetDeviceSoftwareResponse,
 } from "services/entities/device_user";
 import { IHostSoftware, ISoftware } from "interfaces/software";
-import { Platform } from "interfaces/platform";
+import { isIPadOrIPhone, Platform } from "interfaces/platform";
 import { DEFAULT_USE_QUERY_OPTIONS } from "utilities/constants";
 import { NotificationContext } from "context/notification";
 import { AppContext } from "context/app";
@@ -98,7 +98,7 @@ const HostSoftware = ({
 }: IHostSoftwareProps) => {
   const { renderFlash } = useContext(NotificationContext);
   const vulnFilterAndNotSupported =
-    ["ios", "ipados"].includes(platform ?? "") && queryParams.vulnerable;
+    isIPadOrIPhone(platform ?? "") && queryParams.vulnerable;
   const {
     isGlobalAdmin,
     isGlobalMaintainer,
diff --git a/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx b/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx
index e580e538aa..60495894f3 100644
--- a/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx
+++ b/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx
@@ -11,6 +11,7 @@ import { ISoftwareDropdownFilterVal } from "pages/SoftwarePage/SoftwareTitles/So
 import {
   ApplePlatform,
   APPLE_PLATFORM_DISPLAY_NAMES,
+  isIPadOrIPhone,
   Platform,
 } from "interfaces/platform";
 
@@ -189,8 +190,7 @@ const HostSoftwareTable = ({
 
   const memoizedEmptyComponent = useCallback(() => {
     const vulnFilterAndNotSupported =
-      ["ios", "ipados"].includes(platform) &&
-      hostSoftwareFilter === "vulnerableSoftware";
+      isIPadOrIPhone(platform) && hostSoftwareFilter === "vulnerableSoftware";
     return vulnFilterAndNotSupported ? (
       <VulnsNotSupported
         platformText={APPLE_PLATFORM_DISPLAY_NAMES[platform as ApplePlatform]}