header.tsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461
  1. import {useMemo} from 'react';
  2. import styled from '@emotion/styled';
  3. import omit from 'lodash/omit';
  4. import GuideAnchor from 'sentry/components/assistant/guideAnchor';
  5. import Badge from 'sentry/components/badge';
  6. import Breadcrumbs from 'sentry/components/breadcrumbs';
  7. import Count from 'sentry/components/count';
  8. import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
  9. import EventOrGroupTitle from 'sentry/components/eventOrGroupTitle';
  10. import ErrorLevel from 'sentry/components/events/errorLevel';
  11. import EventMessage from 'sentry/components/events/eventMessage';
  12. import InboxReason from 'sentry/components/group/inboxBadges/inboxReason';
  13. import UnhandledInboxTag from 'sentry/components/group/inboxBadges/unhandledTag';
  14. import ProjectBadge from 'sentry/components/idBadge/projectBadge';
  15. import * as Layout from 'sentry/components/layouts/thirds';
  16. import Link from 'sentry/components/links/link';
  17. import ReplayCountBadge from 'sentry/components/replays/replayCountBadge';
  18. import ReplaysFeatureBadge from 'sentry/components/replays/replaysFeatureBadge';
  19. import useReplaysCount from 'sentry/components/replays/useReplaysCount';
  20. import SeenByList from 'sentry/components/seenByList';
  21. import ShortId from 'sentry/components/shortId';
  22. import {Item, TabList} from 'sentry/components/tabs';
  23. import Tooltip from 'sentry/components/tooltip';
  24. import {IconChat} from 'sentry/icons';
  25. import {t} from 'sentry/locale';
  26. import space from 'sentry/styles/space';
  27. import {Event, Group, IssueCategory, Organization, Project} from 'sentry/types';
  28. import {getMessage} from 'sentry/utils/events';
  29. import projectSupportsReplay from 'sentry/utils/replays/projectSupportsReplay';
  30. import {useLocation} from 'sentry/utils/useLocation';
  31. import GroupActions from './actions';
  32. import {Tab} from './types';
  33. import {TagAndMessageWrapper} from './unhandledTag';
  34. import {ReprocessingStatus} from './utils';
  35. type Props = {
  36. baseUrl: string;
  37. group: Group;
  38. groupReprocessingStatus: ReprocessingStatus;
  39. organization: Organization;
  40. project: Project;
  41. event?: Event;
  42. };
  43. function GroupHeader({
  44. baseUrl,
  45. group,
  46. groupReprocessingStatus,
  47. organization,
  48. event,
  49. project,
  50. }: Props) {
  51. const location = useLocation();
  52. const replaysCount = useReplaysCount({
  53. groupIds: group.id,
  54. organization,
  55. projectIds: [Number(project.id)],
  56. })[group.id];
  57. const disabledTabs = useMemo(() => {
  58. const hasReprocessingV2Feature = organization.features.includes('reprocessing-v2');
  59. if (!hasReprocessingV2Feature) {
  60. return [];
  61. }
  62. if (groupReprocessingStatus === ReprocessingStatus.REPROCESSING) {
  63. return [
  64. Tab.ACTIVITY,
  65. Tab.USER_FEEDBACK,
  66. Tab.ATTACHMENTS,
  67. Tab.EVENTS,
  68. Tab.MERGED,
  69. Tab.GROUPING,
  70. Tab.SIMILAR_ISSUES,
  71. Tab.TAGS,
  72. ];
  73. }
  74. if (groupReprocessingStatus === ReprocessingStatus.REPROCESSED_AND_HASNT_EVENT) {
  75. return [
  76. Tab.DETAILS,
  77. Tab.ATTACHMENTS,
  78. Tab.EVENTS,
  79. Tab.MERGED,
  80. Tab.GROUPING,
  81. Tab.SIMILAR_ISSUES,
  82. Tab.TAGS,
  83. Tab.USER_FEEDBACK,
  84. ];
  85. }
  86. return [];
  87. }, [organization, groupReprocessingStatus]);
  88. const eventRouteToObject = useMemo(() => {
  89. const searchTermWithoutQuery = omit(location.query, 'query');
  90. return {
  91. pathname: `${baseUrl}events/`,
  92. query: searchTermWithoutQuery,
  93. };
  94. }, [location, baseUrl]);
  95. const errorIssueTabs = useMemo(() => {
  96. const projectFeatures = new Set(project ? project.features : []);
  97. const organizationFeatures = new Set(organization ? organization.features : []);
  98. const hasGroupingTreeUI = organizationFeatures.has('grouping-tree-ui');
  99. const hasSimilarView = projectFeatures.has('similarity-view');
  100. const hasEventAttachments = organizationFeatures.has('event-attachments');
  101. const hasSessionReplay =
  102. organizationFeatures.has('session-replay-ui') && projectSupportsReplay(project);
  103. return (
  104. <StyledTabList hideBorder>
  105. <Item
  106. key={Tab.DETAILS}
  107. disabled={disabledTabs.includes(Tab.DETAILS)}
  108. to={`${baseUrl}${location.search}`}
  109. >
  110. {t('Details')}
  111. </Item>
  112. <Item
  113. key={Tab.ACTIVITY}
  114. textValue={t('Activity')}
  115. disabled={disabledTabs.includes(Tab.ACTIVITY)}
  116. to={`${baseUrl}activity/${location.search}`}
  117. >
  118. {t('Activity')}
  119. <IconBadge>
  120. {group.numComments}
  121. <IconChat size="xs" />
  122. </IconBadge>
  123. </Item>
  124. <Item
  125. key={Tab.USER_FEEDBACK}
  126. textValue={t('User Feedback')}
  127. disabled={disabledTabs.includes(Tab.USER_FEEDBACK)}
  128. to={`${baseUrl}feedback/${location.search}`}
  129. >
  130. {t('User Feedback')} <Badge text={group.userReportCount} />
  131. </Item>
  132. <Item
  133. key={Tab.ATTACHMENTS}
  134. hidden={!hasEventAttachments}
  135. disabled={disabledTabs.includes(Tab.ATTACHMENTS)}
  136. to={`${baseUrl}attachments/${location.search}`}
  137. >
  138. {t('Attachments')}
  139. </Item>
  140. <Item
  141. key={Tab.TAGS}
  142. disabled={disabledTabs.includes(Tab.TAGS)}
  143. to={`${baseUrl}tags/${location.search}`}
  144. >
  145. {t('Tags')}
  146. </Item>
  147. <Item
  148. key={Tab.EVENTS}
  149. disabled={disabledTabs.includes(Tab.EVENTS)}
  150. to={eventRouteToObject}
  151. >
  152. {t('All Events')}
  153. </Item>
  154. <Item
  155. key={Tab.MERGED}
  156. disabled={disabledTabs.includes(Tab.MERGED)}
  157. to={`${baseUrl}merged/${location.search}`}
  158. >
  159. {t('Merged Issues')}
  160. </Item>
  161. <Item
  162. key={Tab.GROUPING}
  163. hidden={!hasGroupingTreeUI}
  164. disabled={disabledTabs.includes(Tab.GROUPING)}
  165. to={`${baseUrl}grouping/${location.search}`}
  166. >
  167. {t('Grouping')}
  168. </Item>
  169. <Item
  170. key={Tab.SIMILAR_ISSUES}
  171. hidden={!hasSimilarView}
  172. disabled={disabledTabs.includes(Tab.SIMILAR_ISSUES)}
  173. to={`${baseUrl}similar/${location.search}`}
  174. >
  175. {t('Similar Issues')}
  176. </Item>
  177. <Item
  178. key={Tab.REPLAYS}
  179. textValue={t('Replays')}
  180. hidden={!hasSessionReplay}
  181. to={`${baseUrl}replays/${location.search}`}
  182. >
  183. {t('Replays')}
  184. <ReplayCountBadge count={replaysCount} />
  185. <ReplaysFeatureBadge noTooltip />
  186. </Item>
  187. </StyledTabList>
  188. );
  189. }, [
  190. baseUrl,
  191. location,
  192. disabledTabs,
  193. group.numComments,
  194. group.userReportCount,
  195. organization,
  196. project,
  197. replaysCount,
  198. eventRouteToObject,
  199. ]);
  200. const performanceIssueTabs = useMemo(() => {
  201. return (
  202. <StyledTabList hideBorder>
  203. <Item
  204. key={Tab.DETAILS}
  205. disabled={disabledTabs.includes(Tab.DETAILS)}
  206. to={`${baseUrl}${location.search}`}
  207. >
  208. {t('Details')}
  209. </Item>
  210. <Item
  211. key={Tab.ACTIVITY}
  212. textValue={t('Activity')}
  213. disabled={disabledTabs.includes(Tab.ACTIVITY)}
  214. to={`${baseUrl}activity/${location.search}`}
  215. >
  216. {t('Activity')}
  217. <IconBadge>
  218. {group.numComments}
  219. <IconChat size="xs" />
  220. </IconBadge>
  221. </Item>
  222. <Item
  223. key={Tab.TAGS}
  224. disabled={disabledTabs.includes(Tab.TAGS)}
  225. to={`${baseUrl}tags/${location.search}`}
  226. >
  227. {t('Tags')}
  228. </Item>
  229. <Item
  230. key={Tab.EVENTS}
  231. disabled={disabledTabs.includes(Tab.EVENTS)}
  232. to={eventRouteToObject}
  233. >
  234. {t('Events')}
  235. </Item>
  236. </StyledTabList>
  237. );
  238. }, [disabledTabs, group.numComments, baseUrl, location, eventRouteToObject]);
  239. const {userCount} = group;
  240. let className = 'group-detail';
  241. if (group.hasSeen) {
  242. className += ' hasSeen';
  243. }
  244. if (group.status === 'resolved') {
  245. className += ' isResolved';
  246. }
  247. const message = getMessage(group);
  248. const disableActions = !!disabledTabs.length;
  249. const shortIdBreadCrumb = group.shortId && (
  250. <GuideAnchor target="issue_number" position="bottom">
  251. <ShortIdBreadrcumb>
  252. <ProjectBadge
  253. project={project}
  254. avatarSize={16}
  255. hideName
  256. avatarProps={{hasTooltip: true, tooltip: project.slug}}
  257. />
  258. <Tooltip
  259. className="help-link"
  260. title={t(
  261. 'This identifier is unique across your organization, and can be used to reference an issue in various places, like commit messages.'
  262. )}
  263. position="bottom"
  264. >
  265. <StyledShortId shortId={group.shortId} />
  266. </Tooltip>
  267. </ShortIdBreadrcumb>
  268. </GuideAnchor>
  269. );
  270. const hasIssueActionsV2 = organization.features.includes('issue-actions-v2');
  271. return (
  272. <Layout.Header>
  273. <div className={className}>
  274. <BreadcrumbActionWrapper>
  275. <Breadcrumbs
  276. crumbs={[
  277. {
  278. label: 'Issues',
  279. to: `/organizations/${organization.slug}/issues/${location.search}`,
  280. },
  281. {label: shortIdBreadCrumb},
  282. ]}
  283. />
  284. {hasIssueActionsV2 && (
  285. <GroupActions
  286. group={group}
  287. project={project}
  288. disabled={disableActions}
  289. event={event}
  290. query={location.query}
  291. />
  292. )}
  293. </BreadcrumbActionWrapper>
  294. <HeaderRow>
  295. <TitleWrapper>
  296. <TitleHeading>
  297. <h3>
  298. <StyledEventOrGroupTitle hasGuideAnchor data={group} />
  299. </h3>
  300. {group.inbox && <InboxReason inbox={group.inbox} fontSize="md" />}
  301. </TitleHeading>
  302. <StyledTagAndMessageWrapper>
  303. {group.level && <ErrorLevel level={group.level} size="11px" />}
  304. {group.isUnhandled && <UnhandledInboxTag />}
  305. <EventMessage message={message} />
  306. </StyledTagAndMessageWrapper>
  307. </TitleWrapper>
  308. <StatsWrapper>
  309. <div className="count">
  310. <h6 className="nav-header">{t('Events')}</h6>
  311. <Link disabled={disableActions} to={eventRouteToObject}>
  312. <Count className="count" value={group.count} />
  313. </Link>
  314. </div>
  315. <div className="count">
  316. <h6 className="nav-header">{t('Users')}</h6>
  317. {userCount !== 0 ? (
  318. <Link
  319. disabled={disableActions}
  320. to={`${baseUrl}tags/user/${location.search}`}
  321. >
  322. <Count className="count" value={userCount} />
  323. </Link>
  324. ) : (
  325. <span>0</span>
  326. )}
  327. </div>
  328. </StatsWrapper>
  329. </HeaderRow>
  330. {hasIssueActionsV2 ? (
  331. // Environment picker for mobile
  332. <HeaderRow className="hidden-sm hidden-md hidden-lg">
  333. <EnvironmentPageFilter alignDropdown="right" />
  334. </HeaderRow>
  335. ) : (
  336. <HeaderRow>
  337. <GroupActions
  338. group={group}
  339. project={project}
  340. disabled={disableActions}
  341. event={event}
  342. query={location.query}
  343. />
  344. <StyledSeenByList
  345. seenBy={group.seenBy}
  346. iconTooltip={t('People who have viewed this issue')}
  347. />
  348. </HeaderRow>
  349. )}
  350. {group.issueCategory === IssueCategory.PERFORMANCE
  351. ? performanceIssueTabs
  352. : errorIssueTabs}
  353. </div>
  354. </Layout.Header>
  355. );
  356. }
  357. export default GroupHeader;
  358. const BreadcrumbActionWrapper = styled('div')`
  359. display: flex;
  360. flex-direction: row;
  361. justify-content: space-between;
  362. gap: ${space(1)};
  363. align-items: center;
  364. `;
  365. const ShortIdBreadrcumb = styled('div')`
  366. display: flex;
  367. gap: ${space(1)};
  368. align-items: center;
  369. `;
  370. const StyledShortId = styled(ShortId)`
  371. font-family: ${p => p.theme.text.family};
  372. font-size: ${p => p.theme.fontSizeMedium};
  373. `;
  374. const HeaderRow = styled('div')`
  375. display: flex;
  376. gap: ${space(2)};
  377. justify-content: space-between;
  378. margin-top: ${space(2)};
  379. @media (max-width: ${p => p.theme.breakpoints.small}) {
  380. flex-direction: column;
  381. }
  382. `;
  383. const TitleWrapper = styled('div')`
  384. @media (min-width: ${p => p.theme.breakpoints.small}) {
  385. max-width: 65%;
  386. }
  387. `;
  388. const TitleHeading = styled('div')`
  389. display: flex;
  390. line-height: 2;
  391. gap: ${space(1)};
  392. `;
  393. const StyledSeenByList = styled(SeenByList)`
  394. @media (max-width: ${p => p.theme.breakpoints.small}) {
  395. display: none;
  396. }
  397. `;
  398. const StyledEventOrGroupTitle = styled(EventOrGroupTitle)`
  399. font-size: inherit;
  400. `;
  401. const StatsWrapper = styled('div')`
  402. display: grid;
  403. grid-template-columns: repeat(2, min-content);
  404. gap: calc(${space(3)} + ${space(3)});
  405. @media (min-width: ${p => p.theme.breakpoints.small}) {
  406. justify-content: flex-end;
  407. }
  408. `;
  409. const StyledTagAndMessageWrapper = styled(TagAndMessageWrapper)`
  410. display: flex;
  411. gap: ${space(1)};
  412. justify-content: flex-start;
  413. line-height: 1.2;
  414. `;
  415. const IconBadge = styled(Badge)`
  416. display: flex;
  417. align-items: center;
  418. gap: ${space(0.5)};
  419. `;
  420. const StyledTabList = styled(TabList)`
  421. margin-top: ${space(2)};
  422. `;