feat(widget-builder): Integrate sort by limit field with widget builder state

static/app/views/dashboards/widgetBuilder/components/sortBySelector.spec.tsx

@@ -22,6 +22,7 @@ const {organization, router} = initializeOrg({
       query: {
         displayType: 'line',
         fields: ['transaction.duration', 'count()', 'id'],
+        yAxis: ['count()', 'count_unique(transaction.duration)'],
       },
     },
     params: {},
@@ -123,4 +124,63 @@ describe('WidgetBuilderSortBySelector', function () {
       })
     );
   });
+
+  it('renders the correct limit options', async function () {
+    render(
+      <WidgetBuilderProvider>
+        <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
+          <WidgetBuilderSortBySelector />
+        </SpanTagsProvider>
+      </WidgetBuilderProvider>,
+      {router, organization}
+    );
+
+    // default limit is 5
+    expect(await screen.findByText('Limit to 5 results')).toBeInTheDocument();
+
+    const moreAggregatesRouter = RouterFixture({
+      ...router,
+      location: {
+        ...router.location,
+        query: {
+          ...router.location.query,
+          yAxis: ['count()', 'count_unique(transaction.duration)', 'eps()'],
+        },
+      },
+    });
+
+    render(
+      <WidgetBuilderProvider>
+        <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
+          <WidgetBuilderSortBySelector />
+        </SpanTagsProvider>
+      </WidgetBuilderProvider>,
+      {router: moreAggregatesRouter, organization}
+    );
+
+    // default limit changes to 3 since its the max limit for 3 aggregates
+    expect(await screen.findByText('Limit to 3 results')).toBeInTheDocument();
+  });
+
+  it('correctly handles limit changes', async function () {
+    const mockNavigate = jest.fn();
+    mockUseNavigate.mockReturnValue(mockNavigate);
+
+    render(
+      <WidgetBuilderProvider>
+        <SpanTagsProvider dataset={DiscoverDatasets.SPANS_EAP} enabled>
+          <WidgetBuilderSortBySelector />
+        </SpanTagsProvider>
+      </WidgetBuilderProvider>,
+      {router, organization}
+    );
+
+    const limitSelector = await screen.findByText('Limit to 5 results');
+    await userEvent.click(limitSelector);
+    await userEvent.click(await screen.findByText('Limit to 3 results'));
+
+    expect(mockNavigate).toHaveBeenLastCalledWith(
+      expect.objectContaining({query: expect.objectContaining({limit: 3})})
+    );
+  });
 });

static/app/views/dashboards/widgetBuilder/components/sortBySelector.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useState} from 'react';
+import {Fragment, useEffect} from 'react';
 import styled from '@emotion/styled';
 
 import SelectControl from 'sentry/components/forms/controls/selectControl';
@@ -16,7 +16,6 @@ import {SectionHeader} from 'sentry/views/dashboards/widgetBuilder/components/co
 import {useWidgetBuilderContext} from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
 import {BuilderStateAction} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState';
 import {
-  DEFAULT_RESULTS_LIMIT,
   getResultsLimit,
   SortDirection,
 } from 'sentry/views/dashboards/widgetBuilder/utils';
@@ -27,8 +26,6 @@ function WidgetBuilderSortBySelector() {
   const {state, dispatch} = useWidgetBuilderContext();
   const widget = convertBuilderStateToWidget(state);
 
-  const [limit, setLimit] = useState(DEFAULT_RESULTS_LIMIT);
-
   const datasetConfig = getDatasetConfig(state.dataset);
 
   let tags: TagCollection = useTags();
@@ -60,6 +57,19 @@ function WidgetBuilderSortBySelector() {
     widget.queries[0].aggregates.length
   );
 
+  // handles when the maxLimit changes to a value less than the current selected limit
+  useEffect(() => {
+    if (!state.limit) {
+      return;
+    }
+    if (state.limit > maxLimit) {
+      dispatch({
+        type: BuilderStateAction.SET_LIMIT,
+        payload: maxLimit,
+      });
+    }
+  }, [state.limit, maxLimit, dispatch]);
+
   function handleSortByChange(newSortBy: string, sortDirection: 'asc' | 'desc') {
     dispatch({
       type: BuilderStateAction.SET_SORT,
@@ -83,7 +93,7 @@ function WidgetBuilderSortBySelector() {
           flexibleControlStateSize
           stacked
         >
-          {isTimeseriesChart && limit && (
+          {isTimeseriesChart && state.limit && (
             <ResultsLimitSelector
               disabled={disableSortDirection && disableSort}
               name="resultsLimit"
@@ -95,10 +105,12 @@ function WidgetBuilderSortBySelector() {
                   value,
                 };
               })}
-              value={limit}
+              value={state.limit}
               onChange={(option: SelectValue<number>) => {
-                // TODO: implement this when limit is implemented in widget builder state
-                setLimit(option.value);
+                dispatch({
+                  type: BuilderStateAction.SET_LIMIT,
+                  payload: option.value,
+                });
               }}
             />
           )}