diff --git a/static/app/components/onboardingWizard/newSidebar.tsx b/static/app/components/onboardingWizard/newSidebar.tsx index 58491d5f67940..387358437718c 100644 --- a/static/app/components/onboardingWizard/newSidebar.tsx +++ b/static/app/components/onboardingWizard/newSidebar.tsx @@ -13,23 +13,27 @@ import partition from 'lodash/partition'; import {navigateTo} from 'sentry/actionCreators/navigation'; import {updateOnboardingTask} from 'sentry/actionCreators/onboardingTasks'; +import {Button} from 'sentry/components/button'; import {Chevron} from 'sentry/components/chevron'; import InteractionStateLayer from 'sentry/components/interactionStateLayer'; import { OnboardingContext, type OnboardingContextProps, } from 'sentry/components/onboarding/onboardingContext'; +import SkipConfirm from 'sentry/components/onboardingWizard/skipConfirm'; import {findCompleteTasks, taskIsDone} from 'sentry/components/onboardingWizard/utils'; import ProgressRing from 'sentry/components/progressRing'; import SidebarPanel from 'sentry/components/sidebar/sidebarPanel'; import type {CommonSidebarProps} from 'sentry/components/sidebar/types'; -import {Tooltip} from 'sentry/components/tooltip'; -import {IconCheckmark} from 'sentry/icons'; +import {IconCheckmark, IconClose} from 'sentry/icons'; import {t, tct} from 'sentry/locale'; import DemoWalkthroughStore from 'sentry/stores/demoWalkthroughStore'; -import pulsingIndicatorStyles from 'sentry/styles/pulsingIndicator'; import {space} from 'sentry/styles/space'; -import {type OnboardingTask, OnboardingTaskGroup} from 'sentry/types/onboarding'; +import { + type OnboardingTask, + OnboardingTaskGroup, + type OnboardingTaskKey, +} from 'sentry/types/onboarding'; import type {Organization} from 'sentry/types/organization'; import type {Project} from 'sentry/types/project'; import {trackAnalytics} from 'sentry/utils/analytics'; @@ -85,10 +89,11 @@ function getPanelDescription(walkthrough: boolean) { interface TaskProps { hidePanel: () => void; task: OnboardingTask; - status?: 'waiting' | 'completed'; + completed?: boolean; } -function Task({task, status, hidePanel}: TaskProps) { +function Task({task, completed, hidePanel}: TaskProps) { + const api = useApi(); const organization = useOrganization(); const router = useRouter(); @@ -129,7 +134,35 @@ function Task({task, status, hidePanel}: TaskProps) { [task, organization, router, hidePanel] ); - if (status === 'completed') { + const handleMarkComplete = useCallback( + (taskKey: OnboardingTaskKey) => { + updateOnboardingTask(api, organization, { + task: taskKey, + status: 'complete', + completionSeen: true, + }); + }, + [api, organization] + ); + + const handleMarkSkipped = useCallback( + (taskKey: OnboardingTaskKey) => { + trackAnalytics('quick_start.task_card_clicked', { + organization, + todo_id: task.task, + todo_title: task.title, + action: 'skipped', + }); + updateOnboardingTask(api, organization, { + task: taskKey, + status: 'skipped', + completionSeen: true, + }); + }, + [task, organization, api] + ); + + if (completed) { return ( {task.title} @@ -138,21 +171,6 @@ function Task({task, status, hidePanel}: TaskProps) { ); } - if (status === 'waiting') { - return ( - - -
- {task.title} -

{task.description}

-
- - - -
- ); - } - return ( @@ -160,6 +178,29 @@ function Task({task, status, hidePanel}: TaskProps) { {task.title}

{task.description}

+ {task.requisiteTasks.length === 0 && ( + + {task.skippable && ( + handleMarkSkipped(task.task)}> + {({skip}) => ( +