import {useTheme} from '@emotion/react'; import tourAlert from 'sentry-images/spot/discover-tour-alert.svg'; import tourExplore from 'sentry-images/spot/discover-tour-explore.svg'; import tourFilter from 'sentry-images/spot/discover-tour-filter.svg'; import tourGroup from 'sentry-images/spot/discover-tour-group.svg'; import Banner from 'sentry/components/banner'; import Button from 'sentry/components/button'; import FeatureTourModal, { TourImage, TourStep, TourText, } from 'sentry/components/modals/featureTourModal'; import {t} from 'sentry/locale'; import {Organization} from 'sentry/types'; import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent'; import useMedia from 'sentry/utils/useMedia'; import BackgroundSpace from './backgroundSpace'; const docsUrl = 'https://docs.sentry.io/product/discover-queries/'; const docsLink = ( ); const TOUR_STEPS: TourStep[] = [ { title: t('Explore Data over Time'), image: , body: ( {t( 'Analyze and visualize all of your data over time to find answers to your most complex problems.' )} ), actions: docsLink, }, { title: t('Filter on Event Attributes.'), image: , body: ( {t( 'Drill down on data by any custom tag or field to reduce noise and hone in on specific areas.' )} ), actions: docsLink, }, { title: t('Group Data by Tags'), image: , body: ( {t( 'Go beyond Issues and create custom groupings to investigate events from a different lens.' )} ), actions: docsLink, }, { title: t('Save, Share and Alert'), image: , body: ( {t('Send insights to your team and set alerts to monitor any future spikes.')} ), }, ]; type Props = { organization: Organization; resultsUrl: string; }; function DiscoverBanner({organization, resultsUrl}: Props) { function onAdvance(step: number, duration: number) { trackAdvancedAnalyticsEvent('discover_v2.tour.advance', { organization, step, duration, }); } function onCloseModal(step: number, duration: number) { trackAdvancedAnalyticsEvent('discover_v2.tour.close', {organization, step, duration}); } const theme = useTheme(); const isSmallBanner = useMedia(`(max-width: ${theme.breakpoints.medium})`); return ( } dismissKey="discover" > {({showModal}) => ( )} ); } export default DiscoverBanner;