modal.tsx 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. import type {ModalTypes} from 'sentry/components/globalModal';
  2. import type {DashboardWidgetModalOptions} from 'sentry/components/modals/addDashboardWidgetModal';
  3. import type {CreateNewIntegrationModalOptions} from 'sentry/components/modals/createNewIntegrationModal';
  4. import {DashboardWidgetLibraryModalOptions} from 'sentry/components/modals/dashboardWidgetLibraryModal';
  5. import type {DashboardWidgetQuerySelectorModalOptions} from 'sentry/components/modals/dashboardWidgetQuerySelectorModal';
  6. import {InviteRow} from 'sentry/components/modals/inviteMembersModal/types';
  7. import type {ReprocessEventModalOptions} from 'sentry/components/modals/reprocessEventModal';
  8. import {OverwriteWidgetModalProps} from 'sentry/components/modals/widgetBuilder/overwriteWidgetModal';
  9. import type {WidgetViewerModalOptions} from 'sentry/components/modals/widgetViewerModal';
  10. import ModalStore from 'sentry/stores/modalStore';
  11. import {
  12. Group,
  13. IssueOwnership,
  14. Organization,
  15. Project,
  16. SentryApp,
  17. Team,
  18. } from 'sentry/types';
  19. import {AppStoreConnectStatusData, CustomRepoType} from 'sentry/types/debugFiles';
  20. import {Event} from 'sentry/types/event';
  21. export type ModalOptions = ModalTypes['options'];
  22. export type ModalRenderProps = ModalTypes['renderProps'];
  23. /**
  24. * Show a modal
  25. */
  26. export function openModal(
  27. renderer: (renderProps: ModalRenderProps) => React.ReactNode,
  28. options?: ModalOptions
  29. ) {
  30. ModalStore.openModal(renderer, options ?? {});
  31. }
  32. /**
  33. * Close modal
  34. */
  35. export function closeModal() {
  36. ModalStore.closeModal();
  37. }
  38. type OpenSudoModalOptions = {
  39. isSuperuser?: boolean;
  40. needsReload?: boolean;
  41. onClose?: () => void;
  42. retryRequest?: () => Promise<any>;
  43. sudo?: boolean;
  44. };
  45. type emailVerificationModalOptions = {
  46. actionMessage?: string;
  47. emailVerified?: boolean;
  48. onClose?: () => void;
  49. };
  50. type inviteMembersModalOptions = {
  51. initialData?: Partial<InviteRow>[];
  52. onClose?: () => void;
  53. source?: string;
  54. };
  55. export async function openSudo({onClose, ...args}: OpenSudoModalOptions = {}) {
  56. const mod = await import('sentry/components/modals/sudoModal');
  57. const {default: Modal} = mod;
  58. openModal(deps => <Modal {...deps} {...args} />, {onClose});
  59. }
  60. export async function openEmailVerification({
  61. onClose,
  62. ...args
  63. }: emailVerificationModalOptions = {}) {
  64. const mod = await import('sentry/components/modals/emailVerificationModal');
  65. const {default: Modal} = mod;
  66. openModal(deps => <Modal {...deps} {...args} />, {onClose});
  67. }
  68. type OpenDiffModalOptions = {
  69. baseIssueId: Group['id'];
  70. orgId: Organization['id'];
  71. project: Project;
  72. targetIssueId: string;
  73. baseEventId?: Event['id'];
  74. targetEventId?: string;
  75. };
  76. export async function openDiffModal(options: OpenDiffModalOptions) {
  77. const mod = await import('sentry/components/modals/diffModal');
  78. const {default: Modal, modalCss} = mod;
  79. openModal(deps => <Modal {...deps} {...options} />, {modalCss});
  80. }
  81. type CreateTeamModalOptions = {
  82. /**
  83. * The organization to create a team for
  84. */
  85. organization: Organization;
  86. onClose?: (team: Team) => void;
  87. /**
  88. * An initial project to add the team to. This may be deprecated soon as we may add a project selection inside of the modal flow
  89. */
  90. project?: Project;
  91. };
  92. export async function openCreateTeamModal(options: CreateTeamModalOptions) {
  93. const mod = await import('sentry/components/modals/createTeamModal');
  94. const {default: Modal} = mod;
  95. openModal(deps => <Modal {...deps} {...options} />);
  96. }
  97. type CreateOwnershipRuleModalOptions = {
  98. issueId: string;
  99. /**
  100. * The organization to create a rules for
  101. */
  102. organization: Organization;
  103. /**
  104. * The project to create a rules for
  105. */
  106. project: Project;
  107. };
  108. export type EditOwnershipRulesModalOptions = {
  109. onSave: (text: string | null) => void;
  110. organization: Organization;
  111. ownership: IssueOwnership;
  112. project: Project;
  113. };
  114. export async function openCreateOwnershipRule(options: CreateOwnershipRuleModalOptions) {
  115. const mod = await import('sentry/components/modals/createOwnershipRuleModal');
  116. const {default: Modal, modalCss} = mod;
  117. openModal(deps => <Modal {...deps} {...options} />, {modalCss});
  118. }
  119. export async function openEditOwnershipRules(options: EditOwnershipRulesModalOptions) {
  120. const mod = await import('sentry/components/modals/editOwnershipRulesModal');
  121. const {default: Modal, modalCss} = mod;
  122. openModal(deps => <Modal {...deps} {...options} />, {backdrop: 'static', modalCss});
  123. }
  124. export async function openCommandPalette(options: ModalOptions = {}) {
  125. const mod = await import('sentry/components/modals/commandPalette');
  126. const {default: Modal, modalCss} = mod;
  127. openModal(deps => <Modal {...deps} {...options} />, {modalCss});
  128. }
  129. type RecoveryModalOptions = {
  130. authenticatorName: string;
  131. };
  132. export async function openRecoveryOptions(options: RecoveryModalOptions) {
  133. const mod = await import('sentry/components/modals/recoveryOptionsModal');
  134. const {default: Modal} = mod;
  135. openModal(deps => <Modal {...deps} {...options} />);
  136. }
  137. export type TeamAccessRequestModalOptions = {
  138. memberId: string;
  139. orgId: string;
  140. teamId: string;
  141. };
  142. export async function openTeamAccessRequestModal(options: TeamAccessRequestModalOptions) {
  143. const mod = await import('sentry/components/modals/teamAccessRequestModal');
  144. const {default: Modal} = mod;
  145. openModal(deps => <Modal {...deps} {...options} />);
  146. }
  147. export async function redirectToProject(newProjectSlug: string) {
  148. const mod = await import('sentry/components/modals/redirectToProject');
  149. const {default: Modal} = mod;
  150. openModal(deps => <Modal {...deps} slug={newProjectSlug} />, {});
  151. }
  152. type HelpSearchModalOptions = {
  153. organization?: Organization;
  154. placeholder?: string;
  155. };
  156. export async function openHelpSearchModal(options?: HelpSearchModalOptions) {
  157. const mod = await import('sentry/components/modals/helpSearchModal');
  158. const {default: Modal, modalCss} = mod;
  159. openModal(deps => <Modal {...deps} {...options} />, {modalCss});
  160. }
  161. export type SentryAppDetailsModalOptions = {
  162. isInstalled: boolean;
  163. onInstall: () => Promise<void>;
  164. organization: Organization;
  165. sentryApp: SentryApp;
  166. onCloseModal?: () => void; // used for analytics
  167. };
  168. type DebugFileSourceModalOptions = {
  169. appStoreConnectSourcesQuantity: number;
  170. onSave: (data: Record<string, any>) => Promise<void>;
  171. organization: Organization;
  172. sourceType: CustomRepoType;
  173. appStoreConnectStatusData?: AppStoreConnectStatusData;
  174. onClose?: () => void;
  175. sourceConfig?: Record<string, any>;
  176. };
  177. export async function openDebugFileSourceModal({
  178. onClose,
  179. ...restOptions
  180. }: DebugFileSourceModalOptions) {
  181. const mod = await import('sentry/components/modals/debugFileCustomRepository');
  182. const {default: Modal, modalCss} = mod;
  183. openModal(deps => <Modal {...deps} {...restOptions} />, {
  184. modalCss,
  185. onClose,
  186. });
  187. }
  188. export async function openInviteMembersModal({
  189. onClose,
  190. ...args
  191. }: inviteMembersModalOptions = {}) {
  192. const mod = await import('sentry/components/modals/inviteMembersModal');
  193. const {default: Modal, modalCss} = mod;
  194. openModal(deps => <Modal {...deps} {...args} />, {modalCss, onClose});
  195. }
  196. export async function openAddDashboardWidgetModal(options: DashboardWidgetModalOptions) {
  197. const mod = await import('sentry/components/modals/addDashboardWidgetModal');
  198. const {default: Modal, modalCss} = mod;
  199. openModal(deps => <Modal {...deps} {...options} />, {backdrop: 'static', modalCss});
  200. }
  201. export async function openWidgetBuilderOverwriteModal(
  202. options: OverwriteWidgetModalProps
  203. ) {
  204. const mod = await import('sentry/components/modals/widgetBuilder/overwriteWidgetModal');
  205. const {default: Modal, modalCss} = mod;
  206. openModal(deps => <Modal {...deps} {...options} />, {backdrop: 'static', modalCss});
  207. }
  208. export async function openAddToDashboardModal(options) {
  209. const mod = await import('sentry/components/modals/widgetBuilder/addToDashboardModal');
  210. const {default: Modal, modalCss} = mod;
  211. openModal(deps => <Modal {...deps} {...options} />, {backdrop: 'static', modalCss});
  212. }
  213. export async function openReprocessEventModal({
  214. onClose,
  215. ...options
  216. }: ReprocessEventModalOptions & {onClose?: () => void}) {
  217. const mod = await import('sentry/components/modals/reprocessEventModal');
  218. const {default: Modal} = mod;
  219. openModal(deps => <Modal {...deps} {...options} />, {onClose});
  220. }
  221. export async function demoSignupModal(options: ModalOptions = {}) {
  222. const mod = await import('sentry/components/modals/demoSignUp');
  223. const {default: Modal, modalCss} = mod;
  224. openModal(deps => <Modal {...deps} {...options} />, {modalCss});
  225. }
  226. export async function openDashboardWidgetQuerySelectorModal(
  227. options: DashboardWidgetQuerySelectorModalOptions
  228. ) {
  229. const mod = await import('sentry/components/modals/dashboardWidgetQuerySelectorModal');
  230. const {default: Modal, modalCss} = mod;
  231. openModal(deps => <Modal {...deps} {...options} />, {backdrop: 'static', modalCss});
  232. }
  233. export async function openDashboardWidgetLibraryModal(
  234. options: DashboardWidgetLibraryModalOptions
  235. ) {
  236. const mod = await import('sentry/components/modals/dashboardWidgetLibraryModal');
  237. const {default: Modal, modalCss} = mod;
  238. openModal(deps => <Modal {...deps} {...options} />, {backdrop: 'static', modalCss});
  239. }
  240. export async function openWidgetViewerModal({
  241. onClose,
  242. ...options
  243. }: WidgetViewerModalOptions & {onClose?: () => void}) {
  244. const mod = await import('sentry/components/modals/widgetViewerModal');
  245. const {default: Modal, modalCss} = mod;
  246. openModal(deps => <Modal {...deps} {...options} />, {
  247. backdrop: 'static',
  248. modalCss,
  249. onClose,
  250. });
  251. }
  252. export async function openCreateNewIntegrationModal(
  253. options: CreateNewIntegrationModalOptions
  254. ) {
  255. const mod = await import('sentry/components/modals/createNewIntegrationModal');
  256. const {default: Modal} = mod;
  257. openModal(deps => <Modal {...deps} {...options} />);
  258. }