Refactor help text in scripts page

frontend/pages/ManageControlsPage/Scripts/cards/ScriptLibrary/ScriptLibrary.tsx

@@ -9,6 +9,7 @@ import { AxiosError } from "axios";
 import { useQuery } from "react-query";
 
 import { DEFAULT_USE_QUERY_OPTIONS } from "utilities/constants";
+import { getPathWithQueryParams } from "utilities/url";
 import PATHS from "router/paths";
 
 import { AppContext } from "context/app";
@@ -28,6 +29,7 @@ import PageDescription from "components/PageDescription";
 import EmptyState from "components/EmptyState";
 import Button from "components/buttons/Button";
 import GitOpsModeTooltipWrapper from "components/GitOpsModeTooltipWrapper";
+import CustomLink from "components/CustomLink";
 
 import UploadList from "../../../../../components/UploadList";
 import DeleteScriptModal from "../../components/DeleteScriptModal";
@@ -49,11 +51,23 @@ const ScriptLibrary = ({ router, teamId, location }: IScriptLibraryProps) => {
     ? parseInt(location.query.page, 10)
     : DEFAULT_PAGE;
 
-  const { isPremiumTier, isGlobalTechnician, isTeamTechnician } = useContext(
-    AppContext
-  );
+  const {
+    isPremiumTier,
+    isGlobalTechnician,
+    isTeamTechnician,
+    isGlobalAdmin,
+    isAnyTeamAdmin,
+    isGlobalMaintainer,
+    isAnyTeamMaintainer,
+  } = useContext(AppContext);
 
-  const isTechnician = isGlobalTechnician || isTeamTechnician;
+  const isTechnician = !!isGlobalTechnician || !!isTeamTechnician;
+  const canRunScripts = !!(
+    isGlobalAdmin ||
+    isAnyTeamAdmin ||
+    isGlobalMaintainer ||
+    isAnyTeamMaintainer
+  );
 
   const [showDeleteScriptModal, setShowDeleteScriptModal] = useState(false);
   const [showEditScriptModal, setShowEditScriptModal] = useState(false);
@@ -196,14 +210,36 @@ const ScriptLibrary = ({ router, teamId, location }: IScriptLibraryProps) => {
   );
 
   const canUploadScripts = !isTechnician;
+  const hostsUrl = getPathWithQueryParams(PATHS.MANAGE_HOSTS, {
+    fleet_id: teamId,
+  });
+  const policiesUrl = getPathWithQueryParams(PATHS.MANAGE_POLICIES, {
+    fleet_id: teamId,
+  });
 
   return (
     <div className={baseClass}>
       <SectionHeader title="Library" alignLeftHeaderVertically />
       <div className={`${baseClass}__tab-header`}>
         <PageDescription
           variant="right-panel"
-          content="A collection of scripts for configuring and remediating hosts."
+          content={
+            <>
+              A collection of scripts for configuring and remediating hosts.
+              <br />
+              To manually run a script, go to the{" "}
+              <CustomLink text="Hosts" url={hostsUrl} /> page, select one or
+              more hosts, and click <b>Run script</b>.
+              {!isTechnician && canRunScripts && (
+                <>
+                  <br />
+                  To automatically run a script across hosts that match a policy
+                  condition, create a policy automation on the{" "}
+                  <CustomLink text="Policies" url={policiesUrl} /> page.
+                </>
+              )}
+            </>
+          }
         />
         {canUploadScripts && (
           <GitOpsModeTooltipWrapper

frontend/pages/ManageControlsPage/Scripts/components/EditScriptModal/EditScriptModal.tsx

@@ -5,7 +5,6 @@ import classnames from "classnames";
 
 import { notify } from "components/ToastNotification";
 import { AppContext } from "context/app";
-import RunScriptHelpText from "pages/hosts/components/ScriptDetailsModal/RunScriptHelpText";
 import scriptAPI from "services/entities/scripts";
 import useGitOpsMode from "hooks/useGitOpsMode";
 
@@ -86,18 +85,13 @@ const EditScriptModal = ({
   onExit,
 }: IEditScriptModal) => {
   const {
-    currentTeam,
     isGlobalAdmin,
     isAnyTeamAdmin,
     isGlobalMaintainer,
     isAnyTeamMaintainer,
-    isTeamTechnician,
-    isGlobalTechnician,
   } = useContext(AppContext);
   const { gitOpsModeEnabled } = useGitOpsMode();
 
-  const isTechnician = !!isTeamTechnician || !!isGlobalTechnician;
-
   const canRunScripts = !!(
     isGlobalAdmin ||
     isAnyTeamAdmin ||
@@ -198,12 +192,6 @@ const EditScriptModal = ({
             value={scriptFormData}
             readOnly={gitOpsModeEnabled}
           />
-          <RunScriptHelpText
-            className="form-field__help-text"
-            isTechnician={isTechnician}
-            canRunScripts={canRunScripts}
-            teamId={currentTeam?.id}
-          />
         </form>
         {canRunScripts && (
           <ModalFooter

frontend/pages/hosts/components/ScriptDetailsModal/ScriptDetailsModal.tsx

@@ -25,8 +25,6 @@
 import GitOpsModeTooltipWrapper from "components/GitOpsModeTooltipWrapper";
 import { IPaginatedListScript } from "pages/hosts/ManageHostsPage/components/RunScriptBatchPaginatedList/RunScriptBatchPaginatedList";
 
-import RunScriptHelpText from "./RunScriptHelpText";
-
 const baseClass = "script-details-modal";
 
 type PartialOrFullHostScript =
@@ -38,7 +36,6 @@
   /** optional onClose to allow both "go back" behavior and "close" behavior depending on context */
   onClose?: () => void;
   onDelete?: () => void;
-  runScriptHelpText?: boolean;
   showHostScriptActions?: boolean;
   onClickRun?: (script: IHostScript) => void;
   hostTeamId?: number | null;
@@ -49,7 +46,6 @@
   isScriptContentError?: Error | null;
   isHidden?: boolean;
   onClickRunDetails?: (scriptExecutionId: string) => void;
-  teamIdForApi?: number;
   suppressSecondaryActions?: boolean;
   customPrimaryButtons?: React.ReactNode;
 }
@@ -59,7 +55,6 @@
   onClose,
   onDelete,
   onClickRun,
-  runScriptHelpText = false,
   showHostScriptActions = false,
   hostTeamId,
   selectedScriptId,
@@ -69,7 +64,6 @@
   isScriptContentError,
   isHidden = false,
   onClickRunDetails,
-  teamIdForApi,
   suppressSecondaryActions = false,
   customPrimaryButtons,
 }: IScriptDetailsModalProps) => {
@@ -84,24 +78,7 @@
     }
   };
 
-  const {
-    currentUser,
-    isGlobalAdmin,
-    isAnyTeamAdmin,
-    isGlobalMaintainer,
-    isAnyTeamMaintainer,
-    isTeamTechnician,
-    isGlobalTechnician,
-  } = useContext(AppContext);
-
-  const isTechnician = !!isTeamTechnician || !!isGlobalTechnician;
-
-  const canRunScripts = !!(
-    isGlobalAdmin ||
-    isAnyTeamAdmin ||
-    isGlobalMaintainer ||
-    isAnyTeamMaintainer
-  );
+  const { currentUser } = useContext(AppContext);
 
   // handle multiple possibilities for `selectedScriptDetails`
   let scriptId: number | null = null;
@@ -124,7 +101,7 @@
     () =>
       scriptId
         ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          scriptAPI.downloadScript(scriptId)
+        scriptAPI.downloadScript(scriptId)
         : Promise.resolve(null),
     {
       refetchOnWindowFocus: false,
@@ -143,9 +120,8 @@
     try {
       const content = selectedScriptContent || scriptContent || "";
       const formatDate = format(new Date(), "yyyy-MM-dd");
-      const filename = `${formatDate} ${
-        selectedScriptDetails?.name || "Script details"
-      }`;
+      const filename = `${formatDate} ${selectedScriptDetails?.name || "Script details"
+        }`;
       const file = new File([content], filename);
       FileSaver.saveAs(file);
     } catch {
@@ -268,14 +244,6 @@
         <Textarea label="Script content:" variant="code">
           {scriptContent}
         </Textarea>
-        {runScriptHelpText && (
-          <RunScriptHelpText
-            className="form-field__help-text"
-            isTechnician={isTechnician}
-            canRunScripts={canRunScripts}
-            teamId={teamIdForApi}
-          />
-        )}
       </div>
     );
   };

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

@@ -1094,7 +1094,7 @@
         isManagedLocalAccountEnabled={
           host.platform === "windows"
             ? mdmConfig?.windows_settings?.managed_local_account_settings
-                ?.enabled ?? false
+              ?.enabled ?? false
             : mdmConfig?.macos_setup?.enable_managed_local_account ?? false
         }
         managedAccountStatus={
@@ -1212,22 +1212,22 @@
     // Only include Reports for supported platforms
     ...(showReportsTab
       ? [
-          {
-            name: "Reports",
-            title: "reports",
-            pathname: PATHS.HOST_REPORTS(hostIdFromURL),
-          },
-        ]
+        {
+          name: "Reports",
+          title: "reports",
+          pathname: PATHS.HOST_REPORTS(hostIdFromURL),
+        },
+      ]
       : []),
     ...(showPoliciesTab
       ? [
-          {
-            name: "Policies",
-            title: "policies",
-            pathname: PATHS.HOST_POLICIES(hostIdFromURL),
-            count: failingPoliciesCount,
-          },
-        ]
+        {
+          name: "Policies",
+          title: "policies",
+          pathname: PATHS.HOST_POLICIES(hostIdFromURL),
+          count: failingPoliciesCount,
+        },
+      ]
       : []),
   ];
 
@@ -1560,7 +1560,7 @@
                     activeActivityTab === "past"
                       ? pastActivitiesIsFetching || pastMDMCommandsIsFetching
                       : upcomingActivitiesIsFetching ||
-                        upcomingMDMCommandsIsFetching
+                      upcomingMDMCommandsIsFetching
                   }
                   isError={
                     activeActivityTab === "past"
@@ -1741,7 +1741,6 @@
               host={host}
               currentUser={currentUser}
               onCloseScriptModalGroup={onCloseScriptModalGroup}
-              teamIdForApi={currentTeam?.id}
             />
           )}
           {!!host && showTransferHostModal && (
@@ -1772,9 +1771,9 @@
                 if (host.mdm.enrollment_status === "Pending") {
                   router.push(
                     filteredHostsPath ||
-                      getPathWithQueryParams(PATHS.MANAGE_HOSTS, {
-                        fleet_id: location.query.fleet_id,
-                      })
+                    getPathWithQueryParams(PATHS.MANAGE_HOSTS, {
+                      fleet_id: location.query.fleet_id,
+                    })
                   );
                   return;
                 }
@@ -1934,8 +1933,8 @@
                 );
                 const timeAgoText = result.updated_at
                   ? ` (${timeAgo(new Date(result.updated_at), {
-                      addSuffix: true,
-                    })})`
+                    addSuffix: true,
+                  })})`
                   : "";
                 return (
                   <IconStatusMessage

frontend/pages/hosts/details/HostDetailsPage/modals/ScriptModalGroup/ScriptModalGroup.tsx

@@ -23,7 +23,6 @@ interface IScriptsProps {
   currentUser: IUser | null;
   host: IHost;
   onCloseScriptModalGroup: () => void;
-  teamIdForApi?: number;
 }
 
 enum ModalGroupOption {
@@ -38,7 +37,6 @@ const ScriptModalGroup = ({
   currentUser,
   host,
   onCloseScriptModalGroup,
-  teamIdForApi,
 }: IScriptsProps) => {
   const [previousModal, setPreviousModal] = useState<ModalGroupOption | null>(
     null
@@ -222,7 +220,6 @@ const ScriptModalGroup = ({
         isScriptContentError={isSelectedScriptContentError}
         isHidden={currentModal !== ModalGroupOption.ViewScriptDetails}
         showHostScriptActions
-        teamIdForApi={teamIdForApi}
       />
       <DeleteScriptModal
         scriptId={selectedScript?.script_id || 1}