issueAlertNotificationOptions.tsx 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. import {Fragment, useCallback, useEffect, useMemo, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import MultipleCheckbox from 'sentry/components/forms/controls/multipleCheckbox';
  4. import {t, tct} from 'sentry/locale';
  5. import {space} from 'sentry/styles/space';
  6. import {type IntegrationAction, IssueAlertActionType} from 'sentry/types/alerts';
  7. import type {OrganizationIntegration} from 'sentry/types/integrations';
  8. import {useApiQuery} from 'sentry/utils/queryClient';
  9. import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
  10. import useApi from 'sentry/utils/useApi';
  11. import useOrganization from 'sentry/utils/useOrganization';
  12. import SetupMessagingIntegrationButton, {
  13. MessagingIntegrationAnalyticsView,
  14. } from 'sentry/views/alerts/rules/issue/setupMessagingIntegrationButton';
  15. import MessagingIntegrationAlertRule from 'sentry/views/projectInstall/messagingIntegrationAlertRule';
  16. export const providerDetails = {
  17. slack: {
  18. name: t('Slack'),
  19. action: IssueAlertActionType.SLACK,
  20. placeholder: t('channel, e.g. #critical'),
  21. makeSentence: ({providerName, integrationName, target}) =>
  22. tct(
  23. 'Send [providerName] notification to the [integrationName] workspace to [target]',
  24. {
  25. providerName,
  26. integrationName,
  27. target,
  28. }
  29. ),
  30. },
  31. discord: {
  32. name: t('Discord'),
  33. action: IssueAlertActionType.DISCORD,
  34. placeholder: t('channel ID or URL'),
  35. makeSentence: ({providerName, integrationName, target}) =>
  36. tct(
  37. 'Send [providerName] notification to the [integrationName] server in the channel [target]',
  38. {
  39. providerName,
  40. integrationName,
  41. target,
  42. }
  43. ),
  44. },
  45. msteams: {
  46. name: t('MS Teams'),
  47. action: IssueAlertActionType.MS_TEAMS,
  48. placeholder: t('channel ID'),
  49. makeSentence: ({providerName, integrationName, target}) =>
  50. tct('Send [providerName] notification to the [integrationName] team to [target]', {
  51. providerName,
  52. integrationName,
  53. target,
  54. }),
  55. },
  56. };
  57. export const enum MultipleCheckboxOptions {
  58. EMAIL = 'email',
  59. INTEGRATION = 'integration',
  60. }
  61. export type IssueAlertNotificationProps = {
  62. actions: MultipleCheckboxOptions[];
  63. channel: string | undefined;
  64. integration: OrganizationIntegration | undefined;
  65. provider: string | undefined;
  66. providersToIntegrations: Record<string, OrganizationIntegration[]>;
  67. querySuccess: boolean;
  68. setActions: (action: MultipleCheckboxOptions[]) => void;
  69. setChannel: (channel: string | undefined) => void;
  70. setIntegration: (integration: OrganizationIntegration | undefined) => void;
  71. setProvider: (provider: string | undefined) => void;
  72. shouldRenderSetupButton: boolean;
  73. };
  74. export function useCreateNotificationAction() {
  75. const api = useApi();
  76. const organization = useOrganization();
  77. const messagingIntegrationsQuery = useApiQuery<OrganizationIntegration[]>(
  78. [`/organizations/${organization.slug}/integrations/?integrationType=messaging`],
  79. {staleTime: 0, refetchOnWindowFocus: true}
  80. );
  81. const providersToIntegrations = useMemo(() => {
  82. const map: Record<string, OrganizationIntegration[]> = {};
  83. if (messagingIntegrationsQuery.data) {
  84. for (const i of messagingIntegrationsQuery.data) {
  85. if (i.status === 'active') {
  86. const providerSlug = i.provider.slug;
  87. map[providerSlug] = map[providerSlug] ?? [];
  88. map[providerSlug].push(i);
  89. }
  90. }
  91. }
  92. return map;
  93. }, [messagingIntegrationsQuery.data]);
  94. const [actions, setActions] = useState<MultipleCheckboxOptions[]>([
  95. MultipleCheckboxOptions.EMAIL,
  96. ]);
  97. const [provider, setProvider] = useState<string | undefined>(undefined);
  98. const [integration, setIntegration] = useState<OrganizationIntegration | undefined>(
  99. undefined
  100. );
  101. const [channel, setChannel] = useState<string | undefined>(undefined);
  102. const [shouldRenderSetupButton, setShouldRenderSetupButton] = useState<boolean>(false);
  103. useEffect(() => {
  104. if (messagingIntegrationsQuery.isSuccess) {
  105. const providerKeys = Object.keys(providersToIntegrations);
  106. const firstProvider = providerKeys[0] ?? undefined;
  107. const firstIntegration = providersToIntegrations[firstProvider]?.[0] ?? undefined;
  108. setProvider(firstProvider);
  109. setIntegration(firstIntegration);
  110. setShouldRenderSetupButton(!firstProvider);
  111. }
  112. }, [messagingIntegrationsQuery.isSuccess, providersToIntegrations]);
  113. type Props = {
  114. actionMatch: string | undefined;
  115. conditions: {id: string; interval: string; value: string}[] | undefined;
  116. frequency: number | undefined;
  117. name: string | undefined;
  118. projectSlug: string;
  119. shouldCreateRule: boolean | undefined;
  120. };
  121. const createNotificationAction = useCallback(
  122. ({
  123. shouldCreateRule,
  124. projectSlug,
  125. name,
  126. conditions,
  127. actionMatch,
  128. frequency,
  129. }: Props) => {
  130. const isCreatingIntegrationNotification = actions.find(
  131. action => action === MultipleCheckboxOptions.INTEGRATION
  132. );
  133. if (
  134. !organization.features.includes(
  135. 'messaging-integration-onboarding-project-creation'
  136. ) ||
  137. !shouldCreateRule ||
  138. !isCreatingIntegrationNotification
  139. ) {
  140. return undefined;
  141. }
  142. let integrationAction: IntegrationAction;
  143. switch (provider) {
  144. case 'slack':
  145. integrationAction = {
  146. id: IssueAlertActionType.SLACK,
  147. workspace: integration?.id,
  148. channel: channel,
  149. };
  150. break;
  151. case 'discord':
  152. integrationAction = {
  153. id: IssueAlertActionType.DISCORD,
  154. server: integration?.id,
  155. channel_id: channel,
  156. };
  157. break;
  158. case 'msteams':
  159. integrationAction = {
  160. id: IssueAlertActionType.MS_TEAMS,
  161. team: integration?.id,
  162. channel: channel,
  163. };
  164. break;
  165. default:
  166. return undefined;
  167. }
  168. return api.requestPromise(`/projects/${organization.slug}/${projectSlug}/rules/`, {
  169. method: 'POST',
  170. data: {
  171. name,
  172. conditions,
  173. actions: [integrationAction],
  174. actionMatch,
  175. frequency,
  176. },
  177. });
  178. },
  179. [
  180. actions,
  181. api,
  182. provider,
  183. integration,
  184. channel,
  185. organization.features,
  186. organization.slug,
  187. ]
  188. );
  189. return {
  190. createNotificationAction,
  191. notificationProps: {
  192. actions,
  193. provider,
  194. integration,
  195. channel,
  196. setActions,
  197. setProvider,
  198. setIntegration,
  199. setChannel,
  200. providersToIntegrations,
  201. querySuccess: messagingIntegrationsQuery.isSuccess,
  202. shouldRenderSetupButton,
  203. },
  204. };
  205. }
  206. export default function IssueAlertNotificationOptions(
  207. notificationProps: IssueAlertNotificationProps
  208. ) {
  209. const {actions, setActions, querySuccess, shouldRenderSetupButton} = notificationProps;
  210. const shouldRenderNotificationConfigs = actions.some(
  211. v => v !== MultipleCheckboxOptions.EMAIL
  212. );
  213. useRouteAnalyticsParams({
  214. setup_message_integration_button_shown: shouldRenderSetupButton,
  215. });
  216. if (!querySuccess) {
  217. return null;
  218. }
  219. return (
  220. <Fragment>
  221. <MultipleCheckbox
  222. name="notification"
  223. value={actions}
  224. onChange={values => setActions(values)}
  225. >
  226. <Wrapper>
  227. <MultipleCheckbox.Item value={MultipleCheckboxOptions.EMAIL} disabled>
  228. {t('Notify via email')}
  229. </MultipleCheckbox.Item>
  230. {!shouldRenderSetupButton && (
  231. <div>
  232. <MultipleCheckbox.Item value={MultipleCheckboxOptions.INTEGRATION}>
  233. {t('Notify via integration (Slack, Discord, MS Teams, etc.)')}
  234. </MultipleCheckbox.Item>
  235. {shouldRenderNotificationConfigs && (
  236. <MessagingIntegrationAlertRule {...notificationProps} />
  237. )}
  238. </div>
  239. )}
  240. </Wrapper>
  241. </MultipleCheckbox>
  242. {shouldRenderSetupButton && (
  243. <SetupMessagingIntegrationButton
  244. analyticsParams={{
  245. view: MessagingIntegrationAnalyticsView.ALERT_RULE_CREATION,
  246. }}
  247. />
  248. )}
  249. </Fragment>
  250. );
  251. }
  252. const Wrapper = styled('div')`
  253. display: flex;
  254. flex-direction: column;
  255. gap: ${space(1)};
  256. `;