From bccb80d9147280e17c7e57e080d5366667aac020 Mon Sep 17 00:00:00 2001 From: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Date: Mon, 15 Jul 2024 11:55:04 -0400 Subject: [PATCH] Fleet UI: Add copy for ios/macos to DDM profiles/OS vulns, add OS icons on Software OS tab and OS details page (#20423) --- .../ProfileListItem/ProfileListItem.tsx | 2 +- .../SoftwareOSDetailsPage.tsx | 20 +++++- .../SoftwarePage/components/icons/iOS.tsx | 61 +++++++++++++++++++ .../SoftwarePage/components/icons/iPadOS.tsx | 53 ++++++++++++++++ .../SoftwarePage/components/icons/index.ts | 4 ++ 5 files changed, 138 insertions(+), 2 deletions(-) create mode 100644 frontend/pages/SoftwarePage/components/icons/iOS.tsx create mode 100644 frontend/pages/SoftwarePage/components/icons/iPadOS.tsx diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileListItem/ProfileListItem.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileListItem/ProfileListItem.tsx index a7ba5829c4..9fb0039d28 100644 --- a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileListItem/ProfileListItem.tsx +++ b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileListItem/ProfileListItem.tsx @@ -40,7 +40,7 @@ const ProfileDetails = ({ }: IProfileDetailsProps) => { const getPlatformName = () => { if (platform === "windows") return "Windows"; - return isDDM ? "macOS (declaration)" : "macOS, iOS, iPadOS"; + return isDDM ? "macOS, iOS, iPadOS (declaration)" : "macOS, iOS, iPadOS"; }; return ( diff --git a/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx b/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx index 257b09365c..3a1b01adfa 100644 --- a/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx +++ b/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx @@ -17,6 +17,7 @@ import osVersionsAPI, { IGetOsVersionQueryKey, } from "services/entities/operating_systems"; import { IOperatingSystemVersion } from "interfaces/operating_system"; +import { isLinuxLike } from "interfaces/platform"; import { DEFAULT_USE_QUERY_OPTIONS, SUPPORT_LINK } from "utilities/constants"; import Spinner from "components/Spinner"; @@ -36,6 +37,23 @@ interface INotSupportedVulnProps { platform: string; } +const platformDisplayName = (platform: string) => { + if (isLinuxLike(platform)) { + return "Linux hosts"; + } + + switch (platform) { + case "chrome": + return "Chromebooks"; + case "ios": + return "iPhones"; + case "ipados": + return "iPads"; + default: + return "this operating system"; + } +}; + const NotSupportedVuln = ({ platform }: INotSupportedVulnProps) => { return ( { info={ <> Interested in vulnerability management for{" "} - {platform === "chrome" ? "Chromebooks" : "Linux hosts"}?{" "} + {platformDisplayName(platform)}?{" "} } diff --git a/frontend/pages/SoftwarePage/components/icons/iOS.tsx b/frontend/pages/SoftwarePage/components/icons/iOS.tsx new file mode 100644 index 0000000000..0feb26a0bd --- /dev/null +++ b/frontend/pages/SoftwarePage/components/icons/iOS.tsx @@ -0,0 +1,61 @@ +import React from "react"; + +import type { SVGProps } from "react"; + +const iOS = (props: SVGProps) => { + // Note: smaller icon on OS table has thicker outline and a smaller Apple logo + if (props.width === "24") { + return ( + + + + + + + + ); + } + return ( + + + + + + + + ); +}; + +export default iOS; diff --git a/frontend/pages/SoftwarePage/components/icons/iPadOS.tsx b/frontend/pages/SoftwarePage/components/icons/iPadOS.tsx new file mode 100644 index 0000000000..7416c688db --- /dev/null +++ b/frontend/pages/SoftwarePage/components/icons/iPadOS.tsx @@ -0,0 +1,53 @@ +import React from "react"; + +import type { SVGProps } from "react"; + +const iPadOS = (props: SVGProps) => { + // Note: smaller icon on OS table has thicker outline and a smaller Apple logo + if (props.width === "24") { + return ( + + + + + + + ); + } + return ( + + + + + + + ); +}; + +export default iPadOS; diff --git a/frontend/pages/SoftwarePage/components/icons/index.ts b/frontend/pages/SoftwarePage/components/icons/index.ts index 0d30e286cd..b63ad02086 100644 --- a/frontend/pages/SoftwarePage/components/icons/index.ts +++ b/frontend/pages/SoftwarePage/components/icons/index.ts @@ -20,6 +20,8 @@ import Zoom from "./Zoom"; import ChromeOS from "./ChromeOS"; import LinuxOS from "./LinuxOS"; import Falcon from "./Falcon"; +import iOS from "./iOS"; +import iPadOS from "./iPadOS"; // Maps all known Linux platforms to the LinuxOS icon const LINUX_OS_NAME_TO_ICON_MAP = HOST_LINUX_PLATFORMS.reduce( @@ -44,6 +46,8 @@ const SOFTWARE_NAME_TO_ICON_MAP = { darwin: MacOS, windows: WindowsOS, chrome: ChromeOS, + ios: iOS, + ipados: iPadOS, ...LINUX_OS_NAME_TO_ICON_MAP, } as const;