ref(quick-start): Remove not used files (#83368)

Contributes to https://github.com/getsentry/projects/issues/346

static/app/components/onboardingWizard/progressHeader.tsx

@@ -1,76 +0,0 @@
-import {css, useTheme} from '@emotion/react';
-import styled from '@emotion/styled';
-
-import ProgressRing from 'sentry/components/progressRing';
-import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
-import type {
-  OnboardingTaskDescriptor,
-  OnboardingTaskStatus,
-} from 'sentry/types/onboarding';
-import {isDemoModeEnabled} from 'sentry/utils/demoMode';
-
-type Props = {
-  allTasks: OnboardingTaskDescriptor[];
-  completedTasks: OnboardingTaskStatus[];
-};
-
-function ProgressHeader({allTasks, completedTasks}: Props) {
-  const theme = useTheme();
-
-  let title: string, description: string;
-  if (isDemoModeEnabled()) {
-    title = t('Guided Tours');
-    description = t('Take a guided tour to see what Sentry can do for you');
-  } else {
-    title = t('Quick Start');
-    description = t('Walk through this guide to get the most out of Sentry right away.');
-  }
-
-  return (
-    <Container>
-      <StyledProgressRing
-        size={80}
-        barWidth={8}
-        text={allTasks.length - completedTasks.length}
-        animateText
-        value={(completedTasks.length / allTasks.length) * 100}
-        progressEndcaps="round"
-        backgroundColor={theme.gray100}
-        textCss={() => css`
-          font-size: 26px;
-          color: ${theme.textColor};
-        `}
-      />
-      <HeaderTitle>{title}</HeaderTitle>
-      <Description>{description}</Description>
-    </Container>
-  );
-}
-
-export default ProgressHeader;
-
-const Container = styled('div')`
-  display: grid;
-  grid-template-columns: min-content 1fr;
-  grid-template-rows: min-content 1fr;
-  grid-column-gap: ${space(2)};
-  margin: 90px ${space(4)} 0 ${space(4)};
-`;
-
-const StyledProgressRing = styled(ProgressRing)`
-  grid-column: 1/2;
-  grid-row: 1/3;
-`;
-
-const HeaderTitle = styled('h3')`
-  margin: 0;
-  grid-column: 2/3;
-  grid-row: 1/2;
-`;
-
-const Description = styled('div')`
-  color: ${p => p.theme.gray300};
-  grid-column: 2/3;
-  grid-row: 2/3;
-`;

static/app/components/onboardingWizard/sidebar.tsx

@@ -1,270 +0,0 @@
-import {useCallback, useContext, useEffect, useMemo, useRef} from 'react';
-import styled from '@emotion/styled';
-import {AnimatePresence, motion} from 'framer-motion';
-
-import HighlightTopRight from 'sentry-images/pattern/highlight-top-right.svg';
-
-import {updateOnboardingTask} from 'sentry/actionCreators/onboardingTasks';
-import type {OnboardingContextProps} from 'sentry/components/onboarding/onboardingContext';
-import {OnboardingContext} from 'sentry/components/onboarding/onboardingContext';
-import SidebarPanel from 'sentry/components/sidebar/sidebarPanel';
-import type {CommonSidebarProps} from 'sentry/components/sidebar/types';
-import {Tooltip} from 'sentry/components/tooltip';
-import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
-import type {OnboardingTask, OnboardingTaskKey} from 'sentry/types/onboarding';
-import type {Organization} from 'sentry/types/organization';
-import type {Project} from 'sentry/types/project';
-import {isDemoModeEnabled} from 'sentry/utils/demoMode';
-import testableTransition from 'sentry/utils/testableTransition';
-import useApi from 'sentry/utils/useApi';
-import useOrganization from 'sentry/utils/useOrganization';
-import useProjects from 'sentry/utils/useProjects';
-
-import ProgressHeader from './progressHeader';
-import Task from './task';
-import {getMergedTasks} from './taskConfig';
-import {findActiveTasks, findCompleteTasks, findUpcomingTasks, taskIsDone} from './utils';
-
-type Props = Pick<CommonSidebarProps, 'orientation' | 'collapsed'> & {
-  onClose: () => void;
-};
-
-/**
- * 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;
-
-const Heading = styled(motion.div)`
-  display: flex;
-  color: ${p => p.theme.activeText};
-  font-size: ${p => p.theme.fontSizeExtraSmall};
-  text-transform: uppercase;
-  font-weight: ${p => p.theme.fontWeightBold};
-  line-height: 1;
-  margin-top: ${space(3)};
-`;
-
-Heading.defaultProps = {
-  layout: true,
-  transition: testableTransition(),
-};
-
-const completeNowText = isDemoModeEnabled() ? t('Sentry Basics') : t('Next Steps');
-
-const completeNowHeading = <Heading key="now">{completeNowText}</Heading>;
-const upcomingTasksHeading = (
-  <Heading key="upcoming">
-    <Tooltip
-      containerDisplayMode="block"
-      title={t('Some tasks should be completed before completing these tasks')}
-    >
-      {t('Level Up')}
-    </Tooltip>
-  </Heading>
-);
-const completedTasksHeading = <Heading key="complete">{t('Completed')}</Heading>;
-
-export const useOnboardingTasks = (
-  organization: Organization,
-  projects: Project[],
-  onboardingContext: OnboardingContextProps
-) => {
-  return useMemo(() => {
-    const all = getMergedTasks({
-      organization,
-      projects,
-      onboardingContext,
-    }).filter(task => task.display);
-    return {
-      allTasks: all,
-      active: all.filter(findActiveTasks),
-      upcoming: all.filter(findUpcomingTasks),
-      complete: all.filter(findCompleteTasks),
-    };
-  }, [organization, projects, onboardingContext]);
-};
-
-export default function OnboardingWizardSidebar({
-  collapsed,
-  orientation,
-  onClose,
-}: Props) {
-  const api = useApi();
-  const organization = useOrganization();
-  const onboardingContext = useContext(OnboardingContext);
-  const {projects} = useProjects();
-
-  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 {allTasks, active, upcoming, complete} = useOnboardingTasks(
-    organization,
-    projects,
-    onboardingContext
-  );
-
-  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]);
-
-  function makeTaskUpdater(status: OnboardingTask['status']) {
-    return (task: OnboardingTaskKey) =>
-      updateOnboardingTask(api, organization, {task, status, completionSeen: true});
-  }
-
-  function renderItem(task: OnboardingTask) {
-    return (
-      <AnimatedTaskItem
-        task={task}
-        key={`${task.task}`}
-        onSkip={makeTaskUpdater('skipped')}
-        onMarkComplete={makeTaskUpdater('complete')}
-        hidePanel={onClose}
-      />
-    );
-  }
-
-  const completeList = (
-    <CompleteList key="complete-group">
-      <AnimatePresence initial={false}>{complete.map(renderItem)}</AnimatePresence>
-    </CompleteList>
-  );
-
-  const items = [
-    active.length > 0 && completeNowHeading,
-    ...active.map(renderItem),
-    upcoming.length > 0 && upcomingTasksHeading,
-    ...upcoming.map(renderItem),
-    complete.length > 0 && completedTasksHeading,
-    completeList,
-  ];
-
-  return (
-    <TaskSidebarPanel collapsed={collapsed} hidePanel={onClose} orientation={orientation}>
-      <TopRight src={HighlightTopRight} />
-      <ProgressHeader allTasks={allTasks} completedTasks={complete} />
-      <TaskList>
-        <AnimatePresence initial={false}>{items}</AnimatePresence>
-      </TaskList>
-    </TaskSidebarPanel>
-  );
-}
-
-const TaskSidebarPanel = styled(SidebarPanel)`
-  width: 450px;
-`;
-
-const AnimatedTaskItem = motion(Task);
-
-AnimatedTaskItem.defaultProps = {
-  initial: 'initial',
-  animate: 'animate',
-  exit: 'exit',
-  layout: true,
-  variants: {
-    initial: {
-      opacity: 0,
-      y: 40,
-    },
-    animate: {
-      opacity: 1,
-      y: 0,
-      transition: testableTransition({
-        delay: 0.8,
-        when: 'beforeChildren',
-        staggerChildren: 0.3,
-      }),
-    },
-    exit: {
-      y: 20,
-      z: -10,
-      opacity: 0,
-      transition: {duration: 0.2},
-    },
-  },
-};
-
-const TaskList = styled('div')`
-  display: grid;
-  grid-auto-flow: row;
-  gap: ${space(1)};
-  margin: ${space(1)} ${space(4)} ${space(4)} ${space(4)};
-`;
-
-const CompleteList = styled('div')`
-  display: grid;
-  grid-auto-flow: row;
-
-  > div {
-    transition: border-radius 500ms;
-  }
-
-  > div:not(:first-of-type) {
-    margin-top: -1px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  > div:not(:last-of-type) {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;
-
-const TopRight = styled('img')`
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 60%;
-`;

static/app/components/onboardingWizard/skipConfirm.tsx

@@ -1,88 +0,0 @@
-import {Fragment, useState} from 'react';
-import styled from '@emotion/styled';
-
-import {Button, LinkButton} from 'sentry/components/button';
-import ButtonBar from 'sentry/components/buttonBar';
-import HookOrDefault from 'sentry/components/hookOrDefault';
-import {t} from 'sentry/locale';
-import {fadeIn} from 'sentry/styles/animations';
-import {space} from 'sentry/styles/space';
-
-type Props = {
-  children: (opts: {skip: (e: React.MouseEvent) => void}) => React.ReactNode;
-  onSkip: () => void;
-};
-
-function SkipConfirm(props: Props) {
-  const [showConfirmation, setShowConfirmation] = useState<boolean>(false);
-  const {onSkip, children} = props;
-
-  const toggleConfirm = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setShowConfirmation(!showConfirmation);
-  };
-
-  const handleSkip = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onSkip();
-  };
-
-  return (
-    <Fragment>
-      {children({skip: toggleConfirm})}
-      <Confirmation
-        visible={showConfirmation}
-        onSkip={handleSkip}
-        onDismiss={toggleConfirm}
-      />
-    </Fragment>
-  );
-}
-
-export default SkipConfirm;
-
-const SkipHelp = HookOrDefault({
-  hookName: 'onboarding-wizard:skip-help',
-  defaultComponent: () => (
-    <LinkButton priority="primary" size="xs" href="https://forum.sentry.io/" external>
-      {t('Community Forum')}
-    </LinkButton>
-  ),
-});
-
-type ConfirmProps = React.HTMLAttributes<HTMLDivElement> & {
-  onDismiss: (e: React.MouseEvent) => void;
-  onSkip: (e: React.MouseEvent) => void;
-  visible: boolean;
-};
-
-const Confirmation = styled(({onDismiss, onSkip, visible: _, ...props}: ConfirmProps) => (
-  <div onClick={onDismiss} {...props}>
-    <p>{t("Not sure what to do? We're here for you!")}</p>
-    <ButtonBar gap={1}>
-      <SkipHelp />
-      <Button size="xs" onClick={onSkip}>
-        {t('Just skip')}
-      </Button>
-    </ButtonBar>
-  </div>
-))`
-  display: ${p => (p.visible ? 'flex' : 'none')};
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  padding: 0 ${space(3)};
-  border-radius: ${p => p.theme.borderRadius};
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  background: ${p => p.theme.surface200};
-  animation: ${fadeIn} 200ms normal forwards;
-  font-size: ${p => p.theme.fontSizeMedium};
-
-  p {
-    margin-bottom: ${space(1)};
-  }
-`;

static/app/components/onboardingWizard/task.tsx

@@ -1,311 +0,0 @@
-import {forwardRef} from 'react';
-import styled from '@emotion/styled';
-import {motion} from 'framer-motion';
-import moment from 'moment-timezone';
-
-import {navigateTo} from 'sentry/actionCreators/navigation';
-import Avatar from 'sentry/components/avatar';
-import {Button} from 'sentry/components/button';
-import Card from 'sentry/components/card';
-import LetterAvatar from 'sentry/components/letterAvatar';
-import {Tooltip} from 'sentry/components/tooltip';
-import {IconCheckmark, IconClose, IconLock, IconSync} from 'sentry/icons';
-import {t, tct} from 'sentry/locale';
-import DemoWalkthroughStore from 'sentry/stores/demoWalkthroughStore';
-import {space} from 'sentry/styles/space';
-import type {OnboardingTask, OnboardingTaskKey} from 'sentry/types/onboarding';
-import type {Organization} from 'sentry/types/organization';
-import type {AvatarUser} from 'sentry/types/user';
-import {trackAnalytics} from 'sentry/utils/analytics';
-import {isDemoModeEnabled} from 'sentry/utils/demoMode';
-import testableTransition from 'sentry/utils/testableTransition';
-import useRouter from 'sentry/utils/useRouter';
-import withOrganization from 'sentry/utils/withOrganization';
-
-import SkipConfirm from './skipConfirm';
-import {taskIsDone} from './utils';
-
-const recordAnalytics = (
-  task: OnboardingTask,
-  organization: Organization,
-  action: string
-) =>
-  trackAnalytics('quick_start.task_card_clicked', {
-    organization,
-    todo_id: task.task,
-    todo_title: task.title,
-    action,
-    new_experience: false,
-  });
-
-type Props = {
-  forwardedRef: React.Ref<HTMLDivElement>;
-  hidePanel: () => void;
-  /**
-   * Fired when a task is completed. This will typically happen if there is a
-   * supplemental component with the ability to complete a task
-   */
-  onMarkComplete: (taskKey: OnboardingTaskKey) => void;
-
-  /**
-   * Fired when the task has been skipped
-   */
-  onSkip: (taskKey: OnboardingTaskKey) => void;
-
-  organization: Organization;
-  /**
-   * Task to render
-   */
-  task: OnboardingTask;
-};
-
-function Task(props: Props) {
-  const {task, onSkip, onMarkComplete, forwardedRef, organization, hidePanel} = props;
-  const router = useRouter();
-  const handleSkip = () => {
-    recordAnalytics(task, organization, 'skipped');
-    onSkip(task.task);
-  };
-
-  const handleClick = (e: React.MouseEvent) => {
-    recordAnalytics(task, organization, 'clickthrough');
-    e.stopPropagation();
-
-    if (isDemoModeEnabled()) {
-      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();
-  };
-
-  if (taskIsDone(task) && task.completionSeen) {
-    const completedOn = moment(task.dateCompleted);
-
-    return (
-      <TaskCard ref={forwardedRef} onClick={handleClick}>
-        <CompleteTitle>
-          <StatusIndicator>
-            {task.status === 'complete' && <CompleteIndicator />}
-            {task.status === 'skipped' && <SkippedIndicator />}
-          </StatusIndicator>
-          {task.title}
-          <DateCompleted title={completedOn.toString()}>
-            {completedOn.fromNow()}
-          </DateCompleted>
-          {task.user ? (
-            <TaskUserAvatar hasTooltip user={task.user} />
-          ) : (
-            <Tooltip
-              containerDisplayMode="inherit"
-              title={t('No user was associated with completing this task')}
-            >
-              <TaskBlankAvatar round />
-            </Tooltip>
-          )}
-        </CompleteTitle>
-      </TaskCard>
-    );
-  }
-
-  const IncompleteMarker = task.requisiteTasks.length > 0 && (
-    <Tooltip
-      containerDisplayMode="block"
-      title={tct('[requisite] before completing this task', {
-        requisite: task.requisiteTasks[0]!.title,
-      })}
-    >
-      <IconLock color="pink400" locked />
-    </Tooltip>
-  );
-
-  const {SupplementComponent} = task;
-  const supplement = SupplementComponent && (
-    <SupplementComponent task={task} onCompleteTask={() => onMarkComplete(task.task)} />
-  );
-
-  const skipAction = task.skippable && (
-    <SkipConfirm onSkip={handleSkip}>
-      {({skip}) => (
-        <CloseButton
-          borderless
-          size="zero"
-          aria-label={t('Close')}
-          icon={<IconClose size="xs" />}
-          onClick={skip}
-        />
-      )}
-    </SkipConfirm>
-  );
-
-  return (
-    <TaskCard
-      interactive
-      ref={forwardedRef}
-      onClick={handleClick}
-      data-test-id={task.task}
-    >
-      <IncompleteTitle>
-        {IncompleteMarker}
-        {task.title}
-      </IncompleteTitle>
-      <Description>{`${task.description}`}</Description>
-      {task.requisiteTasks.length === 0 && (
-        <ActionBar>
-          {skipAction}
-          {supplement}
-          {task.status === 'pending' ? (
-            <InProgressIndicator user={task.user} />
-          ) : (
-            <Button priority="primary" size="sm">
-              {t('Start')}
-            </Button>
-          )}
-        </ActionBar>
-      )}
-    </TaskCard>
-  );
-}
-
-const TaskCard = styled(Card)`
-  position: relative;
-  padding: ${space(2)} ${space(3)};
-`;
-
-const IncompleteTitle = styled('div')`
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: ${space(1)};
-  align-items: center;
-  font-weight: ${p => p.theme.fontWeightBold};
-`;
-
-const CompleteTitle = styled(IncompleteTitle)`
-  grid-template-columns: min-content 1fr max-content min-content;
-`;
-
-const Description = styled('p')`
-  font-size: ${p => p.theme.fontSizeSmall};
-  color: ${p => p.theme.subText};
-  margin: ${space(0.5)} 0 0 0;
-`;
-
-const ActionBar = styled('div')`
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-end;
-  margin-top: ${space(1.5)};
-`;
-
-type InProgressIndicatorProps = React.HTMLAttributes<HTMLDivElement> & {
-  user?: AvatarUser | null;
-};
-
-const InProgressIndicator = styled(({user, ...props}: InProgressIndicatorProps) => (
-  <div {...props}>
-    <Tooltip
-      disabled={!user}
-      containerDisplayMode="flex"
-      title={tct('This task has been started by [user]', {
-        user: user?.name,
-      })}
-    >
-      <IconSync />
-    </Tooltip>
-    {t('Task in progress...')}
-  </div>
-))`
-  font-size: ${p => p.theme.fontSizeMedium};
-  font-weight: ${p => p.theme.fontWeightBold};
-  color: ${p => p.theme.pink400};
-  display: grid;
-  grid-template-columns: max-content max-content;
-  align-items: center;
-  gap: ${space(1)};
-`;
-
-const CloseButton = styled(Button)`
-  position: absolute;
-  right: ${space(1.5)};
-  top: ${space(1.5)};
-  color: ${p => p.theme.gray300};
-`;
-
-const transition = testableTransition();
-
-const StatusIndicator = styled(motion.div)`
-  display: flex;
-`;
-StatusIndicator.defaultProps = {
-  variants: {
-    initial: {opacity: 0, x: 10},
-    animate: {opacity: 1, x: 0},
-  },
-  transition,
-};
-
-const CompleteIndicator = styled(IconCheckmark)``;
-CompleteIndicator.defaultProps = {
-  isCircled: true,
-  color: 'green300',
-};
-
-const SkippedIndicator = styled(IconClose)``;
-SkippedIndicator.defaultProps = {
-  isCircled: true,
-  color: 'pink400',
-};
-
-const completedItemAnimation = {
-  initial: {opacity: 0, x: -10},
-  animate: {opacity: 1, x: 0},
-};
-
-const DateCompleted = styled(motion.div)`
-  color: ${p => p.theme.subText};
-  font-size: ${p => p.theme.fontSizeSmall};
-  font-weight: ${p => p.theme.fontWeightNormal};
-`;
-
-DateCompleted.defaultProps = {
-  variants: completedItemAnimation,
-  transition,
-};
-
-const TaskUserAvatar = motion(Avatar);
-TaskUserAvatar.defaultProps = {
-  variants: completedItemAnimation,
-  transition,
-};
-
-const TaskBlankAvatar = styled(motion(LetterAvatar))`
-  position: unset;
-`;
-
-TaskBlankAvatar.defaultProps = {
-  variants: completedItemAnimation,
-  transition,
-};
-
-const WrappedTask = withOrganization(Task);
-
-export default forwardRef<
-  HTMLDivElement,
-  Omit<React.ComponentProps<typeof WrappedTask>, 'forwardedRef'>
->((props, ref) => <WrappedTask forwardedRef={ref} {...props} />);

static/app/components/sidebar/onboardingStatus.tsx

@@ -1,198 +0,0 @@
-import {Fragment, useCallback, useContext, useEffect} from 'react';
-import type {Theme} from '@emotion/react';
-import {css} from '@emotion/react';
-import styled from '@emotion/styled';
-
-import {OnboardingContext} from 'sentry/components/onboarding/onboardingContext';
-import OnboardingSidebar from 'sentry/components/onboardingWizard/sidebar';
-import {getMergedTasks} from 'sentry/components/onboardingWizard/taskConfig';
-import ProgressRing, {
-  RingBackground,
-  RingBar,
-  RingText,
-} from 'sentry/components/progressRing';
-import {ExpandedContext} from 'sentry/components/sidebar/expandedContextProvider';
-import {isDone} from 'sentry/components/sidebar/utils';
-import {t, tct} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
-import type {Organization} from 'sentry/types/organization';
-import {trackAnalytics} from 'sentry/utils/analytics';
-import {isDemoModeEnabled} from 'sentry/utils/demoMode';
-import theme from 'sentry/utils/theme';
-import useProjects from 'sentry/utils/useProjects';
-
-import type {CommonSidebarProps} from './types';
-import {SidebarPanelKey} from './types';
-
-type Props = CommonSidebarProps & {
-  org: Organization;
-};
-
-const progressTextCss = () => css`
-  font-size: ${theme.fontSizeMedium};
-  font-weight: ${theme.fontWeightBold};
-`;
-
-export default function OnboardingStatus({
-  collapsed,
-  org,
-  currentPanel,
-  orientation,
-  hidePanel,
-  onShowPanel,
-}: Props) {
-  const onboardingContext = useContext(OnboardingContext);
-  const {projects} = useProjects();
-  const {shouldAccordionFloat} = useContext(ExpandedContext);
-
-  const isActive = currentPanel === SidebarPanelKey.ONBOARDING_WIZARD;
-  const walkthrough = isDemoModeEnabled();
-
-  const handleToggle = useCallback(() => {
-    if (!walkthrough && !isActive === true) {
-      trackAnalytics('quick_start.opened', {
-        organization: org,
-        new_experience: false,
-      });
-    }
-    onShowPanel();
-  }, [walkthrough, isActive, onShowPanel, org]);
-
-  const tasks = getMergedTasks({
-    organization: org,
-    projects,
-    onboardingContext,
-  });
-
-  const allDisplayedTasks = tasks.filter(task => task.display);
-
-  const doneTasks = allDisplayedTasks.filter(isDone);
-  const numberRemaining = allDisplayedTasks.length - doneTasks.length;
-
-  const pendingCompletionSeen = doneTasks.some(
-    task =>
-      allDisplayedTasks.some(displayedTask => displayedTask.task === task.task) &&
-      task.status === 'complete' &&
-      !task.completionSeen
-  );
-
-  const allTasksCompleted = doneTasks.length >= allDisplayedTasks.length;
-
-  useEffect(() => {
-    if (!allTasksCompleted || isActive) {
-      return;
-    }
-
-    trackAnalytics('quick_start.completed', {
-      organization: org,
-      referrer: 'onboarding_sidebar',
-      new_experience: false,
-    });
-  }, [isActive, allTasksCompleted, org]);
-
-  if (!org.features?.includes('onboarding') || (allTasksCompleted && !isActive)) {
-    return null;
-  }
-
-  const label = walkthrough ? t('Guided Tours') : t('Quick Start');
-  const task = walkthrough ? 'tours' : 'tasks';
-
-  return (
-    <Fragment>
-      <Container
-        role="button"
-        aria-label={label}
-        onClick={handleToggle}
-        isActive={isActive}
-      >
-        <ProgressRing
-          animateText
-          textCss={progressTextCss}
-          text={allDisplayedTasks.length - doneTasks.length}
-          value={(doneTasks.length / allDisplayedTasks.length) * 100}
-          backgroundColor="rgba(255, 255, 255, 0.15)"
-          progressEndcaps="round"
-          size={38}
-          barWidth={6}
-        />
-        {!shouldAccordionFloat && (
-          <div>
-            <Heading>{label}</Heading>
-            <Remaining>
-              {tct('[numberRemaining] Remaining [task]', {numberRemaining, task})}
-              {pendingCompletionSeen && <PendingSeenIndicator />}
-            </Remaining>
-          </div>
-        )}
-      </Container>
-      {isActive && (
-        <OnboardingSidebar
-          orientation={orientation}
-          collapsed={collapsed}
-          onClose={hidePanel}
-        />
-      )}
-    </Fragment>
-  );
-}
-
-const Heading = styled('div')`
-  transition: color 100ms;
-  font-size: ${p => p.theme.fontSizeLarge};
-  color: ${p => p.theme.white};
-  margin-bottom: ${space(0.25)};
-`;
-
-const Remaining = styled('div')`
-  transition: color 100ms;
-  font-size: ${p => p.theme.fontSizeSmall};
-  color: ${p => p.theme.gray300};
-  display: grid;
-  grid-template-columns: max-content max-content;
-  gap: ${space(0.75)};
-  align-items: center;
-`;
-
-const PendingSeenIndicator = styled('div')`
-  background: ${p => p.theme.red300};
-  border-radius: 50%;
-  height: 7px;
-  width: 7px;
-`;
-
-const hoverCss = (p: {theme: Theme}) => css`
-  background: rgba(255, 255, 255, 0.05);
-
-  ${RingBackground} {
-    stroke: rgba(255, 255, 255, 0.3);
-  }
-  ${RingBar} {
-    stroke: ${p.theme.green200};
-  }
-  ${RingText} {
-    color: ${p.theme.white};
-  }
-
-  ${Heading} {
-    color: ${p.theme.white};
-  }
-  ${Remaining} {
-    color: ${p.theme.white};
-  }
-`;
-
-const Container = styled('div')<{isActive: boolean}>`
-  padding: 9px 19px 9px 16px;
-  cursor: pointer;
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: ${space(1.5)};
-  align-items: center;
-  transition: background 100ms;
-
-  ${p => p.isActive && hoverCss(p)};
-
-  &:hover {
-    ${hoverCss};
-  }
-`;