From cc904540e56c36a2d93f334102331738b5f791dc Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 15 Oct 2024 12:09:28 -0300
Subject: [PATCH 01/10] feat(quick-start): Add new design skeleton

---
 .../onboardingWizard/newSidebar.tsx           | 255 ++++++++++++++++++
 .../app/components/onboardingWizard/utils.tsx |   5 +
 .../components/sidebar/onboardingStatus.tsx   |  23 +-
 3 files changed, 276 insertions(+), 7 deletions(-)
 create mode 100644 static/app/components/onboardingWizard/newSidebar.tsx

diff --git a/static/app/components/onboardingWizard/newSidebar.tsx b/static/app/components/onboardingWizard/newSidebar.tsx
new file mode 100644
index 00000000000000..f95928401d8f25
--- /dev/null
+++ b/static/app/components/onboardingWizard/newSidebar.tsx
@@ -0,0 +1,255 @@
+import {Fragment, useState} from 'react';
+import {css} from '@emotion/react';
+import styled from '@emotion/styled';
+
+import {Chevron} from 'sentry/components/chevron';
+import InteractionStateLayer from 'sentry/components/interactionStateLayer';
+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 {t, tct} from 'sentry/locale';
+import pulsingIndicatorStyles from 'sentry/styles/pulsingIndicator';
+import {space} from 'sentry/styles/space';
+import {isDemoWalkthrough} from 'sentry/utils/demoMode';
+
+function getPanelDescription(walkthrough: boolean) {
+  if (walkthrough) {
+    return {
+      title: t('Guided Tours'),
+      description: t('Take a guided tour to see what Sentry can do for you'),
+    };
+  }
+  return {
+    title: t('Quick Start'),
+    description: t('Walk through this guide to get the most out of Sentry right away.'),
+  };
+}
+
+interface TaskProps {
+  description: string;
+  title: string;
+  status?: 'waiting' | 'completed';
+}
+
+function Task({title, description, status}: TaskProps) {
+  if (status === 'completed') {
+    return (
+      <TaskWrapper completed>
+        <strong>{title}</strong>
+        <IconCheckmark color="successText" isCircled />
+      </TaskWrapper>
+    );
+  }
+
+  if (status === 'waiting') {
+    return (
+      <TaskWrapper>
+        <InteractionStateLayer />
+        <div>
+          <strong>{title}</strong>
+          <div>{description}</div>
+        </div>
+        <Tooltip title={t('Waiting for event')}>
+          <PulsingIndicator />
+        </Tooltip>
+      </TaskWrapper>
+    );
+  }
+
+  return (
+    <TaskWrapper>
+      <InteractionStateLayer />
+      <div>
+        <strong>{title}</strong>
+        <div>{description}</div>
+      </div>
+    </TaskWrapper>
+  );
+}
+
+interface TaskGroupProps {
+  description: string;
+  title: string;
+  totalCompletedTasks: number;
+  totalTasks: number;
+  expanded?: boolean;
+}
+
+function TaskGroup({
+  title,
+  description,
+  totalCompletedTasks,
+  totalTasks,
+  expanded,
+}: TaskGroupProps) {
+  const [isExpanded, setIsExpanded] = useState(expanded);
+  return (
+    <TaskGroupWrapper>
+      <TaskGroupHeader onClick={() => setIsExpanded(!isExpanded)}>
+        <InteractionStateLayer />
+        <span>
+          <strong>{title}</strong>
+          <div>{description}</div>
+        </span>
+        <Chevron
+          direction={isExpanded ? 'up' : 'down'}
+          role="presentation"
+          size="large"
+        />
+      </TaskGroupHeader>
+      {isExpanded && (
+        <Fragment>
+          <hr />
+          <TaskGroupBody>
+            <TaskGroupProgress>
+              {tct('[totalCompletedTasks] out of [totalTasks] tasks completed', {
+                totalCompletedTasks,
+                totalTasks,
+              })}
+              <ProgressRing
+                value={(totalCompletedTasks / totalTasks) * 100}
+                progressEndcaps="round"
+                size={16}
+                barWidth={2}
+              />
+            </TaskGroupProgress>
+            <Task title="Test" description="description" status="waiting" />
+            <Task title="Test" description="description" />
+            <Task title="Test" description="description" />
+            <TaskGroupProgress completed>{t('Completed')}</TaskGroupProgress>
+            <Task title="Test" description="description" status="completed" />
+            <Task title="Test" description="description" status="completed" />
+          </TaskGroupBody>
+        </Fragment>
+      )}
+    </TaskGroupWrapper>
+  );
+}
+
+interface NewSidebarProps extends Pick<CommonSidebarProps, 'orientation' | 'collapsed'> {
+  onClose: () => void;
+}
+
+export function NewSidebar({onClose, orientation, collapsed}: NewSidebarProps) {
+  const walkthrough = isDemoWalkthrough();
+  const {title, description} = getPanelDescription(walkthrough);
+
+  return (
+    <Wrapper
+      collapsed={collapsed}
+      hidePanel={onClose}
+      orientation={orientation}
+      title={title}
+    >
+      <Content>
+        <p>{description}</p>
+        <TaskGroup
+          title="Test"
+          description="description"
+          totalCompletedTasks={3}
+          totalTasks={10}
+          expanded
+        />
+        <TaskGroup
+          title="Test"
+          description="description"
+          totalCompletedTasks={3}
+          totalTasks={10}
+        />
+        <TaskGroup
+          title="Test"
+          description="description"
+          totalCompletedTasks={3}
+          totalTasks={10}
+        />
+      </Content>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled(SidebarPanel)`
+  width: 450px;
+`;
+
+const Content = styled('div')`
+  padding: ${space(3)};
+  display: flex;
+  flex-direction: column;
+  gap: ${space(1)};
+
+  p {
+    margin-bottom: ${space(1)};
+  }
+`;
+
+const TaskGroupWrapper = styled('div')`
+  border: 1px solid ${p => p.theme.border};
+  border-radius: ${p => p.theme.borderRadius};
+  padding: ${space(1)};
+
+  hr {
+    border-color: ${p => p.theme.translucentBorder};
+    margin: ${space(1)} -${space(1)};
+  }
+`;
+
+const TaskGroupHeader = styled('div')`
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  padding: ${space(1)} ${space(1.5)};
+  gap: ${space(1.5)};
+  position: relative;
+  border-radius: ${p => p.theme.borderRadius};
+  align-items: center;
+`;
+
+const TaskGroupBody = styled('div')`
+  border-radius: ${p => p.theme.borderRadius};
+`;
+
+const TaskGroupProgress = styled('div')<{completed?: boolean}>`
+  font-size: ${p => p.theme.fontSizeSmall};
+  font-weight: ${p => p.theme.fontWeightBold};
+  padding: ${space(0.75)} ${space(1.5)};
+  ${p =>
+    p.completed
+      ? css`
+          color: ${p.theme.successText};
+        `
+      : css`
+          color: ${p.theme.subText};
+          display: grid;
+          grid-template-columns: 1fr max-content;
+          align-items: center;
+          gap: ${space(1)};
+        `}
+`;
+
+const TaskWrapper = styled('div')<{completed?: boolean}>`
+  padding: ${space(1)} ${space(1.5)};
+  border-radius: ${p => p.theme.borderRadius};
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  align-items: center;
+  gap: ${space(1)};
+
+  ${p =>
+    p.completed
+      ? css`
+          strong {
+            opacity: 0.5;
+          }
+        `
+      : css`
+          position: relative;
+          cursor: pointer;
+        `}
+`;
+
+const PulsingIndicator = styled('div')`
+  ${pulsingIndicatorStyles};
+  margin: 0 ${space(0.5)};
+`;
diff --git a/static/app/components/onboardingWizard/utils.tsx b/static/app/components/onboardingWizard/utils.tsx
index 10935b1ca44ea9..38c1e9b9213352 100644
--- a/static/app/components/onboardingWizard/utils.tsx
+++ b/static/app/components/onboardingWizard/utils.tsx
@@ -1,4 +1,5 @@
 import type {OnboardingTask} from 'sentry/types/onboarding';
+import type {Organization} from 'sentry/types/organization';
 
 export const taskIsDone = (task: OnboardingTask) =>
   ['complete', 'skipped'].includes(task.status);
@@ -11,3 +12,7 @@ export const findActiveTasks = (task: OnboardingTask) =>
 
 export const findUpcomingTasks = (task: OnboardingTask) =>
   task.requisiteTasks.length > 0 && !findCompleteTasks(task);
+
+export function hasQuickStartUpdatesFeature(organization: Organization) {
+  return organization.features.includes('quick-start-updates');
+}
diff --git a/static/app/components/sidebar/onboardingStatus.tsx b/static/app/components/sidebar/onboardingStatus.tsx
index 38271838e600c4..5865e43f494c0f 100644
--- a/static/app/components/sidebar/onboardingStatus.tsx
+++ b/static/app/components/sidebar/onboardingStatus.tsx
@@ -4,8 +4,10 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {OnboardingContext} from 'sentry/components/onboarding/onboardingContext';
+import {NewSidebar} from 'sentry/components/onboardingWizard/newSidebar';
 import OnboardingSidebar from 'sentry/components/onboardingWizard/sidebar';
 import {getMergedTasks} from 'sentry/components/onboardingWizard/taskConfig';
+import {hasQuickStartUpdatesFeature} from 'sentry/components/onboardingWizard/utils';
 import ProgressRing, {
   RingBackground,
   RingBar,
@@ -125,13 +127,20 @@ export default function OnboardingStatus({
           </div>
         )}
       </Container>
-      {isActive && (
-        <OnboardingSidebar
-          orientation={orientation}
-          collapsed={collapsed}
-          onClose={hidePanel}
-        />
-      )}
+      {isActive &&
+        (hasQuickStartUpdatesFeature(org) ? (
+          <NewSidebar
+            orientation={orientation}
+            collapsed={collapsed}
+            onClose={hidePanel}
+          />
+        ) : (
+          <OnboardingSidebar
+            orientation={orientation}
+            collapsed={collapsed}
+            onClose={hidePanel}
+          />
+        ))}
     </Fragment>
   );
 }

From 59ef4e0b8e4fb0463eaa7f82bb5f938f84961d34 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 15 Oct 2024 12:14:51 -0300
Subject: [PATCH 02/10] update name

---
 static/app/components/onboardingWizard/newSidebar.tsx | 2 +-
 static/app/components/sidebar/onboardingStatus.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/app/components/onboardingWizard/newSidebar.tsx b/static/app/components/onboardingWizard/newSidebar.tsx
index f95928401d8f25..464fad35e7756a 100644
--- a/static/app/components/onboardingWizard/newSidebar.tsx
+++ b/static/app/components/onboardingWizard/newSidebar.tsx
@@ -132,7 +132,7 @@ interface NewSidebarProps extends Pick<CommonSidebarProps, 'orientation' | 'coll
   onClose: () => void;
 }
 
-export function NewSidebar({onClose, orientation, collapsed}: NewSidebarProps) {
+export function NewOnboardingSidebar({onClose, orientation, collapsed}: NewSidebarProps) {
   const walkthrough = isDemoWalkthrough();
   const {title, description} = getPanelDescription(walkthrough);
 
diff --git a/static/app/components/sidebar/onboardingStatus.tsx b/static/app/components/sidebar/onboardingStatus.tsx
index 5865e43f494c0f..04f08ae00286c8 100644
--- a/static/app/components/sidebar/onboardingStatus.tsx
+++ b/static/app/components/sidebar/onboardingStatus.tsx
@@ -4,7 +4,7 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {OnboardingContext} from 'sentry/components/onboarding/onboardingContext';
-import {NewSidebar} from 'sentry/components/onboardingWizard/newSidebar';
+import {NewOnboardingSidebar} from 'sentry/components/onboardingWizard/newSidebar';
 import OnboardingSidebar from 'sentry/components/onboardingWizard/sidebar';
 import {getMergedTasks} from 'sentry/components/onboardingWizard/taskConfig';
 import {hasQuickStartUpdatesFeature} from 'sentry/components/onboardingWizard/utils';
@@ -129,7 +129,7 @@ export default function OnboardingStatus({
       </Container>
       {isActive &&
         (hasQuickStartUpdatesFeature(org) ? (
-          <NewSidebar
+          <NewOnboardingSidebar
             orientation={orientation}
             collapsed={collapsed}
             onClose={hidePanel}

From 9e86fec00a0baa221ff330ccc7b8721307ff3063 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 15 Oct 2024 15:30:43 -0300
Subject: [PATCH 03/10] make it responsive

---
 .../onboardingWizard/newSidebar.tsx           | 55 ++++++++++++-------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/static/app/components/onboardingWizard/newSidebar.tsx b/static/app/components/onboardingWizard/newSidebar.tsx
index 464fad35e7756a..0c945e6ba3ceea 100644
--- a/static/app/components/onboardingWizard/newSidebar.tsx
+++ b/static/app/components/onboardingWizard/newSidebar.tsx
@@ -38,7 +38,7 @@ function Task({title, description, status}: TaskProps) {
     return (
       <TaskWrapper completed>
         <strong>{title}</strong>
-        <IconCheckmark color="successText" isCircled />
+        <IconCheckmark color="green300" isCircled />
       </TaskWrapper>
     );
   }
@@ -49,7 +49,7 @@ function Task({title, description, status}: TaskProps) {
         <InteractionStateLayer />
         <div>
           <strong>{title}</strong>
-          <div>{description}</div>
+          <p>{description}</p>
         </div>
         <Tooltip title={t('Waiting for event')}>
           <PulsingIndicator />
@@ -63,7 +63,7 @@ function Task({title, description, status}: TaskProps) {
       <InteractionStateLayer />
       <div>
         <strong>{title}</strong>
-        <div>{description}</div>
+        <p>{description}</p>
       </div>
     </TaskWrapper>
   );
@@ -91,7 +91,7 @@ function TaskGroup({
         <InteractionStateLayer />
         <span>
           <strong>{title}</strong>
-          <div>{description}</div>
+          <p>{description}</p>
         </span>
         <Chevron
           direction={isExpanded ? 'up' : 'down'}
@@ -115,12 +115,12 @@ function TaskGroup({
                 barWidth={2}
               />
             </TaskGroupProgress>
-            <Task title="Test" description="description" status="waiting" />
-            <Task title="Test" description="description" />
-            <Task title="Test" description="description" />
+            <Task title="Title" description="Description" status="waiting" />
+            <Task title="Title" description="Description" />
+            <Task title="Title" description="Description" />
             <TaskGroupProgress completed>{t('Completed')}</TaskGroupProgress>
-            <Task title="Test" description="description" status="completed" />
-            <Task title="Test" description="description" status="completed" />
+            <Task title="Title" description="Description" status="completed" />
+            <Task title="Title" description="Description" status="completed" />
           </TaskGroupBody>
         </Fragment>
       )}
@@ -146,23 +146,23 @@ export function NewOnboardingSidebar({onClose, orientation, collapsed}: NewSideb
       <Content>
         <p>{description}</p>
         <TaskGroup
-          title="Test"
-          description="description"
+          title="Title"
+          description="Description"
           totalCompletedTasks={3}
-          totalTasks={10}
+          totalTasks={8}
           expanded
         />
         <TaskGroup
-          title="Test"
-          description="description"
+          title="Title"
+          description="Description"
           totalCompletedTasks={3}
-          totalTasks={10}
+          totalTasks={8}
         />
         <TaskGroup
-          title="Test"
-          description="description"
+          title="Title"
+          description="Description"
           totalCompletedTasks={3}
-          totalTasks={10}
+          totalTasks={8}
         />
       </Content>
     </Wrapper>
@@ -170,7 +170,10 @@ export function NewOnboardingSidebar({onClose, orientation, collapsed}: NewSideb
 }
 
 const Wrapper = styled(SidebarPanel)`
-  width: 450px;
+  width: 100%;
+  @media (min-width: ${p => p.theme.breakpoints.xsmall}) {
+    width: 450px;
+  }
 `;
 
 const Content = styled('div')`
@@ -204,6 +207,12 @@ const TaskGroupHeader = styled('div')`
   position: relative;
   border-radius: ${p => p.theme.borderRadius};
   align-items: center;
+
+  p {
+    margin: 0;
+    font-size: ${p => p.theme.fontSizeSmall};
+    color: ${p => p.theme.subText};
+  }
 `;
 
 const TaskGroupBody = styled('div')`
@@ -217,7 +226,7 @@ const TaskGroupProgress = styled('div')<{completed?: boolean}>`
   ${p =>
     p.completed
       ? css`
-          color: ${p.theme.successText};
+          color: ${p.theme.green300};
         `
       : css`
           color: ${p.theme.subText};
@@ -236,6 +245,12 @@ const TaskWrapper = styled('div')<{completed?: boolean}>`
   align-items: center;
   gap: ${space(1)};
 
+  p {
+    margin: 0;
+    font-size: ${p => p.theme.fontSizeSmall};
+    color: ${p => p.theme.subText};
+  }
+
   ${p =>
     p.completed
       ? css`

From e270652704ff2a613c20afb8e228b70c51e5d3ab Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 15 Oct 2024 18:13:46 -0300
Subject: [PATCH 04/10] feat(quick-start): Add logic to skeleton - Part 1

---
 .../onboardingWizard/newSidebar.tsx           | 252 ++++++++++++++----
 .../onboardingWizard/taskConfig.tsx           |  61 ++++-
 static/app/types/onboarding.tsx               |  13 +
 3 files changed, 269 insertions(+), 57 deletions(-)

diff --git a/static/app/components/onboardingWizard/newSidebar.tsx b/static/app/components/onboardingWizard/newSidebar.tsx
index 0c945e6ba3ceea..ea3f45a1dcff5a 100644
--- a/static/app/components/onboardingWizard/newSidebar.tsx
+++ b/static/app/components/onboardingWizard/newSidebar.tsx
@@ -1,18 +1,73 @@
-import {Fragment, useState} from 'react';
+import {
+  Fragment,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
+import partition from 'lodash/partition';
 
+import {navigateTo} from 'sentry/actionCreators/navigation';
+import {updateOnboardingTask} from 'sentry/actionCreators/onboardingTasks';
 import {Chevron} from 'sentry/components/chevron';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
+import {
+  OnboardingContext,
+  type OnboardingContextProps,
+} from 'sentry/components/onboarding/onboardingContext';
+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 {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 {Organization} from 'sentry/types/organization';
+import type {Project} from 'sentry/types/project';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {isDemoWalkthrough} from 'sentry/utils/demoMode';
+import useApi from 'sentry/utils/useApi';
+import useOrganization from 'sentry/utils/useOrganization';
+import useProjects from 'sentry/utils/useProjects';
+import useRouter from 'sentry/utils/useRouter';
+
+import {getMergedTasks} from './taskConfig';
+
+/**
+ * How long (in ms) to delay before beginning to mark tasks complete
+ */
+const INITIAL_MARK_COMPLETE_TIMEOUT = 600;
+
+/**
+ * How long (in ms) to delay between marking each unseen task as complete.
+ */
+const COMPLETION_SEEN_TIMEOUT = 800;
+
+function useOnboardingTasks(
+  organization: Organization,
+  projects: Project[],
+  onboardingContext: OnboardingContextProps
+) {
+  return useMemo(() => {
+    const all = getMergedTasks({
+      organization,
+      projects,
+      onboardingContext,
+    }).filter(task => task.display);
+    return {
+      allTasks: all,
+      basicTasks: all.filter(task => task.group === OnboardingTaskGroup.BASIC),
+    };
+  }, [organization, projects, onboardingContext]);
+}
 
 function getPanelDescription(walkthrough: boolean) {
   if (walkthrough) {
@@ -28,16 +83,56 @@ function getPanelDescription(walkthrough: boolean) {
 }
 
 interface TaskProps {
-  description: string;
-  title: string;
+  hidePanel: () => void;
+  task: OnboardingTask;
   status?: 'waiting' | 'completed';
 }
 
-function Task({title, description, status}: TaskProps) {
+function Task({task, status, hidePanel}: TaskProps) {
+  const organization = useOrganization();
+  const router = useRouter();
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      trackAnalytics('quick_start.task_card_clicked', {
+        organization,
+        todo_id: task.task,
+        todo_title: task.title,
+        action: 'clickthrough',
+      });
+
+      e.stopPropagation();
+
+      if (isDemoWalkthrough()) {
+        DemoWalkthroughStore.activateGuideAnchor(task.task);
+      }
+
+      if (task.actionType === 'external') {
+        window.open(task.location, '_blank');
+      }
+
+      if (task.actionType === 'action') {
+        task.action(router);
+      }
+
+      if (task.actionType === 'app') {
+        // Convert all paths to a location object
+        let to =
+          typeof task.location === 'string' ? {pathname: task.location} : task.location;
+        // Add referrer to all links
+        to = {...to, query: {...to.query, referrer: 'onboarding_task'}};
+
+        navigateTo(to, router);
+      }
+      hidePanel();
+    },
+    [task, organization, router, hidePanel]
+  );
+
   if (status === 'completed') {
     return (
       <TaskWrapper completed>
-        <strong>{title}</strong>
+        <strong>{task.title}</strong>
         <IconCheckmark color="green300" isCircled />
       </TaskWrapper>
     );
@@ -45,11 +140,11 @@ function Task({title, description, status}: TaskProps) {
 
   if (status === 'waiting') {
     return (
-      <TaskWrapper>
+      <TaskWrapper onClick={handleClick}>
         <InteractionStateLayer />
         <div>
-          <strong>{title}</strong>
-          <p>{description}</p>
+          <strong>{task.title}</strong>
+          <p>{task.description}</p>
         </div>
         <Tooltip title={t('Waiting for event')}>
           <PulsingIndicator />
@@ -59,11 +154,11 @@ function Task({title, description, status}: TaskProps) {
   }
 
   return (
-    <TaskWrapper>
+    <TaskWrapper onClick={handleClick}>
       <InteractionStateLayer />
       <div>
-        <strong>{title}</strong>
-        <p>{description}</p>
+        <strong>{task.title}</strong>
+        <p>{task.description}</p>
       </div>
     </TaskWrapper>
   );
@@ -71,20 +166,18 @@ function Task({title, description, status}: TaskProps) {
 
 interface TaskGroupProps {
   description: string;
+  hidePanel: () => void;
+  tasks: OnboardingTask[];
   title: string;
-  totalCompletedTasks: number;
-  totalTasks: number;
   expanded?: boolean;
 }
 
-function TaskGroup({
-  title,
-  description,
-  totalCompletedTasks,
-  totalTasks,
-  expanded,
-}: TaskGroupProps) {
+function TaskGroup({title, description, tasks, expanded, hidePanel}: TaskGroupProps) {
   const [isExpanded, setIsExpanded] = useState(expanded);
+  const [completedTasks, incompletedTasks] = partition(tasks, task =>
+    findCompleteTasks(task)
+  );
+
   return (
     <TaskGroupWrapper>
       <TaskGroupHeader onClick={() => setIsExpanded(!isExpanded)}>
@@ -105,22 +198,32 @@ function TaskGroup({
           <TaskGroupBody>
             <TaskGroupProgress>
               {tct('[totalCompletedTasks] out of [totalTasks] tasks completed', {
-                totalCompletedTasks,
-                totalTasks,
+                totalCompletedTasks: completedTasks.length,
+                totalTasks: tasks.length,
               })}
               <ProgressRing
-                value={(totalCompletedTasks / totalTasks) * 100}
+                value={(completedTasks.length / tasks.length) * 100}
                 progressEndcaps="round"
                 size={16}
                 barWidth={2}
               />
             </TaskGroupProgress>
-            <Task title="Title" description="Description" status="waiting" />
-            <Task title="Title" description="Description" />
-            <Task title="Title" description="Description" />
-            <TaskGroupProgress completed>{t('Completed')}</TaskGroupProgress>
-            <Task title="Title" description="Description" status="completed" />
-            <Task title="Title" description="Description" status="completed" />
+            {incompletedTasks.map(task => (
+              <Task key={task.task} task={task} hidePanel={hidePanel} />
+            ))}
+            {completedTasks.length > 0 && (
+              <Fragment>
+                <TaskGroupProgress completed>{t('Completed')}</TaskGroupProgress>
+                {completedTasks.map(task => (
+                  <Task
+                    key={task.task}
+                    task={task}
+                    hidePanel={hidePanel}
+                    status="completed"
+                  />
+                ))}
+              </Fragment>
+            )}
           </TaskGroupBody>
         </Fragment>
       )}
@@ -133,8 +236,69 @@ interface NewSidebarProps extends Pick<CommonSidebarProps, 'orientation' | 'coll
 }
 
 export function NewOnboardingSidebar({onClose, orientation, collapsed}: NewSidebarProps) {
+  const api = useApi();
+  const organization = useOrganization();
+  const onboardingContext = useContext(OnboardingContext);
+  const {projects} = useProjects();
   const walkthrough = isDemoWalkthrough();
   const {title, description} = getPanelDescription(walkthrough);
+  const {allTasks, basicTasks} = useOnboardingTasks(
+    organization,
+    projects,
+    onboardingContext
+  );
+
+  const markCompletionTimeout = useRef<number | undefined>();
+  const markCompletionSeenTimeout = useRef<number | undefined>();
+
+  function completionTimeout(time: number): Promise<void> {
+    window.clearTimeout(markCompletionTimeout.current);
+    return new Promise(resolve => {
+      markCompletionTimeout.current = window.setTimeout(resolve, time);
+    });
+  }
+
+  function seenTimeout(time: number): Promise<void> {
+    window.clearTimeout(markCompletionSeenTimeout.current);
+    return new Promise(resolve => {
+      markCompletionSeenTimeout.current = window.setTimeout(resolve, time);
+    });
+  }
+
+  const markTasksAsSeen = useCallback(
+    async function () {
+      const unseenTasks = allTasks
+        .filter(task => taskIsDone(task) && !task.completionSeen)
+        .map(task => task.task);
+
+      // Incrementally mark tasks as seen. This gives the card completion
+      // animations time before we move each task into the completed section.
+      for (const task of unseenTasks) {
+        await seenTimeout(COMPLETION_SEEN_TIMEOUT);
+        updateOnboardingTask(api, organization, {task, completionSeen: true});
+      }
+    },
+    [api, organization, allTasks]
+  );
+
+  const markSeenOnOpen = useCallback(
+    async function () {
+      // Add a minor delay to marking tasks complete to account for the animation
+      // opening of the sidebar panel
+      await completionTimeout(INITIAL_MARK_COMPLETE_TIMEOUT);
+      markTasksAsSeen();
+    },
+    [markTasksAsSeen]
+  );
+
+  useEffect(() => {
+    markSeenOnOpen();
+
+    return () => {
+      window.clearTimeout(markCompletionTimeout.current);
+      window.clearTimeout(markCompletionSeenTimeout.current);
+    };
+  }, [markSeenOnOpen]);
 
   return (
     <Wrapper
@@ -145,25 +309,17 @@ export function NewOnboardingSidebar({onClose, orientation, collapsed}: NewSideb
     >
       <Content>
         <p>{description}</p>
-        <TaskGroup
-          title="Title"
-          description="Description"
-          totalCompletedTasks={3}
-          totalTasks={8}
-          expanded
-        />
-        <TaskGroup
-          title="Title"
-          description="Description"
-          totalCompletedTasks={3}
-          totalTasks={8}
-        />
-        <TaskGroup
-          title="Title"
-          description="Description"
-          totalCompletedTasks={3}
-          totalTasks={8}
-        />
+        {basicTasks.length && (
+          <TaskGroup
+            title={t('The basics')}
+            description={t(
+              'Learn the essentials to set up monitoring, capture errors, and track releases.'
+            )}
+            tasks={basicTasks}
+            hidePanel={onClose}
+            expanded
+          />
+        )}
       </Content>
     </Wrapper>
   );
diff --git a/static/app/components/onboardingWizard/taskConfig.tsx b/static/app/components/onboardingWizard/taskConfig.tsx
index d9314500789b94..da03e47881783a 100644
--- a/static/app/components/onboardingWizard/taskConfig.tsx
+++ b/static/app/components/onboardingWizard/taskConfig.tsx
@@ -5,7 +5,10 @@ import {navigateTo} from 'sentry/actionCreators/navigation';
 import type {Client} from 'sentry/api';
 import type {OnboardingContextProps} from 'sentry/components/onboarding/onboardingContext';
 import {filterSupportedTasks} from 'sentry/components/onboardingWizard/filterSupportedTasks';
-import {taskIsDone} from 'sentry/components/onboardingWizard/utils';
+import {
+  hasQuickStartUpdatesFeature,
+  taskIsDone,
+} from 'sentry/components/onboardingWizard/utils';
 import {filterProjects} from 'sentry/components/performanceOnboarding/utils';
 import {SidebarPanelKey} from 'sentry/components/sidebar/types';
 import {sourceMaps} from 'sentry/data/platformCategories';
@@ -18,7 +21,7 @@ import type {
   OnboardingTask,
   OnboardingTaskDescriptor,
 } from 'sentry/types/onboarding';
-import {OnboardingTaskKey} from 'sentry/types/onboarding';
+import {OnboardingTaskGroup, OnboardingTaskKey} from 'sentry/types/onboarding';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {isDemoWalkthrough} from 'sentry/utils/demoMode';
@@ -168,14 +171,19 @@ export function getOnboardingTasks({
     {
       task: OnboardingTaskKey.FIRST_PROJECT,
       title: t('Create a project'),
-      description: t(
-        "Monitor in seconds by adding a simple lines of code to your project. It's as easy as microwaving leftover pizza."
-      ),
+      description: hasQuickStartUpdatesFeature(organization)
+        ? t(
+            "Monitor in seconds by adding a few lines of code to your project. It's as easy as microwaving leftover pizza."
+          )
+        : t(
+            "Monitor in seconds by adding a simple lines of code to your project. It's as easy as microwaving leftover pizza."
+          ),
       skippable: false,
       requisites: [],
       actionType: 'app',
       location: `/organizations/${organization.slug}/projects/new/`,
       display: true,
+      group: OnboardingTaskGroup.BASIC,
     },
     {
       task: OnboardingTaskKey.FIRST_EVENT,
@@ -204,6 +212,7 @@ export function getOnboardingTasks({
             </EventWaiter>
           ) : null
       ),
+      group: OnboardingTaskGroup.BASIC,
     },
     {
       task: OnboardingTaskKey.INVITE_MEMBER,
@@ -216,6 +225,7 @@ export function getOnboardingTasks({
       actionType: 'action',
       action: () => openInviteMembersModal({source: 'onboarding_widget'}),
       display: true,
+      group: OnboardingTaskGroup.BASIC,
     },
     {
       task: OnboardingTaskKey.FIRST_INTEGRATION,
@@ -227,7 +237,34 @@ export function getOnboardingTasks({
       requisites: [OnboardingTaskKey.FIRST_PROJECT, OnboardingTaskKey.FIRST_EVENT],
       actionType: 'app',
       location: `/settings/${organization.slug}/integrations/`,
-      display: true,
+      display: !hasQuickStartUpdatesFeature(organization),
+      group: OnboardingTaskGroup.BASIC,
+    },
+    {
+      task: OnboardingTaskKey.REAL_TIME_NOTIFICATIONS,
+      title: t('Real-time notifications'),
+      description: t(
+        'Triage and resolving issues faster by integrating Sentry with messaging platforms like Slack, Discord and MS Teams.'
+      ),
+      skippable: true,
+      requisites: [OnboardingTaskKey.FIRST_PROJECT, OnboardingTaskKey.FIRST_EVENT],
+      actionType: 'app',
+      location: `/settings/${organization.slug}/integrations/?category=chat`,
+      display: hasQuickStartUpdatesFeature(organization),
+      group: OnboardingTaskGroup.BASIC,
+    },
+    {
+      task: OnboardingTaskKey.LINK_SENTRY_TO_SOURCE_CODE,
+      title: t('Link Sentry to Source Code'),
+      description: t(
+        'Resolve bugs faster with commit data and stack trace linking to your source code in GitHub, Gitlab and more.'
+      ),
+      skippable: true,
+      requisites: [OnboardingTaskKey.FIRST_PROJECT, OnboardingTaskKey.FIRST_EVENT],
+      actionType: 'app',
+      location: `/settings/${organization.slug}/integrations/?category=codeowners`,
+      display: hasQuickStartUpdatesFeature(organization),
+      group: OnboardingTaskGroup.BASIC,
     },
     {
       task: OnboardingTaskKey.SECOND_PLATFORM,
@@ -362,14 +399,19 @@ export function getOnboardingTasks({
     {
       task: OnboardingTaskKey.RELEASE_TRACKING,
       title: t('Track releases'),
-      description: t(
-        'Take an in-depth look at the health of each and every release with crash analytics, errors, related issues and suspect commits.'
-      ),
+      description: hasQuickStartUpdatesFeature(organization)
+        ? t(
+            'Identify which release introduced an issue and track release health with crash analytics, errors, and adoption data.'
+          )
+        : t(
+            'Take an in-depth look at the health of each and every release with crash analytics, errors, related issues and suspect commits.'
+          ),
       skippable: true,
       requisites: [OnboardingTaskKey.FIRST_PROJECT, OnboardingTaskKey.FIRST_EVENT],
       actionType: 'app',
       location: `/settings/${organization.slug}/projects/:projectId/release-tracking/`,
       display: true,
+      group: OnboardingTaskGroup.BASIC,
     },
     {
       task: OnboardingTaskKey.SOURCEMAPS,
@@ -418,6 +460,7 @@ export function getOnboardingTasks({
       actionType: 'app',
       location: getIssueAlertUrl({projects, organization, onboardingContext}),
       display: true,
+      group: OnboardingTaskGroup.BASIC,
     },
     {
       task: OnboardingTaskKey.METRIC_ALERT,
diff --git a/static/app/types/onboarding.tsx b/static/app/types/onboarding.tsx
index d0d8df11eb9674..967c0228368b41 100644
--- a/static/app/types/onboarding.tsx
+++ b/static/app/types/onboarding.tsx
@@ -9,6 +9,13 @@ import type {Organization} from './organization';
 import type {PlatformIntegration, PlatformKey, Project} from './project';
 import type {AvatarUser} from './user';
 
+// TODO(priscilawebdev): Define the groups we would like to display
+export enum OnboardingTaskGroup {
+  BASIC = 'basic',
+  NEXT = 'next',
+  LEVEL_UP = 'level_up',
+}
+
 export enum OnboardingTaskKey {
   FIRST_PROJECT = 'create_project',
   FIRST_EVENT = 'send_first_event',
@@ -23,6 +30,8 @@ export enum OnboardingTaskKey {
   FIRST_TRANSACTION = 'setup_transactions',
   METRIC_ALERT = 'setup_metric_alert_rules',
   USER_SELECTED_PROJECTS = 'setup_userselected_projects',
+  REAL_TIME_NOTIFICATIONS = 'setup_real_time_notifications',
+  LINK_SENTRY_TO_SOURCE_CODE = 'link_sentry_to_source_code',
   /// Customized card that shows the selected integrations during onboarding
   INTEGRATIONS = 'integrations',
   /// Regular card that tells the user to setup integrations if no integrations were selected during onboarding
@@ -68,6 +77,10 @@ interface OnboardingTaskDescriptorBase {
    * An extra component that may be rendered within the onboarding task item.
    */
   SupplementComponent?: React.ComponentType<OnboardingSupplementComponentProps>;
+  /**
+   * The group that this task belongs to, e.g. basic and level up
+   */
+  group?: OnboardingTaskGroup;
   /**
    * If a render function was provided, it will be used to render the entire card,
    * and the card will be rendered before any other cards regardless of completion status.

From 54e6a54f255b7fde952872974327ca02c9d403fb Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Wed, 16 Oct 2024 06:17:59 -0300
Subject: [PATCH 05/10] fix readig undefined 'features'

---
 static/app/components/onboardingWizard/utils.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/components/onboardingWizard/utils.tsx b/static/app/components/onboardingWizard/utils.tsx
index 38c1e9b9213352..1374b3fc828b03 100644
--- a/static/app/components/onboardingWizard/utils.tsx
+++ b/static/app/components/onboardingWizard/utils.tsx
@@ -14,5 +14,5 @@ export const findUpcomingTasks = (task: OnboardingTask) =>
   task.requisiteTasks.length > 0 && !findCompleteTasks(task);
 
 export function hasQuickStartUpdatesFeature(organization: Organization) {
-  return organization.features.includes('quick-start-updates');
+  return organization.features?.includes('quick-start-updates');
 }

From 5e9e581ee1d65951c7ee98cc669a0c60cb824749 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Wed, 16 Oct 2024 07:54:54 -0300
Subject: [PATCH 06/10] ref(quick-start): Apply skeleton feedback

---
 static/app/components/onboardingWizard/newSidebar.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/static/app/components/onboardingWizard/newSidebar.tsx b/static/app/components/onboardingWizard/newSidebar.tsx
index ea3f45a1dcff5a..7077c068008931 100644
--- a/static/app/components/onboardingWizard/newSidebar.tsx
+++ b/static/app/components/onboardingWizard/newSidebar.tsx
@@ -182,15 +182,11 @@ function TaskGroup({title, description, tasks, expanded, hidePanel}: TaskGroupPr
     <TaskGroupWrapper>
       <TaskGroupHeader onClick={() => setIsExpanded(!isExpanded)}>
         <InteractionStateLayer />
-        <span>
+        <div>
           <strong>{title}</strong>
           <p>{description}</p>
-        </span>
-        <Chevron
-          direction={isExpanded ? 'up' : 'down'}
-          role="presentation"
-          size="large"
-        />
+        </div>
+        <Chevron direction={isExpanded ? 'up' : 'down'} role="button" size="large" />
       </TaskGroupHeader>
       {isExpanded && (
         <Fragment>

From ef778862906e477a0c9ebdd2cb98efab06aa5f0e Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Wed, 16 Oct 2024 08:04:47 -0300
Subject: [PATCH 07/10] feedback

---
 static/app/components/onboardingWizard/newSidebar.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/static/app/components/onboardingWizard/newSidebar.tsx b/static/app/components/onboardingWizard/newSidebar.tsx
index 7077c068008931..58491d5f679406 100644
--- a/static/app/components/onboardingWizard/newSidebar.tsx
+++ b/static/app/components/onboardingWizard/newSidebar.tsx
@@ -180,13 +180,17 @@ function TaskGroup({title, description, tasks, expanded, hidePanel}: TaskGroupPr
 
   return (
     <TaskGroupWrapper>
-      <TaskGroupHeader onClick={() => setIsExpanded(!isExpanded)}>
+      <TaskGroupHeader role="button" onClick={() => setIsExpanded(!isExpanded)}>
         <InteractionStateLayer />
         <div>
           <strong>{title}</strong>
           <p>{description}</p>
         </div>
-        <Chevron direction={isExpanded ? 'up' : 'down'} role="button" size="large" />
+        <Chevron
+          direction={isExpanded ? 'up' : 'down'}
+          role="presentation"
+          size="large"
+        />
       </TaskGroupHeader>
       {isExpanded && (
         <Fragment>

From 7da0de2750cdc4c4ea07287db50049b13d3cd60e Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Wed, 16 Oct 2024 09:08:34 -0300
Subject: [PATCH 08/10] feat(quick-start): Add logic to skeleton - Part 2

---
 .../onboardingWizard/newSidebar.tsx           | 113 +++++++++++++-----
 .../onboardingWizard/taskConfig.tsx           |  74 +++++++++---
 2 files changed, 140 insertions(+), 47 deletions(-)

diff --git a/static/app/components/onboardingWizard/newSidebar.tsx b/static/app/components/onboardingWizard/newSidebar.tsx
index 58491d5f679406..6bcc26ca9aa60b 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 (
       <TaskWrapper completed>
         <strong>{task.title}</strong>
@@ -138,20 +171,20 @@ function Task({task, status, hidePanel}: TaskProps) {
     );
   }
 
-  if (status === 'waiting') {
-    return (
-      <TaskWrapper onClick={handleClick}>
-        <InteractionStateLayer />
-        <div>
-          <strong>{task.title}</strong>
-          <p>{task.description}</p>
-        </div>
-        <Tooltip title={t('Waiting for event')}>
-          <PulsingIndicator />
-        </Tooltip>
-      </TaskWrapper>
-    );
-  }
+  // if (status === 'waiting') {
+  //   return (
+  //     <TaskWrapper onClick={handleClick}>
+  //       <InteractionStateLayer />
+  //       <div>
+  //         <strong>{task.title}</strong>
+  //         <p>{task.description}</p>
+  //       </div>
+  //       <Tooltip title={t('Waiting for event')}>
+  //         <PulsingIndicator />
+  //       </Tooltip>
+  //     </TaskWrapper>
+  //   );
+  // }
 
   return (
     <TaskWrapper onClick={handleClick}>
@@ -160,6 +193,29 @@ function Task({task, status, hidePanel}: TaskProps) {
         <strong>{task.title}</strong>
         <p>{task.description}</p>
       </div>
+      {task.requisiteTasks.length === 0 && (
+        <Fragment>
+          {task.skippable && (
+            <SkipConfirm onSkip={() => handleMarkSkipped(task.task)}>
+              {({skip}) => (
+                <Button
+                  borderless
+                  size="zero"
+                  aria-label={t('Close')}
+                  icon={<IconClose size="xs" color="gray300" />}
+                  onClick={skip}
+                />
+              )}
+            </SkipConfirm>
+          )}
+          {task.SupplementComponent && (
+            <task.SupplementComponent
+              task={task}
+              onCompleteTask={() => handleMarkComplete(task.task)}
+            />
+          )}
+        </Fragment>
+      )}
     </TaskWrapper>
   );
 }
@@ -215,12 +271,7 @@ function TaskGroup({title, description, tasks, expanded, hidePanel}: TaskGroupPr
               <Fragment>
                 <TaskGroupProgress completed>{t('Completed')}</TaskGroupProgress>
                 {completedTasks.map(task => (
-                  <Task
-                    key={task.task}
-                    task={task}
-                    hidePanel={hidePanel}
-                    status="completed"
-                  />
+                  <Task key={task.task} task={task} hidePanel={hidePanel} completed />
                 ))}
               </Fragment>
             )}
@@ -398,7 +449,6 @@ const TaskWrapper = styled('div')<{completed?: boolean}>`
   border-radius: ${p => p.theme.borderRadius};
   display: grid;
   grid-template-columns: 1fr max-content;
-  align-items: center;
   gap: ${space(1)};
 
   p {
@@ -413,14 +463,11 @@ const TaskWrapper = styled('div')<{completed?: boolean}>`
           strong {
             opacity: 0.5;
           }
+          align-items: center;
         `
       : css`
           position: relative;
           cursor: pointer;
+          align-items: flex-start;
         `}
 `;
-
-const PulsingIndicator = styled('div')`
-  ${pulsingIndicatorStyles};
-  margin: 0 ${space(0.5)};
-`;
diff --git a/static/app/components/onboardingWizard/taskConfig.tsx b/static/app/components/onboardingWizard/taskConfig.tsx
index da03e47881783a..9c6867a66b58a8 100644
--- a/static/app/components/onboardingWizard/taskConfig.tsx
+++ b/static/app/components/onboardingWizard/taskConfig.tsx
@@ -1,3 +1,4 @@
+import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {openInviteMembersModal} from 'sentry/actionCreators/modal';
@@ -11,6 +12,7 @@ import {
 } from 'sentry/components/onboardingWizard/utils';
 import {filterProjects} from 'sentry/components/performanceOnboarding/utils';
 import {SidebarPanelKey} from 'sentry/components/sidebar/types';
+import {Tooltip} from 'sentry/components/tooltip';
 import {sourceMaps} from 'sentry/data/platformCategories';
 import {t} from 'sentry/locale';
 import SidebarPanelStore from 'sentry/stores/sidebarPanelStore';
@@ -208,7 +210,12 @@ export function getOnboardingTasks({
               eventType="error"
               onIssueReceived={() => !taskIsDone(task) && onCompleteTask()}
             >
-              {() => <EventWaitingIndicator text={t('Waiting for error')} />}
+              {() => (
+                <EventWaitingIndicator
+                  text={t('Waiting for error')}
+                  hasQuickStartUpdatesFeature={hasQuickStartUpdatesFeature(organization)}
+                />
+              )}
             </EventWaiter>
           ) : null
       ),
@@ -338,7 +345,11 @@ export function getOnboardingTasks({
               eventType="transaction"
               onIssueReceived={() => !taskIsDone(task) && onCompleteTask()}
             >
-              {() => <EventWaitingIndicator />}
+              {() => (
+                <EventWaitingIndicator
+                  hasQuickStartUpdatesFeature={hasQuickStartUpdatesFeature(organization)}
+                />
+              )}
             </EventWaiter>
           ) : null
       ),
@@ -391,7 +402,12 @@ export function getOnboardingTasks({
               eventType="replay"
               onIssueReceived={() => !taskIsDone(task) && onCompleteTask()}
             >
-              {() => <EventWaitingIndicator text={t('Waiting for user session')} />}
+              {() => (
+                <EventWaitingIndicator
+                  hasQuickStartUpdatesFeature={hasQuickStartUpdatesFeature(organization)}
+                  text={t('Waiting for user session')}
+                />
+              )}
             </EventWaiter>
           ) : null
       ),
@@ -516,22 +532,52 @@ export function getMergedTasks({organization, projects, onboardingContext}: Opti
   }));
 }
 
-const PulsingIndicator = styled('div')`
+const PulsingIndicator = styled('div')<{hasQuickStartUpdatesFeature?: boolean}>`
   ${pulsingIndicatorStyles};
-  margin-right: ${space(1)};
+  ${p =>
+    p.hasQuickStartUpdatesFeature
+      ? css`
+          margin: 0 ${space(0.5)};
+        `
+      : css`
+          margin-right: ${space(1)};
+        `}
 `;
 
 const EventWaitingIndicator = styled(
-  (p: React.HTMLAttributes<HTMLDivElement> & {text?: string}) => (
-    <div {...p}>
-      <PulsingIndicator />
-      {p.text || t('Waiting for event')}
-    </div>
-  )
+  (
+    p: React.HTMLAttributes<HTMLDivElement> & {
+      hasQuickStartUpdatesFeature: boolean;
+      text?: string;
+    }
+  ) => {
+    if (p.hasQuickStartUpdatesFeature) {
+      return (
+        <div {...p}>
+          <Tooltip title={p.text || t('Waiting for event')}>
+            <PulsingIndicator hasQuickStartUpdatesFeature />
+          </Tooltip>
+        </div>
+      );
+    }
+    return (
+      <div {...p}>
+        <PulsingIndicator />
+        {p.text || t('Waiting for event')}
+      </div>
+    );
+  }
 )`
   display: flex;
   align-items: center;
-  flex-grow: 1;
-  font-size: ${p => p.theme.fontSizeMedium};
-  color: ${p => p.theme.pink400};
+  ${p =>
+    p.hasQuickStartUpdatesFeature
+      ? css`
+          height: 16px;
+        `
+      : css`
+          flex-grow: 1;
+          font-size: ${p.theme.fontSizeMedium};
+          color: ${p.theme.pink400};
+        `}
 `;

From a3206d18a2dace7f10e131980d215b5744d8c025 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Wed, 16 Oct 2024 09:09:41 -0300
Subject: [PATCH 09/10] remove comment

---
 .../components/onboardingWizard/newSidebar.tsx    | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/static/app/components/onboardingWizard/newSidebar.tsx b/static/app/components/onboardingWizard/newSidebar.tsx
index 6bcc26ca9aa60b..387358437718c1 100644
--- a/static/app/components/onboardingWizard/newSidebar.tsx
+++ b/static/app/components/onboardingWizard/newSidebar.tsx
@@ -171,21 +171,6 @@ function Task({task, completed, hidePanel}: TaskProps) {
     );
   }
 
-  // if (status === 'waiting') {
-  //   return (
-  //     <TaskWrapper onClick={handleClick}>
-  //       <InteractionStateLayer />
-  //       <div>
-  //         <strong>{task.title}</strong>
-  //         <p>{task.description}</p>
-  //       </div>
-  //       <Tooltip title={t('Waiting for event')}>
-  //         <PulsingIndicator />
-  //       </Tooltip>
-  //     </TaskWrapper>
-  //   );
-  // }
-
   return (
     <TaskWrapper onClick={handleClick}>
       <InteractionStateLayer />

From 9758b198ff529f6f53c4a92edf2ea9ca00e3195b Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Thu, 17 Oct 2024 09:44:34 -0300
Subject: [PATCH 10/10] feedback

---
 .../onboardingWizard/taskConfig.tsx           | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/static/app/components/onboardingWizard/taskConfig.tsx b/static/app/components/onboardingWizard/taskConfig.tsx
index 9c6867a66b58a8..63c1859c587633 100644
--- a/static/app/components/onboardingWizard/taskConfig.tsx
+++ b/static/app/components/onboardingWizard/taskConfig.tsx
@@ -545,16 +545,18 @@ const PulsingIndicator = styled('div')<{hasQuickStartUpdatesFeature?: boolean}>`
 `;
 
 const EventWaitingIndicator = styled(
-  (
-    p: React.HTMLAttributes<HTMLDivElement> & {
-      hasQuickStartUpdatesFeature: boolean;
-      text?: string;
-    }
-  ) => {
-    if (p.hasQuickStartUpdatesFeature) {
+  ({
+    hasQuickStartUpdatesFeature: quickStartUpdatesFeature,
+    text,
+    ...p
+  }: React.HTMLAttributes<HTMLDivElement> & {
+    hasQuickStartUpdatesFeature: boolean;
+    text?: string;
+  }) => {
+    if (quickStartUpdatesFeature) {
       return (
         <div {...p}>
-          <Tooltip title={p.text || t('Waiting for event')}>
+          <Tooltip title={text || t('Waiting for event')}>
             <PulsingIndicator hasQuickStartUpdatesFeature />
           </Tooltip>
         </div>
@@ -563,7 +565,7 @@ const EventWaitingIndicator = styled(
     return (
       <div {...p}>
         <PulsingIndicator />
-        {p.text || t('Waiting for event')}
+        {text || t('Waiting for event')}
       </div>
     );
   }