onboarding.tsx 4.8 KB

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