hooks.tsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651
  1. import type {Route, RouteComponentProps, RouteContextInterface} from 'react-router';
  2. import type {ChildrenRenderFn} from 'sentry/components/acl/feature';
  3. import type {Guide} from 'sentry/components/assistant/types';
  4. import type {ButtonProps} from 'sentry/components/button';
  5. import type {ProductSelectionProps} from 'sentry/components/onboarding/productSelection';
  6. import type SidebarItem from 'sentry/components/sidebar/sidebarItem';
  7. import type DateRange from 'sentry/components/timeRangeSelector/dateRange';
  8. import type SelectorItems from 'sentry/components/timeRangeSelector/selectorItems';
  9. import type {SVGIconProps} from 'sentry/icons/svgIcon';
  10. import type {Group} from 'sentry/types';
  11. import type {UseExperiment} from 'sentry/utils/useExperiment';
  12. import type {StatusToggleButtonProps} from 'sentry/views/monitors/components/statusToggleButton';
  13. import type {OrganizationStatsProps} from 'sentry/views/organizationStats/index';
  14. import type {RouteAnalyticsContext} from 'sentry/views/routeAnalyticsContextProvider';
  15. import type {NavigationItem, NavigationSection} from 'sentry/views/settings/types';
  16. import type {ExperimentKey} from './experiments';
  17. import type {Integration, IntegrationProvider} from './integrations';
  18. import type {Member, Organization} from './organization';
  19. import type {Project} from './project';
  20. import type {User} from './user';
  21. // XXX(epurkhiser): A Note about `_`.
  22. //
  23. // We add the `_: any` type int our hooks list to stop
  24. // typescript from doing too much type tightening. We should absolutely revisit
  25. // this in the future because all callbacks _should_ be allowed to be
  26. // functions, but doing so causes some unexpected issues and makes typescript
  27. // not happy. We still get a huge advantage of typing just by having each hook
  28. // type here however.
  29. /**
  30. * The Hooks type mapping is the master interface for all external Hooks into
  31. * the sentry frontend application.
  32. */
  33. export interface Hooks
  34. extends RouteHooks,
  35. ComponentHooks,
  36. CustomizationHooks,
  37. AnalyticsHooks,
  38. FeatureDisabledHooks,
  39. InterfaceChromeHooks,
  40. OnboardingHooks,
  41. SettingsHooks,
  42. FeatureSpecificHooks,
  43. ReactHooks,
  44. CallbackHooks {
  45. _: any;
  46. }
  47. export type HookName = keyof Hooks;
  48. /**
  49. * Route hooks.
  50. */
  51. export type RouteHooks = {
  52. 'routes:api': RoutesHook;
  53. 'routes:organization': RoutesHook;
  54. 'routes:root': RoutesHook;
  55. };
  56. /**
  57. * Component specific hooks for DateRange and SelectorItems
  58. * These components have plan specific overrides in getsentry
  59. */
  60. type DateRangeProps = React.ComponentProps<typeof DateRange>;
  61. type SelectorItemsProps = React.ComponentProps<typeof SelectorItems>;
  62. type DisabledMemberViewProps = RouteComponentProps<{orgId: string}, {}>;
  63. type MemberListHeaderProps = {
  64. members: Member[];
  65. organization: Organization;
  66. };
  67. type DisabledAppStoreConnectMultiple = {
  68. children: React.ReactNode;
  69. organization: Organization;
  70. };
  71. type DisabledCustomSymbolSources = {
  72. children: React.ReactNode;
  73. organization: Organization;
  74. };
  75. type DisabledMemberTooltipProps = {children: React.ReactNode};
  76. type DashboardHeadersProps = {organization: Organization};
  77. type ReplayFeedbackButton = {children: React.ReactNode};
  78. type ReplayListPageHeaderProps = {children?: React.ReactNode};
  79. type ReplayOnboardingAlertProps = {children: React.ReactNode};
  80. type ReplayOnboardingCTAProps = {children: React.ReactNode; organization: Organization};
  81. type ProductUnavailableCTAProps = {organization: Organization};
  82. type ProfilingBetaAlertBannerProps = {
  83. organization: Organization;
  84. };
  85. type ProfilingUpgradePlanButtonProps = ButtonProps & {
  86. children: React.ReactNode;
  87. fallback: React.ReactNode;
  88. organization: Organization;
  89. };
  90. type ProfilingAM1OrMMXUpgradeProps = {
  91. fallback: React.ReactNode;
  92. organization: Organization;
  93. };
  94. type CronsBillingBannerProps = {
  95. organization: Organization;
  96. };
  97. type OrganizationHeaderProps = {
  98. organization: Organization;
  99. };
  100. type ProductSelectionAvailabilityProps = Pick<
  101. ProductSelectionProps,
  102. 'lazyLoader' | 'skipLazyLoader' | 'platform' | 'withBottomMargin'
  103. > & {
  104. organization: Organization;
  105. };
  106. type FirstPartyIntegrationAlertProps = {
  107. integrations: Integration[];
  108. hideCTA?: boolean;
  109. wrapWithContainer?: boolean;
  110. };
  111. type FirstPartyIntegrationAdditionalCTAProps = {
  112. integrations: Integration[];
  113. };
  114. type AttemptCloseAttemptProps = {
  115. handleRemoveAccount: () => void;
  116. organizationSlugs: string[];
  117. };
  118. type CodecovLinkProps = {
  119. organization: Organization;
  120. };
  121. type QualitativeIssueFeedbackProps = {
  122. group: Group;
  123. organization: Organization;
  124. };
  125. type GuideUpdateCallback = (nextGuide: Guide | null, opts: {dismissed?: boolean}) => void;
  126. type MonitorCreatedCallback = (organization: Organization) => void;
  127. type SentryLogoProps = SVGIconProps & {
  128. pride?: boolean;
  129. };
  130. export type ParntershipAgreementType = 'standard' | 'partner_presence';
  131. type PartnershipAgreementProps = {
  132. agreements: Array<ParntershipAgreementType>,
  133. partnerDisplayName: string,
  134. onSubmitSuccess?: () => void;
  135. };
  136. /**
  137. * Component wrapping hooks
  138. */
  139. export type ComponentHooks = {
  140. 'component:codecov-integration-settings-link': () => React.ComponentType<CodecovLinkProps>;
  141. 'component:codecov-integration-stacktrace-link': () => React.ComponentType<CodecovLinkProps>;
  142. 'component:confirm-account-close': () => React.ComponentType<AttemptCloseAttemptProps>;
  143. 'component:crons-list-page-header': () => React.ComponentType<CronsBillingBannerProps>;
  144. 'component:dashboards-header': () => React.ComponentType<DashboardHeadersProps>;
  145. 'component:disabled-app-store-connect-multiple': () => React.ComponentType<DisabledAppStoreConnectMultiple>;
  146. 'component:disabled-custom-symbol-sources': () => React.ComponentType<DisabledCustomSymbolSources>;
  147. 'component:disabled-member': () => React.ComponentType<DisabledMemberViewProps>;
  148. 'component:disabled-member-tooltip': () => React.ComponentType<DisabledMemberTooltipProps>;
  149. 'component:enhanced-org-stats': () => React.ComponentType<OrganizationStatsProps>;
  150. 'component:escalating-issues-banner-feedback': () => React.ComponentType<QualitativeIssueFeedbackProps>;
  151. 'component:first-party-integration-additional-cta': () => React.ComponentType<FirstPartyIntegrationAdditionalCTAProps>;
  152. 'component:first-party-integration-alert': () => React.ComponentType<FirstPartyIntegrationAlertProps>;
  153. 'component:header-date-range': () => React.ComponentType<DateRangeProps>;
  154. 'component:header-selector-items': () => React.ComponentType<SelectorItemsProps>;
  155. 'component:issue-priority-feedback': () => React.ComponentType<QualitativeIssueFeedbackProps>;
  156. 'component:member-list-header': () => React.ComponentType<MemberListHeaderProps>;
  157. 'component:monitor-status-toggle': () => React.ComponentType<StatusToggleButtonProps>;
  158. 'component:org-stats-banner': () => React.ComponentType<DashboardHeadersProps>;
  159. 'component:organization-header': () => React.ComponentType<OrganizationHeaderProps>;
  160. 'component:partnership-agreement': React.ComponentType<PartnershipAgreementProps>,
  161. 'component:product-selection-availability': () => React.ComponentType<ProductSelectionAvailabilityProps>;
  162. 'component:product-unavailable-cta': () => React.ComponentType<ProductUnavailableCTAProps>;
  163. 'component:profiling-am1-or-mmx-upgrade': () => React.ComponentType<ProfilingAM1OrMMXUpgradeProps>;
  164. 'component:profiling-billing-banner': () => React.ComponentType<ProfilingBetaAlertBannerProps>;
  165. 'component:profiling-upgrade-plan-button': () => React.ComponentType<ProfilingUpgradePlanButtonProps>;
  166. 'component:replay-feedback-button': () => React.ComponentType<ReplayFeedbackButton>;
  167. 'component:replay-list-page-header': () => React.ComponentType<ReplayListPageHeaderProps> | null;
  168. 'component:replay-onboarding-alert': () => React.ComponentType<ReplayOnboardingAlertProps>;
  169. 'component:replay-onboarding-cta': () => React.ComponentType<ReplayOnboardingCTAProps>;
  170. 'component:replay-onboarding-cta-button': () => React.ComponentType<{}> | null;
  171. 'component:sentry-logo': () => React.ComponentType<SentryLogoProps>;
  172. 'component:superuser-access-category': React.ComponentType<any>;
  173. 'component:superuser-warning': React.ComponentType<any>;
  174. };
  175. /**
  176. * Customization hooks are advanced hooks that return render-prop style
  177. * components the allow for specific customizations of components.
  178. *
  179. * These are very similar to the component wrapping hooks
  180. */
  181. export type CustomizationHooks = {
  182. 'integrations:feature-gates': IntegrationsFeatureGatesHook;
  183. 'member-invite-button:customization': InviteButtonCustomizationHook;
  184. 'member-invite-modal:customization': InviteModalCustomizationHook;
  185. };
  186. /**
  187. * Analytics / tracking / and operational metrics backend hooks.
  188. */
  189. export type AnalyticsHooks = {
  190. 'analytics:init-user': AnalyticsInitUser;
  191. 'analytics:log-experiment': AnalyticsLogExperiment;
  192. 'analytics:raw-track-event': AnalyticsRawTrackEvent;
  193. 'metrics:event': MetricsEvent;
  194. };
  195. /**
  196. * feature-disabled:<feature-flag> hooks return components that will be
  197. * rendered in place for Feature components when the feature is not enabled.
  198. */
  199. export type FeatureDisabledHooks = {
  200. 'feature-disabled:alert-wizard-performance': FeatureDisabledHook;
  201. 'feature-disabled:alerts-page': FeatureDisabledHook;
  202. 'feature-disabled:codecov-integration-setting': FeatureDisabledHook;
  203. 'feature-disabled:custom-inbound-filters': FeatureDisabledHook;
  204. 'feature-disabled:dashboards-edit': FeatureDisabledHook;
  205. 'feature-disabled:dashboards-page': FeatureDisabledHook;
  206. 'feature-disabled:dashboards-sidebar-item': FeatureDisabledHook;
  207. 'feature-disabled:data-forwarding': FeatureDisabledHook;
  208. 'feature-disabled:discard-groups': FeatureDisabledHook;
  209. 'feature-disabled:discover-page': FeatureDisabledHook;
  210. 'feature-disabled:discover-saved-query-create': FeatureDisabledHook;
  211. 'feature-disabled:discover-sidebar-item': FeatureDisabledHook;
  212. 'feature-disabled:discover2-page': FeatureDisabledHook;
  213. 'feature-disabled:discover2-sidebar-item': FeatureDisabledHook;
  214. 'feature-disabled:events-page': FeatureDisabledHook;
  215. 'feature-disabled:events-sidebar-item': FeatureDisabledHook;
  216. 'feature-disabled:grid-editable-actions': FeatureDisabledHook;
  217. 'feature-disabled:incidents-sidebar-item': FeatureDisabledHook;
  218. 'feature-disabled:open-discover': FeatureDisabledHook;
  219. 'feature-disabled:open-in-discover': FeatureDisabledHook;
  220. 'feature-disabled:performance-new-project': FeatureDisabledHook;
  221. 'feature-disabled:performance-page': FeatureDisabledHook;
  222. 'feature-disabled:performance-quick-trace': FeatureDisabledHook;
  223. 'feature-disabled:performance-sidebar-item': FeatureDisabledHook;
  224. 'feature-disabled:profiling-page': FeatureDisabledHook;
  225. 'feature-disabled:profiling-sidebar-item': FeatureDisabledHook;
  226. 'feature-disabled:project-performance-score-card': FeatureDisabledHook;
  227. 'feature-disabled:project-selector-all-projects': FeatureDisabledHook;
  228. 'feature-disabled:project-selector-checkbox': FeatureDisabledHook;
  229. 'feature-disabled:rate-limits': FeatureDisabledHook;
  230. 'feature-disabled:relay': FeatureDisabledHook;
  231. 'feature-disabled:replay-sidebar-item': FeatureDisabledHook;
  232. 'feature-disabled:sso-basic': FeatureDisabledHook;
  233. 'feature-disabled:sso-saml2': FeatureDisabledHook;
  234. 'feature-disabled:starfish-view': FeatureDisabledHook;
  235. 'feature-disabled:trace-view-link': FeatureDisabledHook;
  236. };
  237. /**
  238. * Interface chrome hooks.
  239. */
  240. export type InterfaceChromeHooks = {
  241. footer: GenericComponentHook;
  242. 'help-modal:footer': HelpModalFooterHook;
  243. 'sidebar:bottom-items': SidebarBottomItemsHook;
  244. 'sidebar:help-menu': GenericOrganizationComponentHook;
  245. 'sidebar:item-label': SidebarItemLabelHook;
  246. 'sidebar:organization-dropdown-menu': GenericOrganizationComponentHook;
  247. 'sidebar:organization-dropdown-menu-bottom': GenericOrganizationComponentHook;
  248. };
  249. /**
  250. * Onboarding experience hooks
  251. */
  252. export type OnboardingHooks = {
  253. 'onboarding-wizard:skip-help': GenericOrganizationComponentHook;
  254. 'onboarding:block-hide-sidebar': () => boolean;
  255. 'onboarding:extra-chrome': GenericComponentHook;
  256. 'onboarding:targeted-onboarding-header': (opts: {source: string}) => React.ReactNode;
  257. };
  258. /**
  259. * Settings navigation hooks.
  260. */
  261. export type SettingsHooks = {
  262. 'settings:api-navigation-config': SettingsItemsHook;
  263. 'settings:organization-navigation': OrganizationSettingsHook;
  264. 'settings:organization-navigation-config': SettingsConfigHook;
  265. };
  266. /**
  267. * Feature Specific Hooks
  268. */
  269. export interface FeatureSpecificHooks extends SpendVisibilityHooks {}
  270. /**
  271. * Hooks related to Spend Visibitlity
  272. * (i.e. Per-Project Spike Protection + Spend Allocations)
  273. */
  274. export type SpendVisibilityHooks = {
  275. 'spend-visibility:spike-protection-project-settings': GenericProjectComponentHook;
  276. };
  277. /**
  278. * Hooks that are actually React Hooks as well
  279. */
  280. export type ReactHooks = {
  281. 'react-hook:route-activated': (
  282. props: RouteContextInterface
  283. ) => React.ContextType<typeof RouteAnalyticsContext>;
  284. 'react-hook:use-button-tracking': (props: ButtonProps) => () => void;
  285. 'react-hook:use-experiment': UseExperiment;
  286. };
  287. /**
  288. * Callback hooks.
  289. * These hooks just call a function that has no return value
  290. * and perform some sort of callback logic
  291. */
  292. type CallbackHooks = {
  293. 'callback:on-guide-update': GuideUpdateCallback;
  294. 'callback:on-monitor-created': MonitorCreatedCallback;
  295. };
  296. /**
  297. * Renders a React node with no props
  298. */
  299. type GenericComponentHook = () => React.ReactNode;
  300. /**
  301. * A route hook provides an injection point for a list of routes.
  302. */
  303. type RoutesHook = () => Route[];
  304. /**
  305. * Receives an organization object and should return a React node.
  306. */
  307. type GenericOrganizationComponentHook = (opts: {
  308. organization: Organization;
  309. }) => React.ReactNode;
  310. /**
  311. * Receives a project object and should return a React node.
  312. */
  313. type GenericProjectComponentHook = (opts: {project: Project}) => React.ReactNode;
  314. /**
  315. * A FeatureDisabledHook returns a react element when a feature is not enabled.
  316. */
  317. type FeatureDisabledHook = (opts: {
  318. /**
  319. * Children can either be a node, or a function that accepts a renderDisabled prop containing
  320. * a function/component to render when the feature is not enabled.
  321. */
  322. children: React.ReactNode | ChildrenRenderFn;
  323. /**
  324. * The list of features that are controlled by this hook.
  325. */
  326. features: string[];
  327. /**
  328. * Weather the feature is or is not enabled.
  329. */
  330. hasFeature: boolean;
  331. /**
  332. * The organization that is associated to this feature.
  333. */
  334. organization: Organization;
  335. /**
  336. * The project that is associated to this feature.
  337. */
  338. project?: Project;
  339. }) => React.ReactNode;
  340. /**
  341. * Called when the app is mounted.
  342. */
  343. type AnalyticsInitUser = (user: User) => void;
  344. /**
  345. * Trigger analytics tracking in the hook store.
  346. */
  347. type AnalyticsRawTrackEvent = (
  348. data: {
  349. /**
  350. * Arbitrary data to track
  351. */
  352. [key: string]: any;
  353. /**
  354. * The Reload event key.
  355. */
  356. eventKey: string;
  357. /**
  358. * The Amplitude event name. Set to null if event should not go to Amplitude.
  359. */
  360. eventName: string | null;
  361. /**
  362. * Organization to pass in. If full org object not available, pass in just the Id.
  363. * If no org, pass in null.
  364. */
  365. organization: Organization | string | null;
  366. },
  367. options?: {
  368. /**
  369. * An arbitrary function to map the parameters to new parameters
  370. */
  371. mapValuesFn?: (params: Record<string, any>) => Record<string, any>;
  372. /**
  373. * If true, starts an analytics session. This session can be used
  374. * to construct funnels. The start of the funnel should have
  375. * startSession set to true.
  376. */
  377. startSession?: boolean;
  378. /**
  379. * Optional unix timestamp
  380. */
  381. time?: number;
  382. }
  383. ) => void;
  384. /**
  385. * Trigger experiment observed logging.
  386. */
  387. type AnalyticsLogExperiment = (opts: {
  388. /**
  389. * The experiment key
  390. */
  391. key: ExperimentKey;
  392. /**
  393. * The organization. Must be provided for organization experiments.
  394. */
  395. organization?: Organization;
  396. }) => void;
  397. /**
  398. * Trigger recording a metric in the hook store.
  399. */
  400. type MetricsEvent = (
  401. /**
  402. * Metric name
  403. */
  404. name: string,
  405. /**
  406. * Value to record for this metric
  407. */
  408. value: number,
  409. /**
  410. * An additional tags object
  411. */
  412. tags?: object
  413. ) => void;
  414. /**
  415. * Provides additional navigation components
  416. */
  417. type OrganizationSettingsHook = (organization: Organization) => React.ReactElement;
  418. /**
  419. * Provides additional setting configurations
  420. */
  421. type SettingsConfigHook = (organization: Organization) => NavigationSection;
  422. /**
  423. * Provides additional setting navigation items
  424. */
  425. type SettingsItemsHook = (organization?: Organization) => NavigationItem[];
  426. /**
  427. * Each sidebar label is wrapped with this hook, to allow sidebar item
  428. * augmentation.
  429. */
  430. type SidebarItemLabelHook = () => React.ComponentType<{
  431. /**
  432. * The item label being wrapped
  433. */
  434. children: React.ReactNode;
  435. /**
  436. * The key of the item label currently being rendered. If no id is provided
  437. * the hook will have no effect.
  438. */
  439. id?: string;
  440. }>;
  441. type SidebarProps = Pick<
  442. React.ComponentProps<typeof SidebarItem>,
  443. 'orientation' | 'collapsed' | 'hasPanel'
  444. >;
  445. /**
  446. * Returns an additional list of sidebar items.
  447. */
  448. type SidebarBottomItemsHook = (
  449. opts: SidebarProps & {organization: Organization}
  450. ) => React.ReactNode;
  451. /**
  452. * Provides augmentation of the help modal footer
  453. */
  454. type HelpModalFooterHook = (opts: {
  455. closeModal: () => void;
  456. organization: Organization;
  457. }) => React.ReactNode;
  458. /**
  459. * The DecoratedIntegrationFeature differs from the IntegrationFeature as it is
  460. * expected to have been transformed into marked up content.
  461. */
  462. type DecoratedIntegrationFeature = {
  463. /**
  464. * Marked up description
  465. */
  466. description: React.ReactNode;
  467. featureGate: string;
  468. };
  469. type IntegrationFeatureGroup = {
  470. /**
  471. * The list of features within this group
  472. */
  473. features: DecoratedIntegrationFeature[];
  474. /**
  475. * Weather the group has all of the features enabled within this group
  476. * or not.
  477. */
  478. hasFeatures: boolean;
  479. };
  480. type FeatureGateSharedProps = {
  481. /**
  482. * The list of features, typically this is provided by the backend.
  483. */
  484. features: DecoratedIntegrationFeature[];
  485. /**
  486. * Organization of the integration we're querying feature gate details for.
  487. */
  488. organization: Organization;
  489. };
  490. type IntegrationFeaturesProps = FeatureGateSharedProps & {
  491. /**
  492. * The children function which will be provided with gating details.
  493. */
  494. children: (opts: {
  495. /**
  496. * Is the integration disabled for installation because of feature gating?
  497. */
  498. disabled: boolean;
  499. /**
  500. * The translated reason that the integration is disabled.
  501. */
  502. disabledReason: React.ReactNode;
  503. /**
  504. * Features grouped based on specific gating criteria (for example, in
  505. * sentry.io this is features grouped by plans).
  506. */
  507. gatedFeatureGroups: IntegrationFeatureGroup[];
  508. /**
  509. * This is the list of features which have *not* been gated in any way.
  510. */
  511. ungatedFeatures: DecoratedIntegrationFeature[];
  512. }) => React.ReactElement;
  513. };
  514. type IntegrationFeatureListProps = FeatureGateSharedProps & {
  515. provider: Pick<IntegrationProvider, 'key'>;
  516. };
  517. /**
  518. * The integration features gate hook provides components to customize
  519. * integration feature lists.
  520. */
  521. type IntegrationsFeatureGatesHook = () => {
  522. /**
  523. * This component renders the list of integration features.
  524. */
  525. FeatureList: React.ComponentType<IntegrationFeatureListProps>;
  526. /**
  527. * This is a render-prop style component that given a set of integration
  528. * features will call the children function with gating details about the
  529. * features.
  530. */
  531. IntegrationFeatures: React.ComponentType<IntegrationFeaturesProps>;
  532. };
  533. /**
  534. * Invite Button customization allows for a render-props component to replace
  535. * or intercept props of the button element.
  536. */
  537. type InviteButtonCustomizationHook = () => React.ComponentType<{
  538. children: (opts: {
  539. /**
  540. * Whether the Invite Members button is active or not
  541. */
  542. disabled: boolean;
  543. onTriggerModal: () => void;
  544. }) => React.ReactElement;
  545. onTriggerModal: () => void;
  546. organization: Organization;
  547. }>;
  548. /**
  549. * Invite Modal customization allows for a render-prop component to add
  550. * additional react elements into the modal, and add invite-send middleware.
  551. */
  552. type InviteModalCustomizationHook = () => React.ComponentType<{
  553. children: (opts: {
  554. /**
  555. * Indicates that the modal's send invites button should be enabled and
  556. * invites may currently be sent.
  557. */
  558. canSend: boolean;
  559. /**
  560. * Trigger sending invites
  561. */
  562. sendInvites: () => void;
  563. /**
  564. * Additional react elements to render in the header of the modal, just
  565. * under the description.
  566. */
  567. headerInfo?: React.ReactNode;
  568. }) => React.ReactElement;
  569. /**
  570. * When the children's sendInvites renderProp is called, this will also be
  571. * triggered.
  572. */
  573. onSendInvites: () => void;
  574. /**
  575. * The organization that members will be invited to.
  576. */
  577. organization: Organization;
  578. /**
  579. * Indicates if clicking 'send invites' will immediately send invites, or
  580. * would just create invite requests.
  581. */
  582. willInvite: boolean;
  583. }>;