UI – Update platforms column to only display compatible platforms (#13003)

## Addresses #12999 

<img width="1282" alt="Screenshot 2023-07-27 at 11 59 01 AM"
src="https://github.com/fleetdm/fleet/assets/61553566/b60d3b41-3d7b-4550-ba7c-8615bae085a6">


# 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/12999-platforms-column

@@ -0,0 +1 @@
+* Update the "Platforms" column to the more explicit "Compatible with"

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

@@ -1,6 +1,7 @@
 import React from "react";
 import Icon from "components/Icon";
 import { SupportedPlatform } from "interfaces/platform";
+import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 
 interface IPlatformCellProps {
   platforms: SupportedPlatform[];
@@ -42,7 +43,9 @@ const PlatformCell = ({ platforms }: IPlatformCellProps): JSX.Element => {
           ) : null;
         })
       ) : (
-        <span className={`${baseClass}__muted`}>---</span>
+        <span className={`${baseClass}__muted`}>
+          {DEFAULT_EMPTY_CELL_VALUE}
+        </span>
       )}
     </span>
   );

frontend/interfaces/schedulable_query.ts

@@ -1,6 +1,6 @@
 import { IFormField } from "./form_field";
 import { IPack } from "./pack";
-import { SelectedPlatformString } from "./platform";
+import { SelectedPlatformString, SupportedPlatform } from "./platform";
 
 // Query itself
 export interface ISchedulableQuery {
@@ -24,6 +24,11 @@ export interface ISchedulableQuery {
   packs: IPack[];
   stats: ISchedulableQueryStats;
 }
+
+export interface IEnhancedQuery extends ISchedulableQuery {
+  performance: string;
+  platforms: SupportedPlatform[];
+}
 export interface ISchedulableQueryStats {
   user_time_p50?: number;
   user_time_p95?: number;

frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx

@@ -16,12 +16,12 @@ import { performanceIndicator } from "utilities/helpers";
 import { SupportedPlatform } from "interfaces/platform";
 import { API_ALL_TEAMS_ID } from "interfaces/team";
 import {
+  IEnhancedQuery,
   IQueryKeyQueriesLoadAll,
   ISchedulableQuery,
 } from "interfaces/schedulable_query";
 import queriesAPI from "services/entities/queries";
 import PATHS from "router/paths";
-import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 import checkPlatformCompatibility from "utilities/sql_tools";
 import Button from "components/buttons/Button";
 import Spinner from "components/Spinner";
@@ -52,17 +52,10 @@ interface IManageQueriesPageProps {
   };
 }
 
-interface IEnhancedQuery extends ISchedulableQuery {
-  performance: string;
-  platforms: SupportedPlatform[] | typeof DEFAULT_EMPTY_CELL_VALUE[];
-}
-
-const getPlatforms = (
-  queryString: string
-): SupportedPlatform[] | typeof DEFAULT_EMPTY_CELL_VALUE[] => {
+const getPlatforms = (queryString: string): SupportedPlatform[] => {
   const { platforms } = checkPlatformCompatibility(queryString);
 
-  return platforms || [DEFAULT_EMPTY_CELL_VALUE];
+  return platforms ?? [];
 };
 
 const enhanceQuery = (q: ISchedulableQuery): IEnhancedQuery => {

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

@@ -285,7 +285,7 @@ const QueriesTable = ({
           variant: "text-icon",
           onActionButtonClick: onDeleteQueryClick,
         }}
-        selectedDropdownFilter={platform}
+        selectedDropdownFilter={!isInherited ? platform : undefined}
       />
     </div>
   ) : (

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

@@ -9,7 +9,10 @@ import PATHS from "router/paths";
 import permissionsUtils from "utilities/permissions";
 import { IUser } from "interfaces/user";
 import { secondsToDhms } from "utilities/helpers";
-import { ISchedulableQuery } from "interfaces/schedulable_query";
+import {
+  IEnhancedQuery,
+  ISchedulableQuery,
+} from "interfaces/schedulable_query";
 import { SupportedPlatform } from "interfaces/platform";
 
 import Icon from "components/Icon";
@@ -48,7 +51,7 @@ interface IHeaderProps {
 }
 interface IRowProps {
   row: {
-    original: ISchedulableQuery;
+    original: IEnhancedQuery;
     getToggleRowSelectedProps: () => IGetToggleAllRowsSelectedProps;
     toggleRowSelected: () => void;
   };
@@ -108,9 +111,6 @@ const generateTableHeaders = ({
   isInherited = false,
 }: IGenerateTableHeaders): IDataColumn[] => {
   const isOnlyObserver = permissionsUtils.isOnlyObserver(currentUser);
-  const isAnyTeamMaintainerOrTeamAdmin = permissionsUtils.isAnyTeamMaintainerOrTeamAdmin(
-    currentUser
-  );
 
   const tableHeaders: IDataColumn[] = [
     {
@@ -163,18 +163,11 @@ const generateTableHeaders = ({
     },
     {
       title: "Platform",
-      Header: "Platform",
+      Header: "Compatible with",
       disableSortBy: true,
       accessor: "platforms",
       Cell: (cellProps: IPlatformCellProps): JSX.Element => {
-        // translate the SelectedPlatformString into an array of `SupportedPlatform`s
-        const platformIconsToRender = (cellProps.row.original.platform === ""
-          ? ["darwin", "windows", "linux", "chrome"]
-          : cellProps.row.original.platform
-              ?.split(",")
-              .filter((platform) => platform !== "")) as SupportedPlatform[];
-
-        return <PlatformCell platforms={platformIconsToRender} />;
+        return <PlatformCell platforms={cellProps.row.original.platforms} />;
       },
     },
     {