Fleet UI: Add ChromeOS to view and run queries (#11992)

frontend/components/LiveQuery/SelectTargets.tsx

@@ -82,7 +82,10 @@ const parseLabels = (list?: ILabelSummary[]) => {
   const platforms =
     list?.filter(
       (l) =>
-        l.name === "macOS" || l.name === "MS Windows" || l.name === "All Linux"
+        l.name === "macOS" ||
+        l.name === "MS Windows" ||
+        l.name === "All Linux" ||
+        l.name === "ChromeOS"
     ) || [];
   const other = list?.filter((l) => l.label_type === "regular") || [];
 

frontend/components/PlatformCompatibility/PlatformCompatibility.tsx

@@ -13,7 +13,12 @@ interface IPlatformCompatibilityProps {
 
 const baseClass = "platform-compatibility";
 
-const DISPLAY_ORDER = ["macOS", "Windows", "Linux"] as IOsqueryPlatform[];
+const DISPLAY_ORDER = [
+  "macOS",
+  "Windows",
+  "Linux",
+  "ChromeOS",
+] as IOsqueryPlatform[];
 
 const ERROR_NO_COMPATIBLE_TABLES = Error("no tables in query");
 

frontend/components/TableContainer/DataTable/PlatformCell/PlatformCell.tests.tsx

@@ -4,7 +4,7 @@ import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 
 import PlatformCell from "./PlatformCell";
 
-const PLATFORMS = ["windows", "darwin", "linux"];
+const PLATFORMS = ["windows", "darwin", "linux", "chrome"];
 
 describe("Platform cell", () => {
   it("renders platform icons in correct order", () => {
@@ -14,11 +14,13 @@ describe("Platform cell", () => {
     const appleIcon = screen.queryByTestId("apple-icon");
     const linuxIcon = screen.queryByTestId("linux-icon");
     const windowsIcon = screen.queryByTestId("windows-icon");
+    const chromeIcon = screen.queryByTestId("chrome-icon");
 
-    expect(icons).toHaveLength(3);
+    expect(icons).toHaveLength(4);
     expect(icons[0].firstChild).toBe(appleIcon);
-    expect(icons[1].firstChild).toBe(linuxIcon);
-    expect(icons[2].firstChild).toBe(windowsIcon);
+    expect(icons[1].firstChild).toBe(windowsIcon);
+    expect(icons[2].firstChild).toBe(linuxIcon);
+    expect(icons[3].firstChild).toBe(chromeIcon);
   });
   it("renders empty state", () => {
     render(<PlatformCell value={[]} />);

frontend/components/TableContainer/DataTable/PlatformCell/PlatformCell.tsx

@@ -7,16 +7,18 @@ interface IPlatformCellProps {
 
 const baseClass = "platform-cell";
 
-const ICONS: Record<string, "darwin" | "linux" | "windows"> = {
+const ICONS: Record<string, "darwin" | "windows" | "linux" | "chrome"> = {
   darwin: "darwin",
-  linux: "linux",
   windows: "windows",
+  linux: "linux",
+  chrome: "chrome",
 };
 
 const DISPLAY_ORDER = [
   "darwin",
-  "linux",
   "windows",
+  "linux",
+  "chrome",
   // "None",
   // "Invalid query",
 ];

frontend/components/icons/Chrome.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";
+
+interface IChromeProps {
+  size: IconSizes;
+  color?: Colors;
+}
+
+const Chrome = ({
+  size = "medium",
+  color = "ui-fleet-black-75",
+}: IChromeProps) => {
+  return (
+    <svg
+      width={ICON_SIZES[size]}
+      height={ICON_SIZES[size]}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      data-testid="chrome-icon"
+    >
+      <path
+        d="M0 8a8.14 8.14 0 0 1 1.07-4.028l3.433 5.975A4.001 4.001 0 0 0 8 12c.447 0 .847-.072 1.275-.206l-2.384 4.131A8.004 8.004 0 0 1 0 8Zm11.41 2.05c.384-.6.59-1.328.59-2.05a4.001 4.001 0 0 0-1.353-3h4.772c.375.925.581 1.94.581 3 0 4.419-3.581 7.972-8 8l3.41-5.95ZM14.93 4H8a3.98 3.98 0 0 0-3.922 3.21L1.693 3.076A7.983 7.983 0 0 1 8 0a7.999 7.999 0 0 1 6.931 4ZM5.25 8a2.75 2.75 0 1 1 5.5 0 2.75 2.75 0 0 1-5.5 0Z"
+        fill={COLORS[color]}
+      />
+    </svg>
+  );
+};
+
+export default Chrome;

frontend/components/icons/index.ts

@@ -35,6 +35,7 @@ import Linux from "./Linux";
 import M1 from "./M1";
 import Centos from "./Centos";
 import Ubuntu from "./Ubuntu";
+import Chrome from "./Chrome";
 
 // Encircled
 import ApplePurple from "./ApplePurple";
@@ -115,6 +116,8 @@ export const ICON_MAP = {
   m1: M1,
   centos: Centos,
   ubuntu: Ubuntu,
+  chrome: Chrome,
+  ChromeOS: Chrome,
   "premium-feature": PremiumFeature,
   "darwin-purple": ApplePurple,
   "windows-blue": WindowsBlue,

frontend/components/side_panels/QuerySidePanel/QueryTableColumns/ColumnListItem/ColumnListItem.tsx

@@ -71,6 +71,15 @@ const createTooltipHtml = (
     );
   }
 
+  if (column.platforms?.length === 3) {
+    const platform1 = PLATFORM_DISPLAY_NAMES[column.platforms[0]];
+    const platform2 = PLATFORM_DISPLAY_NAMES[column.platforms[1]];
+    const platform3 = PLATFORM_DISPLAY_NAMES[column.platforms[2]];
+    toolTipHtml.push(
+      `<span class="${baseClass}__footnote">${FOOTNOTES.platform} ${platform1}, ${platform2}, and ${platform3}.</span>`
+    );
+  }
+
   const tooltip = toolTipHtml.join("");
   return tooltip;
 };

frontend/components/side_panels/QuerySidePanel/QueryTablePlatforms/QueryTablePlatforms.tsx

@@ -26,7 +26,7 @@ interface IQueryTablePlatformsProps {
   platforms: IPlatformsWithFreebsd[];
 }
 
-const PLATFORM_ORDER = ["darwin", "windows", "linux"];
+const PLATFORM_ORDER = ["darwin", "windows", "linux", "chrome"];
 
 const baseClass = "query-table-platforms";
 

frontend/hooks/usePlatformCompatibility.tsx

@@ -7,7 +7,7 @@ import checkPlatformCompatibility from "utilities/sql_tools";
 import PlatformCompatibility from "components/PlatformCompatibility";
 
 export interface IPlatformCompatibility {
-  getCompatiblePlatforms: () => ("darwin" | "windows" | "linux")[];
+  getCompatiblePlatforms: () => ("darwin" | "windows" | "linux" | "chrome")[];
   setCompatiblePlatforms: (sqlString: string) => void;
   render: () => JSX.Element;
 }

frontend/hooks/usePlatformSelector.tsx

@@ -7,7 +7,7 @@ import PlatformSelector from "components/PlatformSelector";
 
 export interface IPlatformSelector {
   setSelectedPlatforms: (platforms: string[]) => void;
-  getSelectedPlatforms: () => ("darwin" | "linux" | "windows")[];
+  getSelectedPlatforms: () => ("darwin" | "windows" | "linux" | "chrome")[];
   isAnyPlatformSelected: boolean;
   render: () => JSX.Element;
 }

frontend/interfaces/platform.ts

@@ -4,21 +4,41 @@ export type IOsqueryPlatform =
   | "windows"
   | "Windows"
   | "linux"
-  | "Linux";
+  | "Linux"
+  | "chrome"
+  | "ChromeOS";
 
-export type ISelectedPlatform = "all" | "darwin" | "windows" | "linux";
+export type ISelectedPlatform =
+  | "all"
+  | "darwin"
+  | "windows"
+  | "linux"
+  | "chrome";
 
 export type IPlatformString =
   | ""
   | "darwin"
   | "windows"
   | "linux"
+  | "chrome"
+  | "darwin,windows,linux,chrome"
   | "darwin,windows,linux"
+  | "darwin,linux,chrome"
+  | "darwin,windows,chrome"
+  | "windows,linux,chrome"
   | "darwin,windows"
   | "darwin,linux"
-  | "windows,linux";
+  | "darwin,chrome"
+  | "windows,linux"
+  | "windows,chrome"
+  | "linux,chrome";
 
-export const SUPPORTED_PLATFORMS = ["darwin", "windows", "linux"] as const;
+export const SUPPORTED_PLATFORMS = [
+  "darwin",
+  "windows",
+  "linux",
+  "chrome",
+] as const;
 
 // TODO: revisit this approach pending resolution of https://github.com/fleetdm/fleet/issues/3555.
 export const MACADMINS_EXTENSION_TABLES: Record<string, IOsqueryPlatform[]> = {

frontend/pages/queries/ManageQueriesPage/_styles.scss

@@ -69,7 +69,7 @@
 
       .Select-menu-outer {
         width: 364px;
-        max-height: 310px;
+        max-height: 380px;
 
         .Select-menu {
           max-height: none;

frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx

@@ -54,12 +54,6 @@ const PLATFORM_FILTER_OPTIONS = [
     value: "all",
     helpText: "All queries.",
   },
-  {
-    disabled: false,
-    label: "Linux",
-    value: "linux",
-    helpText: "Queries that are compatible with Linux operating systems.",
-  },
   {
     disabled: false,
     label: "macOS",
@@ -72,6 +66,18 @@ const PLATFORM_FILTER_OPTIONS = [
     value: "windows",
     helpText: "Queries that are compatible with Windows operating systems.",
   },
+  {
+    disabled: false,
+    label: "Linux",
+    value: "linux",
+    helpText: "Queries that are compatible with Linux operating systems.",
+  },
+  {
+    disabled: false,
+    label: "ChromeOS",
+    value: "chrome",
+    helpText: "Queries that are compatible with Chromebooks.",
+  },
 ];
 
 const QueriesTable = ({

frontend/pages/queries/QueryPage/components/NewQueryModal/NewQueryModal.tsx

@@ -113,7 +113,6 @@ const NewQueryModal = ({
             Users with the Observer role will be able to run this query on hosts
             where they have access.
           </p>
-          <hr />
           <div className="modal-cta-wrap">
             <Button
               type="submit"

frontend/utilities/constants.ts

@@ -143,8 +143,13 @@ export const DEFAULT_CAMPAIGN_STATE = {
 
 export const PLATFORM_DISPLAY_NAMES: Record<string, IOsqueryPlatform> = {
   darwin: "macOS",
-  linux: "Linux",
+  macOS: "macOS",
   windows: "Windows",
+  Windows: "Windows",
+  linux: "Linux",
+  Linux: "Linux",
+  chrome: "ChromeOS",
+  ChromeOS: "ChromeOS",
 };
 
 // as returned by the TARGETS API; based on display_text
@@ -194,6 +199,7 @@ export const PLATFORM_NAME_TO_LABEL_NAME = {
   darwin: "macOS",
   windows: "MS Windows",
   linux: "All Linux",
+  chrome: "ChromeOS",
 };
 
 export const HOSTS_SEARCH_BOX_PLACEHOLDER =