sentry/static/app/components/pullRequestLink.tsx

import styled from '@emotion/styled';

import Button from 'sentry/components/button';
import ExternalLink from 'sentry/components/links/externalLink';
import {IconBitbucket, IconGithub, IconGitlab} from 'sentry/icons';
import space from 'sentry/styles/space';
import {PullRequest, Repository} from 'sentry/types';

function renderIcon(repo: Repository) {
  if (!repo.provider) {
    return null;
  }

  const {id} = repo.provider;
  const providerId = id.includes(':') ? id.split(':').pop() : id;

  switch (providerId) {
    case 'github':
      return <IconGithub size="xs" data-test-id="pull-request-github" />;
    case 'gitlab':
      return <IconGitlab size="xs" data-test-id="pull-request-gitlab" />;
    case 'bitbucket':
      return <IconBitbucket size="xs" />;
    default:
      return null;
  }
}

type Props = {
  pullRequest: PullRequest;
  repository: Repository;
  inline?: boolean;
};

function PullRequestLink({pullRequest, repository, inline}: Props) {
  const displayId = `${repository.name} #${pullRequest.id}: ${pullRequest.title}`;

  if (!pullRequest.externalUrl) {
    return <span>{displayId}</span>;
  }

  return !inline ? (
    <Button
      external
      href={pullRequest.externalUrl}
      size="sm"
      icon={renderIcon(repository)}
    >
      {displayId}
    </Button>
  ) : (
    <ExternalPullLink href={pullRequest.externalUrl}>
      {renderIcon(repository)}
      {displayId}
    </ExternalPullLink>
  );
}

const ExternalPullLink = styled(ExternalLink)`
  display: inline-flex;
  align-items: center;
  gap: ${space(0.5)};
`;

export default PullRequestLink;