utils.tsx 4.5 KB

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