Revert "fix(trace-viewer): don't preserve network selections across runs" (#37932)

Author: pavelfeldman

packages/trace-viewer/src/ui/networkTab.tsx

@@ -44,7 +44,6 @@ type RenderedEntry = {
   route: string,
   resource: Entry,
   contextId: string,
-  frameref: string | undefined,
 };
 type ColumnName = keyof RenderedEntry;
 type Sorting = { by: ColumnName, negate: boolean};
@@ -71,31 +70,23 @@ export const NetworkTab: React.FunctionComponent<{
   sdkLanguage: Language,
 }> = ({ boundaries, networkModel, onEntryHovered, sdkLanguage }) => {
   const [sorting, setSorting] = React.useState<Sorting | undefined>(undefined);
-  const [selectedEntryKey, setSelectedEntryKey] = React.useState<string | undefined>(undefined);
+  const [selectedEntry, setSelectedEntry] = React.useState<RenderedEntry | undefined>(undefined);
   const [filterState, setFilterState] = React.useState(defaultFilterState);
 
-  const { renderedEntries, renderedEntryMap } = React.useMemo(() => {
+  const { renderedEntries } = React.useMemo(() => {
     const renderedEntries = networkModel.resources.map(entry => renderEntry(entry, boundaries, networkModel.contextIdMap)).filter(filterEntry(filterState));
     if (sorting)
       sort(renderedEntries, sorting);
-    const renderedEntryMap = new Map(renderedEntries.map((entry, i) => [`${entry.frameref}:${i}`, entry]));
-    return { renderedEntries, renderedEntryMap };
+    return { renderedEntries };
   }, [networkModel.resources, networkModel.contextIdMap, filterState, sorting, boundaries]);
 
-  const selectedEntry = selectedEntryKey ? renderedEntryMap.get(selectedEntryKey) : undefined;
-
   const [columnWidths, setColumnWidths] = React.useState<Map<ColumnName, number>>(() => {
     return new Map(allColumns().map(column => [column, columnWidth(column)]));
   });
 
-  const onSelected = React.useCallback((item: RenderedEntry) => {
-    const index = renderedEntries.indexOf(item);
-    setSelectedEntryKey(index !== -1 ? `${item.frameref}:${index}` : undefined);
-  }, [renderedEntries]);
-
   const onFilterStateChange = React.useCallback((newFilterState: FilterState) => {
     setFilterState(newFilterState);
-    setSelectedEntryKey(undefined);
+    setSelectedEntry(undefined);
   }, []);
 
   if (!networkModel.resources.length)
@@ -106,7 +97,7 @@ export const NetworkTab: React.FunctionComponent<{
     ariaLabel='Network requests'
     items={renderedEntries}
     selectedItem={selectedEntry}
-    onSelected={onSelected}
+    onSelected={item => setSelectedEntry(item)}
     onHighlighted={item => onEntryHovered?.(item?.resource)}
     columns={visibleColumns(!!selectedEntry, renderedEntries)}
     columnTitle={columnTitle}
@@ -127,7 +118,7 @@ export const NetworkTab: React.FunctionComponent<{
         sidebarIsFirst={true}
         orientation='horizontal'
         settingName='networkResourceDetails'
-        main={<NetworkResourceDetails resource={selectedEntry.resource} sdkLanguage={sdkLanguage} startTimeOffset={selectedEntry.start} onClose={() => setSelectedEntryKey(undefined)} />}
+        main={<NetworkResourceDetails resource={selectedEntry.resource} sdkLanguage={sdkLanguage} startTimeOffset={selectedEntry.start} onClose={() => setSelectedEntry(undefined)} />}
         sidebar={grid}
       />}
   </>;
@@ -299,7 +290,6 @@ const renderEntry = (resource: Entry, boundaries: Boundaries, contextIdGenerator
     route: routeStatus,
     resource,
     contextId: contextIdGenerator.contextId(resource),
-    frameref: resource._frameref,
   };
 };
 

tests/playwright-test/ui-mode-test-network-tab.spec.ts

@@ -241,29 +241,3 @@ test('should not duplicate network entries from beforeAll', {
   await page.getByText('Network', { exact: true }).click();
   await expect(page.getByRole('list', { name: 'Network requests' }).getByText('empty.html')).toHaveCount(1);
 });
-
-test('should not preserve selection across test runs', async ({ runUITest, server }) => {
-  server.setRoute('/api/endpoint', (_, res) => res.setHeader('Content-Type', 'application/json').end());
-
-  const { page } = await runUITest({
-    'a.spec.ts': `
-      import { test } from '@playwright/test';
-
-      test('some test', async ({ page }) => {
-        await page.goto('${server.PREFIX}/network-tab/network.html');
-        // await page.evaluate(() => (window as any).donePromise);
-      });
-    `,
-  });
-
-  await page.getByText('some test').dblclick();
-  await page.getByText('Network', { exact: true }).click();
-
-  await page.getByText('network.html', { exact: true }).click();
-  await expect(page.getByText('General')).toBeVisible();
-
-  await page.getByText('some test').dblclick();
-  await expect(page.getByText('network.html', { exact: true })).toBeVisible();
-
-  await expect(page.getByText('General')).not.toBeVisible();
-});