import {Fragment, ReactNode} from 'react'; import queryString from 'query-string'; import FeatureBadge from 'sentry/components/featureBadge'; import ListLink from 'sentry/components/links/listLink'; import ScrollableTabs from 'sentry/components/replays/scrollableTabs'; import {t} from 'sentry/locale'; import {trackAnalytics} from 'sentry/utils/analytics'; import useActiveReplayTab, {TabKey} from 'sentry/utils/replays/hooks/useActiveReplayTab'; import {useLocation} from 'sentry/utils/useLocation'; import useOrganization from 'sentry/utils/useOrganization'; function getReplayTabs(): Record { return { [TabKey.CONSOLE]: t('Console'), [TabKey.NETWORK]: t('Network'), [TabKey.DOM]: t('DOM Events'), [TabKey.ERRORS]: ( {t('Errors')} ), [TabKey.MEMORY]: t('Memory'), [TabKey.TRACE]: t('Trace'), }; } type Props = { className?: string; }; function FocusTabs({className}: Props) { const organization = useOrganization(); const {pathname, query} = useLocation(); const {getActiveTab, setActiveTab} = useActiveReplayTab(); const activeTab = getActiveTab(); return ( {Object.entries(getReplayTabs()).map(([tab, label]) => label ? ( tab === activeTab} to={`${pathname}?${queryString.stringify({...query, t_main: tab})}`} onClick={e => { e.preventDefault(); setActiveTab(tab); trackAnalytics('replay.details-tab-changed', { tab, organization, }); }} > {label} ) : null )} ); } export default FocusTabs;