utils.tsx 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import {Fragment} from 'react';
  2. import capitalize from 'lodash/capitalize';
  3. import Alert from 'sentry/components/alert';
  4. import ExternalLink from 'sentry/components/links/externalLink';
  5. import {t, tct, tn} from 'sentry/locale';
  6. import {Organization, ResolutionStatusDetails} from 'sentry/types';
  7. import ExtraDescription from './extraDescription';
  8. export const BULK_LIMIT = 1000;
  9. export const BULK_LIMIT_STR = BULK_LIMIT.toLocaleString();
  10. export enum ConfirmAction {
  11. RESOLVE = 'resolve',
  12. UNRESOLVE = 'unresolve',
  13. IGNORE = 'ignore',
  14. BOOKMARK = 'bookmark',
  15. UNBOOKMARK = 'unbookmark',
  16. MERGE = 'merge',
  17. DELETE = 'delete',
  18. }
  19. function getBulkConfirmMessage(action: string, queryCount: number) {
  20. if (queryCount > BULK_LIMIT) {
  21. return tct(
  22. 'Are you sure you want to [action] the first [bulkNumber] issues that match the search?',
  23. {
  24. action,
  25. bulkNumber: BULK_LIMIT_STR,
  26. }
  27. );
  28. }
  29. return tct(
  30. 'Are you sure you want to [action] all [bulkNumber] issues that match the search?',
  31. {
  32. action,
  33. bulkNumber: queryCount,
  34. }
  35. );
  36. }
  37. function PerformanceIssueAlert({
  38. allInQuerySelected,
  39. organization,
  40. children,
  41. }: {
  42. allInQuerySelected: boolean;
  43. children: string;
  44. organization: Organization;
  45. }) {
  46. if (!allInQuerySelected || !organization.features.includes('performance-issues')) {
  47. return null;
  48. }
  49. return (
  50. <Alert type="info" showIcon>
  51. {children}
  52. </Alert>
  53. );
  54. }
  55. export function getConfirm({
  56. numIssues,
  57. allInQuerySelected,
  58. query,
  59. queryCount,
  60. organization,
  61. }: {
  62. allInQuerySelected: boolean;
  63. numIssues: number;
  64. organization: Organization;
  65. query: string;
  66. queryCount: number;
  67. }) {
  68. return function ({
  69. action,
  70. canBeUndone,
  71. append = '',
  72. }: {
  73. action: ConfirmAction | string;
  74. canBeUndone: boolean;
  75. append?: string;
  76. }) {
  77. const question = allInQuerySelected
  78. ? getBulkConfirmMessage(`${action}${append}`, queryCount)
  79. : tn(
  80. `Are you sure you want to ${action} this %s issue${append}?`,
  81. `Are you sure you want to ${action} these %s issues${append}?`,
  82. numIssues
  83. );
  84. let message: React.ReactNode;
  85. switch (action) {
  86. case ConfirmAction.DELETE:
  87. message = (
  88. <Fragment>
  89. <p>
  90. {tct(
  91. 'Bulk deletion is only recommended for junk data. To clear your stream, consider resolving or ignoring. [link:When should I delete events?]',
  92. {
  93. link: (
  94. <ExternalLink href="https://help.sentry.io/account/billing/when-should-i-delete-events/" />
  95. ),
  96. }
  97. )}
  98. </p>
  99. <PerformanceIssueAlert {...{organization, allInQuerySelected}}>
  100. {t('Deleting performance issues is not yet supported and will be skipped.')}
  101. </PerformanceIssueAlert>
  102. </Fragment>
  103. );
  104. break;
  105. case ConfirmAction.MERGE:
  106. message = (
  107. <Fragment>
  108. <p>{t('Note that unmerging is currently an experimental feature.')}</p>
  109. <PerformanceIssueAlert {...{organization, allInQuerySelected}}>
  110. {t('Merging performance issues is not yet supported and will be skipped.')}
  111. </PerformanceIssueAlert>
  112. </Fragment>
  113. );
  114. break;
  115. default:
  116. message = !canBeUndone ? <p>{t('This action cannot be undone.')}</p> : null;
  117. }
  118. return (
  119. <div>
  120. <p style={{marginBottom: '20px'}}>
  121. <strong>{question}</strong>
  122. </p>
  123. <ExtraDescription
  124. all={allInQuerySelected}
  125. query={query}
  126. queryCount={queryCount}
  127. />
  128. {message}
  129. </div>
  130. );
  131. };
  132. }
  133. export function getLabel(numIssues: number, allInQuerySelected: boolean) {
  134. return function (action: string, append = '') {
  135. const capitalized = capitalize(action);
  136. const text = allInQuerySelected
  137. ? t(`Bulk ${action} issues`)
  138. : tn(
  139. `${capitalized} %s selected issue`,
  140. `${capitalized} %s selected issues`,
  141. numIssues
  142. );
  143. return text + append;
  144. };
  145. }
  146. export function performanceIssuesSupportsIgnoreAction(
  147. statusDetails: ResolutionStatusDetails
  148. ) {
  149. return !(statusDetails.ignoreWindow || statusDetails.ignoreUserWindow);
  150. }