subscriptionBox.tsx 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. import styled from '@emotion/styled';
  2. import Checkbox from 'sentry/components/checkbox';
  3. import FeatureBadge from 'sentry/components/featureBadge';
  4. import {Tooltip} from 'sentry/components/tooltip';
  5. import {t} from 'sentry/locale';
  6. import {space} from 'sentry/styles/space';
  7. import {Organization} from 'sentry/types';
  8. import withOrganization from 'sentry/utils/withOrganization';
  9. import {
  10. DESCRIPTIONS,
  11. EVENT_CHOICES,
  12. PERMISSIONS_MAP,
  13. } from 'sentry/views/settings/organizationDeveloperSettings/constants';
  14. type Resource = (typeof EVENT_CHOICES)[number];
  15. type Props = {
  16. checked: boolean;
  17. disabledFromPermissions: boolean;
  18. isNew: boolean;
  19. onChange: (resource: Resource, checked: boolean) => void;
  20. organization: Organization;
  21. resource: Resource;
  22. webhookDisabled?: boolean;
  23. };
  24. function SubscriptionBox({
  25. checked,
  26. disabledFromPermissions,
  27. isNew,
  28. onChange,
  29. organization,
  30. resource,
  31. webhookDisabled = false,
  32. }: Props) {
  33. const {features} = organization;
  34. let disabled = disabledFromPermissions || webhookDisabled;
  35. let message = t(
  36. "Must have at least 'Read' permissions enabled for %s",
  37. PERMISSIONS_MAP[resource]
  38. );
  39. if (resource === 'error' && !features.includes('integrations-event-hooks')) {
  40. disabled = true;
  41. message = t(
  42. 'Your organization does not have access to the error subscription resource.'
  43. );
  44. }
  45. if (webhookDisabled) {
  46. message = t('Cannot enable webhook subscription without specifying a webhook url');
  47. }
  48. return (
  49. <Tooltip disabled={!disabled} title={message} key={resource}>
  50. <SubscriptionGridItem disabled={disabled}>
  51. <SubscriptionInfo>
  52. <SubscriptionTitle>
  53. {resource}
  54. {isNew && <FeatureBadge type="new" />}
  55. </SubscriptionTitle>
  56. <SubscriptionDescription>{DESCRIPTIONS[resource]}</SubscriptionDescription>
  57. </SubscriptionInfo>
  58. <Checkbox
  59. key={`${resource}${checked}`}
  60. aria-label={resource}
  61. disabled={disabled}
  62. id={resource}
  63. value={resource}
  64. checked={checked}
  65. onChange={evt => onChange(resource, evt.target.checked)}
  66. />
  67. </SubscriptionGridItem>
  68. </Tooltip>
  69. );
  70. }
  71. export default withOrganization(SubscriptionBox);
  72. const SubscriptionGridItem = styled('div')<{disabled: boolean}>`
  73. display: flex;
  74. justify-content: space-between;
  75. background: ${p => p.theme.backgroundSecondary};
  76. opacity: ${p => (p.disabled ? 0.3 : 1)};
  77. border-radius: ${p => p.theme.borderRadius};
  78. margin: ${space(1.5)};
  79. padding: ${space(1.5)};
  80. box-sizing: border-box;
  81. `;
  82. const SubscriptionInfo = styled('div')`
  83. display: flex;
  84. flex-direction: column;
  85. align-self: center;
  86. `;
  87. const SubscriptionDescription = styled('div')`
  88. font-size: ${p => p.theme.fontSizeMedium};
  89. line-height: 1;
  90. color: ${p => p.theme.gray300};
  91. `;
  92. const SubscriptionTitle = styled('div')`
  93. font-size: ${p => p.theme.fontSizeLarge};
  94. line-height: 1;
  95. color: ${p => p.theme.textColor};
  96. white-space: nowrap;
  97. margin-bottom: ${space(0.75)};
  98. `;