feat(quick-start): Add logic to skeleton - Part 2 (#79179)

Author: priscilawebdev

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,28 +171,36 @@ 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>
-    );
-  }
-
   return (
     <TaskWrapper onClick={handleClick}>
       <InteractionStateLayer />
       <div>
         <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 +256,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 +434,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 +448,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)};
-`;

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,54 @@ 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>
-  )
+  ({
+    hasQuickStartUpdatesFeature: quickStartUpdatesFeature,
+    text,
+    ...p
+  }: React.HTMLAttributes<HTMLDivElement> & {
+    hasQuickStartUpdatesFeature: boolean;
+    text?: string;
+  }) => {
+    if (quickStartUpdatesFeature) {
+      return (
+        <div {...p}>
+          <Tooltip title={text || t('Waiting for event')}>
+            <PulsingIndicator hasQuickStartUpdatesFeature />
+          </Tooltip>
+        </div>
+      );
+    }
+    return (
+      <div {...p}>
+        <PulsingIndicator />
+        {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};
+        `}
 `;