feat(traces): Add cross event dropdown functionality (#104100)

This PR adds in some refinements to the cross event dropdown, such as
proper labels, ability to add a second cross event, and disabling itself
when there are two cross events present.

I also moved the search section of the spans tab into its own file to
keep things a bit more tidy, as well as refactoring the spans tab tests
to use the `additionalWrapper` arg, over wrapping in the wrapper saving
a couple lines.

Ticket: EXP-618

Author: nsdeschenes

static/app/views/explore/spans/spansTab.spec.tsx

@@ -66,6 +66,7 @@ describe('SpansTabContent', () => {
         'gen-ai-explore-traces',
         'gen-ai-explore-traces-consent-ui',
         'search-query-builder-case-insensitivity',
+        'traces-page-cross-event-querying',
       ],
     },
   });
@@ -142,12 +143,10 @@ describe('SpansTabContent', () => {
   });
 
   it('should fire analytics once per change', async () => {
-    render(
-      <Wrapper>
-        <SpansTabContent datePageFilterProps={datePageFilterProps} />
-      </Wrapper>,
-      {organization}
-    );
+    render(<SpansTabContent datePageFilterProps={datePageFilterProps} />, {
+      organization,
+      additionalWrapper: Wrapper,
+    });
 
     await screen.findByText(/No spans found/);
     expect(trackAnalytics).toHaveBeenCalledTimes(1);
@@ -186,12 +185,7 @@ describe('SpansTabContent', () => {
       return <SpansTabContent datePageFilterProps={datePageFilterProps} />;
     }
 
-    render(
-      <Wrapper>
-        <Component />
-      </Wrapper>,
-      {organization}
-    );
+    render(<Component />, {organization, additionalWrapper: Wrapper});
 
     const samples = screen.getByRole('tab', {name: 'Span Samples'});
     const aggregates = screen.getByRole('tab', {name: 'Aggregates'});
@@ -232,12 +226,10 @@ describe('SpansTabContent', () => {
   }, 20_000);
 
   it('opens toolbar when switching to aggregates tab', async () => {
-    render(
-      <Wrapper>
-        <SpansTabContent datePageFilterProps={datePageFilterProps} />
-      </Wrapper>,
-      {organization}
-    );
+    render(<SpansTabContent datePageFilterProps={datePageFilterProps} />, {
+      organization,
+      additionalWrapper: Wrapper,
+    });
 
     // by default the toolbar should be visible
     expect(screen.getByTestId('explore-span-toolbar')).toBeInTheDocument();
@@ -271,12 +263,10 @@ describe('SpansTabContent', () => {
 
   describe('case sensitivity', () => {
     it('renders the case sensitivity toggle', () => {
-      render(
-        <Wrapper>
-          <SpansTabContent datePageFilterProps={datePageFilterProps} />
-        </Wrapper>,
-        {organization}
-      );
+      render(<SpansTabContent datePageFilterProps={datePageFilterProps} />, {
+        organization,
+        additionalWrapper: Wrapper,
+      });
 
       const caseSensitivityToggle = screen.getByRole('button', {
         name: 'Ignore case',
@@ -286,10 +276,8 @@ describe('SpansTabContent', () => {
 
     it('toggles case sensitivity', async () => {
       const {router} = render(
-        <Wrapper>
-          <SpansTabContent datePageFilterProps={datePageFilterProps} />
-        </Wrapper>,
-        {organization}
+        <SpansTabContent datePageFilterProps={datePageFilterProps} />,
+        {organization, additionalWrapper: Wrapper}
       );
 
       const caseSensitivityToggle = screen.getByRole('button', {
@@ -314,12 +302,10 @@ describe('SpansTabContent', () => {
         body: {},
       });
 
-      render(
-        <Wrapper>
-          <SpansTabContent datePageFilterProps={datePageFilterProps} />
-        </Wrapper>,
-        {organization}
-      );
+      render(<SpansTabContent datePageFilterProps={datePageFilterProps} />, {
+        organization,
+        additionalWrapper: Wrapper,
+      });
 
       const caseSensitivityToggle = screen.getByRole('button', {
         name: 'Ignore case',
@@ -408,14 +394,10 @@ describe('SpansTabContent', () => {
     });
 
     it('should show hints', () => {
-      render(
-        <Wrapper>
-          <SpansTabContent datePageFilterProps={datePageFilterProps} />
-        </Wrapper>,
-        {
-          organization,
-        }
-      );
+      render(<SpansTabContent datePageFilterProps={datePageFilterProps} />, {
+        organization,
+        additionalWrapper: Wrapper,
+      });
 
       expect(screen.getByText('stringTag1')).toBeInTheDocument();
       expect(screen.getByText('stringTag2')).toBeInTheDocument();
@@ -440,12 +422,10 @@ describe('SpansTabContent', () => {
 
     describe('when the AI features are disabled', () => {
       it('does not display the Ask Seer combobox', async () => {
-        render(
-          <Wrapper>
-            <SpansTabContent datePageFilterProps={datePageFilterProps} />
-          </Wrapper>,
-          {organization: {...organization, features: []}}
-        );
+        render(<SpansTabContent datePageFilterProps={datePageFilterProps} />, {
+          organization: {...organization, features: []},
+          additionalWrapper: Wrapper,
+        });
 
         const input = screen.getByRole('combobox');
         await userEvent.click(input);
@@ -455,12 +435,10 @@ describe('SpansTabContent', () => {
     });
 
     it('brings along the query', async () => {
-      render(
-        <Wrapper>
-          <SpansTabContent datePageFilterProps={datePageFilterProps} />
-        </Wrapper>,
-        {organization}
-      );
+      render(<SpansTabContent datePageFilterProps={datePageFilterProps} />, {
+        organization,
+        additionalWrapper: Wrapper,
+      });
 
       const input = screen.getByRole('combobox');
       await userEvent.click(input);
@@ -481,12 +459,10 @@ describe('SpansTabContent', () => {
     });
 
     it('brings along the user input', async () => {
-      render(
-        <Wrapper>
-          <SpansTabContent datePageFilterProps={datePageFilterProps} />
-        </Wrapper>,
-        {organization}
-      );
+      render(<SpansTabContent datePageFilterProps={datePageFilterProps} />, {
+        organization,
+        additionalWrapper: Wrapper,
+      });
 
       const input = screen.getByRole('combobox');
       await userEvent.click(input);
@@ -505,12 +481,10 @@ describe('SpansTabContent', () => {
     });
 
     it('brings along only the query and the user input', async () => {
-      render(
-        <Wrapper>
-          <SpansTabContent datePageFilterProps={datePageFilterProps} />
-        </Wrapper>,
-        {organization}
-      );
+      render(<SpansTabContent datePageFilterProps={datePageFilterProps} />, {
+        organization,
+        additionalWrapper: Wrapper,
+      });
 
       const input = screen.getByRole('combobox');
       await userEvent.click(input);
@@ -529,4 +503,70 @@ describe('SpansTabContent', () => {
       });
     });
   });
+
+  describe('cross events', () => {
+    it('displays the cross events dropdown', async () => {
+      render(<SpansTabContent datePageFilterProps={datePageFilterProps} />, {
+        organization,
+        additionalWrapper: Wrapper,
+      });
+
+      expect(
+        screen.getByRole('button', {name: 'Add a cross event query'})
+      ).toBeInTheDocument();
+
+      await userEvent.click(
+        screen.getByRole('button', {name: 'Add a cross event query'})
+      );
+
+      expect(screen.getByRole('menuitemradio', {name: 'Spans'})).toBeInTheDocument();
+      expect(screen.getByRole('menuitemradio', {name: 'Logs'})).toBeInTheDocument();
+      expect(screen.getByRole('menuitemradio', {name: 'Metrics'})).toBeInTheDocument();
+    });
+
+    it('adds a cross event query', async () => {
+      const {router} = render(
+        <SpansTabContent datePageFilterProps={datePageFilterProps} />,
+        {organization, additionalWrapper: Wrapper}
+      );
+
+      await userEvent.click(
+        screen.getByRole('button', {name: 'Add a cross event query'})
+      );
+
+      expect(screen.getByRole('menuitemradio', {name: 'Spans'})).toBeInTheDocument();
+      await userEvent.click(screen.getByRole('menuitemradio', {name: 'Spans'}));
+
+      await waitFor(() =>
+        expect(router.location.query.crossEvents).toEqual(
+          JSON.stringify([{query: '', type: 'spans'}])
+        )
+      );
+    });
+
+    it('disables dropdown when there are 2 cross events', () => {
+      render(<SpansTabContent datePageFilterProps={datePageFilterProps} />, {
+        organization,
+        additionalWrapper: Wrapper,
+        initialRouterConfig: {
+          location: {
+            pathname: '/organizations/org-slug/explore/traces/',
+            query: {
+              crossEvents: JSON.stringify([
+                {query: '', type: 'spans'},
+                {query: '', type: 'logs'},
+              ]),
+            },
+          },
+        },
+      });
+
+      expect(
+        screen.getByRole('button', {name: 'Add a cross event query'})
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Add a cross event query'})
+      ).toBeDisabled();
+    });
+  });
 });