globalSdkUpdateAlert.tsx 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. import * as React from 'react';
  2. import styled from '@emotion/styled';
  3. import {promptsCheck, promptsUpdate} from 'sentry/actionCreators/prompts';
  4. import SidebarPanelActions from 'sentry/actions/sidebarPanelActions';
  5. import {Client} from 'sentry/api';
  6. import Alert from 'sentry/components/alert';
  7. import {ALL_ACCESS_PROJECTS} from 'sentry/constants/globalSelectionHeader';
  8. import {IconUpgrade} from 'sentry/icons';
  9. import {t} from 'sentry/locale';
  10. import space from 'sentry/styles/space';
  11. import {
  12. GlobalSelection,
  13. Organization,
  14. ProjectSdkUpdates,
  15. SDKUpdatesSuggestion,
  16. } from 'sentry/types';
  17. import {trackAnalyticsEvent} from 'sentry/utils/analytics';
  18. import {promptIsDismissed} from 'sentry/utils/promptIsDismissed';
  19. import withApi from 'sentry/utils/withApi';
  20. import withGlobalSelection from 'sentry/utils/withGlobalSelection';
  21. import withOrganization from 'sentry/utils/withOrganization';
  22. import withSdkUpdates from 'sentry/utils/withSdkUpdates';
  23. import {SidebarPanelKey} from './sidebar/types';
  24. import Button from './button';
  25. type Props = React.ComponentProps<typeof Alert> & {
  26. api: Client;
  27. organization: Organization;
  28. sdkUpdates?: ProjectSdkUpdates[] | null;
  29. selection?: GlobalSelection;
  30. Wrapper?: React.ComponentType;
  31. };
  32. type State = {
  33. isDismissed: boolean | null;
  34. };
  35. type AnalyticsOpts = {
  36. organization: Organization;
  37. };
  38. const recordAnalyticsSeen = ({organization}: AnalyticsOpts) =>
  39. trackAnalyticsEvent({
  40. eventKey: 'sdk_updates.seen',
  41. eventName: 'SDK Updates: Seen',
  42. organization_id: organization.id,
  43. });
  44. const recordAnalyticsSnoozed = ({organization}: AnalyticsOpts) =>
  45. trackAnalyticsEvent({
  46. eventKey: 'sdk_updates.snoozed',
  47. eventName: 'SDK Updates: Snoozed',
  48. organization_id: organization.id,
  49. });
  50. const recordAnalyticsClicked = ({organization}: AnalyticsOpts) =>
  51. trackAnalyticsEvent({
  52. eventKey: 'sdk_updates.clicked',
  53. eventName: 'SDK Updates: Clicked',
  54. organization_id: organization.id,
  55. });
  56. const flattenSuggestions = (list: ProjectSdkUpdates[]) =>
  57. list.reduce<SDKUpdatesSuggestion[]>(
  58. (suggestions, sdk) => [...suggestions, ...sdk.suggestions],
  59. []
  60. );
  61. class InnerGlobalSdkSuggestions extends React.Component<Props, State> {
  62. state: State = {
  63. isDismissed: null,
  64. };
  65. componentDidMount() {
  66. this.promptsCheck();
  67. recordAnalyticsSeen({organization: this.props.organization});
  68. }
  69. async promptsCheck() {
  70. const {api, organization} = this.props;
  71. const prompt = await promptsCheck(api, {
  72. organizationId: organization.id,
  73. feature: 'sdk_updates',
  74. });
  75. this.setState({
  76. isDismissed: promptIsDismissed(prompt),
  77. });
  78. }
  79. snoozePrompt = () => {
  80. const {api, organization} = this.props;
  81. promptsUpdate(api, {
  82. organizationId: organization.id,
  83. feature: 'sdk_updates',
  84. status: 'snoozed',
  85. });
  86. this.setState({isDismissed: true});
  87. recordAnalyticsSnoozed({organization: this.props.organization});
  88. };
  89. render() {
  90. const {
  91. api: _api,
  92. selection,
  93. sdkUpdates,
  94. organization,
  95. Wrapper,
  96. ...props
  97. } = this.props;
  98. const {isDismissed} = this.state;
  99. if (!sdkUpdates || isDismissed === null || isDismissed) {
  100. return null;
  101. }
  102. // withSdkUpdates explicitly only queries My Projects. This means that when
  103. // looking at any projects outside of My Projects (like All Projects), this
  104. // will only show the updates relevant to the to user.
  105. const projectSpecificUpdates =
  106. selection?.projects.length === 0 || selection?.projects === [ALL_ACCESS_PROJECTS]
  107. ? sdkUpdates
  108. : sdkUpdates.filter(update =>
  109. selection?.projects?.includes(parseInt(update.projectId, 10))
  110. );
  111. // Are there any updates?
  112. if (flattenSuggestions(projectSpecificUpdates).length === 0) {
  113. return null;
  114. }
  115. const showBroadcastsPanel = (
  116. <Button
  117. priority="link"
  118. onClick={() => {
  119. SidebarPanelActions.activatePanel(SidebarPanelKey.Broadcasts);
  120. recordAnalyticsClicked({organization});
  121. }}
  122. >
  123. {t('Review updates')}
  124. </Button>
  125. );
  126. const notice = (
  127. <Alert type="info" icon={<IconUpgrade />} {...props}>
  128. <Content>
  129. {t(
  130. `You have outdated SDKs in your projects. Update them for important fixes and features.`
  131. )}
  132. <Actions>
  133. <Button
  134. priority="link"
  135. title={t('Dismiss for the next two weeks')}
  136. onClick={this.snoozePrompt}
  137. >
  138. {t('Remind me later')}
  139. </Button>
  140. |{showBroadcastsPanel}
  141. </Actions>
  142. </Content>
  143. </Alert>
  144. );
  145. return Wrapper ? <Wrapper>{notice}</Wrapper> : notice;
  146. }
  147. }
  148. const Content = styled('div')`
  149. display: flex;
  150. flex-wrap: wrap;
  151. @media (min-width: ${p => p.theme.breakpoints[0]}) {
  152. justify-content: space-between;
  153. }
  154. `;
  155. const Actions = styled('div')`
  156. display: grid;
  157. grid-template-columns: repeat(3, max-content);
  158. grid-gap: ${space(1)};
  159. `;
  160. const GlobalSdkSuggestions = withOrganization(
  161. withSdkUpdates(withGlobalSelection(withApi(InnerGlobalSdkSuggestions)))
  162. );
  163. export default GlobalSdkSuggestions;