From ee91bdc58562478bc8063988acdd7ca4c6c744c1 Mon Sep 17 00:00:00 2001
From: Kuba Janik <jakubjanik00@gmail.com>
Date: Wed, 4 Sep 2024 16:54:44 +0200
Subject: [PATCH] feat(ui-mode): display list of query params in request tab
 (#32443)

---
 .../src/ui/networkResourceDetails.tsx         |  6 +++++
 tests/assets/network-tab/network.html         |  1 +
 .../ui-mode-test-network-tab.spec.ts          | 25 +++++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
index 03a2e936df539..8df091b262da4 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -82,6 +82,12 @@ const RequestTab: React.FunctionComponent<{
       Status Code: <span className={statusClass(resource.response.status)} style={{ display: 'inline-flex' }}>
         {`${resource.response.status} ${resource.response.statusText}`}
       </span></div>}
+    {resource.request.queryString.length ? <>
+      <div className='network-request-details-header'>Query String Parameters</div>
+      <div className='network-request-details-headers'>
+        {resource.request.queryString.map(param => `${param.name}: ${param.value}`).join('\n')}
+      </div>
+    </> : null}
     <div className='network-request-details-header'>Request Headers</div>
     <div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
     {requestBody && <div className='network-request-details-header'>Request Body</div>}
diff --git a/tests/assets/network-tab/network.html b/tests/assets/network-tab/network.html
index 32f7d2cf6ca86..c5b5038e08ba5 100644
--- a/tests/assets/network-tab/network.html
+++ b/tests/assets/network-tab/network.html
@@ -13,6 +13,7 @@
     </style>
     <script src='script.js'></script>
     <script>fetch('/api/endpoint')</script>
+    <script>fetch('/call-with-query-params?param1=value1&param1=value2&param2=value2')</script>
     <script>
       const body = JSON.stringify({
         data: {
diff --git a/tests/playwright-test/ui-mode-test-network-tab.spec.ts b/tests/playwright-test/ui-mode-test-network-tab.spec.ts
index 8fc7a4828e9d8..e1b3bef9ede77 100644
--- a/tests/playwright-test/ui-mode-test-network-tab.spec.ts
+++ b/tests/playwright-test/ui-mode-test-network-tab.spec.ts
@@ -135,3 +135,28 @@ test('should format JSON request body', async ({ runUITest, server }) => {
     '}',
   ]);
 });
+
+test('should display list of query parameters (only if present)', async ({ runUITest, server }) => {
+  const { page } = await runUITest({
+    'network-tab.test.ts': `
+      import { test, expect } from '@playwright/test';
+      test('network tab test', async ({ page }) => {
+        await page.goto('${server.PREFIX}/network-tab/network.html');
+      });
+    `,
+  });
+
+  await page.getByText('network tab test').dblclick();
+  await page.getByText('Network', { exact: true }).click();
+
+  await page.getByText('call-with-query-params').click();
+
+  await expect(page.getByText('Query String Parameters')).toBeVisible();
+  await expect(page.getByText('param1: value1')).toBeVisible();
+  await expect(page.getByText('param1: value2')).toBeVisible();
+  await expect(page.getByText('param2: value2')).toBeVisible();
+
+  await page.getByText('endpoint').click();
+
+  await expect(page.getByText('Query String Parameters')).not.toBeVisible();
+});