feat(dashboard-limits): Disable Add to Dashboard flows if at max (#97722)

narsaynorath · web-flow · commit 09c0eee69138 · 2025-08-13T13:23:25.000-04:00
Disables the "Create New Dashboard" option in Add to Dashboard flows if
the limit has been reached (indicated by the
`DashboardCreateLimitWrapper`

If we've hit the limit, disable the option and display the tooltip to
the right of the text. Note, the message in the following screenshot is
a forced example on the `sentry` org, that has no limit (which is why it
says -1).
diff --git a/static/app/components/modals/widgetBuilder/addToDashboardModal.spec.tsx b/static/app/components/modals/widgetBuilder/addToDashboardModal.spec.tsx
@@ -6,6 +6,7 @@ import selectEvent from 'sentry-test/selectEvent';
 
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
 import AddToDashboardModal from 'sentry/components/modals/widgetBuilder/addToDashboardModal';
+import {DashboardCreateLimitWrapper} from 'sentry/views/dashboards/createLimitWrapper';
 import type {DashboardDetails, DashboardListItem} from 'sentry/views/dashboards/types';
 import {
   DashboardWidgetSource,
@@ -19,6 +20,9 @@ const stubEl = (props: {children?: React.ReactNode}) => <div>{props.children}</d
 jest.mock('sentry/components/lazyRender', () => ({
   LazyRender: ({children}: {children: React.ReactNode}) => children,
 }));
+jest.mock('sentry/views/dashboards/createLimitWrapper');
+
+const mockDashboardCreateLimitWrapper = jest.mocked(DashboardCreateLimitWrapper);
 
 describe('add to dashboard modal', () => {
   let eventsStatsMock!: jest.Mock;
@@ -77,6 +81,18 @@ describe('add to dashboard modal', () => {
   beforeEach(() => {
     initialData = initializeOrg();
 
+    // Default behaviour for dashboard create limit wrapper
+    mockDashboardCreateLimitWrapper.mockImplementation(({children}: {children: any}) =>
+      typeof children === 'function'
+        ? children({
+            hasReachedDashboardLimit: false,
+            dashboardsLimit: 0,
+            isLoading: false,
+            limitMessage: null,
+          })
+        : children
+    );
+
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/dashboards/',
       body: [
@@ -631,4 +647,55 @@ describe('add to dashboard modal', () => {
     expect(screen.getByText('Other Dashboard')).toBeInTheDocument();
     expect(screen.queryByText('Test Dashboard')).not.toBeInTheDocument();
   });
+
+  it('disables "Create New Dashboard" option when dashboard limit is reached', async () => {
+    // Override the mock for this specific test
+    mockDashboardCreateLimitWrapper.mockImplementation(({children}: {children: any}) =>
+      typeof children === 'function'
+        ? children({
+            hasReachedDashboardLimit: true,
+            dashboardsLimit: 5,
+            isLoading: false,
+            limitMessage:
+              'You have reached the dashboard limit (5) for your plan. Upgrade to create more dashboards.',
+          })
+        : children
+    );
+
+    render(
+      <AddToDashboardModal
+        Header={stubEl}
+        Footer={stubEl as ModalRenderProps['Footer']}
+        Body={stubEl as ModalRenderProps['Body']}
+        CloseButton={stubEl}
+        closeModal={() => undefined}
+        organization={initialData.organization}
+        widget={widget}
+        selection={defaultSelection}
+        router={initialData.router}
+        location={LocationFixture()}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Select Dashboard')).toBeEnabled();
+    });
+
+    // Open the dropdown to see the options
+    await selectEvent.openMenu(screen.getByText('Select Dashboard'));
+
+    // Check that "Create New Dashboard" option exists but is disabled
+    const createNewOption = await screen.findByRole('menuitemradio', {
+      name: '+ Create New Dashboard',
+    });
+    expect(createNewOption).toBeInTheDocument();
+    expect(createNewOption).toHaveAttribute('aria-disabled', 'true');
+
+    await userEvent.hover(screen.getByText('+ Create New Dashboard'));
+    expect(
+      await screen.findByText(
+        'You have reached the dashboard limit (5) for your plan. Upgrade to create more dashboards.'
+      )
+    ).toBeInTheDocument();
+  });
 });
diff --git a/static/app/components/modals/widgetBuilder/addToDashboardModal.tsx b/static/app/components/modals/widgetBuilder/addToDashboardModal.tsx
@@ -1,4 +1,4 @@
-import {Fragment, useEffect, useMemo, useState} from 'react';
+import {Fragment, useCallback, useEffect, useState, type ReactNode} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {Location} from 'history';
@@ -27,6 +27,7 @@ import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import useApi from 'sentry/utils/useApi';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useParams} from 'sentry/utils/useParams';
+import {DashboardCreateLimitWrapper} from 'sentry/views/dashboards/createLimitWrapper';
 import {IndexedEventsSelectionAlert} from 'sentry/views/dashboards/indexedEventsSelectionAlert';
 import type {
   DashboardDetails,
@@ -68,7 +69,6 @@ export type AddToDashboardModalProps = {
   selection: PageFilters;
   widget: Widget;
   actions?: AddToDashboardModalActions[];
-  allowCreateNewDashboard?: boolean;
   source?: DashboardWidgetSource;
 };
 
@@ -101,7 +101,6 @@ function AddToDashboardModal({
   selection,
   widget,
   actions = DEFAULT_ACTIONS,
-  allowCreateNewDashboard = true,
   source,
 }: Props) {
   const api = useApi();
@@ -249,34 +248,44 @@ function AddToDashboardModal({
 
   const canSubmit = selectedDashboardId !== null;
 
-  const options = useMemo(() => {
-    if (dashboards === null) {
-      return null;
-    }
+  const getOptions = useCallback(
+    (
+      hasReachedDashboardLimit: boolean,
+      isLoading: boolean,
+      limitMessage: ReactNode | null
+    ) => {
+      if (dashboards === null) {
+        return null;
+      }
 
-    return [
-      allowCreateNewDashboard && {
-        label: t('+ Create New Dashboard'),
-        value: 'new',
-      },
-      ...dashboards
-        .filter(dashboard =>
-          // if adding from a dashboard, currentDashboardId will be set and we'll remove it from the list of options
-          currentDashboardId ? dashboard.id !== currentDashboardId : true
-        )
-        .map(({title, id, widgetDisplay}) => ({
-          label: title,
-          value: id,
-          disabled: widgetDisplay.length >= MAX_WIDGETS,
-          tooltip:
-            widgetDisplay.length >= MAX_WIDGETS &&
-            tct('Max widgets ([maxWidgets]) per dashboard reached.', {
-              maxWidgets: MAX_WIDGETS,
-            }),
+      return [
+        {
+          label: t('+ Create New Dashboard'),
+          value: 'new',
+          disabled: hasReachedDashboardLimit || isLoading,
+          tooltip: hasReachedDashboardLimit ? limitMessage : undefined,
           tooltipOptions: {position: 'right'},
-        })),
-    ].filter(Boolean) as Array<SelectValue<string>>;
-  }, [allowCreateNewDashboard, currentDashboardId, dashboards]);
+        },
+        ...dashboards
+          .filter(dashboard =>
+            // if adding from a dashboard, currentDashboardId will be set and we'll remove it from the list of options
+            currentDashboardId ? dashboard.id !== currentDashboardId : true
+          )
+          .map(({title, id, widgetDisplay}) => ({
+            label: title,
+            value: id,
+            disabled: widgetDisplay.length >= MAX_WIDGETS,
+            tooltip:
+              widgetDisplay.length >= MAX_WIDGETS &&
+              tct('Max widgets ([maxWidgets]) per dashboard reached.', {
+                maxWidgets: MAX_WIDGETS,
+              }),
+            tooltipOptions: {position: 'right'},
+          })),
+      ].filter(Boolean) as Array<SelectValue<string>>;
+    },
+    [currentDashboardId, dashboards]
+  );
 
   const widgetLegendState = new WidgetLegendSelectionState({
     location,
@@ -308,20 +317,24 @@ function AddToDashboardModal({
       </Header>
       <Body>
         <Wrapper>
-          <Select
-            disabled={dashboards === null}
-            menuPlacement="auto"
-            name="dashboard"
-            placeholder={t('Select Dashboard')}
-            value={selectedDashboardId}
-            options={options}
-            onChange={(option: SelectValue<string>) => {
-              if (option.disabled) {
-                return;
-              }
-              setSelectedDashboardId(option.value);
-            }}
-          />
+          <DashboardCreateLimitWrapper>
+            {({hasReachedDashboardLimit, isLoading, limitMessage}) => (
+              <Select
+                disabled={dashboards === null}
+                menuPlacement="auto"
+                name="dashboard"
+                placeholder={t('Select Dashboard')}
+                value={selectedDashboardId}
+                options={getOptions(hasReachedDashboardLimit, isLoading, limitMessage)}
+                onChange={(option: SelectValue<string>) => {
+                  if (option.disabled) {
+                    return;
+                  }
+                  setSelectedDashboardId(option.value);
+                }}
+              />
+            )}
+          </DashboardCreateLimitWrapper>
         </Wrapper>
         <Wrapper>
           <SectionHeader title={t('Widget Name')} optional />
diff --git a/static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx b/static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx
@@ -418,7 +418,6 @@ export function getMenuOptions(
             layout: undefined,
           },
           actions: ['add-and-stay-on-current-page', 'open-in-widget-builder'],
-          allowCreateNewDashboard: true,
           source: DashboardWidgetSource.DASHBOARDS,
         });
       },
