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, IconEllipsis} from 'sentry/icons'; import {t, tct} from 'sentry/locale'; import pulsingIndicatorStyles from 'sentry/styles/pulsingIndicator'; import space from 'sentry/styles/space'; import {OnboardingCustomComponentProps, Project} from 'sentry/types'; import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent'; import SkipConfirm from './skipConfirm'; const MAX_PROJECT_COUNT = 3; export default function OnboardingProjectsCard({ organization: org, onboardingState, setOnboardingState, projects: allProjects, }: OnboardingCustomComponentProps) { if (!onboardingState) { return null; } const handleSkip = () => { setOnboardingState({ ...onboardingState, selectedPlatforms: [], }); }; // Projects selected during onboarding but not received first event const projects = onboardingState.selectedPlatforms .map(platform => onboardingState.platformToProjectIdMap[platform]) .map(projectId => allProjects.find(p => p.slug === projectId)) .filter(project => project && !project.firstEvent) as Project[]; if (projects.length === 0) { return null; } return ( {t('Project to Setup')} {projects.slice(0, MAX_PROJECT_COUNT).map(p => ( { trackAdvancedAnalyticsEvent('growth.onboarding_quick_start_cta', { platform: p.platform, organization: org, }); }} > {p.slug} {t('Waiting for event')} ))} {projects.length > MAX_PROJECT_COUNT && ( { trackAdvancedAnalyticsEvent('growth.onboarding_quick_start_cta', { organization: org, }); }} > {tct('and [num] more', {num: projects.length - MAX_PROJECT_COUNT})} )} {({skip}) => ( } onClick={skip} /> )} ); } const Heading = styled(motion.div)` display: flex; color: ${p => p.theme.purple300}; font-size: ${p => p.theme.fontSizeExtraSmall}; text-transform: uppercase; font-weight: 600; 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: 600; 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.pink300}; 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)}; `; const StyledAndMoreIcon = styled(IconEllipsis)` margin-right: ${space(1)}; `;