index.tsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529
  1. import type {MouseEvent} from 'react';
  2. import {Fragment, useMemo} from 'react';
  3. import styled from '@emotion/styled';
  4. import type {Query} from 'history';
  5. import {bulkDelete, bulkUpdate} from 'sentry/actionCreators/group';
  6. import {addLoadingMessage, clearIndicators} from 'sentry/actionCreators/indicator';
  7. import type {ModalRenderProps} from 'sentry/actionCreators/modal';
  8. import {openModal, openReprocessEventModal} from 'sentry/actionCreators/modal';
  9. import type {Client} from 'sentry/api';
  10. import Feature from 'sentry/components/acl/feature';
  11. import FeatureDisabled from 'sentry/components/acl/featureDisabled';
  12. import ArchiveActions, {getArchiveActions} from 'sentry/components/actions/archive';
  13. import ActionButton from 'sentry/components/actions/button';
  14. import ResolveActions from 'sentry/components/actions/resolve';
  15. import GuideAnchor from 'sentry/components/assistant/guideAnchor';
  16. import {Button} from 'sentry/components/button';
  17. import {DropdownMenu} from 'sentry/components/dropdownMenu';
  18. import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
  19. import {IconEllipsis, IconSubscribed, IconUnsubscribed} from 'sentry/icons';
  20. import {t} from 'sentry/locale';
  21. import GroupStore from 'sentry/stores/groupStore';
  22. import IssueListCacheStore from 'sentry/stores/IssueListCacheStore';
  23. import {space} from 'sentry/styles/space';
  24. import type {
  25. Group,
  26. GroupStatusResolution,
  27. MarkReviewed,
  28. Organization,
  29. Project,
  30. SavedQueryVersions,
  31. } from 'sentry/types';
  32. import {GroupStatus, GroupSubstatus, IssueCategory} from 'sentry/types';
  33. import type {Event} from 'sentry/types/event';
  34. import {trackAnalytics} from 'sentry/utils/analytics';
  35. import {browserHistory} from 'sentry/utils/browserHistory';
  36. import {getUtcDateString} from 'sentry/utils/dates';
  37. import EventView from 'sentry/utils/discover/eventView';
  38. import {DiscoverDatasets} from 'sentry/utils/discover/types';
  39. import {displayReprocessEventAction} from 'sentry/utils/displayReprocessEventAction';
  40. import {getAnalyticsDataForGroup} from 'sentry/utils/events';
  41. import {uniqueId} from 'sentry/utils/guid';
  42. import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
  43. import {getAnalyicsDataForProject} from 'sentry/utils/projects';
  44. import withApi from 'sentry/utils/withApi';
  45. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  46. import withOrganization from 'sentry/utils/withOrganization';
  47. import {NewIssueExperienceButton} from 'sentry/views/issueDetails/actions/newIssueExperienceButton';
  48. import ShareIssueModal from './shareModal';
  49. import SubscribeAction from './subscribeAction';
  50. type UpdateData =
  51. | {isBookmarked: boolean}
  52. | {isSubscribed: boolean}
  53. | MarkReviewed
  54. | GroupStatusResolution;
  55. const isResolutionStatus = (data: UpdateData): data is GroupStatusResolution => {
  56. return (data as GroupStatusResolution).status !== undefined;
  57. };
  58. type Props = {
  59. api: Client;
  60. disabled: boolean;
  61. group: Group;
  62. organization: Organization;
  63. project: Project;
  64. event?: Event;
  65. query?: Query;
  66. };
  67. export function Actions(props: Props) {
  68. const {api, group, project, organization, disabled, event, query = {}} = props;
  69. const {status, isBookmarked} = group;
  70. const bookmarkKey = isBookmarked ? 'unbookmark' : 'bookmark';
  71. const bookmarkTitle = isBookmarked ? t('Remove bookmark') : t('Bookmark');
  72. const hasRelease = !!project.features?.includes('releases');
  73. const isResolved = status === 'resolved';
  74. const isAutoResolved =
  75. group.status === 'resolved' ? group.statusDetails.autoResolved : undefined;
  76. const isIgnored = status === 'ignored';
  77. const hasDeleteAccess = organization.access.includes('event:admin');
  78. const config = useMemo(() => getConfigForIssueType(group, project), [group, project]);
  79. const {
  80. actions: {
  81. archiveUntilOccurrence: archiveUntilOccurrenceCap,
  82. delete: deleteCap,
  83. deleteAndDiscard: deleteDiscardCap,
  84. share: shareCap,
  85. resolveInRelease: resolveInReleaseCap,
  86. },
  87. discover: discoverCap,
  88. } = config;
  89. const getDiscoverUrl = () => {
  90. const {title, type, shortId} = group;
  91. const groupIsOccurrenceBacked =
  92. group.issueCategory === IssueCategory.PERFORMANCE && !!event?.occurrence;
  93. const discoverQuery = {
  94. id: undefined,
  95. name: title || type,
  96. fields: ['title', 'release', 'environment', 'user.display', 'timestamp'],
  97. orderby: '-timestamp',
  98. query: `issue:${shortId}`,
  99. projects: [Number(project.id)],
  100. version: 2 as SavedQueryVersions,
  101. range: '90d',
  102. dataset:
  103. config.usesIssuePlatform || groupIsOccurrenceBacked
  104. ? DiscoverDatasets.ISSUE_PLATFORM
  105. : undefined,
  106. };
  107. const discoverView = EventView.fromSavedQuery(discoverQuery);
  108. return discoverView.getResultsViewUrlTarget(organization.slug);
  109. };
  110. const trackIssueAction = (
  111. action:
  112. | 'shared'
  113. | 'deleted'
  114. | 'bookmarked'
  115. | 'subscribed'
  116. | 'mark_reviewed'
  117. | 'discarded'
  118. | 'open_in_discover'
  119. | GroupStatus,
  120. substatus?: GroupSubstatus | null,
  121. statusDetailsKey?: string
  122. ) => {
  123. const {alert_date, alert_rule_id, alert_type} = query;
  124. trackAnalytics('issue_details.action_clicked', {
  125. organization,
  126. action_type: action,
  127. action_substatus: substatus ?? undefined,
  128. action_status_details: statusDetailsKey,
  129. // Alert properties track if the user came from email/slack alerts
  130. alert_date:
  131. typeof alert_date === 'string' ? getUtcDateString(Number(alert_date)) : undefined,
  132. alert_rule_id: typeof alert_rule_id === 'string' ? alert_rule_id : undefined,
  133. alert_type: typeof alert_type === 'string' ? alert_type : undefined,
  134. ...getAnalyticsDataForGroup(group),
  135. ...getAnalyicsDataForProject(project),
  136. });
  137. };
  138. const onDelete = () => {
  139. addLoadingMessage(t('Delete event\u2026'));
  140. bulkDelete(
  141. api,
  142. {
  143. orgId: organization.slug,
  144. projectId: project.slug,
  145. itemIds: [group.id],
  146. },
  147. {
  148. complete: () => {
  149. clearIndicators();
  150. browserHistory.push(
  151. normalizeUrl({
  152. pathname: `/organizations/${organization.slug}/issues/`,
  153. query: {project: project.id},
  154. })
  155. );
  156. },
  157. }
  158. );
  159. trackIssueAction('deleted');
  160. IssueListCacheStore.reset();
  161. };
  162. const onUpdate = (data: UpdateData) => {
  163. addLoadingMessage(t('Saving changes\u2026'));
  164. bulkUpdate(
  165. api,
  166. {
  167. orgId: organization.slug,
  168. projectId: project.slug,
  169. itemIds: [group.id],
  170. data,
  171. },
  172. {
  173. complete: clearIndicators,
  174. }
  175. );
  176. if (isResolutionStatus(data)) {
  177. trackIssueAction(
  178. data.status,
  179. data.substatus,
  180. Object.keys(data.statusDetails || {})[0]
  181. );
  182. }
  183. if ((data as {inbox: boolean}).inbox !== undefined) {
  184. trackIssueAction('mark_reviewed');
  185. }
  186. IssueListCacheStore.reset();
  187. };
  188. const onReprocessEvent = () => {
  189. openReprocessEventModal({organization, groupId: group.id});
  190. };
  191. const onToggleShare = () => {
  192. const newIsPublic = !group.isPublic;
  193. if (newIsPublic) {
  194. trackAnalytics('issue.shared_publicly', {
  195. organization,
  196. });
  197. }
  198. trackIssueAction('shared');
  199. };
  200. const onToggleBookmark = () => {
  201. onUpdate({isBookmarked: !group.isBookmarked});
  202. trackIssueAction('bookmarked');
  203. };
  204. const onToggleSubscribe = () => {
  205. onUpdate({isSubscribed: !group.isSubscribed});
  206. trackIssueAction('subscribed');
  207. };
  208. const onDiscard = () => {
  209. const id = uniqueId();
  210. addLoadingMessage(t('Discarding event\u2026'));
  211. GroupStore.onDiscard(id, group.id);
  212. api.request(`/issues/${group.id}/`, {
  213. method: 'PUT',
  214. data: {discard: true},
  215. success: response => {
  216. GroupStore.onDiscardSuccess(id, group.id, response);
  217. browserHistory.push(
  218. normalizeUrl({
  219. pathname: `/organizations/${organization.slug}/issues/`,
  220. query: {project: project.id},
  221. })
  222. );
  223. },
  224. error: error => {
  225. GroupStore.onDiscardError(id, group.id, error);
  226. },
  227. complete: clearIndicators,
  228. });
  229. trackIssueAction('discarded');
  230. IssueListCacheStore.reset();
  231. };
  232. const renderDiscardModal = ({Body, Footer, closeModal}: ModalRenderProps) => {
  233. function renderDiscardDisabled({children, ...innerProps}) {
  234. return children({
  235. ...innerProps,
  236. renderDisabled: ({features}: {features: string[]}) => (
  237. <FeatureDisabled
  238. alert
  239. featureName={t('Discard and Delete')}
  240. features={features}
  241. />
  242. ),
  243. });
  244. }
  245. return (
  246. <Feature
  247. features="projects:discard-groups"
  248. hookName="feature-disabled:discard-groups"
  249. organization={organization}
  250. project={project}
  251. renderDisabled={renderDiscardDisabled}
  252. >
  253. {({hasFeature, renderDisabled, ...innerProps}) => (
  254. <Fragment>
  255. <Body>
  256. {!hasFeature &&
  257. typeof renderDisabled === 'function' &&
  258. renderDisabled({...innerProps, hasFeature, children: null})}
  259. {t(
  260. `Discarding this event will result in the deletion of most data associated with this issue and future events being discarded before reaching your stream. Are you sure you wish to continue?`
  261. )}
  262. </Body>
  263. <Footer>
  264. <Button onClick={closeModal}>{t('Cancel')}</Button>
  265. <Button
  266. style={{marginLeft: space(1)}}
  267. priority="primary"
  268. onClick={onDiscard}
  269. disabled={!hasFeature}
  270. >
  271. {t('Discard Future Events')}
  272. </Button>
  273. </Footer>
  274. </Fragment>
  275. )}
  276. </Feature>
  277. );
  278. };
  279. const openDeleteModal = () =>
  280. openModal(({Body, Footer, closeModal}: ModalRenderProps) => (
  281. <Fragment>
  282. <Body>
  283. {t('Deleting this issue is permanent. Are you sure you wish to continue?')}
  284. </Body>
  285. <Footer>
  286. <Button onClick={closeModal}>{t('Cancel')}</Button>
  287. <Button style={{marginLeft: space(1)}} priority="primary" onClick={onDelete}>
  288. {t('Delete')}
  289. </Button>
  290. </Footer>
  291. </Fragment>
  292. ));
  293. const openDiscardModal = () => {
  294. openModal(renderDiscardModal);
  295. };
  296. const openShareModal = () => {
  297. openModal(modalProps => (
  298. <ShareIssueModal
  299. {...modalProps}
  300. organization={organization}
  301. projectSlug={group.project.slug}
  302. groupId={group.id}
  303. onToggle={onToggleShare}
  304. />
  305. ));
  306. };
  307. const handleClick = (onClick: (event?: MouseEvent) => void) => {
  308. return function (innerEvent: MouseEvent) {
  309. if (disabled) {
  310. innerEvent.preventDefault();
  311. innerEvent.stopPropagation();
  312. return;
  313. }
  314. onClick(innerEvent);
  315. };
  316. };
  317. const {dropdownItems: archiveDropdownItems} = getArchiveActions({
  318. onUpdate,
  319. });
  320. return (
  321. <ActionWrapper>
  322. <DropdownMenu
  323. triggerProps={{
  324. 'aria-label': t('More Actions'),
  325. icon: <IconEllipsis />,
  326. showChevron: false,
  327. size: 'sm',
  328. }}
  329. items={[
  330. ...(isIgnored
  331. ? []
  332. : [
  333. {
  334. key: 'Archive',
  335. className: 'hidden-sm hidden-md hidden-lg',
  336. label: t('Archive'),
  337. isSubmenu: true,
  338. disabled,
  339. children: archiveDropdownItems,
  340. },
  341. ]),
  342. {
  343. key: 'open-in-discover',
  344. className: 'hidden-sm hidden-md hidden-lg',
  345. label: t('Open in Discover'),
  346. to: disabled ? '' : getDiscoverUrl(),
  347. onAction: () => trackIssueAction('open_in_discover'),
  348. },
  349. {
  350. key: group.isSubscribed ? 'unsubscribe' : 'subscribe',
  351. className: 'hidden-sm hidden-md hidden-lg',
  352. label: group.isSubscribed ? t('Unsubscribe') : t('Subscribe'),
  353. disabled: disabled || group.subscriptionDetails?.disabled,
  354. onAction: onToggleSubscribe,
  355. },
  356. {
  357. key: 'mark-review',
  358. label: t('Mark reviewed'),
  359. disabled: !group.inbox || disabled,
  360. details: !group.inbox || disabled ? t('Issue has been reviewed') : undefined,
  361. onAction: () => onUpdate({inbox: false}),
  362. },
  363. {
  364. key: 'share',
  365. label: t('Share'),
  366. disabled: disabled || !shareCap.enabled,
  367. hidden: !organization.features.includes('shared-issues'),
  368. onAction: openShareModal,
  369. },
  370. {
  371. key: bookmarkKey,
  372. label: bookmarkTitle,
  373. onAction: onToggleBookmark,
  374. },
  375. {
  376. key: 'reprocess',
  377. label: t('Reprocess events'),
  378. hidden: !displayReprocessEventAction(event),
  379. onAction: onReprocessEvent,
  380. },
  381. {
  382. key: 'delete-issue',
  383. priority: 'danger',
  384. label: t('Delete'),
  385. hidden: !hasDeleteAccess,
  386. disabled: !deleteCap.enabled,
  387. details: deleteCap.disabledReason,
  388. onAction: openDeleteModal,
  389. },
  390. {
  391. key: 'delete-and-discard',
  392. priority: 'danger',
  393. label: t('Delete and discard future events'),
  394. hidden: !hasDeleteAccess,
  395. disabled: !deleteDiscardCap.enabled,
  396. details: deleteDiscardCap.disabledReason,
  397. onAction: openDiscardModal,
  398. },
  399. ]}
  400. />
  401. {organization.features.includes('issue-details-new-experience-toggle') ? (
  402. <NewIssueExperienceButton />
  403. ) : null}
  404. <SubscribeAction
  405. className="hidden-xs"
  406. disabled={disabled}
  407. disablePriority
  408. group={group}
  409. onClick={handleClick(onToggleSubscribe)}
  410. icon={group.isSubscribed ? <IconSubscribed /> : <IconUnsubscribed />}
  411. size="sm"
  412. />
  413. <div className="hidden-xs">
  414. <EnvironmentPageFilter position="bottom-end" size="sm" />
  415. </div>
  416. {discoverCap.enabled && (
  417. <Feature
  418. hookName="feature-disabled:open-in-discover"
  419. features="discover-basic"
  420. organization={organization}
  421. >
  422. <ActionButton
  423. className="hidden-xs"
  424. disabled={disabled}
  425. to={disabled ? '' : getDiscoverUrl()}
  426. onClick={() => trackIssueAction('open_in_discover')}
  427. size="sm"
  428. >
  429. <GuideAnchor target="open_in_discover">{t('Open in Discover')}</GuideAnchor>
  430. </ActionButton>
  431. </Feature>
  432. )}
  433. {isResolved || isIgnored ? (
  434. <ActionButton
  435. priority="primary"
  436. title={
  437. isAutoResolved
  438. ? t(
  439. 'This event is resolved due to the Auto Resolve configuration for this project'
  440. )
  441. : t('Change status to unresolved')
  442. }
  443. size="sm"
  444. disabled={disabled || isAutoResolved}
  445. onClick={() =>
  446. onUpdate({
  447. status: GroupStatus.UNRESOLVED,
  448. statusDetails: {},
  449. substatus: GroupSubstatus.ONGOING,
  450. })
  451. }
  452. >
  453. {isIgnored ? t('Archived') : t('Resolved')}
  454. </ActionButton>
  455. ) : (
  456. <Fragment>
  457. <ArchiveActions
  458. className="hidden-xs"
  459. size="sm"
  460. isArchived={isIgnored}
  461. onUpdate={onUpdate}
  462. disabled={disabled}
  463. disableArchiveUntilOccurrence={!archiveUntilOccurrenceCap.enabled}
  464. />
  465. <GuideAnchor target="resolve" position="bottom" offset={20}>
  466. <ResolveActions
  467. disableResolveInRelease={!resolveInReleaseCap.enabled}
  468. disabled={disabled}
  469. disableDropdown={disabled}
  470. hasRelease={hasRelease}
  471. latestRelease={project.latestRelease}
  472. onUpdate={onUpdate}
  473. projectSlug={project.slug}
  474. isResolved={isResolved}
  475. isAutoResolved={isAutoResolved}
  476. size="sm"
  477. priority="primary"
  478. />
  479. </GuideAnchor>
  480. </Fragment>
  481. )}
  482. </ActionWrapper>
  483. );
  484. }
  485. const ActionWrapper = styled('div')`
  486. display: flex;
  487. align-items: center;
  488. gap: ${space(0.5)};
  489. `;
  490. export default withApi(withOrganization(Actions));