import {ReactNode} from 'react'; import {InjectedRouter} from 'react-router'; import styled from '@emotion/styled'; import GuideAnchor from 'sentry/components/assistant/guideAnchor'; import Badge from 'sentry/components/badge'; import {Button} from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; import GlobalEventProcessingAlert from 'sentry/components/globalEventProcessingAlert'; import * as Layout from 'sentry/components/layouts/thirds'; import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip'; import QueryCount from 'sentry/components/queryCount'; import {TabList, Tabs} from 'sentry/components/tabs'; import {Tooltip} from 'sentry/components/tooltip'; import {SLOW_TOOLTIP_DELAY} from 'sentry/constants'; import {IconPause, IconPlay} from 'sentry/icons'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import {Organization} from 'sentry/types'; import useProjects from 'sentry/utils/useProjects'; import {normalizeUrl} from 'sentry/utils/withDomainRequired'; import IssueListSetAsDefault from 'sentry/views/issueList/issueListSetAsDefault'; import { CUSTOM_TAB_VALUE, FOR_REVIEW_QUERIES, getTabs, IssueSortOptions, Query, QueryCounts, TAB_MAX_COUNT, } from './utils'; type IssueListHeaderProps = { displayReprocessingTab: boolean; onRealtimeChange: (realtime: boolean) => void; organization: Organization; query: string; queryCounts: QueryCounts; realtimeActive: boolean; router: InjectedRouter; selectedProjectIds: number[]; sort: string; queryCount?: number; }; type IssueListHeaderTabProps = { name: string; count?: number; hasMore?: boolean; tooltipHoverable?: boolean; tooltipTitle?: ReactNode; }; function IssueListHeaderTabContent({ count = 0, hasMore = false, name, tooltipHoverable, tooltipTitle, }: IssueListHeaderTabProps) { return ( {name}{' '} {count > 0 && ( )} ); } function IssueListHeader({ organization, query, sort, queryCounts, realtimeActive, onRealtimeChange, router, displayReprocessingTab, selectedProjectIds, }: IssueListHeaderProps) { const {projects} = useProjects(); const tabs = getTabs(organization); const visibleTabs = displayReprocessingTab ? tabs : tabs.filter(([tab]) => tab !== Query.REPROCESSING); const tabValues = new Set(visibleTabs.map(([val]) => val)); // Remove cursor and page when switching tabs const {cursor: _, page: __, ...queryParms} = router?.location?.query ?? {}; const sortParam = queryParms.sort === IssueSortOptions.INBOX ? undefined : queryParms.sort; const selectedProjects = projects.filter(({id}) => selectedProjectIds.includes(Number(id)) ); const realtimeTitle = realtimeActive ? t('Pause real-time updates') : t('Enable real-time updates'); return ( {t('Issues')}