onboarding.tsx 4.1 KB

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