relayWrapper.tsx 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. import {Fragment} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import isEqual from 'lodash/isEqual';
  4. import omit from 'lodash/omit';
  5. import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
  6. import {openModal} from 'sentry/actionCreators/modal';
  7. import {updateOrganization} from 'sentry/actionCreators/organizations';
  8. import {Button} from 'sentry/components/button';
  9. import ExternalLink from 'sentry/components/links/externalLink';
  10. import {IconAdd} from 'sentry/icons';
  11. import {t, tct} from 'sentry/locale';
  12. import {Organization, Relay, RelayActivity} from 'sentry/types';
  13. import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
  14. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  15. import TextBlock from 'sentry/views/settings/components/text/textBlock';
  16. import PermissionAlert from 'sentry/views/settings/organization/permissionAlert';
  17. import Add from './modals/add';
  18. import Edit from './modals/edit';
  19. import EmptyState from './emptyState';
  20. import List from './list';
  21. const RELAY_DOCS_LINK = 'https://getsentry.github.io/relay/';
  22. type Props = {
  23. organization: Organization;
  24. } & RouteComponentProps<{}, {}>;
  25. type State = {
  26. relayActivities: Array<RelayActivity>;
  27. relays: Array<Relay>;
  28. } & DeprecatedAsyncView['state'];
  29. class RelayWrapper extends DeprecatedAsyncView<Props, State> {
  30. componentDidUpdate(prevProps: Props, prevState: State) {
  31. if (!isEqual(prevState.relays, this.state.relays)) {
  32. // Fetch fresh activities
  33. this.fetchData();
  34. updateOrganization({...prevProps.organization, trustedRelays: this.state.relays});
  35. }
  36. super.componentDidUpdate(prevProps, prevState);
  37. }
  38. getTitle() {
  39. return t('Relay');
  40. }
  41. getDefaultState() {
  42. return {
  43. ...super.getDefaultState(),
  44. relays: this.props.organization.trustedRelays,
  45. };
  46. }
  47. getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
  48. const {organization} = this.props;
  49. return [['relayActivities', `/organizations/${organization.slug}/relay_usage/`]];
  50. }
  51. setRelays(trustedRelays: Array<Relay>) {
  52. this.setState({relays: trustedRelays});
  53. }
  54. handleDelete = (publicKey: Relay['publicKey']) => async () => {
  55. const {relays} = this.state;
  56. const trustedRelays = relays
  57. .filter(relay => relay.publicKey !== publicKey)
  58. .map(relay => omit(relay, ['created', 'lastModified']));
  59. try {
  60. const response = await this.api.requestPromise(
  61. `/organizations/${this.props.organization.slug}/`,
  62. {
  63. method: 'PUT',
  64. data: {trustedRelays},
  65. }
  66. );
  67. addSuccessMessage(t('Successfully deleted Relay public key'));
  68. this.setRelays(response.trustedRelays);
  69. } catch {
  70. addErrorMessage(t('An unknown error occurred while deleting Relay public key'));
  71. }
  72. };
  73. successfullySaved(response: Organization, successMessage: string) {
  74. addSuccessMessage(successMessage);
  75. this.setRelays(response.trustedRelays);
  76. }
  77. handleOpenEditDialog = (publicKey: Relay['publicKey']) => () => {
  78. const editRelay = this.state.relays.find(relay => relay.publicKey === publicKey);
  79. if (!editRelay) {
  80. return;
  81. }
  82. openModal(modalProps => (
  83. <Edit
  84. {...modalProps}
  85. savedRelays={this.state.relays}
  86. api={this.api}
  87. orgSlug={this.props.organization.slug}
  88. relay={editRelay}
  89. onSubmitSuccess={response => {
  90. this.successfullySaved(response, t('Successfully updated Relay public key'));
  91. }}
  92. />
  93. ));
  94. };
  95. handleOpenAddDialog = () => {
  96. openModal(modalProps => (
  97. <Add
  98. {...modalProps}
  99. savedRelays={this.state.relays}
  100. api={this.api}
  101. orgSlug={this.props.organization.slug}
  102. onSubmitSuccess={response => {
  103. this.successfullySaved(response, t('Successfully added Relay public key'));
  104. }}
  105. />
  106. ));
  107. };
  108. handleRefresh = () => {
  109. // Fetch fresh activities
  110. this.fetchData();
  111. };
  112. renderContent(disabled: boolean) {
  113. const {relays, relayActivities, loading} = this.state;
  114. if (loading) {
  115. return this.renderLoading();
  116. }
  117. if (!relays.length) {
  118. return <EmptyState />;
  119. }
  120. return (
  121. <List
  122. relays={relays}
  123. relayActivities={relayActivities}
  124. onEdit={this.handleOpenEditDialog}
  125. onRefresh={this.handleRefresh}
  126. onDelete={this.handleDelete}
  127. disabled={disabled}
  128. />
  129. );
  130. }
  131. renderBody() {
  132. const {organization} = this.props;
  133. const disabled = !organization.access.includes('org:write');
  134. return (
  135. <Fragment>
  136. <SettingsPageHeader
  137. title={t('Relay')}
  138. action={
  139. <Button
  140. title={
  141. disabled ? t('You do not have permission to register keys') : undefined
  142. }
  143. priority="primary"
  144. size="sm"
  145. icon={<IconAdd size="xs" isCircled />}
  146. onClick={this.handleOpenAddDialog}
  147. disabled={disabled}
  148. >
  149. {t('Register Key')}
  150. </Button>
  151. }
  152. />
  153. <PermissionAlert />
  154. <TextBlock>
  155. {tct(
  156. 'Sentry Relay offers enterprise-grade data security by providing a standalone service that acts as a middle layer between your application and sentry.io. Go to [link:Relay Documentation] for setup and details.',
  157. {link: <ExternalLink href={RELAY_DOCS_LINK} />}
  158. )}
  159. </TextBlock>
  160. {this.renderContent(disabled)}
  161. </Fragment>
  162. );
  163. }
  164. }
  165. export default RelayWrapper;