UI – 11/26 Disk encryption spec updates (#24175)

## #24173 

<img width="1390" alt="Screenshot 2024-11-26 at 11 08 25 AM"
src="https://github.com/user-attachments/assets/3afc7031-2bac-4cc9-ac8d-e47390a0ef93">
<img width="1392" alt="Screenshot 2024-11-26 at 10 45 11 AM"
src="https://github.com/user-attachments/assets/2eccc992-e0bd-4c5c-b001-75cde60317b5">

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

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx

@@ -124,7 +124,24 @@ const DiskEncryption = ({
     setIsLoadingTeam(false);
   }
 
-  const getTipContent = (platform: "windows" | "macOS") => {
+  const getTipContent = (platform: "windows" | "macOS" | "linux") => {
+    if (platform === "linux") {
+      return (
+        <>
+          For Ubuntu and Fedora Linux.
+          <br />
+          Currently, full disk encryption must be turned on{" "}
+          <b>
+            during OS
+            <br />
+            setup
+          </b>
+          . If disk encryption is off, the end user must re-install
+          <br />
+          their operating system.
+        </>
+      );
+    }
     const [AppleOrWindows, DEMethod] =
       platform === "windows"
         ? ["Windows", "BitLocker"]
@@ -149,7 +166,9 @@ const DiskEncryption = ({
       <TooltipWrapper tipContent={getTipContent("windows")}>
         Windows
       </TooltipWrapper>
-      , Ubuntu Linux, and Fedora Linux hosts.
+      , and{" "}
+      <TooltipWrapper tipContent={getTipContent("linux")}>Linux</TooltipWrapper>{" "}
+      hosts.
     </>
   );
 

frontend/pages/hosts/details/HostDetailsPage/components/HostDetailsBanners/HostDetailsBanners.tsx

@@ -1,15 +1,21 @@
 import React, { useContext } from "react";
 import { AppContext } from "context/app";
 
-import { DiskEncryptionStatus, MdmEnrollmentStatus } from "interfaces/mdm";
 import { hasLicenseExpired } from "utilities/helpers";
-import InfoBanner from "components/InfoBanner";
+
+import { DiskEncryptionStatus, MdmEnrollmentStatus } from "interfaces/mdm";
 import { IOSSettings } from "interfaces/host";
 import {
   HostPlatform,
+  isDiskEncryptionSupportedLinuxPlatform,
   platformSupportsDiskEncryption,
 } from "interfaces/platform";
 
+import InfoBanner from "components/InfoBanner";
+import CustomLink from "components/CustomLink";
+import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";
+import { isDiskEncryptionProfile } from "pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/helpers";
+
 const baseClass = "host-details-banners";
 
 export interface IHostBannersBaseProps {
@@ -110,9 +116,35 @@ const HostDetailsBanners = ({
     platformSupportsDiskEncryption(hostPlatform, hostOsVersion) &&
     diskEncryptionOSSetting?.status
   ) {
-    // host either not in compliance with setting, or is but Fleet doesn't yet have a disk
-    // encryption key escrowed for the host (possible for Linux hosts)
-    if (!diskIsEncrypted || !diskEncryptionKeyAvailable) {
+    if (
+      !diskIsEncrypted &&
+      isDiskEncryptionSupportedLinuxPlatform(hostPlatform, hostOsVersion ?? "")
+    ) {
+      // linux host not in compliance with setting
+      return (
+        <div className={baseClass}>
+          <InfoBanner
+            color="yellow"
+            cta={
+              <CustomLink
+                url={`${LEARN_MORE_ABOUT_BASE_LINK}/mdm-disk-encryption`}
+                text="Guide"
+                color="core-fleet-black"
+                iconColor="core-fleet-black"
+                newTab
+              />
+            }
+          >
+            Disk encryption: Disk encryption is off. Currently, to turn on{" "}
+            <b>full</b> disk encryption, the end user has to re-install their
+            operating system.
+          </InfoBanner>
+        </div>
+      );
+    }
+    if (!diskEncryptionKeyAvailable) {
+      // disk is encrypted, but Fleet doesn't yet have a disk
+      // encryption key escrowed (possible for Linux hosts)
       return (
         <div className={baseClass}>
           <InfoBanner color="yellow">