From 4eb09789c14aa31691edd5c5d1d6f58aaa22bce5 Mon Sep 17 00:00:00 2001
From: Andre Pereira <adrapereira@gmail.com>
Date: Thu, 11 Jul 2024 10:45:20 +0100
Subject: [PATCH] Tempo: Virtualize tags select to improve performance (#90269)

* Virtualize tags select to improve performance

* Fix tests

* Fix tests

* Fix tests
---
 .../SearchTraceQLEditor/SearchField.test.tsx  |  8 +++++--
 .../tempo/SearchTraceQLEditor/SearchField.tsx |  3 ++-
 .../SearchTraceQLEditor/TagsInput.test.tsx    | 23 +++++++++++--------
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.test.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.test.tsx
index 65bfe28381f..55207d53415 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.test.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.test.tsx
@@ -130,14 +130,18 @@ describe('SearchField', () => {
     if (select) {
       // Select tag22 as the tag
       await user.click(select);
-      jest.advanceTimersByTime(1000);
+      await act(async () => {
+        jest.advanceTimersByTime(1000);
+      });
       const tag22 = await screen.findByText('tag22');
       await user.click(tag22);
       expect(updateFilter).toHaveBeenCalledWith({ ...filter, tag: 'tag22', value: [] });
 
       // Select tag1 as the tag
       await user.click(select);
-      jest.advanceTimersByTime(1000);
+      await act(async () => {
+        jest.advanceTimersByTime(1000);
+      });
       const tag1 = await screen.findByText('tag1');
       await user.click(tag1);
       expect(updateFilter).toHaveBeenCalledWith({ ...filter, tag: 'tag1', value: [] });
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
index 049ab7a41b8..612c671d506 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
@@ -165,7 +165,8 @@ const SearchField = ({
             placeholder="Select tag"
             isClearable
             aria-label={`select ${filter.id} tag`}
-            allowCustomValue={true}
+            allowCustomValue
+            virtualized
           />
         )}
         <Select
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.test.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.test.tsx
index bc896a39a89..6133badd652 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.test.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.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 { TraceqlFilter, TraceqlSearchScope } from '../dataquery.gen';
@@ -39,12 +39,12 @@ describe('TagsInput', () => {
       const tag = screen.getByText('Select tag');
       expect(tag).toBeInTheDocument();
       await user.click(tag);
-      jest.advanceTimersByTime(1000);
+      await act(async () => {
+        jest.advanceTimersByTime(1000);
+      });
       await waitFor(() => {
         expect(screen.getByText('foo')).toBeInTheDocument();
         expect(screen.getByText('bar')).toBeInTheDocument();
-        expect(screen.getByText('$templateVariable1')).toBeInTheDocument();
-        expect(screen.getByText('$templateVariable2')).toBeInTheDocument();
       });
     });
 
@@ -54,12 +54,13 @@ describe('TagsInput', () => {
       const tag = screen.getByText('Select tag');
       expect(tag).toBeInTheDocument();
       await user.click(tag);
-      jest.advanceTimersByTime(1000);
+      await act(async () => {
+        jest.advanceTimersByTime(1000);
+      });
       await waitFor(() => {
         expect(screen.getByText('cluster')).toBeInTheDocument();
         expect(screen.getByText('container')).toBeInTheDocument();
         expect(screen.getByText('$templateVariable1')).toBeInTheDocument();
-        expect(screen.getByText('$templateVariable2')).toBeInTheDocument();
       });
     });
 
@@ -69,7 +70,9 @@ describe('TagsInput', () => {
       const tag = screen.getByText('Select tag');
       expect(tag).toBeInTheDocument();
       await user.click(tag);
-      jest.advanceTimersByTime(1000);
+      await act(async () => {
+        jest.advanceTimersByTime(1000);
+      });
       await waitFor(() => {
         expect(screen.getByText('db')).toBeInTheDocument();
         expect(screen.getByText('$templateVariable1')).toBeInTheDocument();
@@ -83,13 +86,13 @@ describe('TagsInput', () => {
       const tag = screen.getByText('Select tag');
       expect(tag).toBeInTheDocument();
       await user.click(tag);
-      jest.advanceTimersByTime(1000);
+      await act(async () => {
+        jest.advanceTimersByTime(1000);
+      });
       await waitFor(() => {
         expect(screen.getByText('cluster')).toBeInTheDocument();
         expect(screen.getByText('container')).toBeInTheDocument();
         expect(screen.getByText('db')).toBeInTheDocument();
-        expect(screen.getByText('$templateVariable1')).toBeInTheDocument();
-        expect(screen.getByText('$templateVariable2')).toBeInTheDocument();
       });
     });
   });