onboarding.tsx 4.8 KB

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