From 3c5f07201e3ef122cd56442cb8996fe1a48409a6 Mon Sep 17 00:00:00 2001
From: Ronan <33596237+RonanQuigley@users.noreply.github.com>
Date: Tue, 18 Jun 2024 08:20:06 +0100
Subject: [PATCH] Tempo: Virtualized search dropdowns for attribute values
 (#88569)

* TraceQL: Make the search field component use the virtualized prop for performance gains

* Use act on timers to eliminate warningsd

* Update more timers to use act to fix testing library warnings

* Fix linting failure

* Run make commands

---------

Co-authored-by: Joey Tawadrous <joey.tawadrous@grafana.com>
---
 public/api-merged.json                        |  2 --
 .../SearchTraceQLEditor/SearchField.test.tsx  | 18 ++++++++---
 .../tempo/SearchTraceQLEditor/SearchField.tsx |  6 ++++
 .../TraceQLSearch.test.tsx                    | 32 ++++++++++++++-----
 public/openapi3.json                          |  2 --
 5 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/public/api-merged.json b/public/api-merged.json
index 26cf2ef2017..a0d78eb6f2d 100644
--- a/public/api-merged.json
+++ b/public/api-merged.json
@@ -19970,7 +19970,6 @@
       }
     },
     "State": {
-      "description": "+enum",
       "type": "string"
     },
     "Status": {
@@ -20730,7 +20729,6 @@
       }
     },
     "Type": {
-      "description": "+enum",
       "type": "string"
     },
     "TypeMeta": {
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.test.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.test.tsx
index dd56e52bd09..6870c0533e0 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.test.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -86,20 +86,30 @@ describe('SearchField', () => {
     if (select) {
       // Add first value
       await user.click(select);
-      jest.advanceTimersByTime(1000);
+      await act(async () => {
+        jest.advanceTimersByTime(1000);
+      });
       const driverVal = await screen.findByText('driver');
-      await user.click(driverVal);
+
+      await act(async () => {
+        await user.click(driverVal);
+      });
       expect(updateFilter).toHaveBeenCalledWith({ ...filter, value: ['driver'] });
 
       // Add a second value
       await user.click(select);
-      jest.advanceTimersByTime(1000);
+
+      await act(async () => {
+        jest.advanceTimersByTime(1000);
+      });
       const customerVal = await screen.findByText('customer');
+
       await user.click(customerVal);
       expect(updateFilter).toHaveBeenCalledWith({ ...filter, value: ['driver', 'customer'] });
 
       // Remove the first value
       const firstValRemove = await screen.findAllByLabelText('Remove');
+
       await user.click(firstValRemove[0]);
       expect(updateFilter).toHaveBeenCalledWith({ ...filter, value: ['customer'] });
     }
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
index 59cbb7ef57c..fc558e0c581 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
@@ -183,6 +183,12 @@ const SearchField = ({
         />
         {!hideValue && (
           <Select
+            /**
+             * Trace cardinality means we need to use the virtualized variant of the Select component.
+             * For example the number of span names being returned can easily reach 10s of thousands,
+             * which is enough to cause a user's web browser to seize up
+             */
+            virtualized
             className={styles.dropdown}
             inputId={`${filter.id}-value`}
             isLoading={isLoadingValues}
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx
index 262582da68c..698009d24f2 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx
@@ -114,25 +114,37 @@ describe('TraceQLSearch', () => {
     });
 
     await user.click(screen.getByText('Select tag'));
-    jest.advanceTimersByTime(1000);
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
     await user.click(screen.getByText('foo'));
-    jest.advanceTimersByTime(1000);
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
     await user.click(screen.getAllByText('Select value')[2]);
-    jest.advanceTimersByTime(1000);
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
     await user.click(screen.getByText('driver'));
-    jest.advanceTimersByTime(1000);
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
     await act(async () => {
       expect(screen.getAllByLabelText('Add tag').length).toBe(1);
       expect(screen.getAllByLabelText(/Remove tag/).length).toBe(1);
     });
 
     await user.click(screen.getByLabelText('Add tag'));
-    jest.advanceTimersByTime(1000);
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
     expect(screen.queryAllByLabelText('Add tag').length).toBe(0); // not filled in the new tag, so no need to add another one
     expect(screen.getAllByLabelText(/Remove tag/).length).toBe(2); // one for each tag
 
     await user.click(screen.getAllByLabelText(/Remove tag/)[1]);
-    jest.advanceTimersByTime(1000);
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
     expect(screen.queryAllByLabelText('Add tag').length).toBe(1); // filled in the default tag, so can add another one
     expect(screen.queryAllByLabelText(/Remove tag/).length).toBe(1); // filled in the default tag, so can remove values
 
@@ -155,7 +167,9 @@ describe('TraceQLSearch', () => {
 
     if (minDurationOperator) {
       await user.click(minDurationOperator);
-      jest.advanceTimersByTime(1000);
+      await act(async () => {
+        jest.advanceTimersByTime(1000);
+      });
       const regexOp = await screen.findByText('>=');
       await user.click(regexOp);
       const minDurationFilter = query.filters.find((f) => f.id === 'min-duration');
@@ -176,7 +190,9 @@ describe('TraceQLSearch', () => {
 
     if (serviceNameValue) {
       await user.click(serviceNameValue);
-      jest.advanceTimersByTime(1000);
+      await act(async () => {
+        jest.advanceTimersByTime(1000);
+      });
       const customerValue = await screen.findByText('customer');
       await user.click(customerValue);
       const nameFilter = query.filters.find((f) => f.id === 'service-name');
diff --git a/public/openapi3.json b/public/openapi3.json
index a00082e3deb..9e9ccbc7ef4 100644
--- a/public/openapi3.json
+++ b/public/openapi3.json
@@ -10349,7 +10349,6 @@
         "type": "object"
       },
       "State": {
-        "description": "+enum",
         "type": "string"
       },
       "Status": {
@@ -11109,7 +11108,6 @@
         "type": "array"
       },
       "Type": {
-        "description": "+enum",
         "type": "string"
       },
       "TypeMeta": {