fleet/frontend/components/PlatformCompatibility/PlatformCompatibility.tsx

import React from "react";

import {
  DisplayPlatform,
  QueryableDisplayPlatform,
  QueryablePlatform,
} from "interfaces/platform";
import { PLATFORM_DISPLAY_NAMES } from "utilities/constants";

import TooltipWrapper from "components/TooltipWrapper";
import Icon from "components/Icon";

interface IPlatformCompatibilityProps {
  compatiblePlatforms: QueryablePlatform[] | null;
  error: Error | null;
}

const baseClass = "platform-compatibility";

const DISPLAY_ORDER = [
  "macOS",
  "Windows",
  "Linux",
  "ChromeOS",
] as QueryableDisplayPlatform[];

const ERROR_NO_COMPATIBLE_TABLES = Error("no tables in query");

const formatPlatformsForDisplay = (
  compatiblePlatforms: QueryablePlatform[]
): DisplayPlatform[] => {
  return compatiblePlatforms.map((str) => PLATFORM_DISPLAY_NAMES[str] || str);
};

const displayIncompatibilityText = (err: Error) => {
  switch (err) {
    case ERROR_NO_COMPATIBLE_TABLES:
      return (
        <span>
          No platforms (check your query for invalid tables or tables that are
          supported on different platforms)
        </span>
      );
    default:
      return (
        <span>No platforms (check your query for a possible syntax error)</span>
      );
  }
};

const tipContent = (
  <>
    Estimated compatibility based on the tables <br />
    used in the query. Reports are not supported <br />
    on iPhones, iPads, and Android hosts.
  </>
);

const PlatformCompatibility = ({
  compatiblePlatforms,
  error,
}: IPlatformCompatibilityProps): JSX.Element | null => {
  if (!compatiblePlatforms) {
    return null;
  }

  const displayPlatforms = formatPlatformsForDisplay(compatiblePlatforms);

  const renderCompatiblePlatforms = () => {
    if (error || !compatiblePlatforms?.length) {
      return displayIncompatibilityText(error || ERROR_NO_COMPATIBLE_TABLES);
    }

    return DISPLAY_ORDER.map((platform) => {
      const isCompatible = displayPlatforms.includes(platform);

      const liveQueryOnlyPlatform = (
        <TooltipWrapper
          tipContent={`Only live reports are supported on ${platform}.`}
        >
          {platform}
        </TooltipWrapper>
      );

      return (
        <span key={`platform-compatibility__${platform}`} className="platform">
          <Icon
            name={isCompatible ? "check" : "close"}
            className={
              isCompatible ? "compatible-platform" : "incompatible-platform"
            }
            color={isCompatible ? "status-success" : "status-error"}
            size="small"
          />
          {platform === "ChromeOS" ? liveQueryOnlyPlatform : platform}
        </span>
      );
    });
  };

  return (
    <div className={baseClass}>
      <b>
        <TooltipWrapper tipContent={tipContent} clickable={false}>
          Compatible with:
        </TooltipWrapper>
      </b>
      {renderCompatiblePlatforms()}
    </div>
  );
};
export default PlatformCompatibility;