import styled from '@emotion/styled'; import {space} from 'sentry/styles/space'; import {trackAnalytics} from 'sentry/utils/analytics'; import replaceRouterParams from 'sentry/utils/replaceRouterParams'; import {normalizeUrl} from 'sentry/utils/withDomainRequired'; import SettingsNavItem from 'sentry/views/settings/components/settingsNavItem'; import type {NavigationGroupProps} from 'sentry/views/settings/types'; function SettingsNavigationGroup(props: NavigationGroupProps) { const {organization, project, name, items} = props; const navLinks = items.map(({path, title, index, show, badge, id, recordAnalytics}) => { if (typeof show === 'function' && !show(props)) { return null; } if (typeof show !== 'undefined' && !show) { return null; } const badgeResult = typeof badge === 'function' ? badge(props) : null; const to = replaceRouterParams(path, { ...(organization ? {orgId: organization.slug} : {}), ...(project ? {projectId: project.slug} : {}), }); const handleClick = () => { // only call the analytics event if the URL is changing if (recordAnalytics && to !== window.location.pathname && organization) { trackAnalytics('sidebar.item_clicked', { organization, project_id: project?.id, sidebar_item_id: id, dest: path, }); } }; return ( ); }); if (!navLinks.some(link => link !== null)) { return null; } return ( {name} {navLinks} ); } const NavSection = styled('div')` margin-bottom: 20px; `; const SettingsHeading = styled('div')` color: ${p => p.theme.text}; font-size: ${p => p.theme.fontSizeSmall}; font-weight: 600; text-transform: uppercase; margin-bottom: ${space(0.5)}; `; export default SettingsNavigationGroup;