resolve.tsx 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. import {css} from '@emotion/react';
  2. import styled from '@emotion/styled';
  3. import {openModal} from 'sentry/actionCreators/modal';
  4. import {Button} from 'sentry/components/button';
  5. import ButtonBar from 'sentry/components/buttonBar';
  6. import {openConfirmModal} from 'sentry/components/confirm';
  7. import CustomCommitsResolutionModal from 'sentry/components/customCommitsResolutionModal';
  8. import CustomResolutionModal from 'sentry/components/customResolutionModal';
  9. import {DropdownMenu, MenuItemProps} from 'sentry/components/dropdownMenu';
  10. import {Tooltip} from 'sentry/components/tooltip';
  11. import {IconChevron} from 'sentry/icons';
  12. import {t} from 'sentry/locale';
  13. import {
  14. GroupStatusResolution,
  15. Project,
  16. ResolutionStatus,
  17. ResolutionStatusDetails,
  18. } from 'sentry/types';
  19. import {trackAnalytics} from 'sentry/utils/analytics';
  20. import {formatVersion, isSemverRelease} from 'sentry/utils/formatters';
  21. import useOrganization from 'sentry/utils/useOrganization';
  22. export interface ResolveActionsProps {
  23. hasRelease: boolean;
  24. onUpdate: (data: GroupStatusResolution) => void;
  25. confirmLabel?: string;
  26. confirmMessage?: React.ReactNode;
  27. disableDropdown?: boolean;
  28. disabled?: boolean;
  29. isAutoResolved?: boolean;
  30. isResolved?: boolean;
  31. latestRelease?: Project['latestRelease'];
  32. priority?: 'primary';
  33. projectFetchError?: boolean;
  34. projectSlug?: string;
  35. shouldConfirm?: boolean;
  36. size?: 'xs' | 'sm';
  37. }
  38. function ResolveActions({
  39. size = 'xs',
  40. isResolved = false,
  41. isAutoResolved = false,
  42. confirmLabel = t('Resolve'),
  43. projectSlug,
  44. hasRelease,
  45. latestRelease,
  46. confirmMessage,
  47. shouldConfirm,
  48. disabled,
  49. disableDropdown,
  50. priority,
  51. projectFetchError,
  52. onUpdate,
  53. }: ResolveActionsProps) {
  54. const organization = useOrganization();
  55. function handleCommitResolution(statusDetails: ResolutionStatusDetails) {
  56. onUpdate({
  57. status: ResolutionStatus.RESOLVED,
  58. statusDetails,
  59. });
  60. }
  61. function handleAnotherExistingReleaseResolution(
  62. statusDetails: ResolutionStatusDetails
  63. ) {
  64. onUpdate({
  65. status: ResolutionStatus.RESOLVED,
  66. statusDetails,
  67. });
  68. trackAnalytics('resolve_issue', {
  69. organization,
  70. release: 'anotherExisting',
  71. });
  72. }
  73. function handleCurrentReleaseResolution() {
  74. if (hasRelease) {
  75. onUpdate({
  76. status: ResolutionStatus.RESOLVED,
  77. statusDetails: {
  78. inRelease: latestRelease ? latestRelease.version : 'latest',
  79. },
  80. });
  81. }
  82. trackAnalytics('resolve_issue', {
  83. organization,
  84. release: 'current',
  85. });
  86. }
  87. function handleNextReleaseResolution() {
  88. if (hasRelease) {
  89. onUpdate({
  90. status: ResolutionStatus.RESOLVED,
  91. statusDetails: {
  92. inNextRelease: true,
  93. },
  94. });
  95. }
  96. trackAnalytics('resolve_issue', {
  97. organization,
  98. release: 'next',
  99. });
  100. }
  101. function renderResolved() {
  102. return (
  103. <Tooltip
  104. title={
  105. isAutoResolved
  106. ? t(
  107. 'This event is resolved due to the Auto Resolve configuration for this project'
  108. )
  109. : t('Unresolve')
  110. }
  111. >
  112. <Button
  113. priority="primary"
  114. size="xs"
  115. aria-label={t('Unresolve')}
  116. disabled={isAutoResolved}
  117. onClick={() =>
  118. onUpdate({status: ResolutionStatus.UNRESOLVED, statusDetails: {}})
  119. }
  120. />
  121. </Tooltip>
  122. );
  123. }
  124. function renderDropdownMenu() {
  125. if (isResolved) {
  126. return renderResolved();
  127. }
  128. const actionTitle = !hasRelease
  129. ? t('Set up release tracking in order to use this feature.')
  130. : '';
  131. const onActionOrConfirm = (onAction: () => void) => {
  132. openConfirmModal({
  133. bypass: !shouldConfirm,
  134. onConfirm: onAction,
  135. message: confirmMessage,
  136. confirmText: confirmLabel,
  137. });
  138. };
  139. const isSemver = latestRelease ? isSemverRelease(latestRelease.version) : false;
  140. const hasIssueResolveSemver = organization.features.includes('issue-resolve-semver');
  141. const items: MenuItemProps[] = [
  142. {
  143. key: 'next-release',
  144. label: t('The next release'),
  145. details: actionTitle,
  146. onAction: () => onActionOrConfirm(handleNextReleaseResolution),
  147. },
  148. {
  149. key: 'current-release',
  150. label:
  151. hasIssueResolveSemver || !latestRelease
  152. ? t('The current release')
  153. : t('The current release (%s)', formatVersion(latestRelease.version)),
  154. details: actionTitle
  155. ? actionTitle
  156. : hasIssueResolveSemver && latestRelease
  157. ? `${formatVersion(latestRelease.version)} (${
  158. isSemver ? t('semver') : t('timestamp')
  159. })`
  160. : null,
  161. onAction: () => onActionOrConfirm(handleCurrentReleaseResolution),
  162. },
  163. {
  164. key: 'another-release',
  165. label: t('Another existing release\u2026'),
  166. onAction: () => openCustomReleaseModal(),
  167. },
  168. {
  169. key: 'a-commit',
  170. label: t('A commit\u2026'),
  171. onAction: () => openCustomCommitModal(),
  172. },
  173. ];
  174. const isDisabled = !projectSlug ? disabled : disableDropdown;
  175. return (
  176. <DropdownMenu
  177. items={items}
  178. trigger={triggerProps => (
  179. <DropdownTrigger
  180. {...triggerProps}
  181. size={size}
  182. priority={priority}
  183. aria-label={t('More resolve options')}
  184. icon={<IconChevron direction="down" size="xs" />}
  185. disabled={isDisabled}
  186. />
  187. )}
  188. disabledKeys={
  189. disabled || !hasRelease
  190. ? ['next-release', 'current-release', 'another-release']
  191. : []
  192. }
  193. menuTitle={t('Resolved In')}
  194. isDisabled={isDisabled}
  195. />
  196. );
  197. }
  198. function openCustomCommitModal() {
  199. openModal(deps => (
  200. <CustomCommitsResolutionModal
  201. {...deps}
  202. onSelected={(statusDetails: ResolutionStatusDetails) =>
  203. handleCommitResolution(statusDetails)
  204. }
  205. orgSlug={organization.slug}
  206. projectSlug={projectSlug}
  207. />
  208. ));
  209. }
  210. function openCustomReleaseModal() {
  211. openModal(deps => (
  212. <CustomResolutionModal
  213. {...deps}
  214. onSelected={(statusDetails: ResolutionStatusDetails) =>
  215. handleAnotherExistingReleaseResolution(statusDetails)
  216. }
  217. orgSlug={organization.slug}
  218. projectSlug={projectSlug}
  219. />
  220. ));
  221. }
  222. if (isResolved) {
  223. return renderResolved();
  224. }
  225. return (
  226. <Tooltip disabled={!projectFetchError} title={t('Error fetching project')}>
  227. <ButtonBar merged>
  228. <ResolveButton
  229. priority={priority}
  230. size={size}
  231. title={t("We'll nag you with a notification if another event is seen.")}
  232. tooltipProps={{delay: 1000, disabled}}
  233. onClick={() =>
  234. openConfirmModal({
  235. bypass: !shouldConfirm,
  236. onConfirm: () =>
  237. onUpdate({status: ResolutionStatus.RESOLVED, statusDetails: {}}),
  238. message: confirmMessage,
  239. confirmText: confirmLabel,
  240. })
  241. }
  242. disabled={disabled}
  243. >
  244. {t('Resolve')}
  245. </ResolveButton>
  246. {renderDropdownMenu()}
  247. </ButtonBar>
  248. </Tooltip>
  249. );
  250. }
  251. export default ResolveActions;
  252. const ResolveButton = styled(Button)<{priority?: 'primary'}>`
  253. box-shadow: none;
  254. border-radius: ${p => p.theme.borderRadiusLeft};
  255. ${p =>
  256. p.priority === 'primary' &&
  257. css`
  258. &::after {
  259. content: '';
  260. position: absolute;
  261. top: -1px;
  262. bottom: -1px;
  263. right: -1px;
  264. border-right: solid 1px currentColor;
  265. opacity: 0.25;
  266. }
  267. `}
  268. `;
  269. const DropdownTrigger = styled(Button)`
  270. box-shadow: none;
  271. border-radius: ${p => p.theme.borderRadiusRight};
  272. border-left: none;
  273. `;