UI - Update help text for Policy automations (scripts & software) (#24138)

## Addresses #22527 

Figma:
<img width="1822" alt="Screenshot 2024-11-25 at 5 30 48 PM"
src="https://github.com/user-attachments/assets/caef56ce-f8aa-4f54-ab90-91d2d53f8c50">


UI:
<img width="1464" alt="Screenshot 2024-11-25 at 12 17 23 PM"
src="https://github.com/user-attachments/assets/b4bf6cc9-b0c8-422e-8dbf-ab82be9b5ca9">
<img width="1464" alt="Screenshot 2024-11-25 at 12 03 53 PM"
src="https://github.com/user-attachments/assets/4770872e-cc8d-4d82-b3e1-5a4afe98a115">



- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

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

changes/22527-policy-automation-ui-improvements

@@ -0,0 +1 @@
+- Update help text for policy automation Install software and Run script modals

frontend/pages/policies/ManagePoliciesPage/components/InstallSoftwareModal/InstallSoftwareModal.tsx

@@ -20,6 +20,7 @@ import TooltipTruncatedText from "components/TooltipTruncatedText";
 import CustomLink from "components/CustomLink";
 import Button from "components/buttons/Button";
 import { ISoftwareTitle } from "interfaces/software";
+import TooltipWrapper from "components/TooltipWrapper";
 
 const getPlatformDisplayFromPackageExtension = (ext: string | undefined) => {
   switch (ext) {
@@ -223,6 +224,16 @@ const InstallSoftwareModal = ({
       );
     }
 
+    const compatibleTipContent = (
+      <>
+        .pkg for macOS.
+        <br />
+        .msi or .exe for Windows.
+        <br />
+        .deb for Linux.
+      </>
+    );
+
     return (
       <div className={`${baseClass} form`}>
         <div className="form-field">
@@ -233,10 +244,11 @@ const InstallSoftwareModal = ({
             )}
           </ul>
           <span className="form-field__help-text">
-            Selected software will be installed when hosts fail the policy. Host
-            counts will reset when a new software is
-            <br />
-            selected.{" "}
+            Selected software, if{" "}
+            <TooltipWrapper tipContent={compatibleTipContent}>
+              compatible
+            </TooltipWrapper>{" "}
+            with the host, will be installed when hosts fail the chosen policy.{" "}
             <CustomLink
               url="https://fleetdm.com/learn-more-about/policy-automation-install-software"
               text="Learn more"

frontend/pages/policies/ManagePoliciesPage/components/PolicyRunScriptModal/PolicyRunScriptModal.tsx

@@ -21,6 +21,7 @@ import Spinner from "components/Spinner";
 import CustomLink from "components/CustomLink";
 import Button from "components/buttons/Button";
 import Modal from "components/Modal";
+import TooltipWrapper from "components/TooltipWrapper";
 
 const baseClass = "policy-run-script-modal";
 
@@ -191,6 +192,14 @@ const PolicyRunScriptModal = ({
       );
     }
 
+    const compatibleTipContent = (
+      <>
+        Shell (.sh) for macOS and Linux.
+        <br />
+        PowerShell (.ps1) for Windows.
+      </>
+    );
+
     return (
       <div className={`${baseClass} form`}>
         <div className="form-field">
@@ -201,8 +210,12 @@ const PolicyRunScriptModal = ({
             )}
           </ul>
           <span className="form-field__help-text">
-            Selected script will run when hosts fail the policy. Host counts
-            will reset when a new script is selected.{" "}
+            Selected script, if{" "}
+            <TooltipWrapper tipContent={compatibleTipContent}>
+              compatible
+            </TooltipWrapper>{" "}
+            with the host, will run when hosts fail the policy. Host counts will
+            reset when a new script is selected.{" "}
             <CustomLink
               url="https://fleetdm.com/learn-more-about/policy-automation-run-script"
               text="Learn more"