mutedBox.tsx 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import React from 'react';
  2. import DateTime from 'app/components/dateTime';
  3. import Duration from 'app/components/duration';
  4. import {BannerContainer, BannerSummary} from 'app/components/events/styles';
  5. import {IconMute} from 'app/icons';
  6. import {t} from 'app/locale';
  7. import {ResolutionStatusDetails} from 'app/types';
  8. type Props = {
  9. statusDetails: ResolutionStatusDetails;
  10. };
  11. class MutedBox extends React.PureComponent<Props> {
  12. renderReason = () => {
  13. const {
  14. ignoreUntil,
  15. ignoreCount,
  16. ignoreWindow,
  17. ignoreUserCount,
  18. ignoreUserWindow,
  19. } = this.props.statusDetails;
  20. if (ignoreUntil) {
  21. return t(
  22. 'This issue has been ignored until %s',
  23. <strong>
  24. <DateTime date={ignoreUntil} />
  25. </strong>
  26. );
  27. } else if (ignoreCount && ignoreWindow) {
  28. return t(
  29. 'This issue has been ignored until it occurs %s time(s) in %s',
  30. <strong>{ignoreCount.toLocaleString()}</strong>,
  31. <strong>
  32. <Duration seconds={ignoreWindow * 60} />
  33. </strong>
  34. );
  35. } else if (ignoreCount) {
  36. return t(
  37. 'This issue has been ignored until it occurs %s more time(s)',
  38. <strong>{ignoreCount.toLocaleString()}</strong>
  39. );
  40. } else if (ignoreUserCount && ignoreUserWindow) {
  41. return t(
  42. 'This issue has been ignored until it affects %s user(s) in %s',
  43. <strong>{ignoreUserCount.toLocaleString()}</strong>,
  44. <strong>
  45. <Duration seconds={ignoreUserWindow * 60} />
  46. </strong>
  47. );
  48. } else if (ignoreUserCount) {
  49. return t(
  50. 'This issue has been ignored until it affects %s more user(s)',
  51. <strong>{ignoreUserCount.toLocaleString()}</strong>
  52. );
  53. }
  54. return t('This issue has been ignored');
  55. };
  56. render = () => (
  57. <BannerContainer priority="default">
  58. <BannerSummary>
  59. <IconMute color="red300" size="sm" />
  60. <span>
  61. {this.renderReason()}&nbsp;&mdash;&nbsp;
  62. {t(
  63. 'You will not be notified of any changes and it will not show up by default in feeds.'
  64. )}
  65. </span>
  66. </BannerSummary>
  67. </BannerContainer>
  68. );
  69. }
  70. export default MutedBox;