fix(bcd): Prioritize current support using a ranking system

client/src/document/ingredients/browser-compatibility-table/feature-row.tsx

@@ -3,14 +3,15 @@ import type bcd from "@mdn/browser-compat-data/types";
 import { BrowserInfoContext } from "./browser-info";
 import {
   asList,
-  getFirst,
+  getCurrentSupport,
   hasNoteworthyNotes,
   isFullySupportedWithoutLimitation,
   isNotSupportedAtAll,
   isOnlySupportedWithAltName,
   isOnlySupportedWithPrefix,
   isTruthy,
   versionIsPreview,
+  SupportStatementExtended,
 } from "./utils";
 import { LEGEND_LABELS } from "./legend";
 
@@ -25,18 +26,6 @@ interface CompatStatementExtended extends bcd.CompatStatement {
   bad_url?: true;
 }
 
-// Extended for the fields, beyond the bcd types, that are extra-added
-// exclusively in Yari.
-interface SimpleSupportStatementExtended extends bcd.SimpleSupportStatement {
-  // Known for some support statements where the browser *version* is known,
-  // as opposed to just "true" and if the version release date is known.
-  release_date?: string;
-}
-
-type SupportStatementExtended =
-  | SimpleSupportStatementExtended
-  | SimpleSupportStatementExtended[];
-
 function getSupportClassName(
   support: SupportStatementExtended | undefined,
   browser: bcd.BrowserStatement
@@ -46,7 +35,7 @@ function getSupportClassName(
   }
 
   let { flags, version_added, version_removed, partial_implementation } =
-    getFirst(support);
+    getCurrentSupport(support)!;
 
   let className;
   if (version_added === null) {
@@ -74,7 +63,7 @@ function getSupportBrowserReleaseDate(
   if (!support) {
     return undefined;
   }
-  return getFirst(support).release_date;
+  return getCurrentSupport(support)!.release_date;
 }
 
 function StatusIcons({ status }: { status: bcd.StatusBlock }) {
@@ -136,7 +125,7 @@ const CellText = React.memo(
     support: bcd.SupportStatement | undefined;
     browser: bcd.BrowserStatement;
   }) => {
-    const currentSupport = getFirst(support);
+    const currentSupport = getCurrentSupport(support);
 
     const added = currentSupport?.version_added ?? null;
     const removed = currentSupport?.version_removed ?? null;
@@ -277,7 +266,11 @@ function Icon({ name }: { name: string }) {
 }
 
 function CellIcons({ support }: { support: bcd.SupportStatement | undefined }) {
-  const supportItem = getFirst(support);
+  const supportItem = getCurrentSupport(support);
+  if (!supportItem) {
+    return null;
+  }
+
   const icons = [
     isOnlySupportedWithPrefix(support) && <Icon name="prefix" />,
     supportItem && hasNoteworthyNotes(supportItem) && <Icon name="footnote" />,

client/src/document/ingredients/browser-compatibility-table/utils.ts

@@ -1,5 +1,17 @@
 import type bcd from "@mdn/browser-compat-data/types";
 
+// Extended for the fields, beyond the bcd types, that are extra-added
+// exclusively in Yari.
+interface SimpleSupportStatementExtended extends bcd.SimpleSupportStatement {
+  // Known for some support statements where the browser *version* is known,
+  // as opposed to just "true" and if the version release date is known.
+  release_date?: string;
+}
+
+export type SupportStatementExtended =
+  | SimpleSupportStatementExtended
+  | SimpleSupportStatementExtended[];
+
 export function getFirst<T>(a: T | T[]): T;
 export function getFirst<T>(a: T | T[] | undefined): T | undefined {
   return Array.isArray(a) ? a[0] : a;
@@ -73,13 +85,16 @@ export function hasNoteworthyNotes(support: bcd.SimpleSupportStatement) {
 }
 
 function hasLimitation(support: bcd.SimpleSupportStatement) {
+  return hasMajorLimitation(support) || support.notes;
+}
+
+function hasMajorLimitation(support: bcd.SimpleSupportStatement) {
   return (
     support.partial_implementation ||
     support.alternative_name ||
     support.flags ||
     support.prefix ||
-    support.version_removed ||
-    support.notes
+    support.version_removed
   );
 }
 
@@ -112,3 +127,53 @@ export function isFullySupportedWithoutLimitation(
 export function isNotSupportedAtAll(support: bcd.SimpleSupportStatement) {
   return !support.version_added && !hasLimitation(support);
 }
+
+function isFullySupportedWithoutMajorLimitation(
+  support: bcd.SimpleSupportStatement
+) {
+  return support.version_added && !hasMajorLimitation(support);
+}
+
+// Prioritizes support items
+export function getCurrentSupport(
+  support: SupportStatementExtended | undefined
+): SimpleSupportStatementExtended | undefined {
+  if (!support) return undefined;
+
+  // Full support without limitation
+  const noLimitationSupportItem = asList(support).find((item) =>
+    isFullySupportedWithoutLimitation(item)
+  );
+  if (noLimitationSupportItem) return noLimitationSupportItem;
+
+  // Full support with only notes and version_added
+  const minorLimitationSupportItem = asList(support).find((item) =>
+    isFullySupportedWithoutMajorLimitation(item)
+  );
+  if (minorLimitationSupportItem) return minorLimitationSupportItem;
+
+  // Full support with altname/prefix
+  const altnamePrefixSupportItem = asList(support).find(
+    (item) => !item.version_removed && (item.prefix || item.alternative_name)
+  );
+  if (altnamePrefixSupportItem) return altnamePrefixSupportItem;
+
+  // Partial support
+  const partialSupportItem = asList(support).find(
+    (item) => !item.version_removed && item.partial_implementation
+  );
+  if (partialSupportItem) return partialSupportItem;
+
+  // Support with flags only
+  const flagSupportItem = asList(support).find(
+    (item) => !item.version_removed && item.flags
+  );
+  if (flagSupportItem) return flagSupportItem;
+
+  // No/Inactive support
+  const noSupportItem = asList(support).find((item) => item.version_removed);
+  if (noSupportItem) return noSupportItem;
+
+  // Default (likely never reached)
+  return getFirst(support);
+}