addIntegration.tsx 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. import {Component} from 'react';
  2. import * as qs from 'query-string';
  3. import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
  4. import {t} from 'sentry/locale';
  5. import ConfigStore from 'sentry/stores/configStore';
  6. import type {
  7. IntegrationProvider,
  8. IntegrationWithConfig,
  9. Organization,
  10. } from 'sentry/types';
  11. import {trackIntegrationAnalytics} from 'sentry/utils/integrationUtil';
  12. type Props = {
  13. children: (
  14. openDialog: (urlParams?: {[key: string]: string}) => void
  15. ) => React.ReactNode;
  16. onInstall: (data: IntegrationWithConfig) => void;
  17. organization: Organization;
  18. provider: IntegrationProvider;
  19. account?: string | null; // for analytics
  20. analyticsParams?: {
  21. already_installed: boolean;
  22. view:
  23. | 'integrations_directory_integration_detail'
  24. | 'integrations_directory'
  25. | 'onboarding'
  26. | 'project_creation';
  27. };
  28. modalParams?: {[key: string]: string};
  29. };
  30. export default class AddIntegration extends Component<Props> {
  31. componentDidMount() {
  32. window.addEventListener('message', this.didReceiveMessage);
  33. }
  34. componentWillUnmount() {
  35. window.removeEventListener('message', this.didReceiveMessage);
  36. this.dialog?.close();
  37. }
  38. dialog: Window | null = null;
  39. computeCenteredWindow(width: number, height: number) {
  40. // Taken from: https://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen
  41. const screenLeft =
  42. window.screenLeft !== undefined ? window.screenLeft : window.screenX;
  43. const screenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
  44. const innerWidth = window.innerWidth
  45. ? window.innerWidth
  46. : document.documentElement.clientWidth
  47. ? document.documentElement.clientWidth
  48. : screen.width;
  49. const innerHeight = window.innerHeight
  50. ? window.innerHeight
  51. : document.documentElement.clientHeight
  52. ? document.documentElement.clientHeight
  53. : screen.height;
  54. const left = innerWidth / 2 - width / 2 + screenLeft;
  55. const top = innerHeight / 2 - height / 2 + screenTop;
  56. return {left, top};
  57. }
  58. openDialog = (urlParams?: {[key: string]: string}) => {
  59. const {account, analyticsParams, modalParams, organization, provider} = this.props;
  60. trackIntegrationAnalytics('integrations.installation_start', {
  61. integration: provider.key,
  62. integration_type: 'first_party',
  63. organization,
  64. ...analyticsParams,
  65. });
  66. const name = 'sentryAddIntegration';
  67. const {url, width, height} = provider.setupDialog;
  68. const {left, top} = this.computeCenteredWindow(width, height);
  69. let query: {[key: string]: string} = {...urlParams};
  70. if (account) {
  71. query.account = account;
  72. }
  73. if (modalParams) {
  74. query = {...query, ...modalParams};
  75. }
  76. const installUrl = `${url}?${qs.stringify(query)}`;
  77. const opts = `scrollbars=yes,width=${width},height=${height},top=${top},left=${left}`;
  78. this.dialog = window.open(installUrl, name, opts);
  79. this.dialog && this.dialog.focus();
  80. };
  81. didReceiveMessage = (message: MessageEvent) => {
  82. const {analyticsParams, onInstall, organization, provider} = this.props;
  83. const validOrigins = [
  84. ConfigStore.get('links').sentryUrl,
  85. ConfigStore.get('links').organizationUrl,
  86. document.location.origin,
  87. ];
  88. if (!validOrigins.includes(message.origin)) {
  89. return;
  90. }
  91. if (message.source !== this.dialog) {
  92. return;
  93. }
  94. const {success, data} = message.data;
  95. this.dialog = null;
  96. if (!success) {
  97. addErrorMessage(data?.error ?? t('An unknown error occurred'));
  98. return;
  99. }
  100. if (!data) {
  101. return;
  102. }
  103. trackIntegrationAnalytics('integrations.installation_complete', {
  104. integration: provider.key,
  105. integration_type: 'first_party',
  106. organization,
  107. ...analyticsParams,
  108. });
  109. addSuccessMessage(t('%s added', provider.name));
  110. onInstall(data);
  111. };
  112. render() {
  113. const {children} = this.props;
  114. return children(this.openDialog);
  115. }
  116. }