ref(device-contexts): Add function that returns a more detailed desc of a language

static/app/components/events/contexts/device/getDeviceKnownDataDetails.tsx

@@ -6,7 +6,7 @@ import {t} from 'app/locale';
 import {Event} from 'app/types/event';
 import {defined} from 'app/utils';
 
-import {getRelativeTimeFromEventDateCreated} from '../utils';
+import {getFullLanguageDescription, getRelativeTimeFromEventDateCreated} from '../utils';
 
 import formatMemory from './formatMemory';
 import formatStorage from './formatStorage';
@@ -182,7 +182,7 @@ function getDeviceKnownDataDetails(
     case DeviceKnownDataType.LANGUAGE:
       return {
         subject: t('Language'),
-        value: data.language,
+        value: getFullLanguageDescription(data.language),
       };
     case DeviceKnownDataType.LOW_MEMORY:
       return {

static/app/components/events/contexts/utils.tsx

@@ -1,9 +1,11 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
+import * as Sentry from '@sentry/react';
 import moment from 'moment-timezone';
 
 import {t} from 'app/locale';
 import plugins from 'app/plugins';
+import ConfigStore from 'app/stores/configStore';
 import space from 'app/styles/space';
 import {defined} from 'app/utils';
 
@@ -63,6 +65,39 @@ export function getRelativeTimeFromEventDateCreated(
   );
 }
 
+// Typescript doesn't have types for DisplayNames yet and that's why the type assertion "any" is needed below.
+// There is currently an open PR that intends to introduce the types https://github.com/microsoft/TypeScript/pull/44022
+export function getFullLanguageDescription(locale: string) {
+  const sentryAppLanguageCode = ConfigStore.get('languageCode');
+
+  const [languageAbbreviation, countryAbbreviation] = locale.includes('_')
+    ? locale.split('_')
+    : locale.split('-');
+
+  try {
+    const languageNames = new (Intl as any).DisplayNames(sentryAppLanguageCode, {
+      type: 'language',
+    });
+
+    const languageName = languageNames.of(languageAbbreviation);
+
+    if (countryAbbreviation) {
+      const regionNames = new (Intl as any).DisplayNames(sentryAppLanguageCode, {
+        type: 'region',
+      });
+
+      const countryName = regionNames.of(countryAbbreviation.toUpperCase());
+
+      return `${languageName} (${countryName})`;
+    }
+
+    return languageName;
+  } catch (error) {
+    Sentry.captureException(error);
+    return locale;
+  }
+}
+
 const RelativeTime = styled('span')`
   color: ${p => p.theme.subText};
   margin-left: ${space(0.5)};