index.tsx 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. import {Fragment} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {removeSentryApp} from 'sentry/actionCreators/sentryApps';
  5. import {removeSentryFunction} from 'sentry/actionCreators/sentryFunctions';
  6. import EmptyMessage from 'sentry/components/emptyMessage';
  7. import ExternalLink from 'sentry/components/links/externalLink';
  8. import NavTabs from 'sentry/components/navTabs';
  9. import Panel from 'sentry/components/panels/panel';
  10. import PanelBody from 'sentry/components/panels/panelBody';
  11. import PanelHeader from 'sentry/components/panels/panelHeader';
  12. import {t, tct} from 'sentry/locale';
  13. import {space} from 'sentry/styles/space';
  14. import {Organization, SentryApp, SentryFunction} from 'sentry/types';
  15. import {
  16. platformEventLinkMap,
  17. PlatformEvents,
  18. } from 'sentry/utils/analytics/integrations/platformAnalyticsEvents';
  19. import {trackIntegrationAnalytics} from 'sentry/utils/integrationUtil';
  20. import routeTitleGen from 'sentry/utils/routeTitle';
  21. import withOrganization from 'sentry/utils/withOrganization';
  22. import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
  23. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  24. import SentryApplicationRow from 'sentry/views/settings/organizationDeveloperSettings/sentryApplicationRow';
  25. import CreateIntegrationButton from 'sentry/views/settings/organizationIntegrations/createIntegrationButton';
  26. import ExampleIntegrationButton from 'sentry/views/settings/organizationIntegrations/exampleIntegrationButton';
  27. import SentryFunctionRow from './sentryFunctionRow';
  28. type Props = Omit<DeprecatedAsyncView['props'], 'params'> & {
  29. organization: Organization;
  30. } & RouteComponentProps<{}, {}>;
  31. type Tab = 'public' | 'internal' | 'sentryfx';
  32. type State = DeprecatedAsyncView['state'] & {
  33. applications: SentryApp[];
  34. tab: Tab;
  35. };
  36. class OrganizationDeveloperSettings extends DeprecatedAsyncView<Props, State> {
  37. analyticsView = 'developer_settings' as const;
  38. getDefaultState(): State {
  39. const {location} = this.props;
  40. const value =
  41. (['public', 'internal', 'sentryfx'] as const).find(
  42. tab => tab === location?.query?.type
  43. ) || 'internal';
  44. return {
  45. ...super.getDefaultState(),
  46. applications: [],
  47. sentryFunctions: [],
  48. tab: value,
  49. };
  50. }
  51. get tab() {
  52. return this.state.tab;
  53. }
  54. getTitle() {
  55. const {organization} = this.props;
  56. return routeTitleGen(t('Custom Integrations'), organization.slug, false);
  57. }
  58. getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
  59. const {organization} = this.props;
  60. const returnValue: [string, string, any?, any?][] = [
  61. ['applications', `/organizations/${organization.slug}/sentry-apps/`],
  62. ];
  63. if (organization.features.includes('sentry-functions')) {
  64. returnValue.push([
  65. 'sentryFunctions',
  66. `/organizations/${organization.slug}/functions/`,
  67. ]);
  68. }
  69. return returnValue;
  70. }
  71. removeApp = (app: SentryApp) => {
  72. const apps = this.state.applications.filter(a => a.slug !== app.slug);
  73. removeSentryApp(this.api, app).then(
  74. () => {
  75. this.setState({applications: apps});
  76. },
  77. () => {}
  78. );
  79. };
  80. removeFunction = (organization: Organization, sentryFunction: SentryFunction) => {
  81. const functionsToKeep = this.state.sentryFunctions?.filter(
  82. fn => fn.name !== sentryFunction.name
  83. );
  84. if (!functionsToKeep) {
  85. return;
  86. }
  87. removeSentryFunction(this.api, organization, sentryFunction).then(
  88. isSuccess => {
  89. if (isSuccess) {
  90. this.setState({sentryFunctions: functionsToKeep});
  91. }
  92. },
  93. () => {}
  94. );
  95. };
  96. onTabChange = (value: Tab) => {
  97. this.setState({tab: value});
  98. };
  99. renderSentryFunction = (sentryFunction: SentryFunction) => {
  100. const {organization} = this.props;
  101. return (
  102. <SentryFunctionRow
  103. key={organization.slug + sentryFunction.name}
  104. organization={organization}
  105. sentryFunction={sentryFunction}
  106. onRemoveFunction={this.removeFunction}
  107. />
  108. );
  109. };
  110. renderSentryFunctions() {
  111. const {sentryFunctions} = this.state;
  112. return (
  113. <Panel>
  114. <PanelHeader>{t('Sentry Functions')}</PanelHeader>
  115. <PanelBody>
  116. {sentryFunctions?.length ? (
  117. sentryFunctions.map(this.renderSentryFunction)
  118. ) : (
  119. <EmptyMessage>{t('No Sentry Functions have been created yet.')}</EmptyMessage>
  120. )}
  121. </PanelBody>
  122. </Panel>
  123. );
  124. }
  125. renderApplicationRow = (app: SentryApp) => {
  126. const {organization} = this.props;
  127. return (
  128. <SentryApplicationRow
  129. key={app.uuid}
  130. app={app}
  131. organization={organization}
  132. onRemoveApp={this.removeApp}
  133. />
  134. );
  135. };
  136. renderInternalIntegrations() {
  137. const integrations = this.state.applications.filter(
  138. (app: SentryApp) => app.status === 'internal'
  139. );
  140. const isEmpty = integrations.length === 0;
  141. return (
  142. <Panel>
  143. <PanelHeader>{t('Internal Integrations')}</PanelHeader>
  144. <PanelBody>
  145. {!isEmpty ? (
  146. integrations.map(this.renderApplicationRow)
  147. ) : (
  148. <EmptyMessage>
  149. {t('No internal integrations have been created yet.')}
  150. </EmptyMessage>
  151. )}
  152. </PanelBody>
  153. </Panel>
  154. );
  155. }
  156. renderPublicIntegrations() {
  157. const integrations = this.state.applications.filter(app => app.status !== 'internal');
  158. const isEmpty = integrations.length === 0;
  159. return (
  160. <Panel>
  161. <PanelHeader>{t('Public Integrations')}</PanelHeader>
  162. <PanelBody>
  163. {!isEmpty ? (
  164. integrations.map(this.renderApplicationRow)
  165. ) : (
  166. <EmptyMessage>
  167. {t('No public integrations have been created yet.')}
  168. </EmptyMessage>
  169. )}
  170. </PanelBody>
  171. </Panel>
  172. );
  173. }
  174. renderTabContent(tab: Tab) {
  175. switch (tab) {
  176. case 'sentryfx':
  177. return this.renderSentryFunctions();
  178. case 'internal':
  179. return this.renderInternalIntegrations();
  180. case 'public':
  181. default:
  182. return this.renderPublicIntegrations();
  183. }
  184. }
  185. renderBody() {
  186. const {organization} = this.props;
  187. const tabs: [id: Tab, label: string][] = [
  188. ['internal', t('Internal Integration')],
  189. ['public', t('Public Integration')],
  190. ];
  191. if (organization.features.includes('sentry-functions')) {
  192. tabs.push(['sentryfx', t('Sentry Function')]);
  193. }
  194. return (
  195. <div>
  196. <SettingsPageHeader
  197. title={t('Custom Integrations')}
  198. body={
  199. <Fragment>
  200. {t(
  201. 'Create integrations that interact with Sentry using the REST API and webhooks. '
  202. )}
  203. <br />
  204. {tct('For more information [link: see our docs].', {
  205. link: (
  206. <ExternalLink
  207. href={platformEventLinkMap[PlatformEvents.DOCS]}
  208. onClick={() => {
  209. trackIntegrationAnalytics(PlatformEvents.DOCS, {
  210. organization,
  211. view: this.analyticsView,
  212. });
  213. }}
  214. />
  215. ),
  216. })}
  217. </Fragment>
  218. }
  219. action={
  220. <ActionContainer>
  221. <ExampleIntegrationButton
  222. analyticsView={this.analyticsView}
  223. style={{marginRight: space(1)}}
  224. />
  225. <CreateIntegrationButton analyticsView={this.analyticsView} />
  226. </ActionContainer>
  227. }
  228. />
  229. <NavTabs underlined>
  230. {tabs.map(([type, label]) => (
  231. <li
  232. key={type}
  233. className={this.tab === type ? 'active' : ''}
  234. onClick={() => this.onTabChange(type)}
  235. >
  236. <a>{label}</a>
  237. </li>
  238. ))}
  239. </NavTabs>
  240. {this.renderTabContent(this.tab)}
  241. </div>
  242. );
  243. }
  244. }
  245. const ActionContainer = styled('div')`
  246. display: flex;
  247. `;
  248. export default withOrganization(OrganizationDeveloperSettings);