diff --git a/frontend/components/PlatformSelector/PlatformSelector.stories.tsx b/frontend/components/PlatformSelector/PlatformSelector.stories.tsx index 220a11e4e2..f898ec2505 100644 --- a/frontend/components/PlatformSelector/PlatformSelector.stories.tsx +++ b/frontend/components/PlatformSelector/PlatformSelector.stories.tsx @@ -10,9 +10,11 @@ const meta: Meta = { checkDarwin: true, checkWindows: true, checkLinux: false, + checkChrome: false, setCheckDarwin: noop, setCheckWindows: noop, setCheckLinux: noop, + setCheckChrome: noop, }, }; diff --git a/frontend/components/PlatformSelector/PlatformSelector.tsx b/frontend/components/PlatformSelector/PlatformSelector.tsx index b6a8e22f31..66b343a011 100644 --- a/frontend/components/PlatformSelector/PlatformSelector.tsx +++ b/frontend/components/PlatformSelector/PlatformSelector.tsx @@ -6,9 +6,11 @@ interface IPlatformSelectorProps { checkDarwin: boolean; checkWindows: boolean; checkLinux: boolean; + checkChrome: boolean; setCheckDarwin: (val: boolean) => void; setCheckWindows: (val: boolean) => void; setCheckLinux: (val: boolean) => void; + setCheckChrome: (val: boolean) => void; } export const PlatformSelector = ({ @@ -16,9 +18,11 @@ export const PlatformSelector = ({ checkDarwin, checkWindows, checkLinux, + checkChrome, setCheckDarwin, setCheckWindows, setCheckLinux, + setCheckChrome, }: IPlatformSelectorProps): JSX.Element => { const baseClass = "platform-selector"; @@ -48,6 +52,13 @@ export const PlatformSelector = ({ > Linux + setCheckChrome(value)} + wrapperClassName={`${baseClass}__platform-checkbox-wrapper`} + > + ChromeOS +

Your policy will only be checked on the selected platform(s).

diff --git a/frontend/hooks/usePlatformSelector.tsx b/frontend/hooks/usePlatformSelector.tsx index abcd6173e2..c1e91399d3 100644 --- a/frontend/hooks/usePlatformSelector.tsx +++ b/frontend/hooks/usePlatformSelector.tsx @@ -19,17 +19,20 @@ const usePlatformSelector = ( const [checkDarwin, setCheckDarwin] = useState(false); const [checkWindows, setCheckWindows] = useState(false); const [checkLinux, setCheckLinux] = useState(false); + const [checkChrome, setCheckChrome] = useState(false); const checksByPlatform: Record = { darwin: checkDarwin, windows: checkWindows, linux: checkLinux, + chrome: checkChrome, }; const settersByPlatform: Record void> = { darwin: setCheckDarwin, windows: setCheckWindows, linux: setCheckLinux, + chrome: setCheckChrome, }; const setSelectedPlatforms = (platformsToCheck: string[]) => { @@ -46,7 +49,7 @@ const usePlatformSelector = ( useEffect(() => { if (platformContext === "") { - setSelectedPlatforms(["darwin", "windows", "linux"]); + setSelectedPlatforms(["darwin", "windows", "linux", "chrome"]); } platformContext && setSelectedPlatforms(platformContext.split(",")); }, [platformContext]); @@ -58,12 +61,14 @@ const usePlatformSelector = ( checkDarwin={checkDarwin} checkWindows={checkWindows} checkLinux={checkLinux} + checkChrome={checkChrome} setCheckDarwin={setCheckDarwin} setCheckWindows={setCheckWindows} setCheckLinux={setCheckLinux} + setCheckChrome={setCheckChrome} /> ); - }, [checkDarwin, checkWindows, checkLinux]); + }, [checkDarwin, checkWindows, checkLinux, checkChrome]); return { setSelectedPlatforms,