sentry/static/app/views/eventsV2/eventDetails/linkedIssue.tsx

import * as React from 'react';
import styled from '@emotion/styled';

import Alert from 'sentry/components/alert';
import AsyncComponent from 'sentry/components/asyncComponent';
import {SectionHeading} from 'sentry/components/charts/styles';
import Times from 'sentry/components/group/times';
import ProjectBadge from 'sentry/components/idBadge/projectBadge';
import Link from 'sentry/components/links/link';
import Placeholder from 'sentry/components/placeholder';
import SeenByList from 'sentry/components/seenByList';
import ShortId from 'sentry/components/shortId';
import GroupChart from 'sentry/components/stream/groupChart';
import {IconWarning} from 'sentry/icons';
import {t} from 'sentry/locale';
import space from 'sentry/styles/space';
import {Group} from 'sentry/types';

type Props = {
  groupId: string;
  eventId: string;
};

type State = {
  group: Group;
};

class LinkedIssue extends AsyncComponent<
  Props & AsyncComponent['props'],
  State & AsyncComponent['state']
> {
  getEndpoints(): ReturnType<AsyncComponent['getEndpoints']> {
    const {groupId} = this.props;
    const groupUrl = `/issues/${groupId}/`;

    return [['group', groupUrl]];
  }

  renderLoading() {
    return <Placeholder height="120px" bottomGutter={2} />;
  }

  renderError(error?: Error, disableLog = false): React.ReactNode {
    const {errors} = this.state;
    const hasNotFound = Object.values(errors).find(resp => resp && resp.status === 404);
    if (hasNotFound) {
      return (
        <Alert type="warning" icon={<IconWarning size="md" />}>
          {t('The linked issue cannot be found. It may have been deleted, or merged.')}
        </Alert>
      );
    }

    return super.renderError(error, disableLog);
  }

  renderBody() {
    const {eventId} = this.props;
    const {group} = this.state;
    const issueUrl = `${group.permalink}events/${eventId}/`;

    return (
      <Section>
        <SectionHeading>{t('Event Issue')}</SectionHeading>
        <StyledIssueCard>
          <IssueCardHeader>
            <StyledLink to={issueUrl} data-test-id="linked-issue">
              <StyledShortId
                shortId={group.shortId}
                avatar={
                  <ProjectBadge
                    project={group.project}
                    avatarSize={16}
                    hideName
                    disableLink
                  />
                }
              />
            </StyledLink>
            <StyledSeenByList seenBy={group.seenBy} maxVisibleAvatars={5} />
          </IssueCardHeader>
          <IssueCardBody>
            <GroupChart statsPeriod="30d" data={group} height={56} />
          </IssueCardBody>
          <IssueCardFooter>
            <Times lastSeen={group.lastSeen} firstSeen={group.firstSeen} />
          </IssueCardFooter>
        </StyledIssueCard>
      </Section>
    );
  }
}

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

const StyledIssueCard = styled('div')`
  border: 1px solid ${p => p.theme.border};
  border-radius: ${p => p.theme.borderRadius};
`;

const IssueCardHeader = styled('div')`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: ${space(1)};
`;

const StyledLink = styled(Link)`
  justify-content: flex-start;
`;

const IssueCardBody = styled('div')`
  background: ${p => p.theme.backgroundSecondary};
  padding-top: ${space(1)};
`;

const StyledSeenByList = styled(SeenByList)`
  margin: 0;
`;

const StyledShortId = styled(ShortId)`
  font-size: ${p => p.theme.fontSizeMedium};
  color: ${p => p.theme.textColor};
`;

const IssueCardFooter = styled('div')`
  color: ${p => p.theme.gray300};
  font-size: ${p => p.theme.fontSizeSmall};
  padding: ${space(0.5)} ${space(1)};
`;

export default LinkedIssue;