integrationExternalUserMappings.tsx 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. import {Fragment} from 'react';
  2. import {WithRouterProps} from 'react-router';
  3. import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
  4. import {openModal} from 'sentry/actionCreators/modal';
  5. import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent';
  6. import {t} from 'sentry/locale';
  7. import {
  8. ExternalActorMapping,
  9. ExternalActorMappingOrSuggestion,
  10. ExternalUser,
  11. Integration,
  12. Member,
  13. Organization,
  14. } from 'sentry/types';
  15. import {sentryNameToOption} from 'sentry/utils/integrationUtil';
  16. import withOrganization from 'sentry/utils/withOrganization';
  17. // eslint-disable-next-line no-restricted-imports
  18. import withSentryRouter from 'sentry/utils/withSentryRouter';
  19. import IntegrationExternalMappingForm from './integrationExternalMappingForm';
  20. import IntegrationExternalMappings from './integrationExternalMappings';
  21. type Props = DeprecatedAsyncComponent['props'] &
  22. WithRouterProps & {
  23. integration: Integration;
  24. organization: Organization;
  25. };
  26. type State = DeprecatedAsyncComponent['state'] & {
  27. initialResults: Member[];
  28. members: (Member & {externalUsers: ExternalUser[]})[];
  29. };
  30. class IntegrationExternalUserMappings extends DeprecatedAsyncComponent<Props, State> {
  31. getEndpoints(): ReturnType<DeprecatedAsyncComponent['getEndpoints']> {
  32. const {organization} = this.props;
  33. return [
  34. // We paginate on this query, since we're filtering by hasExternalUsers:true
  35. [
  36. 'members',
  37. `/organizations/${organization.slug}/members/`,
  38. {query: {query: 'hasExternalUsers:true', expand: 'externalUsers'}},
  39. ],
  40. // We use this query as defaultOptions to reduce identical API calls
  41. ['initialResults', `/organizations/${organization.slug}/members/`],
  42. ];
  43. }
  44. handleDelete = async (mapping: ExternalActorMapping) => {
  45. const {organization} = this.props;
  46. try {
  47. await this.api.requestPromise(
  48. `/organizations/${organization.slug}/external-users/${mapping.id}/`,
  49. {
  50. method: 'DELETE',
  51. }
  52. );
  53. // remove config and update state
  54. addSuccessMessage(t('Deletion successful'));
  55. this.fetchData();
  56. } catch {
  57. // no 4xx errors should happen on delete
  58. addErrorMessage(t('An error occurred'));
  59. }
  60. };
  61. handleSubmitSuccess = () => {
  62. // Don't bother updating state. The info is in array of objects for each object in another array of objects.
  63. // Easier and less error-prone to re-fetch the data and re-calculate state.
  64. this.fetchData();
  65. };
  66. get mappings() {
  67. const {integration} = this.props;
  68. const {members} = this.state;
  69. const externalUserMappings = members.reduce<ExternalActorMapping[]>((acc, member) => {
  70. const {externalUsers, user} = member;
  71. acc.push(
  72. ...externalUsers
  73. .filter(externalUser => externalUser.provider === integration.provider.key)
  74. .map(externalUser => ({...externalUser, sentryName: user?.name ?? member.name}))
  75. );
  76. return acc;
  77. }, []);
  78. return externalUserMappings.sort((a, b) => parseInt(a.id, 10) - parseInt(b.id, 10));
  79. }
  80. get dataEndpoint() {
  81. const {organization} = this.props;
  82. return `/organizations/${organization.slug}/members/`;
  83. }
  84. get baseFormEndpoint() {
  85. const {organization} = this.props;
  86. return `/organizations/${organization.slug}/external-users/`;
  87. }
  88. get defaultUserOptions() {
  89. const {initialResults} = this.state;
  90. return this.sentryNamesMapper(initialResults).map(sentryNameToOption);
  91. }
  92. sentryNamesMapper(members: Member[]) {
  93. return members
  94. .filter(member => member.user)
  95. .map(({user, email, name}) => {
  96. const label = email !== name ? `${name} - ${email}` : `${email}`;
  97. return {id: user?.id!, name: label};
  98. });
  99. }
  100. openModal = (mapping?: ExternalActorMappingOrSuggestion) => {
  101. const {integration} = this.props;
  102. openModal(({Body, Header, closeModal}) => (
  103. <Fragment>
  104. <Header closeButton>{t('Configure External User Mapping')}</Header>
  105. <Body>
  106. <IntegrationExternalMappingForm
  107. type="user"
  108. integration={integration}
  109. dataEndpoint={this.dataEndpoint}
  110. getBaseFormEndpoint={() => this.baseFormEndpoint}
  111. defaultOptions={this.defaultUserOptions}
  112. mapping={mapping}
  113. sentryNamesMapper={this.sentryNamesMapper}
  114. onCancel={closeModal}
  115. onSubmitSuccess={() => {
  116. this.handleSubmitSuccess();
  117. closeModal();
  118. }}
  119. />
  120. </Body>
  121. </Fragment>
  122. ));
  123. };
  124. renderBody() {
  125. const {integration, organization} = this.props;
  126. const {membersPageLinks} = this.state;
  127. return (
  128. <Fragment>
  129. <IntegrationExternalMappings
  130. type="user"
  131. integration={integration}
  132. organization={organization}
  133. mappings={this.mappings}
  134. dataEndpoint={this.dataEndpoint}
  135. getBaseFormEndpoint={() => this.baseFormEndpoint}
  136. defaultOptions={this.defaultUserOptions}
  137. sentryNamesMapper={this.sentryNamesMapper}
  138. onCreate={this.openModal}
  139. onDelete={this.handleDelete}
  140. pageLinks={membersPageLinks}
  141. />
  142. </Fragment>
  143. );
  144. }
  145. }
  146. export default withSentryRouter(withOrganization(IntegrationExternalUserMappings));