ref(ui): Split out modals, prevent api.tsx import chain (#60662)

static/app/actionCreators/modal.tsx

@@ -2,9 +2,9 @@ import type {ModalTypes} from 'sentry/components/globalModal';
 import type {CreateNewIntegrationModalOptions} from 'sentry/components/modals/createNewIntegrationModal';
 import type {CreateReleaseIntegrationModalOptions} from 'sentry/components/modals/createReleaseIntegrationModal';
 import type {DashboardWidgetQuerySelectorModalOptions} from 'sentry/components/modals/dashboardWidgetQuerySelectorModal';
-import {InviteRow} from 'sentry/components/modals/inviteMembersModal/types';
+import type {InviteRow} from 'sentry/components/modals/inviteMembersModal/types';
 import type {ReprocessEventModalOptions} from 'sentry/components/modals/reprocessEventModal';
-import {OverwriteWidgetModalProps} from 'sentry/components/modals/widgetBuilder/overwriteWidgetModal';
+import type {OverwriteWidgetModalProps} from 'sentry/components/modals/widgetBuilder/overwriteWidgetModal';
 import type {WidgetViewerModalOptions} from 'sentry/components/modals/widgetViewerModal';
 import ModalStore from 'sentry/stores/modalStore';
 import type {
@@ -18,7 +18,7 @@ import type {
   SentryApp,
   Team,
 } from 'sentry/types';
-import {AppStoreConnectStatusData, CustomRepoType} from 'sentry/types/debugFiles';
+import type {AppStoreConnectStatusData, CustomRepoType} from 'sentry/types/debugFiles';
 
 export type ModalOptions = ModalTypes['options'];
 export type ModalRenderProps = ModalTypes['renderProps'];
@@ -40,14 +40,6 @@ export function closeModal() {
   ModalStore.closeModal();
 }
 
-type OpenSudoModalOptions = {
-  isSuperuser?: boolean;
-  needsReload?: boolean;
-  onClose?: () => void;
-  retryRequest?: () => Promise<any>;
-  sudo?: boolean;
-};
-
 type EmailVerificationModalOptions = {
   actionMessage?: string;
   emailVerified?: boolean;
@@ -60,13 +52,6 @@ type InviteMembersModalOptions = {
   source?: string;
 };
 
-export async function openSudo({onClose, ...args}: OpenSudoModalOptions = {}) {
-  const mod = await import('sentry/components/modals/sudoModal');
-  const {default: Modal} = mod;
-
-  openModal(deps => <Modal {...deps} {...args} />, {onClose});
-}
-
 export async function openEmailVerification({
   onClose,
   ...args
@@ -188,13 +173,6 @@ export async function openTeamAccessRequestModal(options: TeamAccessRequestModal
   openModal(deps => <Modal {...deps} {...options} />);
 }
 
-export async function redirectToProject(newProjectSlug: string) {
-  const mod = await import('sentry/components/modals/redirectToProject');
-  const {default: Modal} = mod;
-
-  openModal(deps => <Modal {...deps} slug={newProjectSlug} />, {});
-}
-
 type HelpSearchModalOptions = {
   organization?: Organization;
   placeholder?: string;

static/app/actionCreators/redirectToProject.tsx

@@ -0,0 +1,8 @@
+import ModalStore from 'sentry/stores/modalStore';
+
+export async function redirectToProject(newProjectSlug: string) {
+  const mod = await import('sentry/components/modals/redirectToProject');
+  const {default: Modal} = mod;
+
+  ModalStore.openModal(deps => <Modal {...deps} slug={newProjectSlug} />, {});
+}

static/app/actionCreators/sudoModal.tsx

@@ -0,0 +1,16 @@
+import ModalStore from 'sentry/stores/modalStore';
+
+type OpenSudoModalOptions = {
+  isSuperuser?: boolean;
+  needsReload?: boolean;
+  onClose?: () => void;
+  retryRequest?: () => Promise<any>;
+  sudo?: boolean;
+};
+
+export async function openSudo({onClose, ...args}: OpenSudoModalOptions = {}) {
+  const mod = await import('sentry/components/modals/sudoModal');
+  const {default: Modal} = mod;
+
+  ModalStore.openModal(deps => <Modal {...deps} {...args} />, {onClose});
+}

static/app/api.tsx

@@ -3,7 +3,8 @@ import * as Sentry from '@sentry/react';
 import Cookies from 'js-cookie';
 import * as qs from 'query-string';
 
-import {openSudo, redirectToProject} from 'sentry/actionCreators/modal';
+import {redirectToProject} from 'sentry/actionCreators/redirectToProject';
+import {openSudo} from 'sentry/actionCreators/sudoModal';
 import {EXPERIMENTAL_SPA} from 'sentry/constants';
 import {
   PROJECT_MOVED,

static/app/components/search/sources/commandSource.tsx

@@ -1,7 +1,8 @@
 import {Component} from 'react';
 import {PlainRoute} from 'react-router';
 
-import {openHelpSearchModal, openSudo} from 'sentry/actionCreators/modal';
+import {openHelpSearchModal} from 'sentry/actionCreators/modal';
+import {openSudo} from 'sentry/actionCreators/sudoModal';
 import Access from 'sentry/components/acl/access';
 import {NODE_ENV, usingCustomerDomain} from 'sentry/constants';
 import {t, toggleLocaleDebug} from 'sentry/locale';

static/app/stores/modalStore.tsx

@@ -1,6 +1,6 @@
 import {createStore} from 'reflux';
 
-import {ModalOptions, ModalRenderProps} from 'sentry/actionCreators/modal';
+import type {ModalOptions, ModalRenderProps} from 'sentry/actionCreators/modal';
 
 import {CommonStoreDefinition} from './types';
 

static/app/views/alerts/utils/migrationUi.ts

@@ -2,7 +2,7 @@ import {Organization} from 'sentry/types';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 import {Dataset, MetricRule} from 'sentry/views/alerts/rules/metric/types';
-import {CombinedMetricIssueAlerts} from 'sentry/views/alerts/types';
+import type {CombinedMetricIssueAlerts} from 'sentry/views/alerts/types';
 
 // TODO(telemetry-experience): remove when the migration is complete
 export const hasMigrationFeatureFlag = (organization: Organization): boolean =>

static/app/views/organizationContextContainer.spec.tsx

@@ -3,8 +3,8 @@ import {Organization} from 'sentry-fixture/organization';
 import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
-import {openSudo} from 'sentry/actionCreators/modal';
 import * as OrganizationActionCreator from 'sentry/actionCreators/organization';
+import * as openSudo from 'sentry/actionCreators/sudoModal';
 import ConfigStore from 'sentry/stores/configStore';
 import OrganizationStore from 'sentry/stores/organizationStore';
 import ProjectsStore from 'sentry/stores/projectsStore';
@@ -15,9 +15,6 @@ import {OrganizationLegacyContext} from 'sentry/views/organizationContextContain
 jest.mock('sentry/stores/configStore', () => ({
   get: jest.fn(),
 }));
-jest.mock('sentry/actionCreators/modal', () => ({
-  openSudo: jest.fn(),
-}));
 
 describe('OrganizationContextContainer', function () {
   const {organization, projects, routerProps} = initializeOrg();
@@ -156,6 +153,7 @@ describe('OrganizationContextContainer', function () {
   });
 
   it('opens sudo modal for superusers on 403s', async function () {
+    const openSudoSpy = jest.spyOn(openSudo, 'openSudo');
     jest
       .mocked(ConfigStore.get)
       .mockImplementation(() => TestStubs.Config({isSuperuser: true}));
@@ -166,7 +164,7 @@ describe('OrganizationContextContainer', function () {
 
     renderComponent();
 
-    await waitFor(() => expect(openSudo).toHaveBeenCalled());
+    await waitFor(() => expect(openSudoSpy).toHaveBeenCalled());
   });
 
   it('uses last organization from ConfigStore', function () {

static/app/views/organizationContextContainer.tsx

@@ -3,8 +3,8 @@ import {PlainRoute, RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 
-import {openSudo} from 'sentry/actionCreators/modal';
 import {fetchOrganizationDetails} from 'sentry/actionCreators/organization';
+import {openSudo} from 'sentry/actionCreators/sudoModal';
 import {Client} from 'sentry/api';
 import {Alert} from 'sentry/components/alert';
 import LoadingError from 'sentry/components/loadingError';