From 008722b2d92f12060ed5bf830c7a06e27f4c69c3 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Thu, 28 Nov 2024 14:04:34 +0100
Subject: [PATCH] cherry-pick(#33797): fix(trace): in `indexTree` check
 `isVisible` before adding to result (#33797)

---
 packages/web/src/components/treeView.tsx    |  8 ++++---
 tests/playwright-test/ui-mode-trace.spec.ts | 24 +++++++++++++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/components/treeView.tsx b/packages/web/src/components/treeView.tsx
index e6cf557e99..242e834ede 100644
--- a/packages/web/src/components/treeView.tsx
+++ b/packages/web/src/components/treeView.tsx
@@ -319,7 +319,9 @@ function indexTree<T extends TreeItem>(
   selectedItem: T | undefined,
   expandedItems: Map<string, boolean | undefined>,
   autoExpandDepth: number,
-  isVisible?: (item: T) => boolean): Map<T, TreeItemData> {
+  isVisible: (item: T) => boolean = () => true): Map<T, TreeItemData> {
+  if (!isVisible(rootItem))
+    return new Map();
 
   const result = new Map<T, TreeItemData>();
   const temporaryExpanded = new Set<string>();
@@ -328,9 +330,9 @@ function indexTree<T extends TreeItem>(
   let lastItem: T | null = null;
 
   const appendChildren = (parent: T, depth: number) => {
-    if (isVisible && !isVisible(parent))
-      return;
     for (const item of parent.children as T[]) {
+      if (!isVisible(item))
+        continue;
       const expandState = temporaryExpanded.has(item.id) || expandedItems.get(item.id);
       const autoExpandMatches = autoExpandDepth > depth && result.size < 25 && expandState !== false;
       const expanded = item.children.length ? expandState ?? autoExpandMatches : undefined;
diff --git a/tests/playwright-test/ui-mode-trace.spec.ts b/tests/playwright-test/ui-mode-trace.spec.ts
index def44e9aeb..b52b7d59f9 100644
--- a/tests/playwright-test/ui-mode-trace.spec.ts
+++ b/tests/playwright-test/ui-mode-trace.spec.ts
@@ -307,3 +307,27 @@ test('should show request source context id', async ({ runUITest, server }) => {
   await expect(page.getByText('page#2')).toBeVisible();
   await expect(page.getByText('api#1')).toBeVisible();
 });
+
+test('should filter actions tab on double-click', async ({ runUITest, server }) => {
+  const { page } = await runUITest({
+    'a.spec.ts': `
+      import { test, expect } from '@playwright/test';
+      test('pass', async ({ page }) => {
+        await page.goto('${server.EMPTY_PAGE}');
+      });
+    `,
+  });
+
+  await page.getByText('pass').dblclick();
+
+  const actionsTree = page.getByTestId('actions-tree');
+  await expect(actionsTree.getByRole('treeitem')).toHaveText([
+    /Before Hooks/,
+    /page.goto/,
+    /After Hooks/,
+  ]);
+  await actionsTree.getByRole('treeitem', { name: 'page.goto' }).dblclick();
+  await expect(actionsTree.getByRole('treeitem')).toHaveText([
+    /page.goto/,
+  ]);
+});