Fleet UI: Add ChromeOS to user flows related to policies (#12095)

frontend/components/PlatformSelector/PlatformSelector.stories.tsx

@@ -10,9 +10,11 @@ const meta: Meta<typeof PlatformSelector> = {
     checkDarwin: true,
     checkWindows: true,
     checkLinux: false,
+    checkChrome: false,
     setCheckDarwin: noop,
     setCheckWindows: noop,
     setCheckLinux: noop,
+    setCheckChrome: noop,
   },
 };
 

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
           </Checkbox>
+          <Checkbox
+            value={checkChrome}
+            onChange={(value: boolean) => setCheckChrome(value)}
+            wrapperClassName={`${baseClass}__platform-checkbox-wrapper`}
+          >
+            ChromeOS
+          </Checkbox>
         </span>
       </span>
       <p>Your policy will only be checked on the selected platform(s).</p>

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<string, boolean> = {
     darwin: checkDarwin,
     windows: checkWindows,
     linux: checkLinux,
+    chrome: checkChrome,
   };
 
   const settersByPlatform: Record<string, (val: boolean) => 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,