UI: Add ChromeOS supporting features to the ManageHosts page (#12185)

## Addresses #11828 
- [x] Add ChromeOS platform filter
- [x] Increase dropdown widths to 180px for screen >1100px of:
   - [x] platform dropdown
   - [x] Labels dropdown (for consistency)
- [x] Add new null empty cell value “Not supported” for Chromebooks
- [x] Apply to the following columns:
    - [x] Disk space available
    - [x] MDM status
    - [x] MDM server URL
    - [x] Last restarted
- [x] Fix a misaligned icon in the labels dropdown, other small fixes
 
<img width="1184" alt="Screenshot 2023-06-06 at 7 09 26 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/ee6fb72c-f66e-44a4-a321-8eaefff3b70b">


# Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

changes/11828-chromeos-to-manage-hosts

@@ -0,0 +1 @@
+- Added features for ChromeOS support to the ManageHosts page

frontend/components/NotSupported/NotSupported.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+
+export const NotSupported = (
+  <span className="not-supported">Not supported</span>
+);
+export default NotSupported;

frontend/components/NotSupported/_styles.scss

@@ -0,0 +1,3 @@
+.not-supported {
+  color: $ui-fleet-black-50;
+}

frontend/components/NotSupported/index.ts

@@ -0,0 +1 @@
+export { default } from "./NotSupported";

frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx

@@ -17,6 +17,8 @@ import TruncatedTextCell from "components/TableContainer/DataTable/TruncatedText
 import TooltipWrapper from "components/TooltipWrapper";
 import HumanTimeDiffWithDateTip from "components/HumanTimeDiffWithDateTip";
 import CustomLink from "components/CustomLink";
+import NotSupported from "components/NotSupported";
+
 import {
   humanHostMemory,
   humanHostLastRestart,
@@ -286,12 +288,15 @@ const allHostTableHeaders: IDataColumn[] = [
       />
     ),
     accessor: "gigs_disk_space_available",
-    Cell: (cellProps: INumberCellProps): JSX.Element => {
+    Cell: (cellProps: INumberCellProps) => {
       const {
         id,
         platform,
         percent_disk_space_available,
       } = cellProps.row.original;
+      if (platform === "chrome") {
+        return NotSupported;
+      }
       return (
         <DiskSpaceGraph
           baseClass="gigs_disk_space_available__cell"
@@ -402,8 +407,12 @@ const allHostTableHeaders: IDataColumn[] = [
     accessor: "mdm.enrollment_status",
     id: "mdm_enrollment_status",
     Cell: (cellProps: ICellProps) => {
-      if (cellProps.cell.value)
+      if (cellProps.row.original.platform === "chrome") {
+        return NotSupported;
+      }
+      if (cellProps.cell.value) {
         return <TextCell value={cellProps.cell.value} />;
+      }
       return <span className="text-muted">{DEFAULT_EMPTY_CELL_VALUE}</span>;
     },
   },
@@ -433,10 +442,13 @@ const allHostTableHeaders: IDataColumn[] = [
     accessor: "mdm.server_url",
     id: "mdm_server_url",
     Cell: (cellProps: ICellProps) => {
+      if (cellProps.row.original.platform === "chrome") {
+        return NotSupported;
+      }
       if (cellProps.cell.value) {
         return <TextCell value={cellProps.cell.value} />;
       }
-      return <span className="text-muted">---</span>;
+      return <span className="text-muted">{DEFAULT_EMPTY_CELL_VALUE}</span>;
     },
   },
   {
@@ -565,8 +577,11 @@ const allHostTableHeaders: IDataColumn[] = [
     ),
     accessor: "uptime",
     Cell: (cellProps: ICellProps) => {
-      const { uptime, detail_updated_at } = cellProps.row.original;
+      const { uptime, detail_updated_at, platform } = cellProps.row.original;
 
+      if (platform === "chrome") {
+        return NotSupported;
+      }
       return (
         <TextCell
           value={{

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -234,6 +234,10 @@
   &__status_dropdown {
     width: 165px;
 
+    @media (min-width: 1100px) {
+      width: 180px;
+    }
+
     .Select-menu-outer {
       width: 364px;
       max-height: 310px;

frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss

@@ -14,7 +14,6 @@
     border: 1px solid $ui-fleet-black-10;
     background-color: $ui-light-grey;
     border-radius: $border-radius;
-    height: 40px;
 
     &--is-focused,
     &--menu-is-open,
@@ -34,7 +33,7 @@
       content: url(../assets/images/icon-filter-v2-black-16x16@2x.png);
       transform: scale(0.5);
       left: -6px;
-      top: -1px;
+      margin-top: 4px;
     }
   }
 
@@ -122,3 +121,9 @@
     }
   }
 }
+
+@media (min-width: 1100px) {
+  .label-filter-select {
+    width: 180px;
+  }
+}

frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/constants.ts

@@ -12,6 +12,7 @@ export const PLATFORM_TYPE_ICONS: Record<string, any> = {
   "All Linux": "linux",
   macOS: "darwin",
   "MS Windows": "windows",
+  chrome: "chrome",
 };
 
 export const FILTERED_LINUX = ["Red Hat Linux", "CentOS Linux", "Ubuntu Linux"];

frontend/utilities/constants.ts

@@ -161,6 +161,7 @@ export const PLATFORM_LABEL_DISPLAY_NAMES: Record<string, string> = {
   "MS Windows": "Windows",
   "Red Hat Linux": "Red Hat Linux",
   "Ubuntu Linux": "Ubuntu Linux",
+  chrome: "ChromeOS",
 };
 
 export const PLATFORM_LABEL_DISPLAY_ORDER = [
@@ -180,6 +181,7 @@ export const PLATFORM_LABEL_DISPLAY_TYPES: Record<string, string> = {
   "MS Windows": "platform",
   "Red Hat Linux": "platform",
   "Ubuntu Linux": "platform",
+  chrome: "platform",
 };
 
 interface IPlatformDropdownOptions {