header.tsx 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. import {InjectedRouter} from 'react-router';
  2. import styled from '@emotion/styled';
  3. import Badge from 'sentry/components/badge';
  4. import Button from 'sentry/components/button';
  5. import GlobalEventProcessingAlert from 'sentry/components/globalEventProcessingAlert';
  6. import * as Layout from 'sentry/components/layouts/thirds';
  7. import Link from 'sentry/components/links/link';
  8. import QueryCount from 'sentry/components/queryCount';
  9. import Tooltip from 'sentry/components/tooltip';
  10. import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
  11. import {IconPause, IconPlay} from 'sentry/icons';
  12. import {t} from 'sentry/locale';
  13. import space from 'sentry/styles/space';
  14. import {Organization} from 'sentry/types';
  15. import {trackAnalyticsEvent} from 'sentry/utils/analytics';
  16. import useProjects from 'sentry/utils/useProjects';
  17. import SavedSearchTab from './savedSearchTab';
  18. import {getTabs, IssueSortOptions, Query, QueryCounts, TAB_MAX_COUNT} from './utils';
  19. type Props = {
  20. displayReprocessingTab: boolean;
  21. onRealtimeChange: (realtime: boolean) => void;
  22. organization: Organization;
  23. query: string;
  24. queryCounts: QueryCounts;
  25. realtimeActive: boolean;
  26. router: InjectedRouter;
  27. selectedProjectIds: number[];
  28. sort: string;
  29. queryCount?: number;
  30. } & React.ComponentProps<typeof SavedSearchTab>;
  31. function IssueListHeader({
  32. organization,
  33. query,
  34. sort,
  35. queryCount,
  36. queryCounts,
  37. realtimeActive,
  38. onRealtimeChange,
  39. onSavedSearchSelect,
  40. onSavedSearchDelete,
  41. savedSearchList,
  42. router,
  43. displayReprocessingTab,
  44. selectedProjectIds,
  45. }: Props) {
  46. const {projects} = useProjects();
  47. const tabs = getTabs(organization);
  48. const visibleTabs = displayReprocessingTab
  49. ? tabs
  50. : tabs.filter(([tab]) => tab !== Query.REPROCESSING);
  51. const savedSearchTabActive = !visibleTabs.some(([tabQuery]) => tabQuery === query);
  52. // Remove cursor and page when switching tabs
  53. const {cursor: _, page: __, ...queryParms} = router?.location?.query ?? {};
  54. const sortParam =
  55. queryParms.sort === IssueSortOptions.INBOX ? undefined : queryParms.sort;
  56. function trackTabClick(tabQuery: string) {
  57. // Clicking on inbox tab and currently another tab is active
  58. if (tabQuery === Query.FOR_REVIEW && query !== Query.FOR_REVIEW) {
  59. trackAnalyticsEvent({
  60. eventKey: 'inbox_tab.clicked',
  61. eventName: 'Clicked Inbox Tab',
  62. organization_id: organization.id,
  63. });
  64. }
  65. }
  66. const selectedProjects = projects.filter(({id}) =>
  67. selectedProjectIds.includes(Number(id))
  68. );
  69. const realtimeTitle = realtimeActive
  70. ? t('Pause real-time updates')
  71. : t('Enable real-time updates');
  72. return (
  73. <Layout.Header noActionWrap>
  74. <Layout.HeaderContent>
  75. <StyledLayoutTitle>{t('Issues')}</StyledLayoutTitle>
  76. </Layout.HeaderContent>
  77. <Layout.HeaderActions>
  78. <Button
  79. size="sm"
  80. data-test-id="real-time"
  81. title={realtimeTitle}
  82. aria-label={realtimeTitle}
  83. icon={realtimeActive ? <IconPause size="xs" /> : <IconPlay size="xs" />}
  84. onClick={() => onRealtimeChange(!realtimeActive)}
  85. />
  86. </Layout.HeaderActions>
  87. <StyledGlobalEventProcessingAlert projects={selectedProjects} />
  88. <Layout.HeaderNavTabs underlined>
  89. {visibleTabs.map(
  90. ([tabQuery, {name: queryName, tooltipTitle, tooltipHoverable}]) => {
  91. const to = {
  92. query: {
  93. ...queryParms,
  94. query: tabQuery,
  95. sort: tabQuery === Query.FOR_REVIEW ? IssueSortOptions.INBOX : sortParam,
  96. },
  97. pathname: `/organizations/${organization.slug}/issues/`,
  98. };
  99. return (
  100. <li key={tabQuery} className={query === tabQuery ? 'active' : ''}>
  101. <Link to={to} onClick={() => trackTabClick(tabQuery)}>
  102. <Tooltip
  103. title={tooltipTitle}
  104. position="bottom"
  105. isHoverable={tooltipHoverable}
  106. delay={SLOW_TOOLTIP_DELAY}
  107. >
  108. {queryName}{' '}
  109. {queryCounts[tabQuery]?.count > 0 && (
  110. <Badge
  111. type={
  112. tabQuery === Query.FOR_REVIEW &&
  113. queryCounts[tabQuery]!.count > 0
  114. ? 'review'
  115. : 'default'
  116. }
  117. >
  118. <QueryCount
  119. hideParens
  120. count={queryCounts[tabQuery].count}
  121. max={queryCounts[tabQuery].hasMore ? TAB_MAX_COUNT : 1000}
  122. />
  123. </Badge>
  124. )}
  125. </Tooltip>
  126. </Link>
  127. </li>
  128. );
  129. }
  130. )}
  131. <SavedSearchTab
  132. organization={organization}
  133. query={query}
  134. sort={sort}
  135. savedSearchList={savedSearchList}
  136. onSavedSearchSelect={onSavedSearchSelect}
  137. onSavedSearchDelete={onSavedSearchDelete}
  138. isActive={savedSearchTabActive}
  139. queryCount={queryCount}
  140. />
  141. </Layout.HeaderNavTabs>
  142. </Layout.Header>
  143. );
  144. }
  145. export default IssueListHeader;
  146. const StyledLayoutTitle = styled(Layout.Title)`
  147. margin-top: ${space(0.5)};
  148. `;
  149. const StyledGlobalEventProcessingAlert = styled(GlobalEventProcessingAlert)`
  150. grid-column: 1/-1;
  151. margin-top: ${space(1)};
  152. margin-bottom: ${space(1)};
  153. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  154. margin-top: ${space(2)};
  155. margin-bottom: 0;
  156. }
  157. `;