sentry/static/app/components/group/seenInfo.tsx

import {Component, Fragment} from 'react';
import {css} from '@emotion/react';
import styled from '@emotion/styled';

import DateTime from 'sentry/components/dateTime';
import {Body, Header, Hovercard} from 'sentry/components/hovercard';
import TimeSince from 'sentry/components/timeSince';
import Version from 'sentry/components/version';
import VersionHoverCard from 'sentry/components/versionHoverCard';
import {t} from 'sentry/locale';
import space from 'sentry/styles/space';
import {Organization, Release} from 'sentry/types';
import {defined, toTitleCase} from 'sentry/utils';

type RelaxedDateType = React.ComponentProps<typeof TimeSince>['date'];

type Props = {
  date: RelaxedDateType;
  dateGlobal: RelaxedDateType;
  hasRelease: boolean;
  organization: Organization;
  projectId: string;
  projectSlug: string;
  title: string;
  environment?: string;
  release?: Release;
};

class SeenInfo extends Component<Props> {
  shouldComponentUpdate(nextProps: Props) {
    const {date, release} = this.props;

    return release?.version !== nextProps.release?.version || date !== nextProps.date;
  }

  render() {
    const {date, dateGlobal, environment, release, organization, projectSlug, projectId} =
      this.props;

    return (
      <HovercardWrapper>
        <StyledHovercard
          showUnderline
          header={
            <div>
              <TimeSinceWrapper>
                {t('Any Environment')}
                <TimeSince date={dateGlobal} disabledAbsoluteTooltip />
              </TimeSinceWrapper>
              {environment && (
                <TimeSinceWrapper>
                  {toTitleCase(environment)}
                  {date ? (
                    <TimeSince date={date} disabledAbsoluteTooltip />
                  ) : (
                    <span>{t('N/A')}</span>
                  )}
                </TimeSinceWrapper>
              )}
            </div>
          }
          body={
            date ? (
              <StyledDateTime date={date} />
            ) : (
              <NoEnvironment>{t(`N/A for ${environment}`)}</NoEnvironment>
            )
          }
          position="top"
        >
          <DateWrapper>
            {date ? (
              <TooltipWrapper>
                <StyledTimeSince date={date} disabledAbsoluteTooltip />
              </TooltipWrapper>
            ) : dateGlobal && environment === '' ? (
              <Fragment>
                <TimeSince date={dateGlobal} disabledAbsoluteTooltip />
                <StyledTimeSince date={dateGlobal} disabledAbsoluteTooltip />
              </Fragment>
            ) : (
              <NoDateTime>{t('N/A')}</NoDateTime>
            )}
          </DateWrapper>
        </StyledHovercard>
        <DateWrapper>
          {defined(release) ? (
            <Fragment>
              {t('in release ')}
              <VersionHoverCard
                organization={organization}
                projectSlug={projectSlug}
                releaseVersion={release.version}
              >
                <span>
                  <Version version={release.version} projectId={projectId} />
                </span>
              </VersionHoverCard>
            </Fragment>
          ) : null}
        </DateWrapper>
      </HovercardWrapper>
    );
  }
}

const dateTimeCss = p => css`
  color: ${p.theme.gray300};
  font-size: ${p.theme.fontSizeMedium};
  display: flex;
  justify-content: center;
`;

const HovercardWrapper = styled('div')`
  display: flex;
  align-items: baseline;
`;

const DateWrapper = styled('div')`
  margin-bottom: 0;
  ${p => p.theme.overflowEllipsis};
`;

const StyledDateTime = styled(DateTime)`
  ${dateTimeCss};
`;

const NoEnvironment = styled('div')`
  ${dateTimeCss};
`;

const NoDateTime = styled('span')`
  margin-right: ${space(0.5)};
`;

const TooltipWrapper = styled('span')`
  margin-right: ${space(0.25)};
  svg {
    margin-right: ${space(0.5)};
    position: relative;
    top: 1px;
  }
`;

const TimeSinceWrapper = styled('div')`
  margin-bottom: ${space(0.5)};
  display: flex;
  justify-content: space-between;
`;

const StyledTimeSince = styled(TimeSince)`
  font-size: ${p => p.theme.fontSizeMedium};
  line-height: 1.2;
`;

const StyledHovercard = styled(Hovercard)`
  width: 250px;
  ${Header} {
    font-weight: normal;
    border-bottom: 1px solid ${p => p.theme.innerBorder};
  }
  ${Body} {
    padding: ${space(1.5)};
  }
`;

export default SeenInfo;