feat(browser-starfish): add font icon to resource module (#60530)

Adds font icon, and also fixes a bug where we weren't using the file
extension properly to get the icon.
<img width="393" alt="image"
src="https://github.com/getsentry/sentry/assets/44422760/bfec3e20-c0b6-460d-a03a-d01bf6f4659b">

package.json

@@ -137,7 +137,7 @@
     "papaparse": "^5.3.2",
     "pegjs": "^0.10.0",
     "pegjs-loader": "^0.5.6",
-    "platformicons": "^5.8.1",
+    "platformicons": "^5.8.2",
     "po-catalog-loader": "2.0.0",
     "prettier": "3.0.3",
     "prismjs": "^1.29.0",

static/app/views/performance/browser/resources/jsCssView/resourceTable.tsx

@@ -2,6 +2,7 @@ import {Fragment} from 'react';
 import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import {PlatformIcon} from 'platformicons';
+import {PLATFORM_TO_ICON} from 'platformicons/build/platformIcon';
 
 import GridEditable, {
   COL_WIDTH_UNDEFINED,
@@ -14,6 +15,7 @@ import {space} from 'sentry/styles/space';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
 import {RESOURCE_THROUGHPUT_UNIT} from 'sentry/views/performance/browser/resources';
+import {FONT_FILE_EXTENSIONS} from 'sentry/views/performance/browser/resources/shared/constants';
 import {ValidSort} from 'sentry/views/performance/browser/resources/utils/useResourceSort';
 import {useResourcesQuery} from 'sentry/views/performance/browser/resources/utils/useResourcesQuery';
 import {DurationCell} from 'sentry/views/starfish/components/tableCells/durationCell';
@@ -33,7 +35,6 @@ const {
   HTTP_RESPONSE_CONTENT_LENGTH,
   PROJECT_ID,
   SPAN_GROUP,
-  FILE_EXTENSION,
 } = SpanMetricsField;
 
 const {TIME_SPENT_PERCENTAGE} = SpanFunction;
@@ -103,22 +104,28 @@ function ResourceTable({sort, defaultResourceTypes}: Props) {
 
   const renderBodyCell = (col: Column, row: Row) => {
     const {key} = col;
-    const getIcon = (spanOp: string, fileExtension: string) => {
+    const getIcon = (
+      spanOp: string,
+      fileExtension: string
+    ): keyof typeof PLATFORM_TO_ICON | 'unknown' => {
       if (spanOp === 'resource.script') {
         return 'javascript';
       }
       if (fileExtension === 'css') {
         return 'css';
       }
+      if (FONT_FILE_EXTENSIONS.includes(fileExtension)) {
+        return 'font';
+      }
       return 'unknown';
     };
 
     if (key === SPAN_DESCRIPTION) {
+      const fileExtension = row[SPAN_DESCRIPTION].split('.').pop() || '';
+
       return (
         <DescriptionWrapper>
-          <PlatformIcon
-            platform={getIcon(row[SPAN_OP], row[FILE_EXTENSION]) || 'unknown'}
-          />
+          <PlatformIcon platform={getIcon(row[SPAN_OP], fileExtension) || 'unknown'} />
           <SpanDescriptionCell
             moduleName={ModuleName.HTTP}
             projectId={row[PROJECT_ID]}
@@ -146,7 +153,7 @@ function ResourceTable({sort, defaultResourceTypes}: Props) {
       if (fileExtension === 'css') {
         return <span>{t('Stylesheet')}</span>;
       }
-      if (['woff', 'woff2', 'ttf', 'otf', 'eot'].includes(fileExtension)) {
+      if (FONT_FILE_EXTENSIONS.includes(fileExtension)) {
         return <span>{t('Font')}</span>;
       }
       return <span>{spanOp}</span>;

static/app/views/performance/browser/resources/shared/constants.ts

@@ -0,0 +1 @@
+export const FONT_FILE_EXTENSIONS = ['woff', 'woff2', 'ttf', 'otf', 'eot'];

static/app/views/performance/browser/resources/utils/useResourcesQuery.ts

@@ -4,6 +4,7 @@ import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
+import {FONT_FILE_EXTENSIONS} from 'sentry/views/performance/browser/resources/shared/constants';
 import {
   ModuleFilters,
   useResourceModuleFilters,
@@ -153,7 +154,7 @@ export const getDomainFilter = (selectedDomain: string | undefined) => {
 const SPAN_OP_FILTER = {
   'resource.script': [`${SPAN_OP}:resource.script`],
   'resource.css': [`${FILE_EXTENSION}:css`],
-  'resource.font': [`${FILE_EXTENSION}:[woff,woff2,ttf,otf,eot]`],
+  'resource.font': [`${FILE_EXTENSION}:[${FONT_FILE_EXTENSIONS.join(',')}]`],
 };
 
 export const getResourceTypeFilter = (

yarn.lock

@@ -9255,10 +9255,10 @@ platform@^1.3.3:
   resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
   integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==
 
-platformicons@^5.8.1:
-  version "5.8.1"
-  resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-5.8.1.tgz#b8baaba8131670a34035cd41979cfaecfdc25c39"
-  integrity sha512-/89WN1dJCqL4kK+ddblpHEQ1Z6jkLXM1PSV3zOT/dhfDDp+BhLwE1Wf72qOQ3HrHXsQTYlpybw3xrxjPUknBwg==
+platformicons@^5.8.2:
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-5.8.2.tgz#5546afd48724c0a113ac63e7bf5c6aead9e5f062"
+  integrity sha512-B9qr5y5nlKW1T0XV7T3OUDieHG57KyaXUI6t4Y4ZMFWuzartRzdM5VKSL2Yc19V6FA45HkSgCAuq3xlOdh8mvA==
   dependencies:
     "@types/node" "*"
     "@types/react" "*"