sentinel/static/app/views/dataExport/dataDownload.tsx

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

import {Button} from 'sentry/components/button';
import {ExportQueryType} from 'sentry/components/dataExport';
import DateTime from 'sentry/components/dateTime';
import {IconDownload} from 'sentry/icons';
import {t, tct} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import {normalizeUrl} from 'sentry/utils/withDomainRequired';
import Layout from 'sentry/views/auth/layout';
import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';

export enum DownloadStatus {
  EARLY = 'EARLY',
  VALID = 'VALID',
  EXPIRED = 'EXPIRED',
}

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

type Download = {
  checksum: string;
  dateCreated: string;
  id: number;
  query: {
    info: object;
    type: ExportQueryType;
  };
  status: DownloadStatus;
  user: {
    email: string;
    id: number;
    username: string;
  };
  dateExpired?: string;
  dateFinished?: string;
};

type Props = {} & RouteComponentProps<RouteParams, {}>;

type State = {
  download: Download;
  errors: {
    download: {
      responseJSON: {
        detail: string;
      };
      status: number;
      statusText: string;
    };
  };
} & DeprecatedAsyncView['state'];

class DataDownload extends DeprecatedAsyncView<Props, State> {
  disableErrorReport = false;

  getTitle(): string {
    return t('Download Center');
  }

  getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
    const {orgId, dataExportId} = this.props.params;
    return [['download', `/organizations/${orgId}/data-export/${dataExportId}/`]];
  }

  getActionLink(queryType): string {
    const {orgId} = this.props.params;
    switch (queryType) {
      case ExportQueryType.ISSUES_BY_TAG:
        return `/organizations/${orgId}/issues/`;
      case ExportQueryType.DISCOVER:
        return `/organizations/${orgId}/discover/queries/`;
      default:
        return '/';
    }
  }

  renderDate(date: string | undefined): React.ReactNode {
    if (!date) {
      return null;
    }
    const d = new Date(date);
    return (
      <strong>
        <DateTime date={d} />
      </strong>
    );
  }

  renderEarly(): React.ReactNode {
    return (
      <Fragment>
        <Header>
          <h3>
            {t('What are')}
            <i>{t(' you ')}</i>
            {t('doing here?')}
          </h3>
        </Header>
        <Body>
          <p>
            {t(
              "Not that its any of our business, but were you invited to this page? It's just that we don't exactly remember emailing you about it."
            )}
          </p>
          <p>{t("Close this window and we'll email you when your download is ready.")}</p>
        </Body>
      </Fragment>
    );
  }

  renderExpired(): React.ReactNode {
    const {query} = this.state.download;
    const actionLink = this.getActionLink(query.type);
    return (
      <Fragment>
        <Header>
          <h3>{t('This is awkward.')}</h3>
        </Header>
        <Body>
          <p>
            {t(
              "That link expired, so your download doesn't live here anymore. Just picked up one day and left town."
            )}
          </p>
          <p>
            {t(
              'Make a new one with your latest data. Your old download will never see it coming.'
            )}
          </p>
          <DownloadButton href={actionLink} priority="primary">
            {t('Start a New Download')}
          </DownloadButton>
        </Body>
      </Fragment>
    );
  }

  openInDiscover() {
    const {
      download: {
        query: {info},
      },
    } = this.state;
    const {orgId} = this.props.params;

    const to = {
      pathname: `/organizations/${orgId}/discover/results/`,
      query: info,
    };

    browserHistory.push(normalizeUrl(to));
  }

  renderOpenInDiscover() {
    const {
      download: {
        query = {
          type: ExportQueryType.ISSUES_BY_TAG,
          info: {},
        },
      },
    } = this.state;

    // default to IssuesByTag because we don't want to
    // display this unless we're sure its a discover query
    const {type = ExportQueryType.ISSUES_BY_TAG} = query;

    return type === 'Discover' ? (
      <Fragment>
        <p>{t('Need to make changes?')}</p>
        <Button priority="primary" onClick={() => this.openInDiscover()}>
          {t('Open in Discover')}
        </Button>
        <br />
      </Fragment>
    ) : null;
  }

  renderValid(): React.ReactNode {
    const {
      download: {dateExpired, checksum},
    } = this.state;
    const {orgId, dataExportId} = this.props.params;

    return (
      <Fragment>
        <Header>
          <h3>{t('All done.')}</h3>
        </Header>
        <Body>
          <p>{t("See, that wasn't so bad. Your data is all ready for download.")}</p>
          <Button
            priority="primary"
            icon={<IconDownload />}
            href={`/api/0/organizations/${orgId}/data-export/${dataExportId}/?download=true`}
          >
            {t('Download CSV')}
          </Button>
          <p>
            {t("That link won't last forever — it expires:")}
            <br />
            {this.renderDate(dateExpired)}
          </p>
          {this.renderOpenInDiscover()}
          <p>
            <small>
              <strong>SHA1:{checksum}</strong>
            </small>
            <br />
            {tct('Need help verifying? [link].', {
              link: (
                <a
                  href="https://docs.sentry.io/product/discover-queries/query-builder/#filter-by-table-columns"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {t('Check out our docs')}
                </a>
              ),
            })}
          </p>
        </Body>
      </Fragment>
    );
  }

  renderError(): React.ReactNode {
    const {
      errors: {download: err},
    } = this.state;
    const errDetail = err?.responseJSON?.detail;
    return (
      <Layout>
        <main>
          <Header>
            <h3>
              {err.status} - {err.statusText}
            </h3>
          </Header>
          {errDetail && (
            <Body>
              <p>{errDetail}</p>
            </Body>
          )}
        </main>
      </Layout>
    );
  }

  renderContent(): React.ReactNode {
    const {download} = this.state;
    switch (download.status) {
      case DownloadStatus.EARLY:
        return this.renderEarly();
      case DownloadStatus.EXPIRED:
        return this.renderExpired();
      default:
        return this.renderValid();
    }
  }

  renderBody() {
    return (
      <Layout>
        <main>{this.renderContent()}</main>
      </Layout>
    );
  }
}

const Header = styled('header')`
  border-bottom: 1px solid ${p => p.theme.border};
  padding: ${space(3)} 40px 0;
  h3 {
    font-size: 24px;
    margin: 0 0 ${space(3)} 0;
  }
`;

const Body = styled('div')`
  padding: ${space(2)} 40px;
  max-width: 500px;
  p {
    margin: ${space(1.5)} 0;
  }
`;

const DownloadButton = styled(Button)`
  margin-bottom: ${space(1.5)};
`;

export default DataDownload;