index.tsx 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826
  1. import {Fragment, useCallback, useContext, useEffect} from 'react';
  2. import {css} from '@emotion/react';
  3. import styled from '@emotion/styled';
  4. import {hideSidebar, showSidebar} from 'sentry/actionCreators/preferences';
  5. import Feature from 'sentry/components/acl/feature';
  6. import GuideAnchor from 'sentry/components/assistant/guideAnchor';
  7. import {Chevron} from 'sentry/components/chevron';
  8. import FeedbackOnboardingSidebar from 'sentry/components/feedback/feedbackOnboarding/sidebar';
  9. import Hook from 'sentry/components/hook';
  10. import {OnboardingContext} from 'sentry/components/onboarding/onboardingContext';
  11. import {getMergedTasks} from 'sentry/components/onboardingWizard/taskConfig';
  12. import PerformanceOnboardingSidebar from 'sentry/components/performanceOnboarding/sidebar';
  13. import ReplaysOnboardingSidebar from 'sentry/components/replaysOnboarding/sidebar';
  14. import {
  15. ExpandedContext,
  16. ExpandedContextProvider,
  17. } from 'sentry/components/sidebar/expandedContextProvider';
  18. import {isDone} from 'sentry/components/sidebar/utils';
  19. import {
  20. IconDashboard,
  21. IconGraph,
  22. IconIssues,
  23. IconLightning,
  24. IconMegaphone,
  25. IconPlay,
  26. IconProfiling,
  27. IconProject,
  28. IconReleases,
  29. IconSettings,
  30. IconSiren,
  31. IconStats,
  32. IconSupport,
  33. IconTelescope,
  34. IconTimer,
  35. } from 'sentry/icons';
  36. import {IconRobot} from 'sentry/icons/iconRobot';
  37. import {t} from 'sentry/locale';
  38. import ConfigStore from 'sentry/stores/configStore';
  39. import DemoWalkthroughStore from 'sentry/stores/demoWalkthroughStore';
  40. import HookStore from 'sentry/stores/hookStore';
  41. import PreferencesStore from 'sentry/stores/preferencesStore';
  42. import SidebarPanelStore from 'sentry/stores/sidebarPanelStore';
  43. import {useLegacyStore} from 'sentry/stores/useLegacyStore';
  44. import {space} from 'sentry/styles/space';
  45. import type {Organization} from 'sentry/types/organization';
  46. import {isDemoWalkthrough} from 'sentry/utils/demoMode';
  47. import {getDiscoverLandingUrl} from 'sentry/utils/discover/urls';
  48. import {isActiveSuperuser} from 'sentry/utils/isActiveSuperuser';
  49. import {hasMetricsSidebarItem} from 'sentry/utils/metrics/features';
  50. import theme from 'sentry/utils/theme';
  51. import {useLocation} from 'sentry/utils/useLocation';
  52. import useMedia from 'sentry/utils/useMedia';
  53. import useOrganization from 'sentry/utils/useOrganization';
  54. import useProjects from 'sentry/utils/useProjects';
  55. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  56. import MetricsOnboardingSidebar from 'sentry/views/metrics/ddmOnboarding/sidebar';
  57. import {
  58. MODULE_TITLE as CACHE_MODULE_TITLE,
  59. releaseLevelAsBadgeProps as CacheModuleBadgeProps,
  60. } from 'sentry/views/performance/cache/settings';
  61. import {
  62. MODULE_TITLE as HTTP_MODULE_TITLE,
  63. releaseLevelAsBadgeProps as HTTPModuleBadgeProps,
  64. } from 'sentry/views/performance/http/settings';
  65. import {ProfilingOnboardingSidebar} from '../profiling/ProfilingOnboarding/profilingOnboardingSidebar';
  66. import Broadcasts from './broadcasts';
  67. import SidebarHelp from './help';
  68. import OnboardingStatus from './onboardingStatus';
  69. import ServiceIncidents from './serviceIncidents';
  70. import {SidebarAccordion} from './sidebarAccordion';
  71. import SidebarDropdown from './sidebarDropdown';
  72. import SidebarItem from './sidebarItem';
  73. import type {SidebarOrientation} from './types';
  74. import {SidebarPanelKey} from './types';
  75. function activatePanel(panel: SidebarPanelKey) {
  76. SidebarPanelStore.activatePanel(panel);
  77. }
  78. function togglePanel(panel: SidebarPanelKey) {
  79. SidebarPanelStore.togglePanel(panel);
  80. }
  81. function hidePanel(hash?: string) {
  82. SidebarPanelStore.hidePanel(hash);
  83. }
  84. function useOpenOnboardingSidebar(organization?: Organization) {
  85. const onboardingContext = useContext(OnboardingContext);
  86. const {projects: project} = useProjects();
  87. const location = useLocation();
  88. const openOnboardingSidebar = (() => {
  89. if (location?.hash === '#welcome') {
  90. if (organization && !ConfigStore.get('demoMode')) {
  91. const tasks = getMergedTasks({
  92. organization,
  93. projects: project,
  94. onboardingContext,
  95. });
  96. const allDisplayedTasks = tasks
  97. .filter(task => task.display)
  98. .filter(task => !task.renderCard);
  99. const doneTasks = allDisplayedTasks.filter(isDone);
  100. return !(doneTasks.length >= allDisplayedTasks.length);
  101. }
  102. return true;
  103. }
  104. return false;
  105. })();
  106. useEffect(() => {
  107. if (openOnboardingSidebar) {
  108. activatePanel(SidebarPanelKey.ONBOARDING_WIZARD);
  109. }
  110. }, [openOnboardingSidebar]);
  111. }
  112. function Sidebar() {
  113. const location = useLocation();
  114. const preferences = useLegacyStore(PreferencesStore);
  115. const activePanel = useLegacyStore(SidebarPanelStore);
  116. const organization = useOrganization({allowNull: true});
  117. const {shouldAccordionFloat} = useContext(ExpandedContext);
  118. const collapsed = !!preferences.collapsed;
  119. const horizontal = useMedia(`(max-width: ${theme.breakpoints.medium})`);
  120. // Avoid showing superuser UI on self-hosted instances
  121. const showSuperuserWarning = () => {
  122. return isActiveSuperuser() && !ConfigStore.get('isSelfHosted');
  123. };
  124. // Avoid showing superuser UI on certain organizations
  125. const isExcludedOrg = () => {
  126. return HookStore.get('component:superuser-warning-excluded')[0]?.(organization);
  127. };
  128. useOpenOnboardingSidebar();
  129. const toggleCollapse = useCallback(() => {
  130. if (collapsed) {
  131. showSidebar();
  132. } else {
  133. hideSidebar();
  134. }
  135. }, [collapsed]);
  136. // Close panel on any navigation
  137. useEffect(() => void hidePanel(), [location?.pathname]);
  138. // Add classname to body
  139. useEffect(() => {
  140. const bcl = document.body.classList;
  141. bcl.add('body-sidebar');
  142. return () => bcl.remove('body-sidebar');
  143. }, []);
  144. useEffect(() => {
  145. Object.values(SidebarPanelKey).forEach(key => {
  146. if (location?.hash === `#sidebar-${key}`) {
  147. togglePanel(key);
  148. }
  149. });
  150. }, [location?.hash]);
  151. // Add sidebar collapse classname to body
  152. useEffect(() => {
  153. const bcl = document.body.classList;
  154. if (collapsed) {
  155. bcl.add('collapsed');
  156. } else {
  157. bcl.remove('collapsed');
  158. }
  159. return () => bcl.remove('collapsed');
  160. }, [collapsed]);
  161. const hasPanel = !!activePanel;
  162. const hasOrganization = !!organization;
  163. const orientation: SidebarOrientation = horizontal ? 'top' : 'left';
  164. const sidebarItemProps = {
  165. orientation,
  166. collapsed,
  167. hasPanel,
  168. organization,
  169. };
  170. const sidebarAnchor = isDemoWalkthrough() ? (
  171. <GuideAnchor target="projects" disabled={!DemoWalkthroughStore.get('sidebar')}>
  172. {t('Projects')}
  173. </GuideAnchor>
  174. ) : (
  175. <GuideAnchor target="projects">{t('Projects')}</GuideAnchor>
  176. );
  177. const projects = hasOrganization && (
  178. <SidebarItem
  179. {...sidebarItemProps}
  180. index
  181. icon={<IconProject />}
  182. label={sidebarAnchor}
  183. to={`/organizations/${organization.slug}/projects/`}
  184. id="projects"
  185. />
  186. );
  187. const issues = hasOrganization && (
  188. <SidebarItem
  189. {...sidebarItemProps}
  190. icon={<IconIssues />}
  191. label={<GuideAnchor target="issues">{t('Issues')}</GuideAnchor>}
  192. to={`/organizations/${organization.slug}/issues/`}
  193. search="?referrer=sidebar"
  194. id="issues"
  195. />
  196. );
  197. const discover2 = hasOrganization && (
  198. <Feature
  199. hookName="feature-disabled:discover2-sidebar-item"
  200. features="discover-basic"
  201. organization={organization}
  202. >
  203. <SidebarItem
  204. {...sidebarItemProps}
  205. icon={<IconTelescope />}
  206. label={<GuideAnchor target="discover">{t('Discover')}</GuideAnchor>}
  207. to={getDiscoverLandingUrl(organization)}
  208. id="discover-v2"
  209. />
  210. </Feature>
  211. );
  212. const performance = hasOrganization && (
  213. <Feature
  214. hookName="feature-disabled:performance-sidebar-item"
  215. features="performance-view"
  216. organization={organization}
  217. >
  218. {(() => {
  219. // If Database View or Web Vitals View is enabled, show a Performance accordion with a Database and/or Web Vitals sub-item
  220. if (
  221. organization.features.includes('spans-first-ui') ||
  222. organization.features.includes('performance-http-view') ||
  223. organization.features.includes('performance-cache-view') ||
  224. organization.features.includes('performance-queues-view')
  225. ) {
  226. return (
  227. <SidebarAccordion
  228. {...sidebarItemProps}
  229. icon={<IconLightning />}
  230. label={<GuideAnchor target="performance">{t('Performance')}</GuideAnchor>}
  231. to={`/organizations/${organization.slug}/performance/`}
  232. id="performance"
  233. exact={!shouldAccordionFloat}
  234. >
  235. <Feature features="spans-first-ui" organization={organization}>
  236. <SidebarItem
  237. {...sidebarItemProps}
  238. label={
  239. <GuideAnchor target="performance-database">
  240. {t('Queries')}
  241. </GuideAnchor>
  242. }
  243. to={`/organizations/${organization.slug}/performance/database/`}
  244. id="performance-database"
  245. // collapsed controls whether the dot is visible or not.
  246. // We always want it visible for these sidebar items so force it to true.
  247. icon={<SubitemDot collapsed />}
  248. />
  249. </Feature>
  250. <Feature features="performance-http-view" organization={organization}>
  251. <SidebarItem
  252. {...sidebarItemProps}
  253. label={
  254. <GuideAnchor target="performance-http">
  255. {HTTP_MODULE_TITLE}
  256. </GuideAnchor>
  257. }
  258. to={`/organizations/${organization.slug}/performance/http/`}
  259. id="performance-http"
  260. icon={<SubitemDot collapsed />}
  261. {...HTTPModuleBadgeProps}
  262. />
  263. </Feature>
  264. <Feature features="performance-cache-view" organization={organization}>
  265. <SidebarItem
  266. {...sidebarItemProps}
  267. label={
  268. <GuideAnchor target="performance-cache">
  269. {CACHE_MODULE_TITLE}
  270. </GuideAnchor>
  271. }
  272. to={`/organizations/${organization.slug}/performance/cache/`}
  273. id="performance-cache"
  274. icon={<SubitemDot collapsed />}
  275. {...CacheModuleBadgeProps}
  276. />
  277. </Feature>
  278. <Feature features="spans-first-ui" organization={organization}>
  279. <SidebarItem
  280. {...sidebarItemProps}
  281. label={
  282. <GuideAnchor target="performance-webvitals">
  283. {t('Web Vitals')}
  284. </GuideAnchor>
  285. }
  286. to={`/organizations/${organization.slug}/performance/browser/pageloads/`}
  287. id="performance-webvitals"
  288. icon={<SubitemDot collapsed />}
  289. />
  290. </Feature>
  291. <Feature features="performance-queues-view" organization={organization}>
  292. <SidebarItem
  293. {...sidebarItemProps}
  294. label={
  295. <GuideAnchor target="performance-queues">{t('Queues')}</GuideAnchor>
  296. }
  297. isAlpha
  298. to={`/organizations/${organization.slug}/performance/queues/`}
  299. id="performance-queues"
  300. icon={<SubitemDot collapsed />}
  301. />
  302. </Feature>
  303. <Feature features="spans-first-ui" organization={organization}>
  304. <SidebarItem
  305. {...sidebarItemProps}
  306. label={t('Screen Loads')}
  307. to={`/organizations/${organization.slug}/performance/mobile/screens/`}
  308. id="performance-mobile-screens"
  309. icon={<SubitemDot collapsed />}
  310. />
  311. </Feature>
  312. <Feature features="spans-first-ui" organization={organization}>
  313. <SidebarItem
  314. {...sidebarItemProps}
  315. label={t('App Starts')}
  316. to={`/organizations/${organization.slug}/performance/mobile/app-startup/`}
  317. id="performance-mobile-app-startup"
  318. icon={<SubitemDot collapsed />}
  319. />
  320. </Feature>
  321. <Feature features="spans-first-ui">
  322. <SidebarItem
  323. {...sidebarItemProps}
  324. label={<GuideAnchor target="starfish">{t('Resources')}</GuideAnchor>}
  325. to={`/organizations/${organization.slug}/performance/browser/resources/`}
  326. id="performance-browser-resources"
  327. icon={<SubitemDot collapsed />}
  328. />
  329. </Feature>
  330. <Feature features="performance-trace-explorer">
  331. <SidebarItem
  332. {...sidebarItemProps}
  333. label={<GuideAnchor target="traces">{t('Traces')}</GuideAnchor>}
  334. to={`/organizations/${organization.slug}/performance/traces/`}
  335. id="performance-trace-explorer"
  336. icon={<SubitemDot collapsed />}
  337. />
  338. </Feature>
  339. </SidebarAccordion>
  340. );
  341. }
  342. // Otherwise, show a regular sidebar link to the Performance landing page
  343. return (
  344. <SidebarItem
  345. {...sidebarItemProps}
  346. icon={<IconLightning />}
  347. label={<GuideAnchor target="performance">{t('Performance')}</GuideAnchor>}
  348. to={`/organizations/${organization.slug}/performance/`}
  349. id="performance"
  350. />
  351. );
  352. })()}
  353. </Feature>
  354. );
  355. const releases = hasOrganization && (
  356. <SidebarItem
  357. {...sidebarItemProps}
  358. icon={<IconReleases />}
  359. label={<GuideAnchor target="releases">{t('Releases')}</GuideAnchor>}
  360. to={`/organizations/${organization.slug}/releases/`}
  361. id="releases"
  362. />
  363. );
  364. const aiMonitoring = hasOrganization && (
  365. <Feature features="ai-analytics" organization={organization}>
  366. <SidebarItem
  367. {...sidebarItemProps}
  368. icon={<IconRobot />}
  369. label={t('AI Monitoring')}
  370. isAlpha
  371. variant="short"
  372. to={`/organizations/${organization.slug}/ai-monitoring/`}
  373. id="ai-monitoring"
  374. />
  375. </Feature>
  376. );
  377. const userFeedback = hasOrganization && (
  378. <Feature features="old-user-feedback" organization={organization}>
  379. <SidebarItem
  380. {...sidebarItemProps}
  381. icon={<IconSupport />}
  382. label={t('User Feedback')}
  383. to={`/organizations/${organization.slug}/user-feedback/`}
  384. id="user-feedback"
  385. />
  386. </Feature>
  387. );
  388. const feedback = hasOrganization && (
  389. <Feature features="user-feedback-ui" organization={organization}>
  390. <SidebarItem
  391. {...sidebarItemProps}
  392. icon={<IconMegaphone />}
  393. label={t('User Feedback')}
  394. isBeta
  395. variant="short"
  396. to={`/organizations/${organization.slug}/feedback/`}
  397. id="feedback"
  398. />
  399. </Feature>
  400. );
  401. const alerts = hasOrganization && (
  402. <SidebarItem
  403. {...sidebarItemProps}
  404. icon={<IconSiren />}
  405. label={t('Alerts')}
  406. to={`/organizations/${organization.slug}/alerts/rules/`}
  407. id="alerts"
  408. />
  409. );
  410. const monitors = hasOrganization && (
  411. <SidebarItem
  412. {...sidebarItemProps}
  413. icon={<IconTimer />}
  414. label={t('Crons')}
  415. to={`/organizations/${organization.slug}/crons/`}
  416. id="crons"
  417. />
  418. );
  419. const replays = hasOrganization && (
  420. <Feature
  421. hookName="feature-disabled:replay-sidebar-item"
  422. features="session-replay-ui"
  423. organization={organization}
  424. requireAll={false}
  425. >
  426. <SidebarItem
  427. {...sidebarItemProps}
  428. icon={<IconPlay />}
  429. label={t('Replays')}
  430. to={`/organizations/${organization.slug}/replays/`}
  431. id="replays"
  432. />
  433. </Feature>
  434. );
  435. const metricsPath = `/organizations/${organization?.slug}/metrics/`;
  436. const metrics = hasOrganization && hasMetricsSidebarItem(organization) && (
  437. <Feature features={['custom-metrics']} organization={organization}>
  438. <SidebarItem
  439. {...sidebarItemProps}
  440. icon={<IconGraph />}
  441. label={t('Metrics')}
  442. to={metricsPath}
  443. search={location.pathname === normalizeUrl(metricsPath) ? location.search : ''}
  444. id="metrics"
  445. isBeta
  446. />
  447. </Feature>
  448. );
  449. const dashboards = hasOrganization && (
  450. <Feature
  451. hookName="feature-disabled:dashboards-sidebar-item"
  452. features={['discover', 'discover-query', 'dashboards-basic', 'dashboards-edit']}
  453. organization={organization}
  454. requireAll={false}
  455. >
  456. <SidebarItem
  457. {...sidebarItemProps}
  458. index
  459. icon={<IconDashboard />}
  460. label={t('Dashboards')}
  461. to={`/organizations/${organization.slug}/dashboards/`}
  462. id="customizable-dashboards"
  463. />
  464. </Feature>
  465. );
  466. const profiling = hasOrganization && (
  467. <Feature
  468. hookName="feature-disabled:profiling-sidebar-item"
  469. features="profiling"
  470. organization={organization}
  471. requireAll={false}
  472. >
  473. <SidebarItem
  474. {...sidebarItemProps}
  475. index
  476. icon={<IconProfiling />}
  477. label={t('Profiling')}
  478. to={`/organizations/${organization.slug}/profiling/`}
  479. id="profiling"
  480. />
  481. </Feature>
  482. );
  483. const stats = hasOrganization && (
  484. <SidebarItem
  485. {...sidebarItemProps}
  486. icon={<IconStats />}
  487. label={t('Stats')}
  488. to={`/organizations/${organization.slug}/stats/`}
  489. id="stats"
  490. />
  491. );
  492. const settings = hasOrganization && (
  493. <SidebarItem
  494. {...sidebarItemProps}
  495. icon={<IconSettings />}
  496. label={t('Settings')}
  497. to={`/settings/${organization.slug}/`}
  498. id="settings"
  499. />
  500. );
  501. return (
  502. <SidebarWrapper aria-label={t('Primary Navigation')} collapsed={collapsed}>
  503. <ExpandedContextProvider>
  504. <SidebarSectionGroupPrimary>
  505. <DropdownSidebarSection
  506. isSuperuser={showSuperuserWarning() && !isExcludedOrg()}
  507. >
  508. <SidebarDropdown orientation={orientation} collapsed={collapsed} />
  509. {showSuperuserWarning() && !isExcludedOrg() && (
  510. <Hook name="component:superuser-warning" organization={organization} />
  511. )}
  512. </DropdownSidebarSection>
  513. <PrimaryItems>
  514. {hasOrganization && (
  515. <Fragment>
  516. <SidebarSection>
  517. {issues}
  518. {projects}
  519. </SidebarSection>
  520. <SidebarSection>
  521. {performance}
  522. {profiling}
  523. {metrics}
  524. {replays}
  525. {aiMonitoring}
  526. {feedback}
  527. {monitors}
  528. {alerts}
  529. </SidebarSection>
  530. <SidebarSection>
  531. {discover2}
  532. {dashboards}
  533. {releases}
  534. {userFeedback}
  535. </SidebarSection>
  536. <SidebarSection>
  537. {stats}
  538. {settings}
  539. </SidebarSection>
  540. </Fragment>
  541. )}
  542. </PrimaryItems>
  543. </SidebarSectionGroupPrimary>
  544. {hasOrganization && (
  545. <SidebarSectionGroup>
  546. <PerformanceOnboardingSidebar
  547. currentPanel={activePanel}
  548. onShowPanel={() => togglePanel(SidebarPanelKey.PERFORMANCE_ONBOARDING)}
  549. hidePanel={() => hidePanel('performance-sidequest')}
  550. {...sidebarItemProps}
  551. />
  552. <FeedbackOnboardingSidebar
  553. currentPanel={activePanel}
  554. onShowPanel={() => togglePanel(SidebarPanelKey.FEEDBACK_ONBOARDING)}
  555. hidePanel={hidePanel}
  556. {...sidebarItemProps}
  557. />
  558. <ReplaysOnboardingSidebar
  559. currentPanel={activePanel}
  560. onShowPanel={() => togglePanel(SidebarPanelKey.REPLAYS_ONBOARDING)}
  561. hidePanel={hidePanel}
  562. {...sidebarItemProps}
  563. />
  564. <ProfilingOnboardingSidebar
  565. currentPanel={activePanel}
  566. onShowPanel={() => togglePanel(SidebarPanelKey.PROFILING_ONBOARDING)}
  567. hidePanel={hidePanel}
  568. {...sidebarItemProps}
  569. />
  570. <MetricsOnboardingSidebar
  571. currentPanel={activePanel}
  572. onShowPanel={() => togglePanel(SidebarPanelKey.METRICS_ONBOARDING)}
  573. hidePanel={hidePanel}
  574. {...sidebarItemProps}
  575. />
  576. <SidebarSection noMargin noPadding>
  577. <OnboardingStatus
  578. org={organization}
  579. currentPanel={activePanel}
  580. onShowPanel={() => togglePanel(SidebarPanelKey.ONBOARDING_WIZARD)}
  581. hidePanel={hidePanel}
  582. {...sidebarItemProps}
  583. />
  584. </SidebarSection>
  585. <SidebarSection>
  586. {HookStore.get('sidebar:bottom-items').length > 0 &&
  587. HookStore.get('sidebar:bottom-items')[0]({
  588. orientation,
  589. collapsed,
  590. hasPanel,
  591. organization,
  592. })}
  593. <SidebarHelp
  594. orientation={orientation}
  595. collapsed={collapsed}
  596. hidePanel={hidePanel}
  597. organization={organization}
  598. />
  599. <Broadcasts
  600. orientation={orientation}
  601. collapsed={collapsed}
  602. currentPanel={activePanel}
  603. onShowPanel={() => togglePanel(SidebarPanelKey.BROADCASTS)}
  604. hidePanel={hidePanel}
  605. organization={organization}
  606. />
  607. <ServiceIncidents
  608. orientation={orientation}
  609. collapsed={collapsed}
  610. currentPanel={activePanel}
  611. onShowPanel={() => togglePanel(SidebarPanelKey.SERVICE_INCIDENTS)}
  612. hidePanel={hidePanel}
  613. />
  614. </SidebarSection>
  615. {!horizontal && (
  616. <SidebarSection>
  617. <SidebarCollapseItem
  618. id="collapse"
  619. data-test-id="sidebar-collapse"
  620. {...sidebarItemProps}
  621. icon={<Chevron direction={collapsed ? 'right' : 'left'} />}
  622. label={collapsed ? t('Expand') : t('Collapse')}
  623. onClick={toggleCollapse}
  624. />
  625. </SidebarSection>
  626. )}
  627. </SidebarSectionGroup>
  628. )}
  629. </ExpandedContextProvider>
  630. </SidebarWrapper>
  631. );
  632. }
  633. export default Sidebar;
  634. const responsiveFlex = css`
  635. display: flex;
  636. flex-direction: column;
  637. @media (max-width: ${theme.breakpoints.medium}) {
  638. flex-direction: row;
  639. }
  640. `;
  641. export const SidebarWrapper = styled('nav')<{collapsed: boolean}>`
  642. background: ${p => p.theme.sidebarGradient};
  643. color: ${p => p.theme.sidebar.color};
  644. line-height: 1;
  645. padding: 12px 0 2px; /* Allows for 32px avatars */
  646. width: ${p => p.theme.sidebar[p.collapsed ? 'collapsedWidth' : 'expandedWidth']};
  647. position: fixed;
  648. top: ${p => (ConfigStore.get('demoMode') ? p.theme.demo.headerSize : 0)};
  649. left: 0;
  650. bottom: 0;
  651. justify-content: space-between;
  652. z-index: ${p => p.theme.zIndex.sidebar};
  653. border-right: solid 1px ${p => p.theme.sidebarBorder};
  654. ${responsiveFlex};
  655. @media (max-width: ${p => p.theme.breakpoints.medium}) {
  656. top: 0;
  657. left: 0;
  658. right: 0;
  659. height: ${p => p.theme.sidebar.mobileHeight};
  660. bottom: auto;
  661. width: auto;
  662. padding: 0 ${space(1)};
  663. align-items: center;
  664. border-right: none;
  665. border-bottom: solid 1px ${p => p.theme.sidebarBorder};
  666. }
  667. `;
  668. const SidebarSectionGroup = styled('div')`
  669. ${responsiveFlex};
  670. flex-shrink: 0; /* prevents shrinking on Safari */
  671. gap: 1px;
  672. `;
  673. const SidebarSectionGroupPrimary = styled('div')`
  674. ${responsiveFlex};
  675. /* necessary for child flexing on msedge and ff */
  676. min-height: 0;
  677. min-width: 0;
  678. flex: 1;
  679. /* expand to fill the entire height on mobile */
  680. @media (max-width: ${p => p.theme.breakpoints.medium}) {
  681. height: 100%;
  682. align-items: center;
  683. }
  684. `;
  685. const PrimaryItems = styled('div')`
  686. overflow: auto;
  687. flex: 1;
  688. display: flex;
  689. flex-direction: column;
  690. gap: 1px;
  691. -ms-overflow-style: -ms-autohiding-scrollbar;
  692. @media (max-height: 675px) and (min-width: ${p => p.theme.breakpoints.medium}) {
  693. border-bottom: 1px solid ${p => p.theme.sidebarBorder};
  694. padding-bottom: ${space(1)};
  695. box-shadow: rgba(0, 0, 0, 0.15) 0px -10px 10px inset;
  696. }
  697. @media (max-width: ${p => p.theme.breakpoints.medium}) {
  698. overflow-y: visible;
  699. flex-direction: row;
  700. height: 100%;
  701. align-items: center;
  702. border-right: 1px solid ${p => p.theme.sidebarBorder};
  703. padding-right: ${space(1)};
  704. margin-right: ${space(0.5)};
  705. box-shadow: rgba(0, 0, 0, 0.15) -10px 0px 10px inset;
  706. ::-webkit-scrollbar {
  707. display: none;
  708. }
  709. }
  710. `;
  711. const SubitemDot = styled('div')<{collapsed: boolean}>`
  712. width: 3px;
  713. height: 3px;
  714. background: currentcolor;
  715. border-radius: 50%;
  716. opacity: ${p => (p.collapsed ? 1 : 0)};
  717. @media (max-width: ${p => p.theme.breakpoints.medium}) {
  718. opacity: 1;
  719. }
  720. `;
  721. const SidebarSection = styled(SidebarSectionGroup)<{
  722. noMargin?: boolean;
  723. noPadding?: boolean;
  724. }>`
  725. ${p => !p.noMargin && `margin: ${space(1)} 0`};
  726. ${p => !p.noPadding && `padding: 0 ${space(2)}`};
  727. @media (max-width: ${p => p.theme.breakpoints.small}) {
  728. margin: 0;
  729. padding: 0;
  730. }
  731. &:empty {
  732. display: none;
  733. }
  734. `;
  735. const DropdownSidebarSection = styled(SidebarSection)<{
  736. isSuperuser?: boolean;
  737. }>`
  738. position: relative;
  739. margin: 0;
  740. padding: ${space(1)} ${space(2)};
  741. ${p =>
  742. p.isSuperuser &&
  743. css`
  744. &:before {
  745. content: '';
  746. position: absolute;
  747. inset: 0 ${space(1)};
  748. border-radius: ${p.theme.borderRadius};
  749. background: ${p.theme.superuserSidebar};
  750. }
  751. `}
  752. `;
  753. const SidebarCollapseItem = styled(SidebarItem)`
  754. @media (max-width: ${p => p.theme.breakpoints.medium}) {
  755. display: none;
  756. }
  757. `;