onboarding.tsx 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. import type {RouteContextInterface} from 'react-router';
  2. import type {OnboardingContextProps} from 'sentry/components/onboarding/onboardingContext';
  3. import type {Category} from 'sentry/components/platformPicker';
  4. import type {
  5. Group,
  6. Organization,
  7. PlatformIntegration,
  8. PlatformKey,
  9. Project,
  10. } from 'sentry/types';
  11. import type {AvatarUser} from './user';
  12. export enum OnboardingTaskKey {
  13. FIRST_PROJECT = 'create_project',
  14. FIRST_EVENT = 'send_first_event',
  15. INVITE_MEMBER = 'invite_member',
  16. SECOND_PLATFORM = 'setup_second_platform',
  17. USER_CONTEXT = 'setup_user_context',
  18. RELEASE_TRACKING = 'setup_release_tracking',
  19. SOURCEMAPS = 'setup_sourcemaps',
  20. USER_REPORTS = 'setup_user_reports',
  21. ISSUE_TRACKER = 'setup_issue_tracker',
  22. ALERT_RULE = 'setup_alert_rules',
  23. FIRST_TRANSACTION = 'setup_transactions',
  24. METRIC_ALERT = 'setup_metric_alert_rules',
  25. USER_SELECTED_PROJECTS = 'setup_userselected_projects',
  26. /// Customized card that shows the selected integrations during onboarding
  27. INTEGRATIONS = 'integrations',
  28. /// Regular card that tells the user to setup integrations if no integrations were selected during onboarding
  29. FIRST_INTEGRATION = 'setup_integrations',
  30. SESSION_REPLAY = 'setup_session_replay',
  31. /// Demo New Walkthrough Tasks
  32. SIDEBAR_GUIDE = 'sidebar_guide',
  33. ISSUE_GUIDE = 'issue_guide',
  34. RELEASE_GUIDE = 'release_guide',
  35. PERFORMANCE_GUIDE = 'performance_guide',
  36. }
  37. export type OnboardingSupplementComponentProps = {
  38. onCompleteTask: () => void;
  39. task: OnboardingTask;
  40. };
  41. export type OnboardingCustomComponentProps = {
  42. onboardingContext: OnboardingContextProps;
  43. organization: Organization;
  44. projects: Project[];
  45. task: OnboardingTask;
  46. };
  47. interface OnboardingTaskDescriptorBase {
  48. description: string;
  49. /**
  50. * Should the onboarding task currently be displayed
  51. */
  52. display: boolean;
  53. /**
  54. * A list of require task keys that must have been completed before these
  55. * tasks may be completed.
  56. */
  57. requisites: OnboardingTaskKey[];
  58. /**
  59. * Can this task be skipped?
  60. */
  61. skippable: boolean;
  62. task: OnboardingTaskKey;
  63. title: string;
  64. /**
  65. * An extra component that may be rendered within the onboarding task item.
  66. */
  67. SupplementComponent?: React.ComponentType<OnboardingSupplementComponentProps>;
  68. /**
  69. * If a render function was provided, it will be used to render the entire card,
  70. * and the card will be rendered before any other cards regardless of completion status.
  71. * the render function is therefore responsible for determining the completion status
  72. * of the card by returning null when it's completed.
  73. *
  74. * Note that this should not be given a react component.
  75. */
  76. renderCard?: (props: OnboardingCustomComponentProps) => JSX.Element | null;
  77. /**
  78. * Joins with this task id for server-side onboarding state.
  79. * This allows you to create alias for exising onboarding tasks or create multiple
  80. * tasks for the same server-side task.
  81. */
  82. serverTask?: string;
  83. }
  84. interface OnboardingTypeDescriptorWithAction extends OnboardingTaskDescriptorBase {
  85. action: (props: RouteContextInterface) => void;
  86. actionType: 'action';
  87. }
  88. interface OnboardingTypeDescriptorWithExternal extends OnboardingTaskDescriptorBase {
  89. actionType: 'app' | 'external';
  90. location: string;
  91. }
  92. export type OnboardingTaskDescriptor =
  93. | OnboardingTypeDescriptorWithAction
  94. | OnboardingTypeDescriptorWithExternal;
  95. export interface OnboardingTaskStatus {
  96. status: 'skipped' | 'pending' | 'complete';
  97. task: OnboardingTaskKey;
  98. completionSeen?: string | boolean;
  99. data?: {[key: string]: string};
  100. dateCompleted?: string;
  101. user?: AvatarUser | null;
  102. }
  103. interface OnboardingTaskWithAction
  104. extends OnboardingTaskStatus,
  105. OnboardingTypeDescriptorWithAction {
  106. /**
  107. * Onboarding tasks that are currently incomplete and must be completed
  108. * before this task should be completed.
  109. */
  110. requisiteTasks: OnboardingTaskDescriptor[];
  111. }
  112. interface OnboardingTaskWithExternal
  113. extends OnboardingTaskStatus,
  114. OnboardingTypeDescriptorWithExternal {
  115. /**
  116. * Onboarding tasks that are currently incomplete and must be completed
  117. * before this task should be completed.
  118. */
  119. requisiteTasks: OnboardingTaskDescriptor[];
  120. }
  121. export type OnboardingTask = OnboardingTaskWithAction | OnboardingTaskWithExternal;
  122. export enum OnboardingProjectStatus {
  123. WAITING = 'waiting',
  124. PROCESSING = 'processing',
  125. PROCESSED = 'processed',
  126. }
  127. export type OnboardingSelectedSDK = {
  128. category: Category;
  129. key: PlatformKey;
  130. language: PlatformIntegration['language'];
  131. type: PlatformIntegration['type'];
  132. };
  133. export type OnboardingRecentCreatedProject = Project & {
  134. firstError: boolean;
  135. firstTransaction: boolean;
  136. hasReplays: boolean;
  137. hasSessions: boolean;
  138. olderThanOneHour: boolean;
  139. firstIssue?: Group;
  140. };
  141. export type OnboardingPlatformDoc = {html: string; link: string};