actionSet.tsx 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. import {Fragment} from 'react';
  2. import {useTheme} from '@emotion/react';
  3. import ActionLink from 'sentry/components/actions/actionLink';
  4. import IgnoreActions from 'sentry/components/actions/ignore';
  5. import {openConfirmModal} from 'sentry/components/confirm';
  6. import DropdownMenuControl from 'sentry/components/dropdownMenuControl';
  7. import {MenuItemProps} from 'sentry/components/dropdownMenuItem';
  8. import {IconEllipsis} from 'sentry/icons';
  9. import {t} from 'sentry/locale';
  10. import GroupStore from 'sentry/stores/groupStore';
  11. import {
  12. BaseGroup,
  13. IssueCategoryCapabilities,
  14. Project,
  15. ResolutionStatus,
  16. } from 'sentry/types';
  17. import {getIssueCapability} from 'sentry/utils/groupCapabilities';
  18. import Projects from 'sentry/utils/projects';
  19. import useMedia from 'sentry/utils/useMedia';
  20. import useOrganization from 'sentry/utils/useOrganization';
  21. import ResolveActions from './resolveActions';
  22. import ReviewAction from './reviewAction';
  23. import {ConfirmAction, getConfirm, getLabel} from './utils';
  24. type Props = {
  25. allInQuerySelected: boolean;
  26. anySelected: boolean;
  27. issues: Set<string>;
  28. multiSelected: boolean;
  29. onDelete: () => void;
  30. onMerge: () => void;
  31. onShouldConfirm: (action: ConfirmAction) => boolean;
  32. onUpdate: (data?: any) => void;
  33. query: string;
  34. queryCount: number;
  35. selectedProjectSlug?: string;
  36. };
  37. function ActionSet({
  38. queryCount,
  39. query,
  40. allInQuerySelected,
  41. anySelected,
  42. multiSelected,
  43. issues,
  44. onUpdate,
  45. onShouldConfirm,
  46. onDelete,
  47. onMerge,
  48. selectedProjectSlug,
  49. }: Props) {
  50. const organization = useOrganization();
  51. const numIssues = issues.size;
  52. const confirm = getConfirm({
  53. numIssues,
  54. allInQuerySelected,
  55. query,
  56. queryCount,
  57. organization,
  58. });
  59. const label = getLabel(numIssues, allInQuerySelected);
  60. const selectedIssues = [...issues]
  61. .map(issueId => GroupStore.get(issueId))
  62. .filter(issue => issue) as BaseGroup[];
  63. // Merges require multiple issues of a single project type
  64. const multipleIssueProjectsSelected = multiSelected && !selectedProjectSlug;
  65. const {enabled: mergeSupported, disabledReason: mergeDisabledReason} =
  66. isActionSupported(selectedIssues, 'merge');
  67. const {enabled: deleteSupported, disabledReason: deleteDisabledReason} =
  68. isActionSupported(selectedIssues, 'delete');
  69. const mergeDisabled =
  70. !multiSelected || multipleIssueProjectsSelected || !mergeSupported;
  71. const ignoreDisabled = !anySelected;
  72. const canMarkReviewed =
  73. anySelected && (allInQuerySelected || selectedIssues.some(issue => !!issue?.inbox));
  74. // determine which ... dropdown options to show based on issue(s) selected
  75. const canAddBookmark =
  76. allInQuerySelected || selectedIssues.some(issue => !issue.isBookmarked);
  77. const canRemoveBookmark =
  78. allInQuerySelected || selectedIssues.some(issue => issue.isBookmarked);
  79. const canSetUnresolved =
  80. allInQuerySelected || selectedIssues.some(issue => issue.status === 'resolved');
  81. const makeMergeTooltip = () => {
  82. if (mergeDisabledReason) {
  83. return mergeDisabledReason;
  84. }
  85. if (multipleIssueProjectsSelected) {
  86. return t('Cannot merge issues from different projects');
  87. }
  88. return '';
  89. };
  90. // Determine whether to nest "Merge" and "Mark as Reviewed" buttons inside
  91. // the dropdown menu based on the current screen size
  92. const theme = useTheme();
  93. const nestMergeAndReview = useMedia(`(max-width: ${theme.breakpoints.xlarge})`);
  94. const menuItems: MenuItemProps[] = [
  95. {
  96. key: 'merge',
  97. label: t('Merge'),
  98. hidden: !nestMergeAndReview,
  99. disabled: mergeDisabled,
  100. details: makeMergeTooltip(),
  101. onAction: () => {
  102. openConfirmModal({
  103. bypass: !onShouldConfirm(ConfirmAction.MERGE),
  104. onConfirm: onMerge,
  105. message: confirm({action: ConfirmAction.MERGE, canBeUndone: false}),
  106. confirmText: label('merge'),
  107. });
  108. },
  109. },
  110. {
  111. key: 'mark-reviewed',
  112. label: t('Mark Reviewed'),
  113. hidden: !nestMergeAndReview,
  114. disabled: !canMarkReviewed,
  115. onAction: () => onUpdate({inbox: false}),
  116. },
  117. {
  118. key: 'bookmark',
  119. label: t('Add to Bookmarks'),
  120. hidden: !canAddBookmark,
  121. onAction: () => {
  122. openConfirmModal({
  123. bypass: !onShouldConfirm(ConfirmAction.BOOKMARK),
  124. onConfirm: () => onUpdate({isBookmarked: true}),
  125. message: confirm({action: ConfirmAction.BOOKMARK, canBeUndone: false}),
  126. confirmText: label('bookmark'),
  127. });
  128. },
  129. },
  130. {
  131. key: 'remove-bookmark',
  132. label: t('Remove from Bookmarks'),
  133. hidden: !canRemoveBookmark,
  134. onAction: () => {
  135. openConfirmModal({
  136. bypass: !onShouldConfirm(ConfirmAction.UNBOOKMARK),
  137. onConfirm: () => onUpdate({isBookmarked: false}),
  138. message: confirm({
  139. action: ConfirmAction.UNBOOKMARK,
  140. canBeUndone: false,
  141. append: ' from your bookmarks',
  142. }),
  143. confirmText: label('remove', ' from your bookmarks'),
  144. });
  145. },
  146. },
  147. {
  148. key: 'unresolve',
  149. label: t('Set status to: Unresolved'),
  150. hidden: !canSetUnresolved,
  151. onAction: () => {
  152. openConfirmModal({
  153. bypass: !onShouldConfirm(ConfirmAction.UNRESOLVE),
  154. onConfirm: () => onUpdate({status: ResolutionStatus.UNRESOLVED}),
  155. message: confirm({action: ConfirmAction.UNRESOLVE, canBeUndone: true}),
  156. confirmText: label('unresolve'),
  157. });
  158. },
  159. },
  160. {
  161. key: 'delete',
  162. label: t('Delete'),
  163. priority: 'danger',
  164. disabled: !deleteSupported,
  165. details: deleteDisabledReason,
  166. onAction: () => {
  167. openConfirmModal({
  168. bypass: !onShouldConfirm(ConfirmAction.DELETE),
  169. onConfirm: onDelete,
  170. priority: 'danger',
  171. message: confirm({action: ConfirmAction.DELETE, canBeUndone: false}),
  172. confirmText: label('delete'),
  173. });
  174. },
  175. },
  176. ];
  177. return (
  178. <Fragment>
  179. {selectedProjectSlug ? (
  180. <Projects orgId={organization.slug} slugs={[selectedProjectSlug]}>
  181. {({projects, initiallyLoaded, fetchError}) => {
  182. const selectedProject = projects[0];
  183. return (
  184. <ResolveActions
  185. onShouldConfirm={onShouldConfirm}
  186. onUpdate={onUpdate}
  187. anySelected={anySelected}
  188. orgSlug={organization.slug}
  189. params={{
  190. hasReleases: selectedProject.hasOwnProperty('features')
  191. ? (selectedProject as Project).features.includes('releases')
  192. : false,
  193. latestRelease: selectedProject.hasOwnProperty('latestRelease')
  194. ? (selectedProject as Project).latestRelease
  195. : undefined,
  196. projectId: selectedProject.slug,
  197. confirm,
  198. label,
  199. loadingProjects: !initiallyLoaded,
  200. projectFetchError: !!fetchError,
  201. }}
  202. />
  203. );
  204. }}
  205. </Projects>
  206. ) : (
  207. <ResolveActions
  208. onShouldConfirm={onShouldConfirm}
  209. onUpdate={onUpdate}
  210. anySelected={anySelected}
  211. orgSlug={organization.slug}
  212. params={{
  213. hasReleases: false,
  214. confirm,
  215. label,
  216. }}
  217. />
  218. )}
  219. <IgnoreActions
  220. onUpdate={onUpdate}
  221. shouldConfirm={onShouldConfirm(ConfirmAction.IGNORE)}
  222. confirmMessage={() => confirm({action: ConfirmAction.IGNORE, canBeUndone: true})}
  223. confirmLabel={label('ignore')}
  224. disabled={ignoreDisabled}
  225. />
  226. {!nestMergeAndReview && (
  227. <ReviewAction disabled={!canMarkReviewed} onUpdate={onUpdate} />
  228. )}
  229. {!nestMergeAndReview && (
  230. <ActionLink
  231. aria-label={t('Merge Selected Issues')}
  232. type="button"
  233. disabled={mergeDisabled}
  234. onAction={onMerge}
  235. shouldConfirm={onShouldConfirm(ConfirmAction.MERGE)}
  236. message={confirm({action: ConfirmAction.MERGE, canBeUndone: false})}
  237. confirmLabel={label('merge')}
  238. title={makeMergeTooltip()}
  239. >
  240. {t('Merge')}
  241. </ActionLink>
  242. )}
  243. <DropdownMenuControl
  244. size="sm"
  245. items={menuItems}
  246. triggerProps={{
  247. 'aria-label': t('More issue actions'),
  248. icon: <IconEllipsis size="xs" />,
  249. showChevron: false,
  250. size: 'xs',
  251. }}
  252. isDisabled={!anySelected}
  253. />
  254. </Fragment>
  255. );
  256. }
  257. function isActionSupported(
  258. selectedIssues: BaseGroup[],
  259. capability: keyof IssueCategoryCapabilities
  260. ) {
  261. for (const issue of selectedIssues) {
  262. const info = getIssueCapability(issue.issueCategory, capability);
  263. if (!info.enabled) {
  264. return info;
  265. }
  266. }
  267. return {enabled: true};
  268. }
  269. export default ActionSet;