function SubtestsRevisionHeader()

in src/components/CompareResults/SubtestsResults/SubtestsRevisionHeader.tsx [131:183]


function SubtestsRevisionHeader(props: SubtestsRevisionHeaderProps) {
  const { header, view } = props;
  const { docsURL, isLinkSupported } = getDocsURL(
    header.suite,
    header.framework_id,
  );
  const platformIcons: Record<PlatformShortName, ReactNode> = {
    Linux: <LinuxIcon />,
    macOS: <AppleIcon />,
    iOS: <AppleIcon />,
    Windows: <WindowsIcon />,
    Android: <AndroidIcon />,
    Unspecified: '',
  };

  const platformShortName = getPlatformShortName(header.platform);
  const platformIcon = platformIcons[platformShortName];
  const extraOptions = getExtraOptions(header.extra_options);
  const framework = frameworkMap[header.framework_id];
  const baseInfo =
    view === subtestsView
      ? getRevLink(header.base_rev, header.base_repo, 'Base')
      : getTimeRange(header.base_repo);

  return (
    <div className={styles.revisionHeader}>
      <div className={styles.typography}>
        <strong>{getSuite(header, docsURL, isLinkSupported)}</strong> |
        {baseInfo}
        {getRevLink(header.new_rev, header.new_repo, '- New')} | {framework} |{' '}
        <Tooltip
          style={{ cursor: 'pointer' }}
          placement='bottom'
          title={header.platform}
          arrow
        >
          <span>
            {platformIcon}
            <span>{getPlatformAndVersion(header.platform)}</span>
          </span>
        </Tooltip>
      </div>
      <div className={styles.tagsOptions}>
        <span className={styles.chip}>{header.option_name}</span>
        {extraOptions.map((option, index) => (
          <span className={styles.chip} key={index}>
            {option}
          </span>
        ))}
      </div>
    </div>
  );
}