fix(dashboards): Skip dashboard API requests when user has no project access (#112855)

- Extracts a reusable `useHasProjectAccess` hook from `NoProjectMessage`
to consolidate the project access check logic
- Uses the hook to disable dashboard API queries on dashboard manage
page and side nav when no project access is available
- Previously these requests fired unconditionally even though
`NoProjectMessage` would discard the rendered results

DAIN-1416

Author: edwardgou-sentry

static/app/components/noProjectMessage.tsx

@@ -9,8 +9,8 @@ import * as Layout from 'sentry/components/layouts/thirds';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
 import {useCanCreateProject} from 'sentry/utils/useCanCreateProject';
+import {useHasProjectAccess} from 'sentry/utils/useHasProjectAccess';
 import {useProjects} from 'sentry/utils/useProjects';
-import {useUser} from 'sentry/utils/useUser';
 import {makeProjectsPathname} from 'sentry/views/projects/pathname';
 
 type Props = {
@@ -24,17 +24,15 @@ export function NoProjectMessage({
   organization,
   superuserNeedsToBeProjectMember,
 }: Props) {
-  const user = useUser();
-  const {projects, initiallyLoaded: projectsLoaded} = useProjects();
+  const {projects} = useProjects();
+  const {hasProjectAccess, projectsLoaded} = useHasProjectAccess({
+    superuserNeedsToBeProjectMember,
+  });
 
   const canUserCreateProject = useCanCreateProject();
   const canJoinTeam = organization.access.includes('team:read');
 
   const orgHasProjects = !!projects?.length;
-  const hasProjectAccess =
-    user.isSuperuser && !superuserNeedsToBeProjectMember
-      ? !!projects?.some(p => p.hasAccess)
-      : !!projects?.some(p => p.isMember && p.hasAccess);
 
   if (hasProjectAccess || !projectsLoaded) {
     return <Fragment>{children}</Fragment>;

static/app/utils/useHasProjectAccess.spec.tsx

@@ -0,0 +1,32 @@
+import {ProjectFixture} from 'sentry-fixture/project';
+
+import {renderHookWithProviders} from 'sentry-test/reactTestingLibrary';
+
+import {ConfigStore} from 'sentry/stores/configStore';
+import {ProjectsStore} from 'sentry/stores/projectsStore';
+
+import {useHasProjectAccess} from './useHasProjectAccess';
+
+describe('useHasProjectAccess', () => {
+  beforeEach(() => {
+    ProjectsStore.reset();
+    ConfigStore.set('user', {...ConfigStore.get('user'), isSuperuser: false});
+  });
+
+  it('returns false when there are no projects', () => {
+    ProjectsStore.loadInitialData([]);
+
+    const {result} = renderHookWithProviders(() => useHasProjectAccess());
+
+    expect(result.current.hasProjectAccess).toBe(false);
+    expect(result.current.projectsLoaded).toBe(true);
+  });
+
+  it('returns true when user is a member of a project with access', () => {
+    ProjectsStore.loadInitialData([ProjectFixture({hasAccess: true, isMember: true})]);
+
+    const {result} = renderHookWithProviders(() => useHasProjectAccess());
+
+    expect(result.current.hasProjectAccess).toBe(true);
+  });
+});

static/app/utils/useHasProjectAccess.tsx

@@ -0,0 +1,25 @@
+import {useProjects} from 'sentry/utils/useProjects';
+import {useUser} from 'sentry/utils/useUser';
+
+type Options = {
+  /**
+   * When true, superusers must also be a project member to count as having access.
+   */
+  superuserNeedsToBeProjectMember?: boolean;
+};
+
+/**
+ * Returns whether the current user has access to at least one project,
+ * and whether the project list has finished loading.
+ */
+export function useHasProjectAccess(options?: Options) {
+  const user = useUser();
+  const {projects, initiallyLoaded: projectsLoaded} = useProjects();
+
+  const hasProjectAccess =
+    user.isSuperuser && !options?.superuserNeedsToBeProjectMember
+      ? !!projects?.some(p => p.hasAccess)
+      : !!projects?.some(p => p.isMember && p.hasAccess);
+
+  return {hasProjectAccess, projectsLoaded};
+}

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

@@ -2,6 +2,7 @@ import type {Organization} from 'sentry/types/organization';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
 import type {ApiQueryKey} from 'sentry/utils/queryClient';
 import {useApiQuery} from 'sentry/utils/queryClient';
+import {useHasProjectAccess} from 'sentry/utils/useHasProjectAccess';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import type {DashboardListItem} from 'sentry/views/dashboards/types';
 
@@ -29,7 +30,10 @@ export function getStarredDashboardsQueryKey(organization: Organization): ApiQue
 
 export function useGetStarredDashboards() {
   const organization = useOrganization();
+  const {hasProjectAccess, projectsLoaded} = useHasProjectAccess();
+
   return useApiQuery<DashboardListItem[]>(getStarredDashboardsQueryKey(organization), {
     staleTime: Infinity,
+    enabled: hasProjectAccess || !projectsLoaded,
   });
 }

static/app/views/dashboards/manage/index.spec.tsx

@@ -112,6 +112,25 @@ describe('Dashboards > Detail', () => {
     ).toBeInTheDocument();
   });
 
+  it('does not fetch dashboards when there are no projects', async () => {
+    act(() => ProjectsStore.loadInitialData([]));
+
+    const dashboardsRequest = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/dashboards/',
+      body: [],
+    });
+
+    render(<ManageDashboards />, {
+      organization: mockAuthorizedOrg,
+    });
+
+    expect(
+      await screen.findByText('You need at least one project to use this view')
+    ).toBeInTheDocument();
+
+    expect(dashboardsRequest).not.toHaveBeenCalled();
+  });
+
   it('creates new dashboard', async () => {
     const org = OrganizationFixture({features: FEATURES});
     const mockNavigate = jest.fn();

static/app/views/dashboards/manage/index.tsx

@@ -39,6 +39,7 @@ import {decodeScalar} from 'sentry/utils/queryString';
 import {scheduleMicroTask} from 'sentry/utils/scheduleMicroTask';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useApi} from 'sentry/utils/useApi';
+import {useHasProjectAccess} from 'sentry/utils/useHasProjectAccess';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
@@ -189,6 +190,8 @@ function ManageDashboards() {
     columnCount: DASHBOARD_GRID_DEFAULT_NUM_COLUMNS,
   });
 
+  const {hasProjectAccess, projectsLoaded} = useHasProjectAccess();
+
   const sortOptions = getSortOptions({
     organization,
     dashboardsLayout,
@@ -222,10 +225,12 @@ function ManageDashboards() {
     ],
     {
       staleTime: 0,
-      enabled: !(
-        organization.features.includes('dashboards-starred-reordering') &&
-        dashboardsLayout === TABLE
-      ),
+      enabled:
+        (hasProjectAccess || !projectsLoaded) &&
+        !(
+          organization.features.includes('dashboards-starred-reordering') &&
+          dashboardsLayout === TABLE
+        ),
     }
   );
 
@@ -257,6 +262,7 @@ function ManageDashboards() {
     cursor: decodeScalar(location.query[OWNED_CURSOR_KEY], ''),
     sort: getActiveSort()!.value,
     enabled:
+      (hasProjectAccess || !projectsLoaded) &&
       organization.features.includes('dashboards-starred-reordering') &&
       dashboardsLayout === TABLE,
   });