For R.C. - Fleet UI: Add copy for policy tied to install software (#2…

…5247)
fleetdm · Jan 8, 2025 · 4ffcbce · 4ffcbce
1 parent 95acb6e
commit 4ffcbce
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 7 deletions.
diff --git a/frontend/components/PlatformSelector/PlatformSelector.tsx b/frontend/components/PlatformSelector/PlatformSelector.tsx
@@ -1,6 +1,12 @@
 import React from "react";
 import classNames from "classnames";
+
+import { IPolicySoftwareToInstall } from "interfaces/policy";
 import Checkbox from "components/forms/fields/Checkbox";
+import CustomLink from "components/CustomLink";
+import TooltipWrapper from "components/TooltipWrapper";
+import { buildQueryStringFromParams } from "utilities/url";
+import paths from "router/paths";
 
 interface IPlatformSelectorProps {
   baseClass?: string;
@@ -13,6 +19,8 @@ interface IPlatformSelectorProps {
   setCheckLinux: (val: boolean) => void;
   setCheckChrome: (val: boolean) => void;
   disabled?: boolean;
+  installSoftware?: IPolicySoftwareToInstall;
+  currentTeamId?: number;
 }
 
 export const PlatformSelector = ({
@@ -26,16 +34,48 @@ export const PlatformSelector = ({
   setCheckLinux,
   setCheckChrome,
   disabled = false,
+  installSoftware,
+  currentTeamId,
 }: IPlatformSelectorProps): JSX.Element => {
   const baseClass = "platform-selector";
 
   const labelClasses = classNames("form-field__label", {
     [`form-field__label--disabled`]: disabled,
   });
 
+  const renderInstallSoftwareHelpText = () => {
+    if (!installSoftware) {
+      return null;
+    }
+    const softwareName = installSoftware.name;
+    const softwareId = installSoftware.software_title_id.toString();
+    const softwareLink = `${paths.SOFTWARE_TITLE_DETAILS(
+      softwareId
+    )}?${buildQueryStringFromParams({ team_id: currentTeamId })}`;
+
+    return (
+      <span className={`${baseClass}__install-software`}>
+        <CustomLink text={softwareName} url={softwareLink} /> will only install
+        on{" "}
+        <TooltipWrapper
+          tipContent={
+            <>
+              To see targets, select{" "}
+              <b>{softwareName} &gt; Actions &gt; Edit</b>. Currently, hosts
+              that aren&apos;t targeted show an empty (---) policy status.
+            </>
+          }
+        >
+          targeted hosts
+        </TooltipWrapper>
+        .
+      </span>
+    );
+  };
+
   return (
     <div className={`${parentClass}__${baseClass} ${baseClass} form-field`}>
-      <span className={labelClasses}>Targets:</span>
+      <span className={labelClasses}>Target:</span>
       <span className={`${baseClass}__checkboxes`}>
         <Checkbox
           value={checkDarwin}
@@ -71,9 +111,8 @@ export const PlatformSelector = ({
         </Checkbox>
       </span>
       <div className="form-field__help-text">
-        Your policy will only run on the selected platform(s). Additionally, if
-        install software automation is enabled, it will only be installed on
-        hosts defined in the software scope.
+        Policy runs on all hosts with these platform(s).
+        {renderInstallSoftwareHelpText()}
       </div>
     </div>
   );

diff --git a/frontend/components/PlatformSelector/_styles.scss b/frontend/components/PlatformSelector/_styles.scss
@@ -2,7 +2,7 @@
   // override global form-field width: 100%
   width: auto;
 
-  span {
+  &__checkboxes {
     display: flex;
     align-items: center;
     gap: 12px;
@@ -15,4 +15,10 @@
   &__platform-checkbox-wrapper {
     width: auto;
   }
+
+  .form-field__help-text {
+    display: flex;
+    flex-direction: column;
+    gap: $pad-medium;
+  }
 }
diff --git a/frontend/hooks/usePlatformSelector.tsx b/frontend/hooks/usePlatformSelector.tsx
@@ -6,6 +6,7 @@ import {
   QUERYABLE_PLATFORMS,
   QueryablePlatform,
 } from "interfaces/platform";
+import { IPolicySoftwareToInstall } from "interfaces/policy";
 
 import PlatformSelector from "components/PlatformSelector";
 
@@ -15,12 +16,16 @@ export interface IPlatformSelector {
   isAnyPlatformSelected: boolean;
   render: () => JSX.Element;
   disabled?: boolean;
+  installSoftware?: IPolicySoftwareToInstall;
+  currentTeamId?: number;
 }
 
 const usePlatformSelector = (
   platformContext: SelectedPlatformString | null | undefined,
   baseClass = "",
-  disabled = false
+  disabled = false,
+  installSoftware: IPolicySoftwareToInstall | undefined,
+  currentTeamId: number | undefined
 ): IPlatformSelector => {
   const [checkDarwin, setCheckDarwin] = useState(false);
   const [checkWindows, setCheckWindows] = useState(false);
@@ -73,6 +78,8 @@ const usePlatformSelector = (
         setCheckLinux={setCheckLinux}
         setCheckChrome={setCheckChrome}
         disabled={disabled}
+        installSoftware={installSoftware}
+        currentTeamId={currentTeamId}
       />
     );
   }, [checkDarwin, checkWindows, checkLinux, checkChrome, disabled]);

diff --git a/frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx b/frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx
@@ -116,6 +116,7 @@ const PolicyForm = ({
 
   const {
     currentUser,
+    currentTeam,
     isGlobalObserver,
     isGlobalAdmin,
     isGlobalMaintainer,
@@ -146,7 +147,9 @@ const PolicyForm = ({
   const platformSelector = usePlatformSelector(
     lastEditedQueryPlatform,
     baseClass,
-    platformSelectorDisabled
+    platformSelectorDisabled,
+    storedPolicy?.install_software,
+    currentTeam?.id
   );
 
   const {