sentry/static/app/views/replays/replayTable.tsx

import {Fragment} from 'react';
import {useTheme} from '@emotion/react';
import styled from '@emotion/styled';

import Duration from 'sentry/components/duration';
import ProjectBadge from 'sentry/components/idBadge/projectBadge';
import UserBadge from 'sentry/components/idBadge/userBadge';
import Link from 'sentry/components/links/link';
import {PanelTable} from 'sentry/components/panels';
import ReplayHighlight from 'sentry/components/replays/replayHighlight';
import {StringWalker} from 'sentry/components/replays/walker/urlWalker';
import TimeSince from 'sentry/components/timeSince';
import {IconArrow, IconCalendar} from 'sentry/icons';
import {t} from 'sentry/locale';
import space from 'sentry/styles/space';
import type {Organization} from 'sentry/types';
import type {Sort} from 'sentry/utils/discover/fields';
import {useLocation} from 'sentry/utils/useLocation';
import useMedia from 'sentry/utils/useMedia';
import useOrganization from 'sentry/utils/useOrganization';
import useProjects from 'sentry/utils/useProjects';
import type {ReplayListLocationQuery, ReplayListRecord} from 'sentry/views/replays/types';

type Props = {
  isFetching: boolean;
  replays: undefined | ReplayListRecord[];
  showProjectColumn: boolean;
  sort: Sort;
};

type RowProps = {
  minWidthIsSmall: boolean;
  organization: Organization;
  replay: ReplayListRecord;
  showProjectColumn: boolean;
};

function ReplayTable({isFetching, replays, showProjectColumn, sort}: Props) {
  const location = useLocation<ReplayListLocationQuery>();
  const organization = useOrganization();
  const theme = useTheme();
  const minWidthIsSmall = useMedia(`(min-width: ${theme.breakpoints.small})`);

  const {pathname} = location;

  const arrowDirection = sort.kind === 'asc' ? 'up' : 'down';
  const sortArrow = <IconArrow color="gray300" size="xs" direction={arrowDirection} />;

  return (
    <StyledPanelTable
      isLoading={isFetching}
      isEmpty={replays?.length === 0}
      headers={[
        t('Session'),
        showProjectColumn && minWidthIsSmall ? t('Project') : null,
        <SortLink
          key="startedAt"
          role="columnheader"
          aria-sort={
            sort.field === 'startedAt'
              ? sort.kind === 'asc'
                ? 'ascending'
                : 'descending'
              : 'none'
          }
          to={{
            pathname,
            query: {
              ...location.query,
              sort: sort.kind === 'desc' ? 'startedAt' : '-startedAt',
            },
          }}
        >
          {t('Start Time')} {sort.field.endsWith('startedAt') && sortArrow}
        </SortLink>,
        <SortLink
          key="duration"
          role="columnheader"
          aria-sort={
            sort.field.endsWith('duration')
              ? sort.kind === 'asc'
                ? 'ascending'
                : 'descending'
              : 'none'
          }
          to={{
            pathname,
            query: {
              ...location.query,
              sort: sort.kind === 'desc' ? 'duration' : '-duration',
            },
          }}
        >
          {t('Duration')} {sort.field === 'duration' && sortArrow}
        </SortLink>,
        t('Errors'),
        t('Interest'),
      ]}
    >
      {replays?.map(replay => (
        <ReplayTableRow
          key={replay.id}
          replay={replay}
          organization={organization}
          showProjectColumn={showProjectColumn}
          minWidthIsSmall={minWidthIsSmall}
        />
      ))}
    </StyledPanelTable>
  );
}

function ReplayTableRow({
  minWidthIsSmall,
  organization,
  replay,
  showProjectColumn,
}: RowProps) {
  const {projects} = useProjects();
  const project = projects.find(p => p.id === replay.projectId);
  return (
    <Fragment>
      <UserBadge
        avatarSize={32}
        displayName={
          <Link
            to={`/organizations/${organization.slug}/replays/${project?.slug}:${replay.id}/`}
          >
            {replay.user.username ||
              replay.user.name ||
              replay.user.email ||
              replay.user.ip_address ||
              replay.user.id ||
              ''}
          </Link>
        }
        user={replay.user}
        // this is the subheading for the avatar, so displayEmail in this case is a misnomer
        displayEmail={<StringWalker urls={replay.urls} />}
      />
      {showProjectColumn && minWidthIsSmall && (
        <Item>{project ? <ProjectBadge project={project} avatarSize={16} /> : null}</Item>
      )}
      <Item>
        <TimeSinceWrapper>
          {minWidthIsSmall && <StyledIconCalendarWrapper color="gray500" size="sm" />}
          <TimeSince date={replay.startedAt} />
        </TimeSinceWrapper>
      </Item>
      <Item>
        <Duration seconds={Math.floor(replay.duration)} exact abbreviation />
      </Item>
      <Item>{replay.countErrors || 0}</Item>
      <Item>
        <ReplayHighlight replay={replay} />
      </Item>
    </Fragment>
  );
}

const StyledPanelTable = styled(PanelTable)`
  grid-template-columns: minmax(0, 1fr) max-content max-content max-content max-content max-content;

  @media (max-width: ${p => p.theme.breakpoints.small}) {
    grid-template-columns: minmax(0, 1fr) max-content max-content max-content max-content;
  }
`;

const SortLink = styled(Link)`
  color: inherit;

  :hover {
    color: inherit;
  }

  svg {
    vertical-align: top;
  }
`;

const Item = styled('div')`
  display: flex;
  align-items: center;
`;

const TimeSinceWrapper = styled('div')`
  display: grid;
  grid-template-columns: repeat(2, minmax(auto, max-content));
  align-items: center;
  gap: ${space(1)};
`;

const StyledIconCalendarWrapper = styled(IconCalendar)`
  position: relative;
  top: -1px;
`;

export default ReplayTable;