groupActivityItem.tsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import moment from 'moment';
  4. import CommitLink from 'sentry/components/commitLink';
  5. import DateTime from 'sentry/components/dateTime';
  6. import Duration from 'sentry/components/duration';
  7. import ExternalLink from 'sentry/components/links/externalLink';
  8. import Link from 'sentry/components/links/link';
  9. import PullRequestLink from 'sentry/components/pullRequestLink';
  10. import Version from 'sentry/components/version';
  11. import {t, tct, tn} from 'sentry/locale';
  12. import type {
  13. Group,
  14. GroupActivity,
  15. GroupActivityAssigned,
  16. GroupActivitySetEscalating,
  17. GroupActivitySetIgnored,
  18. Organization,
  19. Project,
  20. User,
  21. } from 'sentry/types';
  22. import {GroupActivityType} from 'sentry/types';
  23. import {isSemverRelease} from 'sentry/utils/formatters';
  24. import {useTeamsById} from 'sentry/utils/useTeamsById';
  25. interface AssignedMessageProps {
  26. activity: GroupActivityAssigned;
  27. author: React.ReactNode;
  28. issueType: string;
  29. }
  30. function AssignedMessage({activity, author, issueType}: AssignedMessageProps) {
  31. const {data} = activity;
  32. let assignee: string | User | undefined = undefined;
  33. const {teams} = useTeamsById(
  34. data.assigneeType === 'team' ? {ids: [data.assignee]} : undefined
  35. );
  36. if (data.assigneeType === 'team') {
  37. const team = teams.find(({id}) => id === data.assignee);
  38. // TODO: could show a loading indicator if the team is loading
  39. assignee = team ? `#${team.slug}` : '<unknown-team>';
  40. } else if (activity.user && data.assignee === activity.user.id) {
  41. assignee = t('themselves');
  42. } else if (data.assigneeType === 'user' && data.assigneeEmail) {
  43. assignee = data.assigneeEmail;
  44. } else {
  45. assignee = t('an unknown user');
  46. }
  47. const isAutoAssigned = ['projectOwnership', 'codeowners', 'suspectCommitter'].includes(
  48. data.integration as string
  49. );
  50. const integrationName: Record<
  51. NonNullable<GroupActivityAssigned['data']['integration']>,
  52. string
  53. > = {
  54. msteams: t('Microsoft Teams'),
  55. slack: t('Slack'),
  56. projectOwnership: t('Ownership Rule'),
  57. codeowners: t('Codeowners Rule'),
  58. suspectCommitter: t('Suspect Commit'),
  59. };
  60. return (
  61. <Fragment>
  62. <div>
  63. {tct('[author] [action] this [issueType] to [assignee]', {
  64. action: isAutoAssigned ? t('auto-assigned') : t('assigned'),
  65. author,
  66. assignee,
  67. issueType,
  68. })}
  69. </div>
  70. {data.integration && integrationName[data.integration] && (
  71. <CodeWrapper>
  72. {t('Assigned via %s', integrationName[data.integration])}
  73. {data.rule && (
  74. <Fragment>
  75. : <StyledRuleSpan>{data.rule}</StyledRuleSpan>
  76. </Fragment>
  77. )}
  78. </CodeWrapper>
  79. )}
  80. </Fragment>
  81. );
  82. }
  83. interface GroupActivityItemProps {
  84. activity: GroupActivity;
  85. author: React.ReactNode;
  86. group: Group;
  87. organization: Organization;
  88. projectId: Project['id'];
  89. }
  90. function GroupActivityItem({
  91. activity,
  92. organization,
  93. projectId,
  94. author,
  95. group,
  96. }: GroupActivityItemProps) {
  97. const issuesLink = `/organizations/${organization.slug}/issues/`;
  98. const isFeedback = (group.issueCategory as string) === 'feedback';
  99. const issueType = isFeedback ? t('feedback') : t('issue');
  100. function getIgnoredMessage(data: GroupActivitySetIgnored['data']) {
  101. const archived = t('archived');
  102. if (data.ignoreDuration) {
  103. return tct('[author] [action] this issue for [duration]', {
  104. author,
  105. action: archived,
  106. duration: <Duration seconds={data.ignoreDuration * 60} />,
  107. });
  108. }
  109. if (data.ignoreCount && data.ignoreWindow) {
  110. return tct(
  111. '[author] [action] this issue until it happens [count] time(s) in [duration]',
  112. {
  113. author,
  114. action: archived,
  115. count: data.ignoreCount,
  116. duration: <Duration seconds={data.ignoreWindow * 60} />,
  117. }
  118. );
  119. }
  120. if (data.ignoreCount) {
  121. return tct('[author] [action] this issue until it happens [count] time(s)', {
  122. author,
  123. action: archived,
  124. count: data.ignoreCount,
  125. });
  126. }
  127. if (data.ignoreUserCount && data.ignoreUserWindow) {
  128. return tct(
  129. '[author] [action] this issue until it affects [count] user(s) in [duration]',
  130. {
  131. author,
  132. action: archived,
  133. count: data.ignoreUserCount,
  134. duration: <Duration seconds={data.ignoreUserWindow * 60} />,
  135. }
  136. );
  137. }
  138. if (data.ignoreUserCount) {
  139. return tct('[author] [action] this issue until it affects [count] user(s)', {
  140. author,
  141. action: archived,
  142. count: data.ignoreUserCount,
  143. });
  144. }
  145. if (data.ignoreUntil) {
  146. return tct('[author] [action] this issue until [date]', {
  147. author,
  148. action: archived,
  149. date: <DateTime date={data.ignoreUntil} />,
  150. });
  151. }
  152. if (data.ignoreUntilEscalating) {
  153. return tct('[author] archived this issue until it escalates', {
  154. author,
  155. });
  156. }
  157. return isFeedback
  158. ? tct('[author] marked this feedback as spam', {
  159. author,
  160. })
  161. : tct('[author] [action] this issue forever', {
  162. author,
  163. action: archived,
  164. });
  165. }
  166. function getEscalatingMessage(data: GroupActivitySetEscalating['data']) {
  167. if (data.forecast) {
  168. return tct(
  169. '[author] flagged this issue as escalating because over [forecast] [event] happened in an hour',
  170. {
  171. author,
  172. forecast: data.forecast,
  173. event: data.forecast === 1 ? 'event' : 'events',
  174. }
  175. );
  176. }
  177. if (data.expired_snooze) {
  178. if (data.expired_snooze.count && data.expired_snooze.window) {
  179. return tct(
  180. '[author] flagged this issue as escalating because [count] [event] happened in [duration]',
  181. {
  182. author,
  183. count: data.expired_snooze.count,
  184. event: data.expired_snooze.count === 1 ? 'event' : 'events',
  185. duration: <Duration seconds={data.expired_snooze.window * 60} />,
  186. }
  187. );
  188. }
  189. if (data.expired_snooze.count) {
  190. return tct(
  191. '[author] flagged this issue as escalating because [count] [event] happened',
  192. {
  193. author,
  194. count: data.expired_snooze.count,
  195. event: data.expired_snooze.count === 1 ? 'event' : 'events',
  196. }
  197. );
  198. }
  199. if (data.expired_snooze.user_count && data.expired_snooze.user_window) {
  200. return tct(
  201. '[author] flagged this issue as escalating because [count] [user] affected in [duration]',
  202. {
  203. author,
  204. count: data.expired_snooze.user_count,
  205. user: data.expired_snooze.user_count === 1 ? 'user was' : 'users were',
  206. duration: <Duration seconds={data.expired_snooze.user_window * 60} />,
  207. }
  208. );
  209. }
  210. if (data.expired_snooze.user_count) {
  211. return tct(
  212. '[author] flagged this issue as escalating because [count] [user] affected',
  213. {
  214. author,
  215. count: data.expired_snooze.user_count,
  216. user: data.expired_snooze.user_count === 1 ? 'user was' : 'users were',
  217. }
  218. );
  219. }
  220. if (data.expired_snooze.until) {
  221. return tct('[author] flagged this issue as escalating because [date] passed', {
  222. author,
  223. date: <DateTime date={data.expired_snooze.until} />,
  224. });
  225. }
  226. }
  227. return tct('[author] flagged this issue as escalating', {author}); // should not reach this
  228. }
  229. function renderContent() {
  230. switch (activity.type) {
  231. case GroupActivityType.NOTE:
  232. return tct('[author] left a comment', {author});
  233. case GroupActivityType.SET_RESOLVED:
  234. if ('integration_id' in activity.data && activity.data.integration_id) {
  235. return tct('[author] marked this [issueType] as resolved via [integration]', {
  236. integration: (
  237. <Link
  238. to={`/settings/${organization.slug}/integrations/${activity.data.provider_key}/${activity.data.integration_id}/`}
  239. >
  240. {activity.data.provider}
  241. </Link>
  242. ),
  243. author,
  244. issueType,
  245. });
  246. }
  247. return tct('[author] marked this [issueType] as resolved', {author, issueType});
  248. case GroupActivityType.SET_RESOLVED_BY_AGE:
  249. return tct('[author] marked this issue as resolved due to inactivity', {
  250. author,
  251. });
  252. case GroupActivityType.SET_RESOLVED_IN_RELEASE:
  253. // Resolved in the next release
  254. if ('current_release_version' in activity.data) {
  255. const currentVersion = activity.data.current_release_version;
  256. return tct(
  257. '[author] marked this issue as resolved in releases greater than [version] [semver]',
  258. {
  259. author,
  260. version: (
  261. <Version
  262. version={currentVersion}
  263. projectId={projectId}
  264. tooltipRawVersion
  265. />
  266. ),
  267. semver: isSemverRelease(currentVersion) ? t('(semver)') : t('(non-semver)'),
  268. }
  269. );
  270. }
  271. const version = activity.data.version;
  272. return version
  273. ? tct('[author] marked this issue as resolved in [version] [semver]', {
  274. author,
  275. version: (
  276. <Version version={version} projectId={projectId} tooltipRawVersion />
  277. ),
  278. semver: isSemverRelease(version) ? t('(semver)') : t('(non-semver)'),
  279. })
  280. : tct('[author] marked this issue as resolved in the upcoming release', {
  281. author,
  282. });
  283. case GroupActivityType.SET_RESOLVED_IN_COMMIT:
  284. const deployedReleases = (activity.data.commit?.releases || [])
  285. .filter(r => r.dateReleased !== null)
  286. .sort(
  287. (a, b) => moment(a.dateReleased).valueOf() - moment(b.dateReleased).valueOf()
  288. );
  289. if (deployedReleases.length === 1 && activity.data.commit) {
  290. return tct(
  291. '[author] marked this issue as resolved in [version] [break]This commit was released in [release]',
  292. {
  293. author,
  294. version: (
  295. <CommitLink
  296. inline
  297. commitId={activity.data.commit.id}
  298. repository={activity.data.commit.repository}
  299. />
  300. ),
  301. break: <br />,
  302. release: (
  303. <Version
  304. version={deployedReleases[0].version}
  305. projectId={projectId}
  306. tooltipRawVersion
  307. />
  308. ),
  309. }
  310. );
  311. }
  312. if (deployedReleases.length > 1 && activity.data.commit) {
  313. return tct(
  314. '[author] marked this issue as resolved in [version] [break]This commit was released in [release] and [otherCount] others',
  315. {
  316. author,
  317. otherCount: deployedReleases.length - 1,
  318. version: (
  319. <CommitLink
  320. inline
  321. commitId={activity.data.commit.id}
  322. repository={activity.data.commit.repository}
  323. />
  324. ),
  325. break: <br />,
  326. release: (
  327. <Version
  328. version={deployedReleases[0].version}
  329. projectId={projectId}
  330. tooltipRawVersion
  331. />
  332. ),
  333. }
  334. );
  335. }
  336. if (activity.data.commit) {
  337. return tct('[author] marked this issue as resolved in [commit]', {
  338. author,
  339. commit: (
  340. <CommitLink
  341. inline
  342. commitId={activity.data.commit.id}
  343. repository={activity.data.commit.repository}
  344. />
  345. ),
  346. });
  347. }
  348. return tct('[author] marked this issue as resolved in a commit', {author});
  349. case GroupActivityType.SET_RESOLVED_IN_PULL_REQUEST: {
  350. const {data} = activity;
  351. const {pullRequest} = data;
  352. return tct('[author] has created a PR for this issue: [pullRequest]', {
  353. author,
  354. pullRequest: pullRequest ? (
  355. <PullRequestLink
  356. inline
  357. pullRequest={pullRequest}
  358. repository={pullRequest.repository}
  359. />
  360. ) : (
  361. t('PR not available')
  362. ),
  363. });
  364. }
  365. case GroupActivityType.SET_UNRESOLVED: {
  366. // TODO(nisanthan): Remove after migrating records to SET_ESCALATING
  367. const {data} = activity;
  368. if ('forecast' in data && data.forecast) {
  369. return tct(
  370. '[author] flagged this issue as escalating because over [forecast] [event] happened in an hour',
  371. {
  372. author,
  373. forecast: data.forecast,
  374. event: data.forecast === 1 ? 'event' : 'events',
  375. }
  376. );
  377. }
  378. if ('integration_id' in data && data.integration_id) {
  379. return tct('[author] marked this [issueType] as unresolved via [integration]', {
  380. integration: (
  381. <Link
  382. to={`/settings/${organization.slug}/integrations/${data.provider_key}/${data.integration_id}/`}
  383. >
  384. {data.provider}
  385. </Link>
  386. ),
  387. author,
  388. issueType,
  389. });
  390. }
  391. return tct('[author] marked this [issueType] as unresolved', {author, issueType});
  392. }
  393. case GroupActivityType.SET_IGNORED: {
  394. const {data} = activity;
  395. return getIgnoredMessage(data);
  396. }
  397. case GroupActivityType.SET_PUBLIC:
  398. return tct('[author] made this issue public', {author});
  399. case GroupActivityType.SET_PRIVATE:
  400. return tct('[author] made this issue private', {author});
  401. case GroupActivityType.SET_REGRESSION: {
  402. const {data} = activity;
  403. let subtext: React.ReactNode = null;
  404. if (data.version && data.resolved_in_version && 'follows_semver' in data) {
  405. subtext = (
  406. <Subtext>
  407. {tct(
  408. '[regressionVersion] is greater than or equal to [resolvedVersion] compared via [comparison]',
  409. {
  410. regressionVersion: (
  411. <Version
  412. version={data.version}
  413. projectId={projectId}
  414. tooltipRawVersion
  415. />
  416. ),
  417. resolvedVersion: (
  418. <Version
  419. version={data.resolved_in_version}
  420. projectId={projectId}
  421. tooltipRawVersion
  422. />
  423. ),
  424. comparison: data.follows_semver ? t('semver') : t('release date'),
  425. }
  426. )}
  427. </Subtext>
  428. );
  429. }
  430. return data.version ? (
  431. <Fragment>
  432. {tct('[author] marked this issue as a regression in [version]', {
  433. author,
  434. version: (
  435. <Version version={data.version} projectId={projectId} tooltipRawVersion />
  436. ),
  437. })}
  438. {subtext}
  439. </Fragment>
  440. ) : (
  441. <Fragment>
  442. {tct('[author] marked this issue as a regression', {
  443. author,
  444. })}
  445. {subtext}
  446. </Fragment>
  447. );
  448. }
  449. case GroupActivityType.CREATE_ISSUE: {
  450. const {data} = activity;
  451. return tct('[author] created an issue on [provider] titled [title]', {
  452. author,
  453. provider: data.provider,
  454. title: <ExternalLink href={data.location}>{data.title}</ExternalLink>,
  455. });
  456. }
  457. case GroupActivityType.UNMERGE_SOURCE: {
  458. const {data} = activity;
  459. const {destination, fingerprints} = data;
  460. return tn(
  461. '%2$s migrated %1$s fingerprint to %3$s',
  462. '%2$s migrated %1$s fingerprints to %3$s',
  463. fingerprints.length,
  464. author,
  465. destination ? (
  466. <Link
  467. to={`${issuesLink}${destination.id}?referrer=group-activity-unmerged-source`}
  468. >
  469. {destination.shortId}
  470. </Link>
  471. ) : (
  472. t('a group')
  473. )
  474. );
  475. }
  476. case GroupActivityType.UNMERGE_DESTINATION: {
  477. const {data} = activity;
  478. const {source, fingerprints} = data;
  479. return tn(
  480. '%2$s migrated %1$s fingerprint from %3$s',
  481. '%2$s migrated %1$s fingerprints from %3$s',
  482. fingerprints.length,
  483. author,
  484. source ? (
  485. <Link
  486. to={`${issuesLink}${source.id}?referrer=group-activity-unmerged-destination`}
  487. >
  488. {source.shortId}
  489. </Link>
  490. ) : (
  491. t('a group')
  492. )
  493. );
  494. }
  495. case GroupActivityType.FIRST_SEEN:
  496. if (
  497. organization.features.includes('issue-priority-ui') &&
  498. activity.data.priority
  499. ) {
  500. return tct(
  501. '[author] first saw this issue and marked it as [priority] priority',
  502. {author, priority: activity.data.priority}
  503. );
  504. }
  505. return tct('[author] first saw this issue', {author});
  506. case GroupActivityType.ASSIGNED: {
  507. return (
  508. <AssignedMessage activity={activity} author={author} issueType={issueType} />
  509. );
  510. }
  511. case GroupActivityType.UNASSIGNED:
  512. return tct('[author] unassigned this [issueType]', {author, issueType});
  513. case GroupActivityType.MERGE:
  514. return tn(
  515. '%2$s merged %1$s issue into this issue',
  516. '%2$s merged %1$s issues into this issue',
  517. activity.data.issues.length,
  518. author
  519. );
  520. case GroupActivityType.REPROCESS: {
  521. const {data} = activity;
  522. const {oldGroupId, eventCount} = data;
  523. return tct('[author] reprocessed the events in this issue. [new-events]', {
  524. author,
  525. ['new-events']: (
  526. <Link
  527. to={`/organizations/${organization.slug}/issues/?query=reprocessing.original_issue_id:${oldGroupId}&referrer=group-activity-reprocesses`}
  528. >
  529. {tn('See %s new event', 'See %s new events', eventCount)}
  530. </Link>
  531. ),
  532. });
  533. }
  534. case GroupActivityType.MARK_REVIEWED: {
  535. return tct('[author] marked this issue as reviewed', {
  536. author,
  537. });
  538. }
  539. case GroupActivityType.AUTO_SET_ONGOING: {
  540. return activity.data?.afterDays
  541. ? tct(
  542. '[author] automatically marked this issue as ongoing after [afterDays] days',
  543. {author, afterDays: activity.data.afterDays}
  544. )
  545. : tct('[author] automatically marked this issue as ongoing', {
  546. author,
  547. });
  548. }
  549. case GroupActivityType.SET_ESCALATING: {
  550. return getEscalatingMessage(activity.data);
  551. }
  552. case GroupActivityType.SET_PRIORITY: {
  553. const {data} = activity;
  554. switch (data.reason) {
  555. case 'escalating':
  556. return tct(
  557. '[author] updated the priority value of this issue to be [priority] after it escalated',
  558. {author, priority: data.priority}
  559. );
  560. case 'ongoing':
  561. return tct(
  562. '[author] updated the priority value of this issue to be [priority] after it was marked as ongoing',
  563. {author, priority: data.priority}
  564. );
  565. default:
  566. return tct(
  567. '[author] updated the priority value of this issue to be [priority]',
  568. {author, priority: data.priority}
  569. );
  570. }
  571. }
  572. default:
  573. return ''; // should never hit (?)
  574. }
  575. }
  576. return <Fragment>{renderContent()}</Fragment>;
  577. }
  578. export default GroupActivityItem;
  579. const Subtext = styled('div')`
  580. font-size: ${p => p.theme.fontSizeSmall};
  581. `;
  582. const CodeWrapper = styled('div')`
  583. overflow-wrap: anywhere;
  584. font-size: ${p => p.theme.fontSizeSmall};
  585. `;
  586. const StyledRuleSpan = styled('span')`
  587. font-family: ${p => p.theme.text.familyMono};
  588. `;