prompts.tsx 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. import {useCallback} from 'react';
  2. import type {Client} from 'sentry/api';
  3. import type {Organization, OrganizationSummary} from 'sentry/types/organization';
  4. import {promptIsDismissed} from 'sentry/utils/promptIsDismissed';
  5. import type {ApiQueryKey, UseApiQueryOptions} from 'sentry/utils/queryClient';
  6. import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
  7. import useApi from 'sentry/utils/useApi';
  8. type PromptsUpdateParams = {
  9. /**
  10. * The prompt feature name
  11. */
  12. feature: string;
  13. organization: OrganizationSummary;
  14. status: 'snoozed' | 'dismissed';
  15. /**
  16. * The numeric project ID as a string
  17. */
  18. projectId?: string;
  19. };
  20. /**
  21. * Update the status of a prompt
  22. */
  23. export function promptsUpdate(api: Client, params: PromptsUpdateParams) {
  24. const url = `/organizations/${params.organization.slug}/prompts-activity/`;
  25. return api.requestPromise(url, {
  26. method: 'PUT',
  27. data: {
  28. organization_id: params.organization.id,
  29. project_id: params.projectId,
  30. feature: params.feature,
  31. status: params.status,
  32. },
  33. });
  34. }
  35. type PromptCheckParams = {
  36. /**
  37. * The prompt feature name
  38. */
  39. feature: string | string[];
  40. organization: OrganizationSummary;
  41. /**
  42. * The numeric project ID as a string
  43. */
  44. projectId?: string;
  45. };
  46. /**
  47. * Raw response data from the endpoint
  48. */
  49. export type PromptResponseItem = {
  50. /**
  51. * Time since dismissed
  52. */
  53. dismissed_ts?: number;
  54. /**
  55. * Time since snoozed
  56. */
  57. snoozed_ts?: number;
  58. };
  59. export type PromptResponse = {
  60. data?: PromptResponseItem;
  61. features?: {[key: string]: PromptResponseItem};
  62. };
  63. /**
  64. * Processed endpoint response data
  65. */
  66. export type PromptData = null | {
  67. /**
  68. * Time since dismissed
  69. */
  70. dismissedTime?: number;
  71. /**
  72. * Time since snoozed
  73. */
  74. snoozedTime?: number;
  75. };
  76. /**
  77. * Get the status of a prompt
  78. */
  79. export async function promptsCheck(
  80. api: Client,
  81. params: PromptCheckParams
  82. ): Promise<PromptData> {
  83. const query = {
  84. feature: params.feature,
  85. organization_id: params.organization.id,
  86. ...(params.projectId === undefined ? {} : {project_id: params.projectId}),
  87. };
  88. const url = `/organizations/${params.organization.slug}/prompts-activity/`;
  89. const response: PromptResponse = await api.requestPromise(url, {
  90. query,
  91. });
  92. if (response?.data) {
  93. return {
  94. dismissedTime: response.data.dismissed_ts,
  95. snoozedTime: response.data.snoozed_ts,
  96. };
  97. }
  98. return null;
  99. }
  100. export const makePromptsCheckQueryKey = ({
  101. feature,
  102. organization,
  103. projectId,
  104. }: PromptCheckParams): ApiQueryKey => {
  105. const url = `/organizations/${organization.slug}/prompts-activity/`;
  106. return [
  107. url,
  108. {query: {feature, organization_id: organization.id, project_id: projectId}},
  109. ];
  110. };
  111. export function usePromptsCheck(
  112. {feature, organization, projectId}: PromptCheckParams,
  113. options: Partial<UseApiQueryOptions<PromptResponse>> = {}
  114. ) {
  115. return useApiQuery<PromptResponse>(
  116. makePromptsCheckQueryKey({feature, organization, projectId}),
  117. {
  118. staleTime: 120000,
  119. retry: false,
  120. ...options,
  121. }
  122. );
  123. }
  124. export function usePrompt({
  125. feature,
  126. organization,
  127. projectId,
  128. daysToSnooze,
  129. }: {
  130. feature: string;
  131. organization: Organization;
  132. daysToSnooze?: number;
  133. projectId?: string;
  134. }) {
  135. const api = useApi({persistInFlight: true});
  136. const prompt = usePromptsCheck({feature, organization, projectId});
  137. const queryClient = useQueryClient();
  138. const isPromptDismissed =
  139. prompt.isSuccess && prompt.data.data
  140. ? promptIsDismissed(
  141. {
  142. dismissedTime: prompt.data.data.dismissed_ts,
  143. snoozedTime: prompt.data.data.snoozed_ts,
  144. },
  145. daysToSnooze
  146. )
  147. : undefined;
  148. const dismissPrompt = useCallback(() => {
  149. promptsUpdate(api, {
  150. organization,
  151. projectId,
  152. feature,
  153. status: 'dismissed',
  154. });
  155. // Update cached query data
  156. // Will set prompt to dismissed
  157. setApiQueryData<PromptResponse>(
  158. queryClient,
  159. makePromptsCheckQueryKey({
  160. organization,
  161. feature,
  162. projectId,
  163. }),
  164. () => {
  165. const dimissedTs = new Date().getTime() / 1000;
  166. return {
  167. data: {dismissed_ts: dimissedTs},
  168. features: {[feature]: {dismissed_ts: dimissedTs}},
  169. };
  170. }
  171. );
  172. }, [api, feature, organization, projectId, queryClient]);
  173. const snoozePrompt = useCallback(() => {
  174. promptsUpdate(api, {
  175. organization,
  176. projectId,
  177. feature,
  178. status: 'snoozed',
  179. });
  180. // Update cached query data
  181. // Will set prompt to snoozed
  182. setApiQueryData<PromptResponse>(
  183. queryClient,
  184. makePromptsCheckQueryKey({
  185. organization,
  186. feature,
  187. projectId,
  188. }),
  189. () => {
  190. const snoozedTs = new Date().getTime() / 1000;
  191. return {
  192. data: {snoozed_ts: snoozedTs},
  193. features: {[feature]: {snoozed_ts: snoozedTs}},
  194. };
  195. }
  196. );
  197. }, [api, feature, organization, projectId, queryClient]);
  198. return {
  199. isLoading: prompt.isLoading,
  200. isError: prompt.isError,
  201. isPromptDismissed,
  202. dismissPrompt,
  203. snoozePrompt,
  204. };
  205. }
  206. /**
  207. * Get the status of many prompts
  208. */
  209. export async function batchedPromptsCheck<T extends readonly string[]>(
  210. api: Client,
  211. features: T,
  212. params: {
  213. organization: OrganizationSummary;
  214. projectId?: string;
  215. }
  216. ): Promise<{[key in T[number]]: PromptData}> {
  217. const query = {
  218. feature: features,
  219. organization_id: params.organization.id,
  220. ...(params.projectId === undefined ? {} : {project_id: params.projectId}),
  221. };
  222. const url = `/organizations/${params.organization.slug}/prompts-activity/`;
  223. const response: PromptResponse = await api.requestPromise(url, {
  224. query,
  225. });
  226. const responseFeatures = response?.features;
  227. const result: {[key in T[number]]?: PromptData} = {};
  228. if (!responseFeatures) {
  229. return result as {[key in T[number]]: PromptData};
  230. }
  231. for (const featureName of features) {
  232. const item = responseFeatures[featureName];
  233. if (item) {
  234. result[featureName] = {
  235. dismissedTime: item.dismissed_ts,
  236. snoozedTime: item.snoozed_ts,
  237. };
  238. } else {
  239. result[featureName] = null;
  240. }
  241. }
  242. return result as {[key in T[number]]: PromptData};
  243. }