ref(quick-start): Remove the basics step (#79393)

static/app/components/onboardingWizard/onboardingProjectsCard.tsx

@@ -1,166 +0,0 @@
-import styled from '@emotion/styled';
-import {motion} from 'framer-motion';
-import {PlatformIcon} from 'platformicons';
-
-import {Button} from 'sentry/components/button';
-import Card from 'sentry/components/card';
-import Link from 'sentry/components/links/link';
-import {IconChevron, IconClose} from 'sentry/icons';
-import {t} from 'sentry/locale';
-import pulsingIndicatorStyles from 'sentry/styles/pulsingIndicator';
-import {space} from 'sentry/styles/space';
-import type {OnboardingCustomComponentProps} from 'sentry/types/onboarding';
-import {trackAnalytics} from 'sentry/utils/analytics';
-
-import SkipConfirm from './skipConfirm';
-
-export default function OnboardingProjectsCard({
-  organization: org,
-  onboardingContext,
-  projects: allProjects,
-}: OnboardingCustomComponentProps) {
-  const handleSkip = () => {
-    onboardingContext.setData({
-      ...onboardingContext.data,
-      selectedSDK: undefined,
-    });
-  };
-
-  const selectedProjectSlug = onboardingContext.data.selectedSDK?.key;
-
-  const project = selectedProjectSlug
-    ? allProjects.find(p => p.slug === selectedProjectSlug)
-    : allProjects[0];
-
-  const projectHasFirstEvent = !project?.firstEvent;
-
-  if (!project || !projectHasFirstEvent) {
-    return null;
-  }
-
-  return (
-    <TaskCard key="onboarding-continue-card">
-      <Title>{t('Project to Setup')}</Title>
-      <OnboardingTaskProjectList>
-        <OnboardingTaskProjectListItem
-          to={`/onboarding/${org.slug}/setup-docs/?project_id=${project.id}`}
-          onClick={() => {
-            trackAnalytics('growth.onboarding_quick_start_cta', {
-              platform: project.platform,
-              organization: org,
-            });
-          }}
-        >
-          <OnboardingTaskProjectListItemInner>
-            <StyledPlatformIcon platform={project.platform || 'default'} />
-            {project.slug}
-            <PulsingIndicator />
-            <PulsingIndicatorText>{t('Waiting for event')}</PulsingIndicatorText>
-            <IconChevron direction="right" />
-          </OnboardingTaskProjectListItemInner>
-        </OnboardingTaskProjectListItem>
-      </OnboardingTaskProjectList>
-      <SkipConfirm onSkip={handleSkip}>
-        {({skip}) => (
-          <CloseButton
-            borderless
-            size="zero"
-            aria-label={t('Close')}
-            icon={<IconClose size="xs" />}
-            onClick={skip}
-          />
-        )}
-      </SkipConfirm>
-    </TaskCard>
-  );
-}
-
-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 = {
-  exit: 'exit',
-  variants: {
-    exit: {
-      height: 0,
-      marginTop: 0,
-      opacity: 0,
-      transition: {duration: 0.3},
-    },
-  },
-};
-
-const Title = styled('div')`
-  font-weight: ${p => p.theme.fontWeightBold};
-  margin: ${space(2)} ${space(3)} 0;
-`;
-
-const TaskCard = styled(motion(Card))`
-  position: relative;
-  overflow: visible;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: ${space(1)};
-`;
-TaskCard.defaultProps = {
-  exit: 'exit',
-  variants: {
-    exit: {
-      height: 0,
-      overflow: 'hidden',
-      transition: {duration: 0.3},
-    },
-  },
-};
-
-const OnboardingTaskProjectList = styled('div')`
-  display: flex;
-  flex-direction: column;
-`;
-
-const OnboardingTaskProjectListItemInner = styled('div')`
-  padding: ${space(1)} 0;
-
-  display: flex;
-  align-items: center;
-`;
-const OnboardingTaskProjectListItem = styled(Link)`
-  :hover {
-    background-color: ${p => p.theme.hover};
-  }
-  border-radius: 0;
-  padding: 0 ${space(3)};
-  color: ${p => p.theme.textColor};
-
-  :not(:last-child) {
-    ${OnboardingTaskProjectListItemInner} {
-      border-bottom: 1px solid ${p => p.theme.innerBorder};
-    }
-  }
-`;
-
-const PulsingIndicator = styled('div')`
-  ${pulsingIndicatorStyles};
-  margin-left: auto;
-`;
-const PulsingIndicatorText = styled('span')`
-  color: ${p => p.theme.pink400};
-  font-size: ${p => p.theme.fontSizeMedium};
-  margin: 0 ${space(1)};
-`;
-const CloseButton = styled(Button)`
-  position: absolute;
-  right: ${space(1.5)};
-  top: ${space(1.5)};
-  color: ${p => p.theme.gray300};
-`;
-
-const StyledPlatformIcon = styled(PlatformIcon)`
-  margin-right: ${space(1)};
-`;

static/app/components/onboardingWizard/progressHeader.tsx

@@ -27,16 +27,14 @@ function ProgressHeader({allTasks, completedTasks}: Props) {
     description = t('Walk through this guide to get the most out of Sentry right away.');
   }
 
-  const filteredTasks = allTasks.filter(task => !task.renderCard);
-
   return (
     <Container>
       <StyledProgressRing
         size={80}
         barWidth={8}
-        text={filteredTasks.length - completedTasks.length}
+        text={allTasks.length - completedTasks.length}
         animateText
-        value={(completedTasks.length / filteredTasks.length) * 100}
+        value={(completedTasks.length / allTasks.length) * 100}
         progressEndcaps="round"
         backgroundColor={theme.gray100}
         textCss={() => css`

static/app/components/onboardingWizard/sidebar.tsx

@@ -57,7 +57,6 @@ Heading.defaultProps = {
 
 const completeNowText = isDemoWalkthrough() ? t('Sentry Basics') : t('Next Steps');
 
-const customizedTasksHeading = <Heading key="customized">{t('The Basics')}</Heading>;
 const completeNowHeading = <Heading key="now">{completeNowText}</Heading>;
 const upcomingTasksHeading = (
   <Heading key="upcoming">
@@ -82,13 +81,11 @@ export const useOnboardingTasks = (
       projects,
       onboardingContext,
     }).filter(task => task.display);
-    const filteredTasks = all.filter(task => !task.renderCard);
     return {
       allTasks: all,
-      customTasks: all.filter(task => task.renderCard),
-      active: filteredTasks.filter(findActiveTasks),
-      upcoming: filteredTasks.filter(findUpcomingTasks),
-      complete: filteredTasks.filter(findCompleteTasks),
+      active: all.filter(findActiveTasks),
+      upcoming: all.filter(findUpcomingTasks),
+      complete: all.filter(findCompleteTasks),
     };
   }, [organization, projects, onboardingContext]);
 };
@@ -120,7 +117,7 @@ export default function OnboardingWizardSidebar({
     });
   }
 
-  const {allTasks, customTasks, active, upcoming, complete} = useOnboardingTasks(
+  const {allTasks, active, upcoming, complete} = useOnboardingTasks(
     organization,
     projects,
     onboardingContext
@@ -184,20 +181,7 @@ export default function OnboardingWizardSidebar({
     </CompleteList>
   );
 
-  const customizedCards = customTasks
-    .map(task =>
-      task.renderCard?.({
-        organization,
-        task,
-        onboardingContext,
-        projects,
-      })
-    )
-    .filter(card => !!card);
-
   const items = [
-    customizedCards.length > 0 && customizedTasksHeading,
-    ...customizedCards,
     active.length > 0 && completeNowHeading,
     ...active.map(renderItem),
     upcoming.length > 0 && upcomingTasksHeading,

static/app/components/onboardingWizard/taskConfig.tsx

@@ -31,8 +31,6 @@ import EventWaiter from 'sentry/utils/eventWaiter';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import withApi from 'sentry/utils/withApi';
 
-import OnboardingProjectsCard from './onboardingProjectsCard';
-
 function hasPlatformWithSourceMaps(projects: Project[] | undefined) {
   return projects !== undefined
     ? projects.some(({platform}) => platform && sourceMaps.includes(platform))
@@ -467,17 +465,6 @@ export function getOnboardingTasks({
       // Use `features?.` because getsentry has a different `Organization` type/payload
       display: organization.features?.includes('incidents'),
     },
-    {
-      task: OnboardingTaskKey.USER_SELECTED_PROJECTS,
-      title: t('Projects to Setup'),
-      description: '',
-      skippable: true,
-      requisites: [],
-      actionType: 'action',
-      action: () => {},
-      display: true,
-      renderCard: OnboardingProjectsCard,
-    },
   ];
 }
 

static/app/components/sidebar/index.tsx

@@ -112,9 +112,7 @@ function useOpenOnboardingSidebar(organization?: Organization) {
           onboardingContext,
         });
 
-        const allDisplayedTasks = tasks
-          .filter(task => task.display)
-          .filter(task => !task.renderCard);
+        const allDisplayedTasks = tasks.filter(task => task.display);
         const doneTasks = allDisplayedTasks.filter(isDone);
 
         return !(doneTasks.length >= allDisplayedTasks.length);

static/app/components/sidebar/onboardingStatus.tsx

@@ -63,9 +63,7 @@ export default function OnboardingStatus({
     onboardingContext,
   });
 
-  const allDisplayedTasks = tasks
-    .filter(task => task.display)
-    .filter(task => !task.renderCard);
+  const allDisplayedTasks = tasks.filter(task => task.display);
 
   const doneTasks = allDisplayedTasks.filter(isDone);
   const numberRemaining = allDisplayedTasks.length - doneTasks.length;

static/app/types/onboarding.tsx

@@ -78,15 +78,6 @@ interface OnboardingTaskDescriptorBase {
    * 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.
-   * the render function is therefore responsible for determining the completion status
-   * of the card by returning null when it's completed.
-   *
-   * Note that this should not be given a react component.
-   */
-  renderCard?: (props: OnboardingCustomComponentProps) => JSX.Element | null;
   /**
    * Joins with this task id for server-side onboarding state.
    * This allows you to create alias for exising onboarding tasks or create multiple