fix(explore): Remove unnecessary validation on group bys (#78712)

This validation means the group bys are now dependant on the tags
endpoint to
work. Remove it as it should still work just return an empty value.

Author: Zylphrex

static/app/views/explore/charts/index.tsx

@@ -57,7 +57,7 @@ export function ExploreCharts({query}: ExploreChartsProps) {
   const [dataset] = useDataset();
   const [visualizes, setVisualizes] = useVisualizes();
   const [interval, setInterval, intervalOptions] = useChartInterval();
-  const {groupBys, isLoadingGroupBys} = useGroupBys();
+  const {groupBys} = useGroupBys();
   const [resultMode] = useResultMode();
   const topEvents = useTopEvents();
 
@@ -91,7 +91,6 @@ export function ExploreCharts({query}: ExploreChartsProps) {
       search: new MutableSearch(query ?? ''),
       yAxis: yAxes,
       interval: interval ?? getInterval(pageFilters.selection.datetime, 'metrics'),
-      enabled: !isLoadingGroupBys,
       fields,
       orderby,
       topEvents,

static/app/views/explore/hooks/useGroupBys.spec.tsx

@@ -28,10 +28,10 @@ describe('useGroupBys', function () {
       ],
     });
 
-    let groupBys, setGroupBys, isLoadingGroupBys;
+    let groupBys, setGroupBys;
 
     function TestPage() {
-      ({groupBys, setGroupBys, isLoadingGroupBys} = useGroupBys());
+      ({groupBys, setGroupBys} = useGroupBys());
       return null;
     }
 
@@ -54,10 +54,8 @@ describe('useGroupBys', function () {
       </SpanTagsProvider>
     );
 
-    expect(isLoadingGroupBys).toBe(true);
     await waitFor(() => expect(mockSpanTagsApiCall).toHaveBeenCalledTimes(1));
     expect(groupBys).toEqual(['']); // default
-    expect(isLoadingGroupBys).toBe(false);
 
     act(() => setGroupBys(['foo', 'bar']));
     expect(groupBys).toEqual(['foo', 'bar']);

static/app/views/explore/hooks/useGroupBys.tsx

@@ -1,57 +1,39 @@
 import {useCallback, useMemo} from 'react';
 import type {Location} from 'history';
 
-import type {TagCollection} from 'sentry/types/group';
-import type {UseApiQueryResult} from 'sentry/utils/queryClient';
 import {decodeList} from 'sentry/utils/queryString';
-import type RequestError from 'sentry/utils/requestError/requestError';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import type {Field} from 'sentry/views/explore/hooks/useSampleFields';
-import type {SpanFieldsResponse} from 'sentry/views/performance/utils/useSpanFieldSupportedTags';
-
-import {useSpanTags} from '../contexts/spanTagsContext';
 
 interface Options {
   location: Location;
   navigate: ReturnType<typeof useNavigate>;
-  tagsResults: Omit<UseApiQueryResult<SpanFieldsResponse, RequestError>, 'data'> & {
-    data: TagCollection;
-  };
 }
 
 type GroupBysResult = {
   groupBys: Field[];
-  isLoadingGroupBys: boolean;
   setGroupBys: (fields: Field[]) => void;
 };
 
 export function useGroupBys(): GroupBysResult {
   const location = useLocation();
   const navigate = useNavigate();
-  const tagsResults = useSpanTags();
-  const options = {location, navigate, tagsResults};
+  const options = {location, navigate};
 
   return useGroupBysImpl(options);
 }
 
-function useGroupBysImpl({location, navigate, tagsResults}: Options): GroupBysResult {
-  const {data: tags, isLoading: isLoadingTags} = tagsResults;
-
+function useGroupBysImpl({location, navigate}: Options): GroupBysResult {
   const groupBys = useMemo(() => {
     const rawGroupBys = decodeList(location.query.groupBy);
 
-    // Filter out groupBys that are not in span field supported tags
-    const validGroupBys = isLoadingTags
-      ? []
-      : rawGroupBys.filter(groupBy => groupBy === '' || tags?.hasOwnProperty(groupBy));
-
-    if (validGroupBys.length) {
-      return validGroupBys;
+    if (rawGroupBys.length) {
+      return rawGroupBys;
     }
 
     return [''];
-  }, [location.query.groupBy, tags, isLoadingTags]);
+  }, [location.query.groupBy]);
 
   const setGroupBys = useCallback(
     (newGroupBys: Field[]) => {
@@ -69,6 +51,5 @@ function useGroupBysImpl({location, navigate, tagsResults}: Options): GroupBysRe
   return {
     groupBys,
     setGroupBys,
-    isLoadingGroupBys: isLoadingTags,
   };
 }

static/app/views/explore/hooks/useResultsMode.spec.tsx

@@ -76,6 +76,7 @@ describe('useResultMode', function () {
       'span.description',
       'span.duration',
       'timestamp',
+      'release',
     ]);
   });
 });

static/app/views/explore/tables/aggregatesTable.tsx

@@ -46,7 +46,7 @@ export function AggregatesTable({}: AggregatesTableProps) {
   const {selection} = usePageFilters();
   const topEvents = useTopEvents();
   const [dataset] = useDataset();
-  const {groupBys, isLoadingGroupBys} = useGroupBys();
+  const {groupBys} = useGroupBys();
   const [visualizes] = useVisualizes();
   const fields = useMemo(() => {
     return [...groupBys, ...visualizes.flatMap(visualize => visualize.yAxes)].filter(
@@ -74,7 +74,6 @@ export function AggregatesTable({}: AggregatesTableProps) {
     eventView,
     initialData: [],
     referrer: 'api.explore.spans-aggregates-table',
-    enabled: !isLoadingGroupBys,
   });
 
   const {tableStyles} = useTableStyles({

static/app/views/explore/toolbar/toolbarGroupBy.tsx

@@ -29,17 +29,34 @@ export function ToolbarGroupBy({disabled}: ToolbarGroupByProps) {
   const {groupBys, setGroupBys} = useGroupBys();
 
   const options: SelectOption<Field>[] = useMemo(() => {
+    // These options aren't known to exist on this project but it was inserted into
+    // the group bys somehow so it should be a valid options in the group bys.
+    //
+    // One place this may come from is when switching projects/environment/date range,
+    // a tag may disappear based on the selection.
+    const unknownOptions = groupBys
+      .filter(groupBy => groupBy && !tags.hasOwnProperty(groupBy))
+      .map(groupBy => {
+        return {
+          label: groupBy,
+          value: groupBy,
+        };
+      });
+
+    const knownOptions = Object.keys(tags).map(tagKey => {
+      return {
+        label: tagKey,
+        value: tagKey,
+      };
+    });
+
     return [
       // hard code in an empty option
       {label: t('None'), value: ''},
-      ...Object.keys(tags).map(tagKey => {
-        return {
-          label: tagKey,
-          value: tagKey,
-        };
-      }),
+      ...unknownOptions,
+      ...knownOptions,
     ];
-  }, [tags]);
+  }, [groupBys, tags]);
 
   const addGroupBy = useCallback(() => {
     setGroupBys([...groupBys, '']);