Fleet UI: Add more description to delete host modal (#24089)

changes/22819-delete-modal

@@ -0,0 +1 @@
+- Fleet UI: Better information on what deleting a host does

frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx

@@ -4,6 +4,8 @@ import strUtils from "utilities/strings";
 
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";
+import CustomLink from "components/CustomLink";
+import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";
 
 const baseClass = "delete-host-modal";
 
@@ -61,8 +63,21 @@ const DeleteHostModal = ({
     <Modal title="Delete host" onExit={onCancel} className={baseClass}>
       <>
         <p>
-          This will remove the record of <b>{hostText()}</b>.{largeVolumeText()}
+          This will remove the record of <b>{hostText()}</b> and associated data
+          (e.g. unlock PINs).{largeVolumeText()}
         </p>
+        <ul>
+          <li>
+            macOS, Windows, or Linux hosts will re-appear unless Fleet&apos;s
+            agent is uninstalled.{" "}
+            <CustomLink
+              text="Uninstall Fleet's agent"
+              url={`${LEARN_MORE_ABOUT_BASE_LINK}/uninstall-fleetd`}
+              newTab
+            />
+          </li>
+          <li>iOS and iPadOS hosts will re-appear unless MDM is turned off.</li>
+        </ul>
         <div className="modal-cta-wrap">
           <Button
             type="button"

frontend/pages/hosts/components/DeleteHostModal/_styles.scss

@@ -0,0 +1,10 @@
+.delete-host-modal {
+  ul {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: $pad-medium;
+    align-self: stretch;
+    padding-inline-start: $pad-large;
+  }
+}