sentry/static/app/views/releases/detail/overview/sidebar/projectReleaseDetails.tsx

import styled from '@emotion/styled';

import Count from 'sentry/components/count';
import DateTime from 'sentry/components/dateTime';
import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable';
import Link from 'sentry/components/links/link';
import SidebarSection from 'sentry/components/sidebarSection';
import TextOverflow from 'sentry/components/textOverflow';
import TimeSince from 'sentry/components/timeSince';
import Version from 'sentry/components/version';
import {t, tn} from 'sentry/locale';
import {ReleaseMeta, ReleaseWithHealth} from 'sentry/types';

type Props = {
  orgSlug: string;
  projectSlug: string;
  release: ReleaseWithHealth;
  releaseMeta: ReleaseMeta;
};

const ProjectReleaseDetails = ({release, releaseMeta, orgSlug, projectSlug}: Props) => {
  const {version, versionInfo, dateCreated, firstEvent, lastEvent} = release;

  return (
    <SidebarSection title={t('Project Release Details')}>
      <KeyValueTable>
        <KeyValueTableRow
          keyName={t('Created')}
          value={<DateTime date={dateCreated} seconds={false} />}
        />
        <KeyValueTableRow
          keyName={t('Version')}
          value={<Version version={version} anchor={false} />}
        />
        <KeyValueTableRow
          keyName={t('Package')}
          value={
            <StyledTextOverflow ellipsisDirection="left">
              {versionInfo.package ?? '\u2014'}
            </StyledTextOverflow>
          }
        />
        <KeyValueTableRow
          keyName={t('First Event')}
          value={firstEvent ? <TimeSince date={firstEvent} /> : '\u2014'}
        />
        <KeyValueTableRow
          keyName={t('Last Event')}
          value={lastEvent ? <TimeSince date={lastEvent} /> : '\u2014'}
        />
        <KeyValueTableRow
          keyName={t('Source Maps')}
          value={
            <Link
              to={`/settings/${orgSlug}/projects/${projectSlug}/source-maps/${encodeURIComponent(
                version
              )}/`}
            >
              <Count value={releaseMeta.releaseFileCount} />{' '}
              {tn('artifact', 'artifacts', releaseMeta.releaseFileCount)}
            </Link>
          }
        />
      </KeyValueTable>
    </SidebarSection>
  );
};

const StyledTextOverflow = styled(TextOverflow)`
  line-height: inherit;
  text-align: right;
`;

export default ProjectReleaseDetails;