sentry/static/app/views/performance/onboarding.tsx

import {browserHistory} from 'react-router';
import styled from '@emotion/styled';
import * as Sentry from '@sentry/react';

import emptyStateImg from 'sentry-images/spot/performance-empty-state.svg';
import tourAlert from 'sentry-images/spot/performance-tour-alert.svg';
import tourCorrelate from 'sentry-images/spot/performance-tour-correlate.svg';
import tourMetrics from 'sentry-images/spot/performance-tour-metrics.svg';
import tourTrace from 'sentry-images/spot/performance-tour-trace.svg';

import {
  addErrorMessage,
  addLoadingMessage,
  clearIndicators,
} from 'app/actionCreators/indicator';
import {Client} from 'app/api';
import Button from 'app/components/button';
import ButtonBar from 'app/components/buttonBar';
import FeatureTourModal, {
  TourImage,
  TourStep,
  TourText,
} from 'app/components/modals/featureTourModal';
import OnboardingPanel from 'app/components/onboardingPanel';
import {t} from 'app/locale';
import {Organization, Project} from 'app/types';
import {trackAdvancedAnalyticsEvent} from 'app/utils/advancedAnalytics';
import withApi from 'app/utils/withApi';

const performanceSetupUrl =
  'https://docs.sentry.io/performance-monitoring/getting-started/';

const docsLink = (
  <Button external href={performanceSetupUrl}>
    {t('Setup')}
  </Button>
);

export const PERFORMANCE_TOUR_STEPS: TourStep[] = [
  {
    title: t('Track Application Metrics'),
    image: <TourImage src={tourMetrics} />,
    body: (
      <TourText>
        {t(
          'Monitor your slowest pageloads and APIs to see which users are having the worst time.'
        )}
      </TourText>
    ),
    actions: docsLink,
  },
  {
    title: t('Correlate Errors and Performance'),
    image: <TourImage src={tourCorrelate} />,
    body: (
      <TourText>
        {t(
          'See what errors occurred within a transaction and the impact of those errors.'
        )}
      </TourText>
    ),
    actions: docsLink,
  },
  {
    title: t('Watch and Alert'),
    image: <TourImage src={tourAlert} />,
    body: (
      <TourText>
        {t(
          'Highlight mission-critical pages and APIs and set latency alerts to notify you before things go wrong.'
        )}
      </TourText>
    ),
    actions: docsLink,
  },
  {
    title: t('Trace Across Systems'),
    image: <TourImage src={tourTrace} />,
    body: (
      <TourText>
        {t(
          "Follow a trace from a user's session and drill down to identify any bottlenecks that occur."
        )}
      </TourText>
    ),
  },
];

type Props = {
  organization: Organization;
  api: Client;
  project: Project;
};

function Onboarding({organization, project, api}: Props) {
  function handleAdvance(step: number, duration: number) {
    trackAdvancedAnalyticsEvent(
      'performance_views.tour.advance',
      {step, duration},
      organization
    );
  }

  function handleClose(step: number, duration: number) {
    trackAdvancedAnalyticsEvent(
      'performance_views.tour.close',
      {step, duration},
      organization
    );
  }
  const showSampleTransactionBtn = organization.features.includes(
    'performance-create-sample-transaction'
  );
  const featureTourBtn = (
    <FeatureTourModal
      steps={PERFORMANCE_TOUR_STEPS}
      onAdvance={handleAdvance}
      onCloseModal={handleClose}
      doneUrl={performanceSetupUrl}
      doneText={t('Start Setup')}
    >
      {({showModal}) => (
        <Button
          priority={showSampleTransactionBtn ? 'link' : 'default'}
          onClick={() => {
            trackAdvancedAnalyticsEvent('performance_views.tour.start', {}, organization);
            showModal();
          }}
        >
          {t('Take a Tour')}
        </Button>
      )}
    </FeatureTourModal>
  );
  const secondaryBtn = showSampleTransactionBtn ? (
    <Button
      data-test-id="create-sample-transaction-btn"
      onClick={async () => {
        trackAdvancedAnalyticsEvent(
          'performance_views.create_sample_transaction',
          {platform: project.platform},
          organization
        );
        addLoadingMessage(t('Processing sample event...'), {
          duration: 15000,
        });
        const url = `/projects/${organization.slug}/${project.slug}/create-sample-transaction/`;
        try {
          const eventData = await api.requestPromise(url, {method: 'POST'});
          browserHistory.push(
            `/organizations/${organization.slug}/performance/${project.slug}:${eventData.eventID}/`
          );
          clearIndicators();
        } catch (error) {
          Sentry.withScope(scope => {
            scope.setExtra('error', error);
            Sentry.captureException(new Error('Failed to create sample event'));
          });
          clearIndicators();
          addErrorMessage(t('Failed to create a new sample event'));
          return;
        }
      }}
    >
      {t('Create Sample Transaction')}
    </Button>
  ) : (
    featureTourBtn
  );

  return (
    <OnboardingPanel image={<PerfImage src={emptyStateImg} />}>
      <h3>{t('Pinpoint problems')}</h3>
      <p>
        {t(
          'Something seem slow? Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries.'
        )}
      </p>
      <ButtonList gap={1}>
        <Button
          priority="primary"
          target="_blank"
          href="https://docs.sentry.io/performance-monitoring/getting-started/"
        >
          {t('Start Setup')}
        </Button>
        {secondaryBtn}
      </ButtonList>
      {showSampleTransactionBtn && featureTourBtn}
    </OnboardingPanel>
  );
}

const PerfImage = styled('img')`
  @media (min-width: ${p => p.theme.breakpoints[0]}) {
    max-width: unset;
    user-select: none;
    position: absolute;
    top: 75px;
    bottom: 0;
    width: 450px;
    margin-top: auto;
    margin-bottom: auto;
  }

  @media (min-width: ${p => p.theme.breakpoints[1]}) {
    width: 480px;
  }

  @media (min-width: ${p => p.theme.breakpoints[2]}) {
    width: 600px;
  }
`;

const ButtonList = styled(ButtonBar)`
  grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
  margin-bottom: 16px;
`;

export default withApi(Onboarding);