chore(explore): Add in cross event query param (#103666)

This PR adds in the boilerplate for adding in a new `crossEvents` query
param to manage the state of displaying which and how many cross event
search bars.

Ticket: EXP-600

Author: nsdeschenes

static/app/views/explore/queryParams/context.spec.tsx

@@ -0,0 +1,86 @@
+import {useMemo, type ReactNode} from 'react';
+
+import {renderHookWithProviders} from 'sentry-test/reactTestingLibrary';
+
+import {useResettableState} from 'sentry/utils/useResettableState';
+import {
+  defaultAggregateFields,
+  defaultAggregateSortBys,
+  defaultFields,
+  defaultQuery,
+  defaultSortBys,
+} from 'sentry/views/explore/metrics/metricQuery';
+import {
+  QueryParamsContextProvider,
+  useQueryParamsCrossEvents,
+  useSetQueryParamsCrossEvents,
+} from 'sentry/views/explore/queryParams/context';
+import {defaultCursor} from 'sentry/views/explore/queryParams/cursor';
+import {Mode} from 'sentry/views/explore/queryParams/mode';
+import {ReadableQueryParams} from 'sentry/views/explore/queryParams/readableQueryParams';
+
+const mockSetQueryParams = jest.fn();
+
+function Wrapper({children}: {children: ReactNode}) {
+  const [query] = useResettableState(defaultQuery);
+
+  const readableQueryParams = useMemo(
+    () =>
+      new ReadableQueryParams({
+        aggregateCursor: defaultCursor(),
+        aggregateFields: defaultAggregateFields(),
+        aggregateSortBys: defaultAggregateSortBys(defaultAggregateFields()),
+        cursor: defaultCursor(),
+        extrapolate: true,
+        fields: defaultFields(),
+        mode: Mode.AGGREGATE,
+        query,
+        sortBys: defaultSortBys(defaultFields()),
+        crossEvents: [{query: 'foo', type: 'spans'}],
+      }),
+    [query]
+  );
+
+  return (
+    <QueryParamsContextProvider
+      isUsingDefaultFields={false}
+      queryParams={readableQueryParams}
+      setQueryParams={mockSetQueryParams}
+      shouldManageFields={false}
+    >
+      {children}
+    </QueryParamsContextProvider>
+  );
+}
+
+describe('QueryParamsContext', () => {
+  describe('crossEvents', () => {
+    describe('useQueryParamsCrossEvents', () => {
+      it('should return the crossEvents', () => {
+        const {result} = renderHookWithProviders(() => useQueryParamsCrossEvents(), {
+          additionalWrapper: Wrapper,
+        });
+
+        expect(result.current).toEqual([{query: 'foo', type: 'spans'}]);
+      });
+    });
+
+    describe('useSetQueryParamsCrossEvents', () => {
+      it('should set the crossEvents', () => {
+        renderHookWithProviders(
+          () => {
+            const setCrossEvents = useSetQueryParamsCrossEvents();
+            setCrossEvents([{query: 'bar', type: 'logs'}]);
+            return useQueryParamsCrossEvents();
+          },
+          {additionalWrapper: Wrapper}
+        );
+
+        expect(mockSetQueryParams).toHaveBeenCalled();
+        expect(mockSetQueryParams).toHaveBeenCalledWith({
+          crossEvents: [{query: 'bar', type: 'logs'}],
+        });
+      });
+    });
+  });
+});

static/app/views/explore/queryParams/context.tsx

@@ -13,6 +13,7 @@ import type {
   AggregateField,
   WritableAggregateField,
 } from 'sentry/views/explore/queryParams/aggregateField';
+import type {CrossEvent} from 'sentry/views/explore/queryParams/crossEvent';
 import {isGroupBy} from 'sentry/views/explore/queryParams/groupBy';
 import {updateNullableLocation} from 'sentry/views/explore/queryParams/location';
 import {deriveUpdatedManagedFields} from 'sentry/views/explore/queryParams/managedFields';
@@ -462,3 +463,19 @@ export function useSetQueryParamsSavedQuery() {
     [location, navigate]
   );
 }
+
+export function useQueryParamsCrossEvents() {
+  const queryParams = useQueryParams();
+  return queryParams.crossEvents;
+}
+
+export function useSetQueryParamsCrossEvents() {
+  const setQueryParams = useSetQueryParams();
+
+  return useCallback(
+    (crossEvents: CrossEvent[]) => {
+      setQueryParams({crossEvents});
+    },
+    [setQueryParams]
+  );
+}

static/app/views/explore/queryParams/crossEvent.ts

@@ -0,0 +1,47 @@
+import type {Location} from 'history';
+
+import {defined} from 'sentry/utils';
+
+type CrossEventType = 'logs' | 'spans' | 'metrics';
+
+export interface CrossEvent {
+  query: string;
+  type: CrossEventType;
+}
+
+export function getCrossEventsFromLocation(
+  location: Location,
+  key: string
+): CrossEvent[] | undefined {
+  let json: any;
+
+  if (!defined(location.query?.[key]) || Array.isArray(location.query?.[key])) {
+    return undefined;
+  }
+
+  try {
+    json = JSON.parse(location.query?.[key]);
+  } catch {
+    return undefined;
+  }
+
+  if (Array.isArray(json) && json.every(isCrossEvent)) {
+    return json;
+  }
+
+  return undefined;
+}
+
+export function isCrossEventType(value: string): value is CrossEventType {
+  return value === 'logs' || value === 'spans' || value === 'metrics';
+}
+
+function isCrossEvent(value: any): value is CrossEvent {
+  return (
+    defined(value) &&
+    typeof value === 'object' &&
+    typeof value.query === 'string' &&
+    typeof value.type === 'string' &&
+    isCrossEventType(value.type)
+  );
+}

static/app/views/explore/queryParams/readableQueryParams.ts

@@ -1,6 +1,7 @@
 import type {Sort} from 'sentry/utils/discover/fields';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import type {AggregateField} from 'sentry/views/explore/queryParams/aggregateField';
+import type {CrossEvent} from 'sentry/views/explore/queryParams/crossEvent';
 import {isGroupBy} from 'sentry/views/explore/queryParams/groupBy';
 import type {Mode} from 'sentry/views/explore/queryParams/mode';
 import type {Visualize} from 'sentry/views/explore/queryParams/visualize';
@@ -16,6 +17,7 @@ export interface ReadableQueryParamsOptions {
   readonly mode: Mode;
   readonly query: string;
   readonly sortBys: Sort[];
+  readonly crossEvents?: CrossEvent[];
   readonly id?: string;
   readonly title?: string;
 }
@@ -39,6 +41,8 @@ export class ReadableQueryParams {
   readonly id?: string;
   readonly title?: string;
 
+  readonly crossEvents?: CrossEvent[];
+
   constructor(options: ReadableQueryParamsOptions) {
     this.extrapolate = options.extrapolate;
     this.mode = options.mode;
@@ -58,6 +62,8 @@ export class ReadableQueryParams {
 
     this.id = options.id;
     this.title = options.title;
+
+    this.crossEvents = options.crossEvents;
   }
 
   replace(options: Partial<ReadableQueryParamsOptions>) {
@@ -73,6 +79,7 @@ export class ReadableQueryParams {
       sortBys: options.sortBys ?? this.sortBys,
       id: options.id ?? this.id,
       title: options.title ?? this.title,
+      crossEvents: options.crossEvents ?? this.crossEvents,
     });
   }
 }

static/app/views/explore/queryParams/writableQueryParams.ts

@@ -1,11 +1,13 @@
 import type {Sort} from 'sentry/utils/discover/fields';
 import type {WritableAggregateField} from 'sentry/views/explore/queryParams/aggregateField';
+import type {CrossEvent} from 'sentry/views/explore/queryParams/crossEvent';
 import type {Mode} from 'sentry/views/explore/queryParams/mode';
 
 export interface WritableQueryParams {
   aggregateCursor?: string | null;
   aggregateFields?: readonly WritableAggregateField[] | null;
   aggregateSortBys?: readonly Sort[] | null;
+  crossEvents?: readonly CrossEvent[] | null;
   cursor?: string | null;
   extrapolate?: boolean;
   fields?: string[] | null;

static/app/views/explore/spans/spansQueryParams.tsx

@@ -8,6 +8,7 @@ import {DEFAULT_VISUALIZATION} from 'sentry/views/explore/contexts/pageParamsCon
 import type {AggregateField} from 'sentry/views/explore/queryParams/aggregateField';
 import {getAggregateFieldsFromLocation} from 'sentry/views/explore/queryParams/aggregateField';
 import {getAggregateSortBysFromLocation} from 'sentry/views/explore/queryParams/aggregateSortBy';
+import {getCrossEventsFromLocation} from 'sentry/views/explore/queryParams/crossEvent';
 import {getCursorFromLocation} from 'sentry/views/explore/queryParams/cursor';
 import {getExtrapolateFromLocation} from 'sentry/views/explore/queryParams/extrapolate';
 import {getFieldsFromLocation} from 'sentry/views/explore/queryParams/field';
@@ -49,6 +50,7 @@ const SPANS_AGGREGATE_SORT_KEY = 'aggregateSort';
 const SPANS_EXTRAPOLATE_KEY = 'extrapolate';
 const SPANS_ID_KEY = ID_KEY;
 const SPANS_TITLE_KEY = TITLE_KEY;
+const SPANS_CROSS_EVENTS_KEY = 'crossEvents';
 
 export function useSpansDataset(): DiscoverDatasets {
   return DiscoverDatasets.SPANS;
@@ -84,6 +86,8 @@ export function getReadableQueryParamsFromLocation(
   const id = getIdFromLocation(location, SPANS_ID_KEY);
   const title = getTitleFromLocation(location, SPANS_TITLE_KEY);
 
+  const crossEvents = getCrossEventsFromLocation(location, SPANS_CROSS_EVENTS_KEY);
+
   return new ReadableQueryParams({
     extrapolate,
     mode,
@@ -99,6 +103,8 @@ export function getReadableQueryParamsFromLocation(
 
     id,
     title,
+
+    crossEvents,
   });
 }
 
@@ -148,6 +154,14 @@ export function getTargetWithReadableQueryParams(
         )
   );
 
+  updateNullableLocation(
+    target,
+    SPANS_CROSS_EVENTS_KEY,
+    writableQueryParams?.crossEvents === null
+      ? null
+      : JSON.stringify(writableQueryParams.crossEvents)
+  );
+
   return target;
 }
 

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

@@ -1,10 +1,13 @@
-import {Fragment, useCallback, useEffect, useMemo} from 'react';
+import {Fragment, useCallback, useEffect, useMemo, type Key} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {Grid} from '@sentry/scraps/layout';
+
 import Feature from 'sentry/components/acl/feature';
 import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
+import {DropdownMenu, type DropdownMenuProps} from 'sentry/components/dropdownMenu';
 import * as Layout from 'sentry/components/layouts/thirds';
 import type {DatePageFilterProps} from 'sentry/components/organizations/datePageFilter';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
@@ -22,6 +25,7 @@ import {
 } from 'sentry/components/searchQueryBuilder/context';
 import {useCaseInsensitivity} from 'sentry/components/searchQueryBuilder/hooks';
 import {TourElement} from 'sentry/components/tours/components';
+import {IconAdd} from 'sentry/icons';
 import {IconChevron} from 'sentry/icons/iconChevron';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
@@ -48,7 +52,6 @@ import {
   ExploreBodySearch,
   ExploreContentSection,
   ExploreControlSection,
-  ExploreFilterSection,
   ExploreSchemaHintsSection,
 } from 'sentry/views/explore/components/styles';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
@@ -62,15 +65,18 @@ import {useExploreTracesTable} from 'sentry/views/explore/hooks/useExploreTraces
 import {Tab, useTab} from 'sentry/views/explore/hooks/useTab';
 import {useVisitQuery} from 'sentry/views/explore/hooks/useVisitQuery';
 import {
+  useQueryParamsCrossEvents,
   useQueryParamsExtrapolate,
   useQueryParamsFields,
   useQueryParamsId,
   useQueryParamsMode,
   useQueryParamsQuery,
   useQueryParamsVisualizes,
   useSetQueryParams,
+  useSetQueryParamsCrossEvents,
   useSetQueryParamsVisualizes,
 } from 'sentry/views/explore/queryParams/context';
+import {isCrossEventType} from 'sentry/views/explore/queryParams/crossEvent';
 import {ExploreCharts} from 'sentry/views/explore/spans/charts';
 import {DroppedFieldsAlert} from 'sentry/views/explore/spans/droppedFieldsAlert';
 import {ExtrapolationEnabledAlert} from 'sentry/views/explore/spans/extrapolationEnabledAlert';
@@ -173,6 +179,40 @@ function useVisitExplore() {
   }, [id, visitQuery]);
 }
 
+const crossEventDropdownItems: DropdownMenuProps['items'] = [
+  {key: 'spans', label: t('Spans')},
+  {key: 'logs', label: t('Logs')},
+  {key: 'metrics', label: t('Metrics')},
+];
+
+function CrossEventQueryingDropdown() {
+  const crossEvents = useQueryParamsCrossEvents();
+  const setCrossEvents = useSetQueryParamsCrossEvents();
+
+  const onAction = (key: Key) => {
+    if (typeof key !== 'string' || !isCrossEventType(key)) {
+      return;
+    }
+
+    if (!crossEvents || crossEvents.length === 0) {
+      setCrossEvents([{query: '', type: key}]);
+      return;
+    }
+  };
+
+  return (
+    <DropdownMenu
+      triggerProps={{
+        size: 'md',
+        showChevron: false,
+        icon: <IconAdd />,
+      }}
+      items={crossEventDropdownItems}
+      onAction={onAction}
+    />
+  );
+}
+
 interface SpanTabSearchSectionProps {
   datePageFilterProps: DatePageFilterProps;
 }
@@ -201,6 +241,9 @@ function SpanTabSearchSection({datePageFilterProps}: SpanTabSearchSectionProps)
   const organization = useOrganization();
   const areAiFeaturesAllowed =
     !organization?.hideAiFeatures && organization.features.includes('gen-ai-features');
+  const hasCrossEventQuerying = organization.features.includes(
+    'traces-page-cross-event-querying'
+  );
 
   const {
     tags: numberTags,
@@ -300,7 +343,7 @@ function SpanTabSearchSection({datePageFilterProps}: SpanTabSearchSectionProps)
           position="bottom"
           margin={-8}
         >
-          <ExploreFilterSection>
+          <Grid gap="md" columns={{sm: '1fr', md: 'minmax(300px, auto) 1fr min-content'}}>
             <StyledPageFilterBar condensed>
               <ProjectPageFilter />
               <EnvironmentPageFilter />
@@ -309,7 +352,8 @@ function SpanTabSearchSection({datePageFilterProps}: SpanTabSearchSectionProps)
             <SpansSearchBar
               eapSpanSearchQueryBuilderProps={eapSpanSearchQueryBuilderProps}
             />
-          </ExploreFilterSection>
+            {hasCrossEventQuerying ? <CrossEventQueryingDropdown /> : null}
+          </Grid>
           <ExploreSchemaHintsSection>
             <SchemaHintsList
               supportedAggregates={