ref(dashboards): extract useDashboardChartInterval hook

Consolidate the three dashboard useChartInterval call sites into a
single wrapper hook that hardcodes USE_SECOND_BIGGEST strategy. This
prevents detail.tsx, widgetPreview.tsx, and filtersBar.tsx from going
out of sync. Also fixes filtersBar.tsx which was previously using the
default USE_SMALLEST strategy instead of USE_SECOND_BIGGEST.

Author: gggritso

static/app/views/dashboards/dashboard.spec.tsx

@@ -11,10 +11,10 @@ import {resetMockDate, setMockDate} from 'sentry-test/utils';
 import {PageFiltersStore} from 'sentry/components/pageFilters/store';
 import {MemberListStore} from 'sentry/stores/memberListStore';
 import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
-import {useChartInterval} from 'sentry/utils/useChartInterval';
 import {useLocation} from 'sentry/utils/useLocation';
 import {Dashboard} from 'sentry/views/dashboards/dashboard';
 import {FiltersBar} from 'sentry/views/dashboards/filtersBar';
+import {useDashboardChartInterval} from 'sentry/views/dashboards/hooks/useDashboardChartInterval';
 import type {
   DashboardDetails,
   DashboardFilters,
@@ -499,7 +499,7 @@ describe('Dashboards > Dashboard', () => {
       dashboard?: DashboardDetails;
     } = {}) {
       const location = useLocation();
-      const [widgetInterval] = useChartInterval();
+      const [widgetInterval] = useDashboardChartInterval();
       return (
         <MEPSettingProvider forceTransactions={false}>
           <FiltersBar
@@ -541,12 +541,12 @@ describe('Dashboards > Dashboard', () => {
     });
 
     describe('no interval set in URL', () => {
-      it('defaults to the smallest valid interval for the dashboard period', async () => {
-        const fiveMinuteMock = MockApiClient.addMockResponse({
+      it('defaults to the second-biggest valid interval for the dashboard period', async () => {
+        const tenMinuteMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/events-stats/',
           method: 'GET',
           body: [],
-          match: [MockApiClient.matchQuery({interval: '5m'})],
+          match: [MockApiClient.matchQuery({interval: '10m'})],
         });
         const thirtyMinuteMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/events-stats/',
@@ -555,21 +555,21 @@ describe('Dashboards > Dashboard', () => {
           match: [MockApiClient.matchQuery({interval: '30m'})],
         });
 
-        // No interval in the URL — the 5m default is derived purely from the
-        // dashboard's saved 24h period via PageFiltersStore → useChartInterval.
+        // No interval in the URL — the 10m default (second-biggest of [5m, 10m, 30m])
+        // is derived from the dashboard's saved 24h period via useDashboardChartInterval.
         const {router} = render(<DashboardWithIntervalSelector />, {
           organization: orgWithFlag,
           initialRouterConfig: {location: {pathname: '/'}},
         });
 
         await screen.findByText('Test Spans Widget');
-        await waitFor(() => expect(fiveMinuteMock).toHaveBeenCalled());
+        await waitFor(() => expect(tenMinuteMock).toHaveBeenCalled());
         expect(thirtyMinuteMock).not.toHaveBeenCalled();
 
         // Click the interval selector and choose '30 minutes'. FiltersBar writes
         // interval=30m to the URL, DashboardWithIntervalSelector re-renders with
         // the new widgetInterval, and the widget re-fetches with the new interval.
-        await userEvent.click(screen.getByRole('button', {name: '5 minutes'}));
+        await userEvent.click(screen.getByRole('button', {name: '10 minutes'}));
         await userEvent.click(screen.getByRole('option', {name: '30 minutes'}));
 
         await waitFor(() => expect(thirtyMinuteMock).toHaveBeenCalled());
@@ -632,11 +632,11 @@ describe('Dashboards > Dashboard', () => {
       });
 
       it('ignores the URL interval and falls back to the period default', async () => {
-        const threeHourMock = MockApiClient.addMockResponse({
+        const sixHourMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/events-stats/',
           method: 'GET',
           body: [],
-          match: [MockApiClient.matchQuery({interval: '3h'})],
+          match: [MockApiClient.matchQuery({interval: '6h'})],
         });
         const fiveMinuteMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/events-stats/',
@@ -653,11 +653,12 @@ describe('Dashboards > Dashboard', () => {
 
         await screen.findByText('Test Spans Widget');
 
-        // The selector should show the period-derived default, not the invalid URL value.
-        expect(screen.getByRole('button', {name: '3 hours'})).toBeInTheDocument();
+        // The selector should show the period-derived default (6h = second-biggest
+        // of [3h, 6h, 12h]), not the invalid URL value (5m).
+        expect(screen.getByRole('button', {name: '6 hours'})).toBeInTheDocument();
 
         // The widget should query with the valid default interval, not the URL value.
-        await waitFor(() => expect(threeHourMock).toHaveBeenCalled());
+        await waitFor(() => expect(sixHourMock).toHaveBeenCalled());
         expect(fiveMinuteMock).not.toHaveBeenCalled();
       });
     });
@@ -681,11 +682,11 @@ describe('Dashboards > Dashboard', () => {
       it('ignores the URL interval and falls back to the period default', async () => {
         // Uses the /sessions/ endpoint (session.status in columns → useSessionAPI=true),
         // which surfaces the "intervals too granular" error in production.
-        const threeHourMock = MockApiClient.addMockResponse({
+        const sixHourMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/sessions/',
           method: 'GET',
           body: emptySessionsBody,
-          match: [MockApiClient.matchQuery({interval: '3h'})],
+          match: [MockApiClient.matchQuery({interval: '6h'})],
         });
         const fiveMinuteMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/sessions/',
@@ -701,13 +702,13 @@ describe('Dashboards > Dashboard', () => {
 
         await screen.findByText('Test Releases Widget');
 
-        // The selector should show the period-derived default (3h), not the
-        // invalid URL value (5m).
-        expect(screen.getByRole('button', {name: '3 hours'})).toBeInTheDocument();
+        // The selector should show the period-derived default (6h = second-biggest
+        // of [3h, 6h, 12h]), not the invalid URL value (5m).
+        expect(screen.getByRole('button', {name: '6 hours'})).toBeInTheDocument();
 
         // The widget should query the sessions endpoint with the valid default
         // interval, not the 5m value from the URL.
-        await waitFor(() => expect(threeHourMock).toHaveBeenCalled());
+        await waitFor(() => expect(sixHourMock).toHaveBeenCalled());
         expect(fiveMinuteMock).not.toHaveBeenCalled();
       });
     });

static/app/views/dashboards/detail.tsx

@@ -53,17 +53,14 @@ import {OnRouteLeave} from 'sentry/utils/reactRouter6Compat/onRouteLeave';
 import {scheduleMicroTask} from 'sentry/utils/scheduleMicroTask';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useApi} from 'sentry/utils/useApi';
-import {
-  ChartIntervalUnspecifiedStrategy,
-  useChartInterval,
-} from 'sentry/utils/useChartInterval';
 import {useLocation} from 'sentry/utils/useLocation';
 import type {ReactRouter3Navigate} from 'sentry/utils/useNavigate';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import {useProjects} from 'sentry/utils/useProjects';
 import {useRouter} from 'sentry/utils/useRouter';
+import {useDashboardChartInterval} from 'sentry/views/dashboards/hooks/useDashboardChartInterval';
 import {
   cloneDashboard,
   getCurrentPageFilters,
@@ -1465,9 +1462,7 @@ export function DashboardDetailWithInjectedProps(
   const location = useLocation();
   const params = useParams<RouteParams>();
   const router = useRouter();
-  const [chartInterval] = useChartInterval({
-    unspecifiedStrategy: ChartIntervalUnspecifiedStrategy.USE_SECOND_BIGGEST,
-  });
+  const [chartInterval] = useDashboardChartInterval();
   const queryClient = useQueryClient();
   // Always use the validated chart interval so the UI dropdown and widget
   // requests stay in sync. chartInterval is validated against the current page

static/app/views/dashboards/filtersBar.tsx

@@ -25,14 +25,14 @@ import type {User} from 'sentry/types/user';
 import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {ToggleOnDemand} from 'sentry/utils/performance/contexts/onDemandControl';
-import {useChartInterval} from 'sentry/utils/useChartInterval';
 import {useMaxPickableDays} from 'sentry/utils/useMaxPickableDays';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useUser} from 'sentry/utils/useUser';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
 import {AddFilter} from 'sentry/views/dashboards/globalFilter/addFilter';
 import {GenericFilterSelector} from 'sentry/views/dashboards/globalFilter/genericFilterSelector';
 import {globalFilterKeysAreEqual} from 'sentry/views/dashboards/globalFilter/utils';
+import {useDashboardChartInterval} from 'sentry/views/dashboards/hooks/useDashboardChartInterval';
 import {useDatasetSearchBarData} from 'sentry/views/dashboards/hooks/useDatasetSearchBarData';
 import {useInvalidateStarredDashboards} from 'sentry/views/dashboards/hooks/useInvalidateStarredDashboards';
 import {getDashboardFiltersFromURL} from 'sentry/views/dashboards/utils';
@@ -234,7 +234,7 @@ export function FiltersBar({
   const hasIntervalSelection = organization.features.includes(
     'dashboards-interval-selection'
   );
-  const [interval, setInterval, intervalOptions] = useChartInterval();
+  const [interval, setInterval, intervalOptions] = useDashboardChartInterval();
 
   return (
     <Wrapper>

static/app/views/dashboards/hooks/useDashboardChartInterval.tsx

@@ -0,0 +1,15 @@
+import {
+  ChartIntervalUnspecifiedStrategy,
+  useChartInterval,
+} from 'sentry/utils/useChartInterval';
+
+/**
+ * Wrapper around `useChartInterval` that uses the `USE_SECOND_BIGGEST`
+ * strategy for dashboards. This keeps the dashboard detail page, widget
+ * builder preview, and filters bar in sync.
+ */
+export function useDashboardChartInterval() {
+  return useChartInterval({
+    unspecifiedStrategy: ChartIntervalUnspecifiedStrategy.USE_SECOND_BIGGEST,
+  });
+}

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

@@ -3,13 +3,10 @@ import {useState} from 'react';
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
 import {dedupeArray} from 'sentry/utils/dedupeArray';
 import type {Sort} from 'sentry/utils/discover/fields';
-import {
-  ChartIntervalUnspecifiedStrategy,
-  useChartInterval,
-} from 'sentry/utils/useChartInterval';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useOrganization} from 'sentry/utils/useOrganization';
+import {useDashboardChartInterval} from 'sentry/views/dashboards/hooks/useDashboardChartInterval';
 import {
   DisplayType,
   WidgetType,
@@ -47,9 +44,7 @@ export function WidgetPreview({
   const location = useLocation();
   const navigate = useNavigate();
   const pageFilters = usePageFilters();
-  const [chartInterval] = useChartInterval({
-    unspecifiedStrategy: ChartIntervalUnspecifiedStrategy.USE_SECOND_BIGGEST,
-  });
+  const [chartInterval] = useDashboardChartInterval();
 
   const {state, dispatch} = useWidgetBuilderContext();
   const [tableWidths, setTableWidths] = useState<number[]>();