header.tsx 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. import {ReactNode} from 'react';
  2. import {InjectedRouter} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import Badge from 'sentry/components/badge';
  5. import {Button} from 'sentry/components/button';
  6. import ButtonBar from 'sentry/components/buttonBar';
  7. import GlobalEventProcessingAlert from 'sentry/components/globalEventProcessingAlert';
  8. import * as Layout from 'sentry/components/layouts/thirds';
  9. import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
  10. import QueryCount from 'sentry/components/queryCount';
  11. import {TabList, Tabs} from 'sentry/components/tabs';
  12. import {Tooltip} from 'sentry/components/tooltip';
  13. import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
  14. import {IconPause, IconPlay, IconStar} from 'sentry/icons';
  15. import {t} from 'sentry/locale';
  16. import {space} from 'sentry/styles/space';
  17. import {Organization, SavedSearch} from 'sentry/types';
  18. import {trackAnalyticsEvent} from 'sentry/utils/analytics';
  19. import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
  20. import {useExperiment} from 'sentry/utils/useExperiment';
  21. import useProjects from 'sentry/utils/useProjects';
  22. import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
  23. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  24. import IssueListSetAsDefault from 'sentry/views/issueList/issueListSetAsDefault';
  25. import {
  26. getTabs,
  27. IssueSortOptions,
  28. Query,
  29. QueryCounts,
  30. SAVED_SEARCHES_SIDEBAR_OPEN_LOCALSTORAGE_KEY,
  31. TAB_MAX_COUNT,
  32. } from './utils';
  33. type IssueListHeaderProps = {
  34. displayReprocessingTab: boolean;
  35. onRealtimeChange: (realtime: boolean) => void;
  36. organization: Organization;
  37. query: string;
  38. queryCounts: QueryCounts;
  39. realtimeActive: boolean;
  40. router: InjectedRouter;
  41. savedSearch: SavedSearch | null;
  42. selectedProjectIds: number[];
  43. sort: string;
  44. queryCount?: number;
  45. };
  46. type IssueListHeaderTabProps = {
  47. name: string;
  48. query: string;
  49. count?: number;
  50. hasMore?: boolean;
  51. tooltipHoverable?: boolean;
  52. tooltipTitle?: ReactNode;
  53. };
  54. const EXTRA_TAB_KEY = 'extra-tab-key';
  55. function IssueListHeaderTabContent({
  56. count = 0,
  57. hasMore = false,
  58. name,
  59. query,
  60. tooltipHoverable,
  61. tooltipTitle,
  62. }: IssueListHeaderTabProps) {
  63. return (
  64. <Tooltip
  65. title={tooltipTitle}
  66. position="bottom"
  67. isHoverable={tooltipHoverable}
  68. delay={SLOW_TOOLTIP_DELAY}
  69. >
  70. {name}{' '}
  71. {count > 0 && (
  72. <Badge type={query === Query.FOR_REVIEW && count > 0 ? 'review' : 'default'}>
  73. <QueryCount hideParens count={count} max={hasMore ? TAB_MAX_COUNT : 1000} />
  74. </Badge>
  75. )}
  76. </Tooltip>
  77. );
  78. }
  79. function IssueListHeader({
  80. organization,
  81. query,
  82. sort,
  83. queryCount,
  84. queryCounts,
  85. realtimeActive,
  86. onRealtimeChange,
  87. savedSearch,
  88. router,
  89. displayReprocessingTab,
  90. selectedProjectIds,
  91. }: IssueListHeaderProps) {
  92. const {experimentAssignment} = useExperiment('SavedIssueSearchesLocationExperiment');
  93. const [isSavedSearchesOpen, setIsSavedSearchesOpen] = useSyncedLocalStorageState(
  94. SAVED_SEARCHES_SIDEBAR_OPEN_LOCALSTORAGE_KEY,
  95. false
  96. );
  97. const {projects} = useProjects();
  98. const tabs = getTabs(organization);
  99. const visibleTabs = displayReprocessingTab
  100. ? tabs
  101. : tabs.filter(([tab]) => tab !== Query.REPROCESSING);
  102. const savedSearchTabActive =
  103. // Disable tab for saved searches location experiment
  104. experimentAssignment !== 1 && !visibleTabs.some(([tabQuery]) => tabQuery === query);
  105. // Remove cursor and page when switching tabs
  106. const {cursor: _, page: __, ...queryParms} = router?.location?.query ?? {};
  107. const sortParam =
  108. queryParms.sort === IssueSortOptions.INBOX ? undefined : queryParms.sort;
  109. function onSavedSearchesToggleClicked() {
  110. const newOpenState = !isSavedSearchesOpen;
  111. trackAdvancedAnalyticsEvent('search.saved_search_sidebar_toggle_clicked', {
  112. organization,
  113. open: newOpenState,
  114. });
  115. setIsSavedSearchesOpen(newOpenState);
  116. }
  117. function trackTabClick(tabQuery: string) {
  118. // Clicking on inbox tab and currently another tab is active
  119. if (tabQuery === Query.FOR_REVIEW && query !== Query.FOR_REVIEW) {
  120. trackAnalyticsEvent({
  121. eventKey: 'inbox_tab.clicked',
  122. eventName: 'Clicked Inbox Tab',
  123. organization_id: organization.id,
  124. });
  125. }
  126. }
  127. const selectedProjects = projects.filter(({id}) =>
  128. selectedProjectIds.includes(Number(id))
  129. );
  130. const realtimeTitle = realtimeActive
  131. ? t('Pause real-time updates')
  132. : t('Enable real-time updates');
  133. return (
  134. <Layout.Header>
  135. <Layout.HeaderContent>
  136. <Layout.Title>
  137. {t('Issues')}
  138. <PageHeadingQuestionTooltip
  139. docsUrl="https://docs.sentry.io/product/issues/"
  140. title={t(
  141. 'Detailed views of errors and performance problems in your application grouped by events with a similar set of characteristics.'
  142. )}
  143. />
  144. </Layout.Title>
  145. </Layout.HeaderContent>
  146. <Layout.HeaderActions>
  147. <ButtonBar gap={1}>
  148. <IssueListSetAsDefault {...{sort, query, organization}} />
  149. {experimentAssignment !== 1 && (
  150. <Button
  151. size="sm"
  152. icon={<IconStar size="sm" isSolid={isSavedSearchesOpen} />}
  153. onClick={onSavedSearchesToggleClicked}
  154. >
  155. {isSavedSearchesOpen ? t('Hide Searches') : t('Saved Searches')}
  156. </Button>
  157. )}
  158. <Button
  159. size="sm"
  160. data-test-id="real-time"
  161. title={realtimeTitle}
  162. aria-label={realtimeTitle}
  163. icon={realtimeActive ? <IconPause size="xs" /> : <IconPlay size="xs" />}
  164. onClick={() => onRealtimeChange(!realtimeActive)}
  165. />
  166. </ButtonBar>
  167. </Layout.HeaderActions>
  168. <StyledGlobalEventProcessingAlert projects={selectedProjects} />
  169. <StyledTabs
  170. onSelectionChange={key =>
  171. trackTabClick(key === EXTRA_TAB_KEY ? query : key.toString())
  172. }
  173. selectedKey={savedSearchTabActive ? EXTRA_TAB_KEY : query}
  174. >
  175. <TabList hideBorder>
  176. {[
  177. ...visibleTabs.map(
  178. ([tabQuery, {name: queryName, tooltipTitle, tooltipHoverable}]) => {
  179. const to = normalizeUrl({
  180. query: {
  181. ...queryParms,
  182. query: tabQuery,
  183. sort:
  184. tabQuery === Query.FOR_REVIEW ? IssueSortOptions.INBOX : sortParam,
  185. },
  186. pathname: `/organizations/${organization.slug}/issues/`,
  187. });
  188. return (
  189. <TabList.Item key={tabQuery} to={to} textValue={queryName}>
  190. <IssueListHeaderTabContent
  191. tooltipTitle={tooltipTitle}
  192. tooltipHoverable={tooltipHoverable}
  193. name={queryName}
  194. count={queryCounts[tabQuery]?.count}
  195. hasMore={queryCounts[tabQuery]?.hasMore}
  196. query={tabQuery}
  197. />
  198. </TabList.Item>
  199. );
  200. }
  201. ),
  202. <TabList.Item
  203. hidden={!savedSearchTabActive}
  204. key={EXTRA_TAB_KEY}
  205. to={{query: queryParms, pathname: location.pathname}}
  206. textValue={savedSearch?.name ?? t('Custom Search')}
  207. >
  208. <IssueListHeaderTabContent
  209. name={savedSearch?.name ?? t('Custom Search')}
  210. count={queryCount}
  211. query={query}
  212. />
  213. </TabList.Item>,
  214. ]}
  215. </TabList>
  216. </StyledTabs>
  217. </Layout.Header>
  218. );
  219. }
  220. export default IssueListHeader;
  221. const StyledGlobalEventProcessingAlert = styled(GlobalEventProcessingAlert)`
  222. grid-column: 1/-1;
  223. margin-top: ${space(1)};
  224. margin-bottom: ${space(1)};
  225. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  226. margin-top: ${space(2)};
  227. margin-bottom: 0;
  228. }
  229. `;
  230. const StyledTabs = styled(Tabs)`
  231. grid-column: 1/-1;
  232. `;