groupSidebar.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import AvatarList from 'sentry/components/avatar/avatarList';
  4. import {DateTime} from 'sentry/components/dateTime';
  5. import type {OnAssignCallback} from 'sentry/components/deprecatedAssigneeSelectorDropdown';
  6. import ErrorBoundary from 'sentry/components/errorBoundary';
  7. import {EventThroughput} from 'sentry/components/events/eventStatisticalDetector/eventThroughput';
  8. import AssignedTo from 'sentry/components/group/assignedTo';
  9. import ExternalIssueList from 'sentry/components/group/externalIssuesList';
  10. import {StreamlinedExternalIssueList} from 'sentry/components/group/externalIssuesList/streamlinedExternalIssueList';
  11. import GroupReleaseStats from 'sentry/components/group/releaseStats';
  12. import TagFacets, {
  13. BACKEND_TAGS,
  14. DEFAULT_TAGS,
  15. FRONTEND_TAGS,
  16. MOBILE_TAGS,
  17. TAGS_FORMATTER,
  18. } from 'sentry/components/group/tagFacets';
  19. import QuestionTooltip from 'sentry/components/questionTooltip';
  20. import * as SidebarSection from 'sentry/components/sidebarSection';
  21. import {backend, frontend} from 'sentry/data/platformCategories';
  22. import {t, tn} from 'sentry/locale';
  23. import IssueListCacheStore from 'sentry/stores/IssueListCacheStore';
  24. import {space} from 'sentry/styles/space';
  25. import type {Event} from 'sentry/types/event';
  26. import type {Group, TeamParticipant, UserParticipant} from 'sentry/types/group';
  27. import type {Organization, OrganizationSummary} from 'sentry/types/organization';
  28. import type {Project} from 'sentry/types/project';
  29. import type {CurrentRelease} from 'sentry/types/release';
  30. import type {AvatarUser} from 'sentry/types/user';
  31. import {trackAnalytics} from 'sentry/utils/analytics';
  32. import {getUtcDateString} from 'sentry/utils/dates';
  33. import {getAnalyticsDataForGroup} from 'sentry/utils/events';
  34. import {userDisplayName} from 'sentry/utils/formatters';
  35. import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
  36. import {isMobilePlatform} from 'sentry/utils/platform';
  37. import {getAnalyicsDataForProject} from 'sentry/utils/projects';
  38. import {useApiQuery} from 'sentry/utils/queryClient';
  39. import {useLocation} from 'sentry/utils/useLocation';
  40. import {useUser} from 'sentry/utils/useUser';
  41. import {ParticipantList} from 'sentry/views/issueDetails/participantList';
  42. import SolutionsSection from 'sentry/views/issueDetails/streamline/solutionsSection';
  43. import {makeFetchGroupQueryKey} from 'sentry/views/issueDetails/useGroup';
  44. import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
  45. type Props = {
  46. environments: string[];
  47. group: Group;
  48. organization: Organization;
  49. project: Project;
  50. event?: Event;
  51. };
  52. export function useFetchAllEnvsGroupData(
  53. organization: OrganizationSummary,
  54. group: Group
  55. ) {
  56. return useApiQuery<Group>(
  57. makeFetchGroupQueryKey({
  58. organizationSlug: organization.slug,
  59. groupId: group.id,
  60. environments: [],
  61. }),
  62. {
  63. staleTime: 30000,
  64. gcTime: 30000,
  65. }
  66. );
  67. }
  68. function useFetchCurrentRelease(organization: OrganizationSummary, group: Group) {
  69. return useApiQuery<CurrentRelease>(
  70. [`/organizations/${organization.slug}/issues/${group.id}/current-release/`],
  71. {
  72. staleTime: 30000,
  73. gcTime: 30000,
  74. }
  75. );
  76. }
  77. export default function GroupSidebar({
  78. event,
  79. group,
  80. project,
  81. organization,
  82. environments,
  83. }: Props) {
  84. const activeUser = useUser();
  85. const {data: allEnvironmentsGroupData} = useFetchAllEnvsGroupData(organization, group);
  86. const {data: currentRelease} = useFetchCurrentRelease(organization, group);
  87. const hasStreamlinedUI = useHasStreamlinedUI();
  88. const location = useLocation();
  89. const onAssign: OnAssignCallback = (type, _assignee, suggestedAssignee) => {
  90. const {alert_date, alert_rule_id, alert_type} = location.query;
  91. trackAnalytics('issue_details.action_clicked', {
  92. organization,
  93. action_type: 'assign',
  94. assigned_type: type,
  95. assigned_suggestion_reason: suggestedAssignee?.suggestedReason,
  96. alert_date:
  97. typeof alert_date === 'string' ? getUtcDateString(Number(alert_date)) : undefined,
  98. alert_rule_id: typeof alert_rule_id === 'string' ? alert_rule_id : undefined,
  99. alert_type: typeof alert_type === 'string' ? alert_type : undefined,
  100. ...getAnalyticsDataForGroup(group),
  101. ...getAnalyicsDataForProject(project),
  102. });
  103. IssueListCacheStore.reset();
  104. };
  105. const renderPluginIssue = () => {
  106. const issues: React.ReactNode[] = [];
  107. (group.pluginIssues || []).forEach(plugin => {
  108. const issue = plugin.issue;
  109. // # TODO(dcramer): remove plugin.title check in Sentry 8.22+
  110. if (issue) {
  111. issues.push(
  112. <Fragment key={plugin.slug}>
  113. <span>{`${plugin.shortName || plugin.name || plugin.title}: `}</span>
  114. <a href={issue.url}>
  115. {typeof issue.label === 'object' ? issue.label.id : issue.label}
  116. </a>
  117. </Fragment>
  118. );
  119. }
  120. });
  121. if (!issues.length) {
  122. return null;
  123. }
  124. return (
  125. <SidebarSection.Wrap>
  126. <SidebarSection.Title>{t('External Issues')}</SidebarSection.Title>
  127. <SidebarSection.Content>
  128. <ExternalIssues>{issues}</ExternalIssues>
  129. </SidebarSection.Content>
  130. </SidebarSection.Wrap>
  131. );
  132. };
  133. const renderParticipantData = () => {
  134. const {participants} = group;
  135. if (!participants.length) {
  136. return null;
  137. }
  138. const userParticipants = participants.filter(
  139. (p): p is UserParticipant => p.type === 'user'
  140. );
  141. const teamParticipants = participants.filter(
  142. (p): p is TeamParticipant => p.type === 'team'
  143. );
  144. const getParticipantTitle = (): React.ReactNode => {
  145. const individualText = tn(
  146. '%s Individual',
  147. '%s Individuals',
  148. userParticipants.length
  149. );
  150. const teamText = tn('%s Team', '%s Teams', teamParticipants.length);
  151. if (teamParticipants.length === 0) {
  152. return individualText;
  153. }
  154. if (userParticipants.length === 0) {
  155. return teamText;
  156. }
  157. return (
  158. <Fragment>
  159. {teamText}, {individualText}
  160. </Fragment>
  161. );
  162. };
  163. const avatars = (
  164. <StyledAvatarList
  165. users={userParticipants}
  166. teams={teamParticipants}
  167. avatarSize={28}
  168. maxVisibleAvatars={12}
  169. typeAvatars="participants"
  170. />
  171. );
  172. return (
  173. <SmallerSidebarWrap>
  174. <SidebarSection.Title>
  175. {t('Participants')} <TitleNumber>({getParticipantTitle()})</TitleNumber>
  176. <QuestionTooltip
  177. size="xs"
  178. position="top"
  179. title={t(
  180. 'People who have been assigned, resolved, unresolved, archived, bookmarked, subscribed, or added a comment'
  181. )}
  182. />
  183. </SidebarSection.Title>
  184. <SidebarSection.Content>
  185. <ParticipantList
  186. users={userParticipants}
  187. teams={teamParticipants}
  188. description={t('participants')}
  189. >
  190. {avatars}
  191. </ParticipantList>
  192. </SidebarSection.Content>
  193. </SmallerSidebarWrap>
  194. );
  195. };
  196. const renderSeenByList = () => {
  197. const {seenBy} = group;
  198. const displayUsers = seenBy.filter(user => activeUser.id !== user.id);
  199. if (!displayUsers.length) {
  200. return null;
  201. }
  202. const avatars = (
  203. <StyledAvatarList
  204. users={displayUsers}
  205. avatarSize={28}
  206. maxVisibleAvatars={12}
  207. renderTooltip={user => (
  208. <Fragment>
  209. {userDisplayName(user)}
  210. <br />
  211. <DateTime date={(user as AvatarUser).lastSeen} />
  212. </Fragment>
  213. )}
  214. />
  215. );
  216. return (
  217. <SmallerSidebarWrap>
  218. <SidebarSection.Title>
  219. {t('Viewers')}
  220. <TitleNumber>({displayUsers.length})</TitleNumber>
  221. <QuestionTooltip
  222. size="xs"
  223. position="top"
  224. title={t('People who have viewed this issue')}
  225. />
  226. </SidebarSection.Title>
  227. <SidebarSection.Content>
  228. <ParticipantList users={displayUsers} teams={[]} description={t('users')}>
  229. {avatars}
  230. </ParticipantList>
  231. </SidebarSection.Content>
  232. </SmallerSidebarWrap>
  233. );
  234. };
  235. const issueTypeConfig = getConfigForIssueType(group, project);
  236. return (
  237. <Container>
  238. {organization.features.includes('ai-summary') &&
  239. issueTypeConfig.issueSummary.enabled && (
  240. <ErrorBoundary mini>
  241. <SolutionsSectionContainer>
  242. <SolutionsSection group={group} project={project} event={event} />
  243. </SolutionsSectionContainer>
  244. </ErrorBoundary>
  245. )}
  246. {hasStreamlinedUI && event && (
  247. <ErrorBoundary mini>
  248. <StreamlinedExternalIssueList group={group} event={event} project={project} />
  249. </ErrorBoundary>
  250. )}
  251. {!hasStreamlinedUI && (
  252. <AssignedTo group={group} event={event} project={project} onAssign={onAssign} />
  253. )}
  254. {issueTypeConfig.stats.enabled && (
  255. <GroupReleaseStats
  256. organization={organization}
  257. project={project}
  258. environments={environments}
  259. allEnvironments={allEnvironmentsGroupData}
  260. group={group}
  261. currentRelease={currentRelease}
  262. />
  263. )}
  264. {!hasStreamlinedUI && event && (
  265. <ErrorBoundary mini>
  266. <ExternalIssueList project={project} group={group} event={event} />
  267. </ErrorBoundary>
  268. )}
  269. {!hasStreamlinedUI && renderPluginIssue()}
  270. {issueTypeConfig.tagsTab.enabled && (
  271. <TagFacets
  272. environments={environments}
  273. groupId={group.id}
  274. tagKeys={
  275. isMobilePlatform(project?.platform)
  276. ? MOBILE_TAGS
  277. : frontend.some(val => val === project?.platform)
  278. ? FRONTEND_TAGS
  279. : backend.some(val => val === project?.platform)
  280. ? BACKEND_TAGS
  281. : DEFAULT_TAGS
  282. }
  283. tagFormatter={TAGS_FORMATTER}
  284. project={project}
  285. />
  286. )}
  287. {issueTypeConfig.regression.enabled && event && (
  288. <EventThroughput event={event} group={group} />
  289. )}
  290. {!hasStreamlinedUI && renderParticipantData()}
  291. {!hasStreamlinedUI && renderSeenByList()}
  292. </Container>
  293. );
  294. }
  295. const Container = styled('div')`
  296. font-size: ${p => p.theme.fontSizeMedium};
  297. `;
  298. const ExternalIssues = styled('div')`
  299. display: grid;
  300. grid-template-columns: auto max-content;
  301. gap: ${space(2)};
  302. `;
  303. const StyledAvatarList = styled(AvatarList)`
  304. justify-content: flex-end;
  305. padding-left: ${space(0.75)};
  306. `;
  307. const TitleNumber = styled('span')`
  308. font-weight: ${p => p.theme.fontWeightNormal};
  309. `;
  310. // Using 22px + space(1) = space(4)
  311. const SmallerSidebarWrap = styled(SidebarSection.Wrap)`
  312. margin-bottom: 22px;
  313. `;
  314. const SolutionsSectionContainer = styled('div')`
  315. padding-bottom: ${space(1)};
  316. `;