Support super long URLs by settings max height for URL (#197)

FormidableLabs · Jan 7, 2024 · a837b9a · a837b9a
1 parent a818453
commit a837b9a
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 3 deletions.
diff --git a/.changeset/afraid-turkeys-repeat.md b/.changeset/afraid-turkeys-repeat.md
@@ -0,0 +1,5 @@
+---
+'@envyjs/webui': patch
+---
+
+Prevent long URLs from affecting visibility of trace details
diff --git a/packages/webui/src/components/ui/TraceDetail.test.tsx b/packages/webui/src/components/ui/TraceDetail.test.tsx
@@ -297,7 +297,7 @@ describe('TraceDetail', () => {
       const copyAsCurl = within(summary).getByTestId('copy-as-curl');
 
       expect(copyAsCurl).toBeVisible();
-      expect(copyAsCurl).toHaveTextContent('Mock CopyAsCurlButton component: 2');
+      expect(copyAsCurl).toHaveTextContent(`Mock CopyAsCurlButton component: ${mockTrace.id}`);
     });
 
     it.each([
@@ -345,7 +345,7 @@ describe('TraceDetail', () => {
       const sent = within(requestDetails).getByTestId('sent');
 
       expect(sent).toBeVisible();
-      expect(sent).toHaveTextContent(`Mock DateTime component: ${1695308938}`);
+      expect(sent).toHaveTextContent(`Mock DateTime component: ${timestamp}`);
     });
 
     it('should display request host', () => {

diff --git a/packages/webui/src/components/ui/TraceDetail.tsx b/packages/webui/src/components/ui/TraceDetail.tsx
@@ -108,7 +108,7 @@ export default function TraceDetail() {
           </div>
         </div>
 
-        <div className="mb-4 break-all" data-test-id="url">
+        <div className="mb-4 break-all overflow-y-auto max-h-12" data-test-id="url">
           {url}
         </div>
 

diff --git a/packages/webui/src/testing/mockTraces/rest.ts b/packages/webui/src/testing/mockTraces/rest.ts
@@ -321,6 +321,56 @@ const inFlightEvent: Event = {
   },
 };
 
+// REST request (super long URL)
+const superLongUrlEvent: Event = {
+  id: 'TBC',
+  parentId: undefined,
+  serviceName: 'gql',
+  timestamp: elapseTime(1.2),
+  http: {
+    ...requestData(
+      'GET',
+      'data.restserver.com',
+      443,
+      `/features?${new Array(500)
+        .fill(0)
+        .map((_, idx) => `query_variable_${idx + 1}=value_${idx + 1}`)
+        .join('&')}`,
+    ),
+    state: HttpRequestState.Received,
+    requestHeaders: {
+      'accept': 'application/json',
+      'User-Agent': ['node-fetch/1.0 (+https://github.com/bitinn/node-fetch)'],
+      'accept-encoding': 'br, gzip, deflate',
+    },
+    requestBody: undefined,
+    // ---------
+    httpVersion: '1.1',
+    statusCode: 200,
+    statusMessage: 'OK',
+    responseHeaders: {
+      'content-type': 'application/json; charset=utf-8',
+      'content-length': '351',
+      'date': 'Thu, 17 Mar 2022 19:51:00 GMT',
+      'vary': 'Origin',
+      'connection': 'close',
+    },
+    responseBody: JSON.stringify({
+      foo: 'bar',
+    }),
+    duration: 15,
+    timings: {
+      blocked: 1,
+      dns: 1,
+      connect: 5,
+      ssl: 2,
+      send: 3,
+      wait: 2,
+      receive: 3,
+    },
+  },
+};
+
 export default [
   authRequest,
   dataEvent,
@@ -330,4 +380,5 @@ export default [
   errorEvent,
   abortedEvent,
   inFlightEvent,
+  superLongUrlEvent,
 ];