utils.tsx 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  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 {IgnoredStatusDetails} 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. children,
  40. }: {
  41. allInQuerySelected: boolean;
  42. children: string;
  43. }) {
  44. if (!allInQuerySelected) {
  45. return null;
  46. }
  47. return (
  48. <Alert type="info" showIcon>
  49. {children}
  50. </Alert>
  51. );
  52. }
  53. export function getConfirm({
  54. numIssues,
  55. allInQuerySelected,
  56. query,
  57. queryCount,
  58. }: {
  59. allInQuerySelected: boolean;
  60. numIssues: number;
  61. query: string;
  62. queryCount: number;
  63. }) {
  64. return function ({
  65. action,
  66. canBeUndone,
  67. append = '',
  68. }: {
  69. action: ConfirmAction;
  70. canBeUndone: boolean;
  71. append?: string;
  72. }) {
  73. const actionText = action === ConfirmAction.IGNORE && t('archive');
  74. const question = allInQuerySelected
  75. ? getBulkConfirmMessage(`${actionText}${append}`, queryCount)
  76. : tn(
  77. // Use sprintf argument swapping since the number value must come
  78. // first. See https://github.com/alexei/sprintf.js#argument-swapping
  79. `Are you sure you want to %2$s this %s issue%3$s?`,
  80. `Are you sure you want to %2$s these %s issues%3$s?`,
  81. numIssues,
  82. actionText,
  83. append
  84. );
  85. let message: React.ReactNode;
  86. switch (action) {
  87. case ConfirmAction.DELETE:
  88. message = (
  89. <Fragment>
  90. <p>
  91. {tct(
  92. 'Bulk deletion is only recommended for junk data. To clear your stream, consider resolving or ignoring. [link:When should I delete events?]',
  93. {
  94. link: (
  95. <ExternalLink href="https://help.sentry.io/account/billing/when-should-i-delete-events/" />
  96. ),
  97. }
  98. )}
  99. </p>
  100. <PerformanceIssueAlert allInQuerySelected={allInQuerySelected}>
  101. {t('Deleting performance issues is not yet supported and will be skipped.')}
  102. </PerformanceIssueAlert>
  103. </Fragment>
  104. );
  105. break;
  106. case ConfirmAction.MERGE:
  107. message = (
  108. <Fragment>
  109. <p>{t('Note that unmerging is currently an experimental feature.')}</p>
  110. <PerformanceIssueAlert allInQuerySelected={allInQuerySelected}>
  111. {t('Merging performance issues is not yet supported and will be skipped.')}
  112. </PerformanceIssueAlert>
  113. </Fragment>
  114. );
  115. break;
  116. default:
  117. message = !canBeUndone ? <p>{t('This action cannot be undone.')}</p> : null;
  118. }
  119. return (
  120. <div>
  121. <p style={{marginBottom: '20px'}}>
  122. <strong>{question}</strong>
  123. </p>
  124. <ExtraDescription
  125. all={allInQuerySelected}
  126. query={query}
  127. queryCount={queryCount}
  128. />
  129. {message}
  130. </div>
  131. );
  132. };
  133. }
  134. export function getLabel(numIssues: number, allInQuerySelected: boolean) {
  135. return function (action: string, append = '') {
  136. const capitalized = capitalize(action);
  137. const text = allInQuerySelected
  138. ? t('Bulk %s issues', action)
  139. : // Use sprintf argument swapping to put the capitalized string first. See
  140. // https://github.com/alexei/sprintf.js#argument-swapping
  141. tn(`%2$s %s selected issue`, `%2$s %s selected issues`, numIssues, capitalized);
  142. return text + append;
  143. };
  144. }
  145. export function performanceIssuesSupportsIgnoreAction(
  146. statusDetails: IgnoredStatusDetails
  147. ) {
  148. return !(statusDetails.ignoreWindow || statusDetails.ignoreUserWindow);
  149. }