teamNotifications.tsx 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. import {Fragment} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
  5. import {hasEveryAccess} from 'sentry/components/acl/access';
  6. import {Button} from 'sentry/components/button';
  7. import Confirm from 'sentry/components/confirm';
  8. import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent';
  9. import EmptyMessage from 'sentry/components/emptyMessage';
  10. import TextField from 'sentry/components/forms/fields/textField';
  11. import ExternalLink from 'sentry/components/links/externalLink';
  12. import Panel from 'sentry/components/panels/panel';
  13. import PanelBody from 'sentry/components/panels/panelBody';
  14. import PanelHeader from 'sentry/components/panels/panelHeader';
  15. import {Tooltip} from 'sentry/components/tooltip';
  16. import {IconDelete} from 'sentry/icons';
  17. import {t, tct} from 'sentry/locale';
  18. import {space} from 'sentry/styles/space';
  19. import {ExternalTeam, Integration, Organization, Team} from 'sentry/types';
  20. import {toTitleCase} from 'sentry/utils';
  21. import withOrganization from 'sentry/utils/withOrganization';
  22. import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
  23. import PermissionAlert from 'sentry/views/settings/project/permissionAlert';
  24. type Props = RouteComponentProps<{teamId: string}, {}> & {
  25. organization: Organization;
  26. team: Team;
  27. };
  28. type State = DeprecatedAsyncView['state'] & {
  29. integrations: Integration[];
  30. teamDetails: Team;
  31. };
  32. const DOCS_LINK =
  33. 'https://docs.sentry.io/product/integrations/notification-incidents/slack/#team-notifications';
  34. const NOTIFICATION_PROVIDERS = ['slack'];
  35. class TeamNotificationSettings extends DeprecatedAsyncView<Props, State> {
  36. getTitle() {
  37. return 'Team Notification Settings';
  38. }
  39. getEndpoints(): ReturnType<DeprecatedAsyncComponent['getEndpoints']> {
  40. const {organization, team} = this.props;
  41. return [
  42. [
  43. 'teamDetails',
  44. `/teams/${organization.slug}/${team.slug}/`,
  45. {query: {expand: ['externalTeams']}},
  46. ],
  47. [
  48. 'integrations',
  49. `/organizations/${organization.slug}/integrations/`,
  50. {query: {includeConfig: 0}},
  51. ],
  52. ];
  53. }
  54. handleDelete = async (mapping: ExternalTeam) => {
  55. try {
  56. const {organization, team} = this.props;
  57. const endpoint = `/teams/${organization.slug}/${team.slug}/external-teams/${mapping.id}/`;
  58. await this.api.requestPromise(endpoint, {
  59. method: 'DELETE',
  60. });
  61. addSuccessMessage(t('Deletion successful'));
  62. this.fetchData();
  63. } catch {
  64. addErrorMessage(t('An error occurred'));
  65. }
  66. };
  67. renderBody() {
  68. const {team} = this.props;
  69. return (
  70. <Fragment>
  71. <PermissionAlert access={['team:write']} team={team} />
  72. <Panel>
  73. <PanelHeader>{t('Notifications')}</PanelHeader>
  74. <PanelBody>{this.renderPanelBody()}</PanelBody>
  75. </Panel>
  76. </Fragment>
  77. );
  78. }
  79. renderPanelBody() {
  80. const {organization, team} = this.props;
  81. const {teamDetails, integrations} = this.state;
  82. const notificationIntegrations = integrations.filter(integration =>
  83. NOTIFICATION_PROVIDERS.includes(integration.provider.key)
  84. );
  85. if (!notificationIntegrations.length) {
  86. return (
  87. <EmptyMessage>
  88. {t('No Notification Integrations have been installed yet.')}
  89. </EmptyMessage>
  90. );
  91. }
  92. const externalTeams = (teamDetails.externalTeams || []).filter(externalTeam =>
  93. NOTIFICATION_PROVIDERS.includes(externalTeam.provider)
  94. );
  95. if (!externalTeams.length) {
  96. return (
  97. <EmptyMessage>
  98. <div>{t('No teams have been linked yet.')}</div>
  99. <NotDisabledSubText>
  100. {tct('Head over to Slack and type [code] to get started. [link].', {
  101. code: <code>/sentry link team</code>,
  102. link: <ExternalLink href={DOCS_LINK}>{t('Learn more')}</ExternalLink>,
  103. })}
  104. </NotDisabledSubText>
  105. </EmptyMessage>
  106. );
  107. }
  108. const integrationsById = Object.fromEntries(
  109. notificationIntegrations.map(integration => [integration.id, integration])
  110. );
  111. const hasWriteAccess = hasEveryAccess(['team:write'], {organization, team});
  112. return externalTeams.map(externalTeam => (
  113. <FormFieldWrapper key={externalTeam.id}>
  114. <StyledFormField
  115. disabled
  116. label={
  117. <div>
  118. <NotDisabledText>
  119. {toTitleCase(externalTeam.provider)}:
  120. {integrationsById[externalTeam.integrationId].name}
  121. </NotDisabledText>
  122. <NotDisabledSubText>
  123. {tct('Unlink this channel in Slack with [code]. [link].', {
  124. code: <code>/sentry unlink team</code>,
  125. link: <ExternalLink href={DOCS_LINK}>{t('Learn more')}</ExternalLink>,
  126. })}
  127. </NotDisabledSubText>
  128. </div>
  129. }
  130. labelText={t('Unlink this channel in slack with `/slack unlink team`')}
  131. name="externalName"
  132. value={externalTeam.externalName}
  133. />
  134. <DeleteButtonWrapper>
  135. <Tooltip
  136. title={t(
  137. 'You must be an organization owner, manager or admin to remove a Slack team link'
  138. )}
  139. disabled={hasWriteAccess}
  140. >
  141. <Confirm
  142. disabled={!hasWriteAccess}
  143. onConfirm={() => this.handleDelete(externalTeam)}
  144. message={t('Are you sure you want to remove this Slack team link?')}
  145. >
  146. <Button
  147. size="sm"
  148. icon={<IconDelete size="md" />}
  149. aria-label={t('delete')}
  150. disabled={!hasWriteAccess}
  151. />
  152. </Confirm>
  153. </Tooltip>
  154. </DeleteButtonWrapper>
  155. </FormFieldWrapper>
  156. ));
  157. }
  158. }
  159. export default withOrganization(TeamNotificationSettings);
  160. const NotDisabledText = styled('div')`
  161. color: ${p => p.theme.textColor};
  162. line-height: ${space(2)};
  163. `;
  164. const NotDisabledSubText = styled('div')`
  165. color: ${p => p.theme.subText};
  166. font-size: ${p => p.theme.fontSizeRelativeSmall};
  167. line-height: 1.4;
  168. margin-top: ${space(1)};
  169. `;
  170. const FormFieldWrapper = styled('div')`
  171. display: flex;
  172. align-items: center;
  173. justify-content: flex-start;
  174. `;
  175. const StyledFormField = styled(TextField)`
  176. flex: 1;
  177. `;
  178. const DeleteButtonWrapper = styled('div')`
  179. margin-right: ${space(4)};
  180. padding-right: ${space(0.5)};
  181. `;