From 86eb8fd05824b27370db5515ea5c04d9267f660a Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Tue, 26 Nov 2024 12:30:30 -0800
Subject: [PATCH] UI - Update help text for Policy automations (scripts &
 software) (#24138)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 .../22527-policy-automation-ui-improvements   |  1 +
 .../InstallSoftwareModal.tsx                  | 20 +++++++++++++++----
 .../PolicyRunScriptModal.tsx                  | 17 ++++++++++++++--
 3 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 changes/22527-policy-automation-ui-improvements

diff --git a/changes/22527-policy-automation-ui-improvements b/changes/22527-policy-automation-ui-improvements
new file mode 100644
index 0000000000..6d56f7efa6
--- /dev/null
+++ b/changes/22527-policy-automation-ui-improvements
@@ -0,0 +1 @@
+- Update help text for policy automation Install software and Run script modals
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/InstallSoftwareModal/InstallSoftwareModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/InstallSoftwareModal/InstallSoftwareModal.tsx
index 0d9681c203..d21cc7a6c3 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/InstallSoftwareModal/InstallSoftwareModal.tsx
+++ b/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"
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PolicyRunScriptModal/PolicyRunScriptModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PolicyRunScriptModal/PolicyRunScriptModal.tsx
index e61221e3ef..bfb7864426 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/PolicyRunScriptModal/PolicyRunScriptModal.tsx
+++ b/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"