sentry/static/app/views/alerts/wizard/index.tsx

import React from 'react';
import {RouteComponentProps} from 'react-router';
import styled from '@emotion/styled';

import Feature from 'app/components/acl/feature';
import FeatureDisabled from 'app/components/acl/featureDisabled';
import CreateAlertButton from 'app/components/createAlertButton';
import Hovercard from 'app/components/hovercard';
import * as Layout from 'app/components/layouts/thirds';
import ExternalLink from 'app/components/links/externalLink';
import List from 'app/components/list';
import ListItem from 'app/components/list/listItem';
import {Panel, PanelBody, PanelHeader} from 'app/components/panels';
import SentryDocumentTitle from 'app/components/sentryDocumentTitle';
import {t} from 'app/locale';
import space from 'app/styles/space';
import {Organization, Project} from 'app/types';
import BuilderBreadCrumbs from 'app/views/alerts/builder/builderBreadCrumbs';
import {Dataset} from 'app/views/settings/incidentRules/types';

import {
  AlertType,
  AlertWizardAlertNames,
  AlertWizardOptions,
  AlertWizardPanelContent,
  AlertWizardRuleTemplates,
} from './options';
import RadioPanelGroup from './radioPanelGroup';

type RouteParams = {
  orgId: string;
  projectId: string;
};

type Props = RouteComponentProps<RouteParams, {}> & {
  organization: Organization;
  project: Project;
  hasMetricAlerts: boolean;
};

type State = {
  alertOption: AlertType;
};
class AlertWizard extends React.Component<Props, State> {
  state: State = {
    alertOption: 'issues',
  };

  handleChangeAlertOption = (alertOption: AlertType) => {
    this.setState({alertOption});
  };

  renderCreateAlertButton() {
    const {organization, project, location} = this.props;
    const {alertOption} = this.state;
    const metricRuleTemplate = AlertWizardRuleTemplates[alertOption];
    const isMetricAlert = !!metricRuleTemplate;
    const isTransactionDataset = metricRuleTemplate?.dataset === Dataset.TRANSACTIONS;

    const to = {
      pathname: `/organizations/${organization.slug}/alerts/${project.slug}/new/`,
      query: {
        ...(metricRuleTemplate && metricRuleTemplate),
        createFromWizard: true,
        referrer: location?.query?.referrer,
      },
    };

    const noFeatureMessage = t('Requires incidents feature.');
    const renderNoAccess = p => (
      <Hovercard
        body={
          <FeatureDisabled
            features={p.features}
            hideHelpToggle
            message={noFeatureMessage}
            featureName={noFeatureMessage}
          />
        }
      >
        {p.children(p)}
      </Hovercard>
    );

    return (
      <Feature
        features={
          isTransactionDataset
            ? ['incidents', 'performance-view']
            : isMetricAlert
            ? ['incidents']
            : []
        }
        requireAll
        organization={organization}
        hookName="feature-disabled:alert-wizard-performance"
        renderDisabled={renderNoAccess}
      >
        {({hasFeature}) => (
          <WizardButtonContainer>
            <CreateAlertButton
              organization={organization}
              projectSlug={project.slug}
              disabled={!hasFeature}
              priority="primary"
              to={to}
              hideIcon
            >
              {t('Set Conditions')}
            </CreateAlertButton>
          </WizardButtonContainer>
        )}
      </Feature>
    );
  }

  render() {
    const {
      hasMetricAlerts,
      organization,
      params: {projectId},
    } = this.props;
    const {alertOption} = this.state;
    const title = t('Alert Creation Wizard');
    const panelContent = AlertWizardPanelContent[alertOption];
    return (
      <React.Fragment>
        <SentryDocumentTitle title={title} projectSlug={projectId} />

        <Feature features={['organizations:alert-wizard']}>
          <Layout.Header>
            <Layout.HeaderContent>
              <BuilderBreadCrumbs
                hasMetricAlerts={hasMetricAlerts}
                orgSlug={organization.slug}
                projectSlug={projectId}
                title={t('Select Alert')}
              />
              <Layout.Title>{t('Select Alert')}</Layout.Title>
            </Layout.HeaderContent>
          </Layout.Header>
          <StyledLayoutBody>
            <Layout.Main fullWidth>
              <WizardBody>
                <WizardOptions>
                  <Styledh2>{t('Errors')}</Styledh2>
                  {AlertWizardOptions.map(({categoryHeading, options}, i) => (
                    <OptionsWrapper key={categoryHeading}>
                      {i > 0 && <Styledh2>{categoryHeading}</Styledh2>}
                      <RadioPanelGroup
                        choices={options.map(alertType => {
                          return [alertType, AlertWizardAlertNames[alertType]];
                        })}
                        onChange={this.handleChangeAlertOption}
                        value={alertOption}
                        label="alert-option"
                      />
                    </OptionsWrapper>
                  ))}
                </WizardOptions>
                <WizardPanel visible={!!panelContent && !!alertOption}>
                  <WizardPanelBody>
                    <div>
                      <PanelHeader>{AlertWizardAlertNames[alertOption]}</PanelHeader>
                      <PanelBody withPadding>
                        <PanelDescription>
                          {panelContent.description}{' '}
                          {panelContent.docsLink && (
                            <ExternalLink href={panelContent.docsLink}>
                              {t('Learn more')}
                            </ExternalLink>
                          )}
                        </PanelDescription>
                        <WizardImage src={panelContent.illustration} />
                        <ExampleHeader>{t('Examples')}</ExampleHeader>
                        <ExampleList symbol="bullet">
                          {panelContent.examples.map((example, i) => (
                            <ExampleItem key={i}>{example}</ExampleItem>
                          ))}
                        </ExampleList>
                      </PanelBody>
                    </div>
                    <WizardFooter>{this.renderCreateAlertButton()}</WizardFooter>
                  </WizardPanelBody>
                </WizardPanel>
              </WizardBody>
            </Layout.Main>
          </StyledLayoutBody>
        </Feature>
      </React.Fragment>
    );
  }
}

const StyledLayoutBody = styled(Layout.Body)`
  margin-bottom: -${space(3)};
`;

const Styledh2 = styled('h2')`
  font-weight: normal;
  font-size: ${p => p.theme.fontSizeExtraLarge};
  margin-bottom: ${space(1)} !important;
`;

const WizardBody = styled('div')`
  display: flex;
  padding-top: ${space(1)};
`;

const WizardOptions = styled('div')`
  flex: 3;
  margin-right: ${space(3)};
  padding-right: ${space(3)};
  max-width: 300px;
`;

const WizardImage = styled('img')`
  max-height: 300px;
`;

const WizardPanel = styled(Panel)<{visible?: boolean}>`
  max-width: 700px;
  position: sticky;
  top: 20px;
  flex: 5;
  display: flex;
  ${p => !p.visible && 'visibility: hidden'};
  flex-direction: column;
  align-items: start;
  align-self: flex-start;
  ${p => p.visible && 'animation: 0.6s pop ease forwards'};

  @keyframes pop {
    0% {
      transform: translateY(30px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
`;

const ExampleList = styled(List)`
  margin-bottom: ${space(2)} !important;
`;

const WizardPanelBody = styled(PanelBody)`
  flex: 1;
  min-width: 100%;
`;

const PanelDescription = styled('p')`
  margin-bottom: ${space(2)};
`;

const ExampleHeader = styled('div')`
  margin: 0 0 ${space(1)} 0;
  font-size: ${p => p.theme.fontSizeLarge};
`;

const ExampleItem = styled(ListItem)`
  font-size: ${p => p.theme.fontSizeMedium};
`;

const OptionsWrapper = styled('div')`
  margin-bottom: ${space(4)};

  &:last-child {
    margin-bottom: 0;
  }
`;

const WizardFooter = styled('div')`
  border-top: 1px solid ${p => p.theme.border};
  padding: ${space(1.5)} ${space(1.5)} ${space(1.5)} ${space(1.5)};
`;

const WizardButtonContainer = styled('div')`
  display: flex;
  justify-content: flex-end;
`;

export default AlertWizard;