From 905f89b85bd245000cf98606dec8d1a8b4a48fac Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Thu, 22 May 2025 11:00:09 +0200
Subject: [PATCH 1/4] feat(quick-start): Remove animation and reordering

---
 .../components/onboardingWizard/content.tsx   | 70 ++++++-------------
 1 file changed, 20 insertions(+), 50 deletions(-)

diff --git a/static/app/components/onboardingWizard/content.tsx b/static/app/components/onboardingWizard/content.tsx
index b55f7eb592bf32..fefedf19f44459 100644
--- a/static/app/components/onboardingWizard/content.tsx
+++ b/static/app/components/onboardingWizard/content.tsx
@@ -1,7 +1,6 @@
 import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {css, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
-import {AnimatePresence, motion} from 'framer-motion';
 import partition from 'lodash/partition';
 
 import {navigateTo} from 'sentry/actionCreators/navigation';
@@ -25,7 +24,6 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {isDemoModeActive} from 'sentry/utils/demoMode';
 import {DemoTour, useDemoTours} from 'sentry/utils/demoMode/demoTours';
 import {updateDemoWalkthroughTask} from 'sentry/utils/demoMode/guides';
-import testableTransition from 'sentry/utils/testableTransition';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
@@ -258,35 +256,14 @@ function Task({task, hidePanel}: TaskProps) {
     }
   }, [task.status]);
 
+  const isDoneTask = task.status === 'complete' || task.status === 'skipped';
+
   return (
-    <TaskWrapper
-      initial
-      animate="animate"
-      layout={showSkipConfirmation ? false : true}
-      variants={{
-        initial: {
-          opacity: 0,
-          y: 40,
-        },
-        animate: {
-          opacity: 1,
-          y: 0,
-          transition: testableTransition({
-            delay: 0.8,
-            when: 'beforeChildren',
-            staggerChildren: 0.3,
-          }),
-        },
-      }}
-    >
+    <TaskWrapper>
       <TaskCard
-        onClick={
-          task.status === 'complete' || task.status === 'skipped'
-            ? undefined
-            : handleClick
-        }
+        onClick={isDoneTask ? undefined : handleClick}
         icon={
-          task.status === 'complete' || task.status === 'skipped' ? (
+          isDoneTask ? (
             <TaskStatusIcon status={task.status} tooltipText={iconTooltipText} />
           ) : task.skippable ? (
             <Button
@@ -303,9 +280,9 @@ function Task({task, hidePanel}: TaskProps) {
           ) : undefined
         }
         description={task.description}
-        title={<strong>{task.title}</strong>}
+        title={<strong>{isDoneTask ? <s>{task.title}</s> : task.title}</strong>}
         actions={
-          task.status === 'complete' || task.status === 'skipped' ? undefined : (
+          isDoneTask ? undefined : (
             <ClickIndicator>
               <IconChevron direction="right" size="xs" color="subText" />
             </ClickIndicator>
@@ -327,17 +304,17 @@ function Task({task, hidePanel}: TaskProps) {
 
 interface ExpandedTaskGroupProps {
   hidePanel: () => void;
-  sortedTasks: OnboardingTask[];
+  tasks: OnboardingTask[];
 }
 
-function ExpandedTaskGroup({sortedTasks, hidePanel}: ExpandedTaskGroupProps) {
+function ExpandedTaskGroup({tasks, hidePanel}: ExpandedTaskGroupProps) {
   const mutateOnboardingTasks = useMutateOnboardingTasks();
 
   const markCompletionTimeout = useRef<number | undefined>(undefined);
 
   const unseenDoneTasks = useMemo(
-    () => sortedTasks.filter(task => taskIsDone(task) && !task.completionSeen),
-    [sortedTasks]
+    () => tasks.filter(task => taskIsDone(task) && !task.completionSeen),
+    [tasks]
   );
 
   function completionTimeout(time: number): Promise<void> {
@@ -348,7 +325,7 @@ function ExpandedTaskGroup({sortedTasks, hidePanel}: ExpandedTaskGroupProps) {
   }
 
   const markTasksAsSeen = useCallback(() => {
-    const tasksToMarkComplete = sortedTasks
+    const tasksToMarkComplete = tasks
       .filter(task => taskIsDone(task) && !task.completionSeen)
       .map(task => ({...task, completionSeen: true}));
 
@@ -359,7 +336,7 @@ function ExpandedTaskGroup({sortedTasks, hidePanel}: ExpandedTaskGroupProps) {
     } else {
       mutateOnboardingTasks.mutate(tasksToMarkComplete);
     }
-  }, [mutateOnboardingTasks, sortedTasks]);
+  }, [mutateOnboardingTasks, tasks]);
 
   const markSeenOnOpen = useCallback(
     async function () {
@@ -385,11 +362,9 @@ function ExpandedTaskGroup({sortedTasks, hidePanel}: ExpandedTaskGroupProps) {
     <Fragment>
       <hr />
       <TaskGroupBody>
-        <AnimatePresence initial={false}>
-          {sortedTasks.map(sortedTask => (
-            <Task key={sortedTask.task} task={sortedTask} hidePanel={hidePanel} />
-          ))}
-        </AnimatePresence>
+        {tasks.map(task => (
+          <Task key={task.task} task={task} hidePanel={hidePanel} />
+        ))}
       </TaskGroupBody>
     </Fragment>
   );
@@ -418,7 +393,7 @@ function TaskGroup({
   const theme = useTheme();
   const organization = useOrganization();
   const [isExpanded, setIsExpanded] = useState(expanded);
-  const {completedTasks, incompletedTasks} = groupTasksByCompletion(tasks);
+  const {completedTasks} = groupTasksByCompletion(tasks);
 
   const [taskGroupComplete, setTaskGroupComplete] = useLocalStorageState(
     `quick-start:${organization.slug}:${group}-completed`,
@@ -494,12 +469,7 @@ function TaskGroup({
           />
         }
       />
-      {isExpanded && (
-        <ExpandedTaskGroup
-          sortedTasks={[...incompletedTasks, ...completedTasks]}
-          hidePanel={hidePanel}
-        />
-      )}
+      {isExpanded && <ExpandedTaskGroup tasks={tasks} hidePanel={hidePanel} />}
     </TaskGroupWrapper>
   );
 }
@@ -550,7 +520,7 @@ export function OnboardingSidebarContent({onClose}: OnboardingSidebarContentProp
       )}
       {allTasks.length === doneTasks.length && (
         <CompletionCelebrationText>
-          <div>{t('Good job, you’re all done here!')}</div>
+          <div>{t("Good job, you're all done here!")}</div>
           {t('Now get out of here and write some broken code.')}
         </CompletionCelebrationText>
       )}
@@ -601,7 +571,7 @@ const TaskGroupBody = styled('ul')`
   margin: 0;
 `;
 
-const TaskWrapper = styled(motion.li)`
+const TaskWrapper = styled('li')`
   gap: ${space(1)};
   p {
     color: ${p => p.theme.subText};

From aad62ad213588b7cdf9cf003693d4c264c2a818e Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Thu, 22 May 2025 11:00:09 +0200
Subject: [PATCH 2/4] feat(quick-start): Remove animation and reordering

---
 .../components/onboardingWizard/content.tsx   | 70 ++++++-------------
 1 file changed, 20 insertions(+), 50 deletions(-)

diff --git a/static/app/components/onboardingWizard/content.tsx b/static/app/components/onboardingWizard/content.tsx
index b55f7eb592bf32..1b2fea9ceb801c 100644
--- a/static/app/components/onboardingWizard/content.tsx
+++ b/static/app/components/onboardingWizard/content.tsx
@@ -1,7 +1,6 @@
 import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {css, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
-import {AnimatePresence, motion} from 'framer-motion';
 import partition from 'lodash/partition';
 
 import {navigateTo} from 'sentry/actionCreators/navigation';
@@ -25,7 +24,6 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {isDemoModeActive} from 'sentry/utils/demoMode';
 import {DemoTour, useDemoTours} from 'sentry/utils/demoMode/demoTours';
 import {updateDemoWalkthroughTask} from 'sentry/utils/demoMode/guides';
-import testableTransition from 'sentry/utils/testableTransition';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
@@ -258,35 +256,14 @@ function Task({task, hidePanel}: TaskProps) {
     }
   }, [task.status]);
 
+  const isDoneTask = task.status === 'complete' || task.status === 'skipped';
+
   return (
-    <TaskWrapper
-      initial
-      animate="animate"
-      layout={showSkipConfirmation ? false : true}
-      variants={{
-        initial: {
-          opacity: 0,
-          y: 40,
-        },
-        animate: {
-          opacity: 1,
-          y: 0,
-          transition: testableTransition({
-            delay: 0.8,
-            when: 'beforeChildren',
-            staggerChildren: 0.3,
-          }),
-        },
-      }}
-    >
+    <TaskWrapper>
       <TaskCard
-        onClick={
-          task.status === 'complete' || task.status === 'skipped'
-            ? undefined
-            : handleClick
-        }
+        onClick={isDoneTask ? undefined : handleClick}
         icon={
-          task.status === 'complete' || task.status === 'skipped' ? (
+          isDoneTask ? (
             <TaskStatusIcon status={task.status} tooltipText={iconTooltipText} />
           ) : task.skippable ? (
             <Button
@@ -303,9 +280,9 @@ function Task({task, hidePanel}: TaskProps) {
           ) : undefined
         }
         description={task.description}
-        title={<strong>{task.title}</strong>}
+        title={<strong>{isDoneTask ? <s>{task.title}</s> : task.title}</strong>}
         actions={
-          task.status === 'complete' || task.status === 'skipped' ? undefined : (
+          isDoneTask ? undefined : (
             <ClickIndicator>
               <IconChevron direction="right" size="xs" color="subText" />
             </ClickIndicator>
@@ -327,17 +304,17 @@ function Task({task, hidePanel}: TaskProps) {
 
 interface ExpandedTaskGroupProps {
   hidePanel: () => void;
-  sortedTasks: OnboardingTask[];
+  tasks: OnboardingTask[];
 }
 
-function ExpandedTaskGroup({sortedTasks, hidePanel}: ExpandedTaskGroupProps) {
+function ExpandedTaskGroup({tasks, hidePanel}: ExpandedTaskGroupProps) {
   const mutateOnboardingTasks = useMutateOnboardingTasks();
 
   const markCompletionTimeout = useRef<number | undefined>(undefined);
 
   const unseenDoneTasks = useMemo(
-    () => sortedTasks.filter(task => taskIsDone(task) && !task.completionSeen),
-    [sortedTasks]
+    () => tasks.filter(task => taskIsDone(task) && !task.completionSeen),
+    [tasks]
   );
 
   function completionTimeout(time: number): Promise<void> {
@@ -348,7 +325,7 @@ function ExpandedTaskGroup({sortedTasks, hidePanel}: ExpandedTaskGroupProps) {
   }
 
   const markTasksAsSeen = useCallback(() => {
-    const tasksToMarkComplete = sortedTasks
+    const tasksToMarkComplete = tasks
       .filter(task => taskIsDone(task) && !task.completionSeen)
       .map(task => ({...task, completionSeen: true}));
 
@@ -359,7 +336,7 @@ function ExpandedTaskGroup({sortedTasks, hidePanel}: ExpandedTaskGroupProps) {
     } else {
       mutateOnboardingTasks.mutate(tasksToMarkComplete);
     }
-  }, [mutateOnboardingTasks, sortedTasks]);
+  }, [mutateOnboardingTasks, tasks]);
 
   const markSeenOnOpen = useCallback(
     async function () {
@@ -385,11 +362,9 @@ function ExpandedTaskGroup({sortedTasks, hidePanel}: ExpandedTaskGroupProps) {
     <Fragment>
       <hr />
       <TaskGroupBody>
-        <AnimatePresence initial={false}>
-          {sortedTasks.map(sortedTask => (
-            <Task key={sortedTask.task} task={sortedTask} hidePanel={hidePanel} />
-          ))}
-        </AnimatePresence>
+        {tasks.map(task => (
+          <Task key={task.task} task={task} hidePanel={hidePanel} />
+        ))}
       </TaskGroupBody>
     </Fragment>
   );
@@ -418,7 +393,7 @@ function TaskGroup({
   const theme = useTheme();
   const organization = useOrganization();
   const [isExpanded, setIsExpanded] = useState(expanded);
-  const {completedTasks, incompletedTasks} = groupTasksByCompletion(tasks);
+  const {completedTasks} = groupTasksByCompletion(tasks);
 
   const [taskGroupComplete, setTaskGroupComplete] = useLocalStorageState(
     `quick-start:${organization.slug}:${group}-completed`,
@@ -494,12 +469,7 @@ function TaskGroup({
           />
         }
       />
-      {isExpanded && (
-        <ExpandedTaskGroup
-          sortedTasks={[...incompletedTasks, ...completedTasks]}
-          hidePanel={hidePanel}
-        />
-      )}
+      {isExpanded && <ExpandedTaskGroup tasks={tasks} hidePanel={hidePanel} />}
     </TaskGroupWrapper>
   );
 }
@@ -550,7 +520,7 @@ export function OnboardingSidebarContent({onClose}: OnboardingSidebarContentProp
       )}
       {allTasks.length === doneTasks.length && (
         <CompletionCelebrationText>
-          <div>{t('Good job, you’re all done here!')}</div>
+          <div>{t('Good job, you’re all done here!!')}</div>
           {t('Now get out of here and write some broken code.')}
         </CompletionCelebrationText>
       )}
@@ -601,7 +571,7 @@ const TaskGroupBody = styled('ul')`
   margin: 0;
 `;
 
-const TaskWrapper = styled(motion.li)`
+const TaskWrapper = styled('li')`
   gap: ${space(1)};
   p {
     color: ${p => p.theme.subText};

From 675243ce59c8c13939f6c19cd2ac76d1dfd0a057 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Thu, 22 May 2025 11:15:37 +0200
Subject: [PATCH 3/4] Update static/app/components/onboardingWizard/content.tsx

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

diff --git a/static/app/components/onboardingWizard/content.tsx b/static/app/components/onboardingWizard/content.tsx
index 1b2fea9ceb801c..5ea00c716d1254 100644
--- a/static/app/components/onboardingWizard/content.tsx
+++ b/static/app/components/onboardingWizard/content.tsx
@@ -520,7 +520,7 @@ export function OnboardingSidebarContent({onClose}: OnboardingSidebarContentProp
       )}
       {allTasks.length === doneTasks.length && (
         <CompletionCelebrationText>
-          <div>{t('Good job, you’re all done here!!')}</div>
+          <div>{t('Good job, you’re all done here!')}</div>
           {t('Now get out of here and write some broken code.')}
         </CompletionCelebrationText>
       )}

From c6f1695013f3f36ec736a4c2affea6b84690a29b Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Thu, 22 May 2025 13:27:48 +0200
Subject: [PATCH 4/4] improve code

---
 .../components/onboardingWizard/content.tsx   | 48 ++++++++++++-------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/static/app/components/onboardingWizard/content.tsx b/static/app/components/onboardingWizard/content.tsx
index 5ea00c716d1254..977b5b06651a27 100644
--- a/static/app/components/onboardingWizard/content.tsx
+++ b/static/app/components/onboardingWizard/content.tsx
@@ -102,20 +102,24 @@ interface TaskStatusIconProps {
 
 function TaskStatusIcon({status, tooltipText}: TaskStatusIconProps) {
   const theme = useTheme();
-  const commonStyle = css`
-    opacity: 50%;
-    color: ${theme.tokens.content.accent};
-  `;
   return (
     <Tooltip title={tooltipText} disabled={!tooltipText} containerDisplayMode="flex">
       {status === 'complete' ? (
         <IconCheckmark
           data-test-id="task-status-icon-complete"
-          css={commonStyle}
+          css={css`
+            color: ${theme.tokens.content.accent};
+          `}
           size="sm"
         />
       ) : (
-        <IconNot data-test-id="task-status-icon-skipped" css={commonStyle} size="sm" />
+        <IconNot
+          data-test-id="task-status-icon-skipped"
+          css={css`
+            color: ${theme.tokens.content.accent};
+          `}
+          size="sm"
+        />
       )}
     </Tooltip>
   );
@@ -256,16 +260,28 @@ function Task({task, hidePanel}: TaskProps) {
     }
   }, [task.status]);
 
-  const isDoneTask = task.status === 'complete' || task.status === 'skipped';
+  if (task.status === 'complete' || task.status === 'skipped') {
+    return (
+      <TaskWrapper
+        css={css`
+          opacity: 50%;
+        `}
+      >
+        <TaskCard
+          icon={<TaskStatusIcon status={task.status} tooltipText={iconTooltipText} />}
+          description={task.description}
+          title={<strong>{<s>{task.title}</s>}</strong>}
+        />
+      </TaskWrapper>
+    );
+  }
 
   return (
     <TaskWrapper>
       <TaskCard
-        onClick={isDoneTask ? undefined : handleClick}
+        onClick={handleClick}
         icon={
-          isDoneTask ? (
-            <TaskStatusIcon status={task.status} tooltipText={iconTooltipText} />
-          ) : task.skippable ? (
+          task.skippable ? (
             <Button
               icon={<IconNot size="sm" color="subText" />}
               aria-label={t('Skip Task')}
@@ -280,13 +296,11 @@ function Task({task, hidePanel}: TaskProps) {
           ) : undefined
         }
         description={task.description}
-        title={<strong>{isDoneTask ? <s>{task.title}</s> : task.title}</strong>}
+        title={<strong>{task.title}</strong>}
         actions={
-          isDoneTask ? undefined : (
-            <ClickIndicator>
-              <IconChevron direction="right" size="xs" color="subText" />
-            </ClickIndicator>
-          )
+          <ClickIndicator>
+            <IconChevron direction="right" size="xs" color="subText" />
+          </ClickIndicator>
         }
       />
       {showSkipConfirmation && (