feat(starfish): Map country code to country name (#58864)

<img width="296" alt="Screenshot 2023-10-26 at 12 11 29 PM"
src="https://github.com/getsentry/sentry/assets/63818634/387334a5-eaef-41d1-ad96-c12cdae7169f">

static/app/data/countryCodesMap.tsx

@@ -251,4 +251,8 @@ const countryCodesMap = {
   Mozambique: 'MZ',
 } as const;
 
+export const COUNTRY_CODE_TO_NAME_MAP = Object.fromEntries(
+  Object.entries(countryCodesMap).map(([key, value]) => [value, key])
+);
+
 export default countryCodesMap;

static/app/views/performance/browser/webVitals/components/pageOverviewFeaturedTagsList.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/button';
+import {COUNTRY_CODE_TO_NAME_MAP} from 'sentry/data/countryCodesMap';
 import {space} from 'sentry/styles/space';
 import {PerformanceBadge} from 'sentry/views/performance/browser/webVitals/components/performanceBadge';
 import {calculatePerformanceScore} from 'sentry/views/performance/browser/webVitals/utils/calculatePerformanceScore';
@@ -14,6 +15,14 @@ type Props = {
 
 const LIMIT = 4;
 
+function toReadableValue(tag, tagValue) {
+  if (tag === 'geo.country_code') {
+    return COUNTRY_CODE_TO_NAME_MAP[tagValue] ?? tagValue;
+  }
+
+  return tagValue;
+}
+
 export function PageOverviewFeaturedTagsList({transaction, tag, title}: Props) {
   const {data} = useSlowestTagValuesQuery({transaction, tag, limit: LIMIT});
   const tagValues = data?.data ?? [];
@@ -38,7 +47,7 @@ export function PageOverviewFeaturedTagsList({transaction, tag, title}: Props) {
                     // TODO: need to pass in handler here to open detail panel
                   }}
                 >
-                  {row[tag]}
+                  {toReadableValue(tag, row[tag])}
                 </TagButton>
               </TagValue>
               <Score>

static/app/views/performance/browser/webVitals/pageOverview.tsx

@@ -155,7 +155,6 @@ export default function PageOverview() {
                 transaction={transaction}
               />
               <PageOverviewFeaturedTagsList tag="release" transaction={transaction} />
-              {/* TODO: need a way to map country code to actual country name */}
               <PageOverviewFeaturedTagsList
                 tag="geo.country_code"
                 transaction={transaction}