sentry/static/app/views/projectInstall/platformIntegrationSetup.tsx

import 'prism-sentry/index.css';

import {Fragment} from 'react';
import {browserHistory, RouteComponentProps} from 'react-router';
import styled from '@emotion/styled';

import AsyncComponent from 'sentry/components/asyncComponent';
import Button from 'sentry/components/button';
import ButtonBar from 'sentry/components/buttonBar';
import platforms from 'sentry/data/platforms';
import {t} from 'sentry/locale';
import {PageHeader} from 'sentry/styles/organization';
import space from 'sentry/styles/space';
import {IntegrationProvider, Organization, Project} from 'sentry/types';
import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
import {trackIntegrationAnalytics} from 'sentry/utils/integrationUtil';
import withOrganization from 'sentry/utils/withOrganization';
import FirstEventFooter from 'sentry/views/onboarding/components/firstEventFooter';
import AddInstallationInstructions from 'sentry/views/onboarding/components/integrations/addInstallationInstructions';
import PostInstallCodeSnippet from 'sentry/views/onboarding/components/integrations/postInstallCodeSnippet';
import AddIntegrationButton from 'sentry/views/organizationIntegrations/addIntegrationButton';

import PlatformHeaderButtonBar from './components/platformHeaderButtonBar';

type Props = {
  integrationSlug: string;
  organization: Organization;
} & RouteComponentProps<{orgId: string; platform: string; projectId: string}, {}> &
  AsyncComponent['props'];

type State = {
  installed: boolean;
  integrations: {providers: IntegrationProvider[]};
  project: Project | null;
} & AsyncComponent['state'];

class PlatformIntegrationSetup extends AsyncComponent<Props, State> {
  getDefaultState() {
    return {
      ...super.getDefaultState(),
      installed: false,
      integrations: {providers: []},
      project: null,
    };
  }

  componentDidMount() {
    window.scrollTo(0, 0);

    const {platform} = this.props.params;

    // redirect if platform is not known.
    if (!platform || platform === 'other') {
      this.redirectToNeutralDocs();
    }
  }

  get provider() {
    const {providers} = this.state.integrations;
    return providers.length ? providers[0] : null;
  }

  getEndpoints(): ReturnType<AsyncComponent['getEndpoints']> {
    const {organization, integrationSlug, params} = this.props;

    if (!integrationSlug) {
      return [];
    }

    return [
      [
        'integrations',
        `/organizations/${organization.slug}/config/integrations/?provider_key=${integrationSlug}`,
      ],
      ['project', `/projects/${organization.slug}/${params.projectId}/`],
    ];
  }

  handleFullDocsClick = () => {
    const {organization} = this.props;
    trackAdvancedAnalyticsEvent('growth.onboarding_view_full_docs', {organization});
  };

  redirectToNeutralDocs() {
    const {orgId, projectId} = this.props.params;

    const url = `/organizations/${orgId}/projects/${projectId}/getting-started/`;

    browserHistory.push(url);
  }

  handleAddIntegration = () => {
    this.setState({installed: true});
  };

  trackSwitchToManual = () => {
    const {organization, integrationSlug} = this.props;
    trackIntegrationAnalytics('integrations.switch_manual_sdk_setup', {
      integration_type: 'first_party',
      integration: integrationSlug,
      view: 'project_creation',
      organization,
    });
  };

  render() {
    const {organization, params} = this.props;
    const {installed, project} = this.state;
    const {projectId, orgId, platform} = params;
    const provider = this.provider;

    const platformIntegration = platforms.find(p => p.id === platform);
    if (!provider || !platformIntegration || !project) {
      return null;
    }
    const gettingStartedLink = `/organizations/${orgId}/projects/${projectId}/getting-started/`;

    // TODO: make dynamic when adding more integrations
    const docsLink =
      'https://docs.sentry.io/product/integrations/cloud-monitoring/aws-lambda/';

    return (
      <OuterWrapper>
        <StyledPageHeader>
          <StyledTitle>
            {t('Automatically instrument %s', platformIntegration.name)}
          </StyledTitle>
          <PlatformHeaderButtonBar
            gettingStartedLink={gettingStartedLink}
            docsLink={docsLink}
          />
        </StyledPageHeader>
        <InnerWrapper>
          {!installed ? (
            <Fragment>
              <AddInstallationInstructions />
              <StyledButtonBar gap={1}>
                <AddIntegrationButton
                  provider={provider}
                  onAddIntegration={this.handleAddIntegration}
                  organization={organization}
                  priority="primary"
                  size="sm"
                  analyticsParams={{view: 'project_creation', already_installed: false}}
                  modalParams={{projectId: project.id}}
                  aria-label={t('Add integration')}
                />
                <Button
                  size="sm"
                  to={{
                    pathname: window.location.pathname,
                    query: {manual: '1'},
                  }}
                  onClick={this.trackSwitchToManual}
                >
                  {t('Manual Setup')}
                </Button>
              </StyledButtonBar>
            </Fragment>
          ) : (
            <Fragment>
              <PostInstallCodeSnippet provider={provider} />
              <FirstEventFooter
                project={project}
                organization={organization}
                docsLink={docsLink}
                docsOnClick={this.handleFullDocsClick}
              />
            </Fragment>
          )}
        </InnerWrapper>
      </OuterWrapper>
    );
  }
}

const StyledButtonBar = styled(ButtonBar)`
  margin-top: ${space(3)};
  width: max-content;

  @media (max-width: ${p => p.theme.breakpoints.small}) {
    width: auto;
    grid-row-gap: ${space(1)};
    grid-auto-flow: row;
  }
`;

const InnerWrapper = styled('div')`
  width: 850px;
`;

const OuterWrapper = styled('div')`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
`;

const StyledPageHeader = styled(PageHeader)`
  margin-bottom: ${space(3)};
`;

const StyledTitle = styled('h2')`
  margin: 0 ${space(3)} 0 0;
`;

export default withOrganization(PlatformIntegrationSetup);