header.tsx 5.6 KB

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