settingsNavigationGroup.tsx 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. import styled from '@emotion/styled';
  2. import {space} from 'sentry/styles/space';
  3. import {trackAnalytics} from 'sentry/utils/analytics';
  4. import replaceRouterParams from 'sentry/utils/replaceRouterParams';
  5. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  6. import SettingsNavItem from 'sentry/views/settings/components/settingsNavItem';
  7. import type {NavigationGroupProps} from 'sentry/views/settings/types';
  8. function SettingsNavigationGroup(props: NavigationGroupProps) {
  9. const {organization, project, name, items} = props;
  10. const navLinks = items.map(({path, title, index, show, badge, id, recordAnalytics}) => {
  11. if (typeof show === 'function' && !show(props)) {
  12. return null;
  13. }
  14. if (typeof show !== 'undefined' && !show) {
  15. return null;
  16. }
  17. const badgeResult = typeof badge === 'function' ? badge(props) : null;
  18. const to = replaceRouterParams(path, {
  19. ...(organization ? {orgId: organization.slug} : {}),
  20. ...(project ? {projectId: project.slug} : {}),
  21. });
  22. const handleClick = () => {
  23. // only call the analytics event if the URL is changing
  24. if (recordAnalytics && to !== window.location.pathname && organization) {
  25. trackAnalytics('sidebar.item_clicked', {
  26. organization,
  27. project_id: project?.id,
  28. sidebar_item_id: id,
  29. dest: path,
  30. });
  31. }
  32. };
  33. return (
  34. <SettingsNavItem
  35. key={title}
  36. to={normalizeUrl(to)}
  37. label={title}
  38. index={index}
  39. badge={badgeResult}
  40. id={id}
  41. onClick={handleClick}
  42. />
  43. );
  44. });
  45. if (!navLinks.some(link => link !== null)) {
  46. return null;
  47. }
  48. return (
  49. <NavSection data-test-id={name}>
  50. <SettingsHeading role="heading">{name}</SettingsHeading>
  51. {navLinks}
  52. </NavSection>
  53. );
  54. }
  55. const NavSection = styled('div')`
  56. margin-bottom: 20px;
  57. `;
  58. const SettingsHeading = styled('div')`
  59. color: ${p => p.theme.text};
  60. font-size: ${p => p.theme.fontSizeSmall};
  61. font-weight: 600;
  62. text-transform: uppercase;
  63. margin-bottom: ${space(0.5)};
  64. `;
  65. export default SettingsNavigationGroup;