Merge pull request #2502 from Maxime-J/os-names

Render correct OS names globally.

src/components/hooks/useFormat.ts

@@ -1,5 +1,5 @@
 import useMessages from './useMessages';
-import { BROWSERS } from 'lib/constants';
+import { BROWSERS, OS_NAMES } from 'lib/constants';
 import useLocale from './useLocale';
 import useCountryNames from './useCountryNames';
 import regions from '../../../public/iso-3166-2.json';
@@ -9,10 +9,18 @@ export function useFormat() {
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
 
+  const formatOS = (value: string): string => {
+    return OS_NAMES[value] || value;
+  };
+
   const formatBrowser = (value: string): string => {
     return BROWSERS[value] || value;
   };
 
+  const formatDevice = (value: string): string => {
+    return formatMessage(labels[value] || labels.unknown);
+  };
+
   const formatCountry = (value: string): string => {
     return countryNames[value] || value;
   };
@@ -26,28 +34,26 @@ export function useFormat() {
     return countryNames[country] ? `${value}, ${countryNames[country]}` : value;
   };
 
-  const formatDevice = (value: string): string => {
-    return formatMessage(labels[value] || labels.unknown);
-  };
-
   const formatValue = (value: string, type: string, data?: { [key: string]: any }): string => {
     switch (type) {
+      case 'os':
+        return formatOS(value);
       case 'browser':
         return formatBrowser(value);
+      case 'device':
+        return formatDevice(value);
       case 'country':
         return formatCountry(value);
       case 'region':
         return formatRegion(value);
       case 'city':
         return formatCity(value, data?.country);
-      case 'device':
-        return formatDevice(value);
       default:
         return value;
     }
   };
 
-  return { formatBrowser, formatCountry, formatRegion, formatDevice, formatValue };
+  return { formatOS, formatBrowser, formatDevice, formatCountry, formatRegion, formatValue };
 }
 
 export default useFormat;

src/components/metrics/OSTable.tsx

@@ -1,19 +1,14 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
-import { useMessages } from 'components/hooks';
+import { useMessages, useFormat } from 'components/hooks';
-
-const names = {
-  'Mac OS': 'macOS',
-  'Chrome OS': 'ChromeOS',
-  'Sun OS': 'SunOS',
-};
 
 export function OSTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
+  const { formatOS } = useFormat();
 
   function renderLink({ x: os }) {
     return (
-      <FilterLink id="os" value={names[os] || os}>
+      <FilterLink id="os" value={os} label={formatOS(os)}>
         <img
           src={`${process.env.basePath || ''}/images/os/${
             os?.toLowerCase().replaceAll(/\W/g, '-') || 'unknown'

src/lib/constants.ts

@@ -249,6 +249,14 @@ export const DESKTOP_OS = [
 
 export const MOBILE_OS = ['Amazon OS', 'Android OS', 'BlackBerry OS', 'iOS', 'Windows Mobile'];
 
+export const OS_NAMES = {
+  'Android OS': 'Android',
+  'Chrome OS': 'ChromeOS',
+  'Mac OS': 'macOS',
+  'Sun OS': 'SunOS',
+  'Windows 10': 'Windows 10/11',
+};
+
 export const BROWSERS = {
   android: 'Android',
   aol: 'AOL',