feat(replays): Cleanup Replay>Network table by hiding Type prefixes (#46292)

We don't show the network op prefixes anymore (before we did show the
prefix `navigation.` but hid `resource.`)

the prefix is still visible in the url though, which I don't think is a
big deal. We can't scrub it from all the internal data structures
because it's how we differentiate network spans from memory and other
breadcrumb types.


![SCR-20230323-ky7](https://user-images.githubusercontent.com/187460/227375995-d446079d-cfeb-43a7-868b-3aa761a0917e.png)


Relates to getsentry/team-replay#35

Author: ryan953

static/app/views/replays/detail/network/networkTableCell.tsx

@@ -84,11 +84,11 @@ const NetworkTableCell = forwardRef<HTMLDivElement, Props>(
       () => (
         <Cell {...columnProps}>
           <Tooltip
-            title={span.op.replace('resource.', '')}
+            title={span.op.split('.')?.[1] ?? span.op}
             isHoverable
             showOnlyOnOverflow
           >
-            <Text>{span.op.replace('resource.', '')}</Text>
+            <Text>{span.op.split('.')?.[1] ?? span.op}</Text>
           </Tooltip>
         </Cell>
       ),

static/app/views/replays/detail/network/useNetworkFilters.spec.tsx

@@ -144,7 +144,7 @@ describe('useNetworkFilters', () => {
   });
 
   it('should update the url when setters are called', () => {
-    const TYPE_FILTER = ['fetch'];
+    const TYPE_FILTER = ['resource.fetch'];
     const STATUS_FILTER = ['200'];
     const SEARCH_FILTER = 'pikachu';
 
@@ -228,7 +228,7 @@ describe('useNetworkFilters', () => {
     mockUseLocation.mockReturnValue({
       pathname: '/',
       query: {
-        f_n_type: ['fetch'],
+        f_n_type: ['resource.fetch'],
       },
     } as Location<FilterFields>);
 
@@ -257,7 +257,7 @@ describe('useNetworkFilters', () => {
       pathname: '/',
       query: {
         f_n_status: ['200'],
-        f_n_type: ['fetch'],
+        f_n_type: ['resource.fetch'],
         f_n_search: 'pokemon/',
       },
     } as Location<FilterFields>);
@@ -278,7 +278,7 @@ describe('getResourceTypes', () => {
     });
 
     expect(result.current.getResourceTypes()).toStrictEqual([
-      {label: 'fetch', value: 'fetch'},
+      {label: 'fetch', value: 'resource.fetch'},
     ]);
   });
 
@@ -290,10 +290,10 @@ describe('getResourceTypes', () => {
     });
 
     expect(result.current.getResourceTypes()).toStrictEqual([
-      {label: 'fetch', value: 'fetch'},
-      {label: 'link', value: 'link'},
-      {label: 'navigation.navigate', value: 'navigation.navigate'},
-      {label: 'script', value: 'script'},
+      {label: 'fetch', value: 'resource.fetch'},
+      {label: 'link', value: 'resource.link'},
+      {label: 'navigate', value: 'navigation.navigate'},
+      {label: 'script', value: 'resource.script'},
     ]);
   });
 
@@ -311,10 +311,10 @@ describe('getResourceTypes', () => {
     });
 
     expect(result.current.getResourceTypes()).toStrictEqual([
-      {label: 'fetch', value: 'fetch'},
-      {label: 'link', value: 'link'},
-      {label: 'navigation.navigate', value: 'navigation.navigate'},
-      {label: 'script', value: 'script'},
+      {label: 'fetch', value: 'resource.fetch'},
+      {label: 'link', value: 'resource.link'},
+      {label: 'navigate', value: 'navigation.navigate'},
+      {label: 'script', value: 'resource.script'},
     ]);
   });
 });

static/app/views/replays/detail/network/useNetworkFilters.tsx

@@ -36,7 +36,7 @@ const FILTERS = {
     (status.includes(UNKNOWN_STATUS) && item.data.statusCode === undefined),
 
   type: (item: NetworkSpan, types: string[]) =>
-    types.length === 0 || types.includes(item.op.replace('resource.', '')),
+    types.length === 0 || types.includes(item.op),
 
   searchTerm: (item: NetworkSpan, searchTerm: string) =>
     JSON.stringify(item.description).toLowerCase().includes(searchTerm),
@@ -61,17 +61,11 @@ function useNetworkFilters({networkSpans}: Options): Return {
 
   const getResourceTypes = useCallback(
     () =>
-      Array.from(
-        new Set(
-          networkSpans
-            .map(networkSpan => networkSpan.op.replace('resource.', ''))
-            .concat(type)
-        )
-      )
-        .sort()
+      Array.from(new Set(networkSpans.map(networkSpan => networkSpan.op).concat(type)))
+        .sort((a, b) => ((a.split('.')?.[1] ?? a) < (b.split('.')?.[1] ?? b) ? -1 : 1))
         .map(value => ({
           value,
-          label: value,
+          label: value.split('.')?.[1] ?? value,
         })),
     [networkSpans, type]
   );