diff --git a/frontend/components/PlatformSelector/PlatformSelector.tsx b/frontend/components/PlatformSelector/PlatformSelector.tsx index 6f87dd236841..c46f85c956b6 100644 --- 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,6 +34,8 @@ export const PlatformSelector = ({ setCheckLinux, setCheckChrome, disabled = false, + installSoftware, + currentTeamId, }: IPlatformSelectorProps): JSX.Element => { const baseClass = "platform-selector"; @@ -33,9 +43,39 @@ export const PlatformSelector = ({ [`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 ( + + will only install + on{" "} + + To see targets, select{" "} + {softwareName} > Actions > Edit. Currently, hosts + that aren't targeted show an empty (---) policy status. + + } + > + targeted hosts + + . + + ); + }; + return (
- Targets: + Target:
- 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()}
); diff --git a/frontend/components/PlatformSelector/_styles.scss b/frontend/components/PlatformSelector/_styles.scss index edd515568764..387171815c4a 100644 --- 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 index 4d7ad70f3a73..6f5e615182c9 100644 --- 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 index 8490d2c24ab4..7eb466b93fca 100644 --- 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 {