ref(nav) split tour reminder context from nav

static/app/components/commandPalette/useGlobalCommandPaletteActions.tsx

@@ -36,7 +36,7 @@ import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/se
 import {MCP_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mcp/settings';
 import {MOBILE_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mobile/settings';
 import {ISSUE_TAXONOMY_CONFIG} from 'sentry/views/issueList/taxonomies';
-import {useNavContext} from 'sentry/views/nav/context';
+import {useNavigationContext} from 'sentry/views/nav/context';
 import {useStarredIssueViews} from 'sentry/views/nav/secondary/sections/issues/issueViews/useStarredIssueViews';
 import {getUserOrgNavigationConfiguration} from 'sentry/views/settings/organization/userOrgNavigationConfiguration';
 
@@ -288,7 +288,7 @@ function useNavigationActions(): CommandPaletteAction[] {
 }
 
 function useNavigationToggleCollapsed(): CommandPaletteAction {
-  const {isCollapsed, setIsCollapsed} = useNavContext();
+  const {isCollapsed, setIsCollapsed} = useNavigationContext();
 
   return {
     type: 'callback',

static/app/components/onboardingWizard/content.spec.tsx

@@ -10,7 +10,7 @@ import {
 
 import {OnboardingSidebarContent} from 'sentry/components/onboardingWizard/content';
 import {OnboardingTaskKey} from 'sentry/types/onboarding';
-import {NavContextProvider} from 'sentry/views/nav/context';
+import {NavigationContextProvider} from 'sentry/views/nav/context';
 import {NavigationTourProvider} from 'sentry/views/nav/tour/tour';
 
 const DEFAULT_GETTING_STARTED_TASKS = [
@@ -56,11 +56,11 @@ describe('OnboardingSidebarContent', () => {
 
   it('should render the sidebar with the correct groups and tasks', async () => {
     render(
-      <NavContextProvider>
+      <NavigationContextProvider>
         <NavigationTourProvider>
           <OnboardingSidebarContent onClose={jest.fn()} />
         </NavigationTourProvider>
-      </NavContextProvider>,
+      </NavigationContextProvider>,
       {organization}
     );
     expect(await screen.findByText('Getting Started')).toBeInTheDocument();
@@ -111,11 +111,11 @@ describe('OnboardingSidebarContent', () => {
     });
 
     render(
-      <NavContextProvider>
+      <NavigationContextProvider>
         <NavigationTourProvider>
           <OnboardingSidebarContent onClose={jest.fn()} />
         </NavigationTourProvider>
-      </NavContextProvider>,
+      </NavigationContextProvider>,
       {organization}
     );
 
@@ -125,11 +125,11 @@ describe('OnboardingSidebarContent', () => {
 
   it('if first group completed, second group should be expanded by default', async () => {
     render(
-      <NavContextProvider>
+      <NavigationContextProvider>
         <NavigationTourProvider>
           <OnboardingSidebarContent onClose={jest.fn()} />
         </NavigationTourProvider>
-      </NavContextProvider>,
+      </NavigationContextProvider>,
       {
         organization: OrganizationFixture({
           onboardingTasks: DEFAULT_GETTING_STARTED_TASKS.map(task => ({
@@ -153,11 +153,11 @@ describe('OnboardingSidebarContent', () => {
     });
 
     render(
-      <NavContextProvider>
+      <NavigationContextProvider>
         <NavigationTourProvider>
           <OnboardingSidebarContent onClose={jest.fn()} />
         </NavigationTourProvider>
-      </NavContextProvider>,
+      </NavigationContextProvider>,
       {organization}
     );
 

static/app/utils/replays/hooks/useReplayLayout.tsx

@@ -11,7 +11,7 @@ import {
   PRIMARY_SIDEBAR_WIDTH,
   SECONDARY_SIDEBAR_WIDTH,
 } from 'sentry/views/nav/constants';
-import {useNavContext} from 'sentry/views/nav/context';
+import {useNavigationContext} from 'sentry/views/nav/context';
 
 export enum LayoutKey {
   /**
@@ -97,7 +97,7 @@ function getDefaultLayout(
 
 export default function useReplayLayout() {
   const theme = useTheme();
-  const {isCollapsed} = useNavContext();
+  const {isCollapsed} = useNavigationContext();
   const [secondarySidebarWidth] = useSyncedLocalStorageState(
     NAV_SIDEBAR_SECONDARY_WIDTH_LOCAL_STORAGE_KEY,
     SECONDARY_SIDEBAR_WIDTH

static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx

@@ -44,7 +44,7 @@ import {
 } from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
 import type {OnDataFetchedParams} from 'sentry/views/dashboards/widgetCard';
 import {DashboardsMEPProvider} from 'sentry/views/dashboards/widgetCard/dashboardsMEPContext';
-import {useNavContext} from 'sentry/views/nav/context';
+import {useNavigationContext} from 'sentry/views/nav/context';
 import {MetricsDataSwitcher} from 'sentry/views/performance/landing/metricsDataSwitcher';
 
 export interface ThresholdMetaState {
@@ -86,7 +86,7 @@ function WidgetBuilderV2({
     DEFAULT_WIDGET_DRAG_POSITIONING
   );
 
-  const {navParentRef} = useNavContext();
+  const {navParentRef} = useNavigationContext();
   // Check if we have a valid nav reference
   const hasValidNav = Boolean(navParentRef?.current);
 

static/app/views/nav/context.tsx

@@ -4,10 +4,11 @@ import {useTheme} from '@emotion/react';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import useMedia from 'sentry/utils/useMedia';
 import {NAV_SIDEBAR_COLLAPSED_LOCAL_STORAGE_KEY} from 'sentry/views/nav/constants';
+import {NavigationTourContextProvider} from 'sentry/views/nav/tour/tour';
 import type {PrimaryNavGroup} from 'sentry/views/nav/types';
 import {NavLayout} from 'sentry/views/nav/types';
 
-interface NavContext {
+interface NavigationContext {
   activePrimaryNavGroup: PrimaryNavGroup | null;
   collapsedNavIsOpen: boolean;
   endInteraction: () => void;
@@ -18,40 +19,35 @@ interface NavContext {
   setActivePrimaryNavGroup: (activePrimaryNavGroup: PrimaryNavGroup | null) => void;
   setCollapsedNavIsOpen: (collapsedNavIsOpen: boolean) => void;
   setIsCollapsed: (isCollapsed: boolean) => void;
-  setShowTourReminder: (showTourReminder: boolean) => void;
-  showTourReminder: boolean;
   startInteraction: () => void;
 }
 
-const NavContext = createContext<NavContext>({
+const NavigationContext = createContext<NavigationContext>({
   navParentRef: {current: null},
   layout: NavLayout.SIDEBAR,
   isCollapsed: false,
   setIsCollapsed: () => {},
   isInteractingRef: {current: false},
   startInteraction: () => {},
   endInteraction: () => {},
-  showTourReminder: false,
-  setShowTourReminder: () => {},
   activePrimaryNavGroup: null,
   setActivePrimaryNavGroup: () => {},
   collapsedNavIsOpen: false,
   setCollapsedNavIsOpen: () => {},
 });
 
-export function useNavContext(): NavContext {
-  return useContext(NavContext);
+export function useNavigationContext(): NavigationContext {
+  return useContext(NavigationContext);
 }
 
-export function NavContextProvider({children}: {children: React.ReactNode}) {
+export function NavigationContextProvider({children}: {children: React.ReactNode}) {
   const navParentRef = useRef<HTMLDivElement>(null);
   const isInteractingRef = useRef(false);
   const [isCollapsed, setIsCollapsed] = useLocalStorageState(
     NAV_SIDEBAR_COLLAPSED_LOCAL_STORAGE_KEY,
     false
   );
   const [collapsedNavIsOpen, setCollapsedNavIsOpen] = useState(false);
-  const [showTourReminder, setShowTourReminder] = useState(false);
   const [activePrimaryNavGroup, setActivePrimaryNavGroup] =
     useState<PrimaryNavGroup | null>(null);
 
@@ -75,8 +71,6 @@ export function NavContextProvider({children}: {children: React.ReactNode}) {
       isInteractingRef,
       startInteraction,
       endInteraction,
-      showTourReminder,
-      setShowTourReminder,
       activePrimaryNavGroup,
       setActivePrimaryNavGroup,
       collapsedNavIsOpen,
@@ -88,14 +82,16 @@ export function NavContextProvider({children}: {children: React.ReactNode}) {
       setIsCollapsed,
       startInteraction,
       endInteraction,
-      showTourReminder,
-      setShowTourReminder,
       activePrimaryNavGroup,
       setActivePrimaryNavGroup,
       collapsedNavIsOpen,
       setCollapsedNavIsOpen,
     ]
   );
 
-  return <NavContext value={value}>{children}</NavContext>;
+  return (
+    <NavigationTourContextProvider>
+      <NavigationContext.Provider value={value}>{children}</NavigationContext.Provider>
+    </NavigationTourContextProvider>
+  );
 }

static/app/views/nav/index.spec.tsx

@@ -16,9 +16,9 @@ import {mockMatchMedia} from 'sentry-test/utils';
 import {FrontendVersionProvider} from 'sentry/components/frontendVersionContext';
 import ConfigStore from 'sentry/stores/configStore';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import Nav from 'sentry/views/nav';
+import {Navigation} from 'sentry/views/nav';
 import {NAV_SIDEBAR_COLLAPSED_LOCAL_STORAGE_KEY} from 'sentry/views/nav/constants';
-import {NavContextProvider} from 'sentry/views/nav/context';
+import {NavigationContextProvider} from 'sentry/views/nav/context';
 
 jest.mock('sentry/utils/analytics', () => ({
   ...jest.requireActual('sentry/utils/analytics'),
@@ -100,10 +100,10 @@ describe('Nav', () => {
     route?: string;
   } = {}) {
     return render(
-      <NavContextProvider>
-        <Nav />
+      <NavigationContextProvider>
+        <Navigation />
         <div id="main" />
-      </NavContextProvider>,
+      </NavigationContextProvider>,
       {
         organization: OrganizationFixture({features}),
 
@@ -334,10 +334,10 @@ describe('Nav', () => {
     it('does not reload page on navigation when frontend is current', () => {
       render(
         <FrontendVersionProvider releaseVersion="frontend@abc123" force="current">
-          <NavContextProvider>
-            <Nav />
+          <NavigationContextProvider>
+            <Navigation />
             <div id="main" />
-          </NavContextProvider>
+          </NavigationContextProvider>
         </FrontendVersionProvider>,
         {
           organization: OrganizationFixture({features: ALL_AVAILABLE_FEATURES}),
@@ -366,10 +366,10 @@ describe('Nav', () => {
     it('reloads page on primary navigation when frontend is stale', async () => {
       render(
         <FrontendVersionProvider releaseVersion="frontend@abc123" force="stale">
-          <NavContextProvider>
-            <Nav />
+          <NavigationContextProvider>
+            <Navigation />
             <div id="main" />
-          </NavContextProvider>
+          </NavigationContextProvider>
         </FrontendVersionProvider>,
         {
           organization: OrganizationFixture({features: ALL_AVAILABLE_FEATURES}),

static/app/views/nav/index.tsx

@@ -2,9 +2,11 @@ import {useEffect} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import useOrganization from 'sentry/utils/useOrganization';
 import {PRIMARY_SIDEBAR_WIDTH} from 'sentry/views/nav/constants';
-import {useNavContext} from 'sentry/views/nav/context';
+import {useNavigationContext} from 'sentry/views/nav/context';
 import MobileTopbar from 'sentry/views/nav/mobileTopbar';
 import {Sidebar} from 'sentry/views/nav/sidebar';
 import {
@@ -16,9 +18,9 @@ import {useCommandPalette} from 'sentry/views/nav/useCommandPalette';
 import {UserDropdown} from 'sentry/views/nav/userDropdown';
 import {useResetActiveNavGroup} from 'sentry/views/nav/useResetActiveNavGroup';
 
-function NavContent() {
+function UserAndOrganizationNavigation() {
   useCommandPalette();
-  const {layout, navParentRef} = useNavContext();
+  const {layout, navParentRef} = useNavigationContext();
   const {currentStepId, endTour} = useStackedNavigationTour();
   const tourIsActive = currentStepId !== null;
   const hoverProps = useResetActiveNavGroup();
@@ -43,20 +45,26 @@ function NavContent() {
   );
 }
 
-function Nav() {
+function UserOnlyNavigation() {
+  return (
+    <NoOrganizationSidebar data-test-id="no-organization-sidebar">
+      <Flex direction="column" gap="md" justify="between">
+        <UserDropdown />
+      </Flex>
+    </NoOrganizationSidebar>
+  );
+}
+
+export function Navigation() {
   const organization = useOrganization({allowNull: true});
 
   if (!organization) {
-    return (
-      <NoOrganizationSidebar data-test-id="no-organization-sidebar">
-        <UserDropdown />
-      </NoOrganizationSidebar>
-    );
+    return <UserOnlyNavigation />;
   }
 
   return (
     <NavigationTourProvider>
-      <NavContent />
+      <UserAndOrganizationNavigation />
     </NavigationTourProvider>
   );
 }
@@ -92,5 +100,3 @@ const NoOrganizationSidebar = styled('div')`
   align-items: center;
   flex-direction: column;
 `;
-
-export default Nav;

static/app/views/nav/organizationDropdown.tsx

@@ -20,7 +20,7 @@ import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import {useSessionStorage} from 'sentry/utils/useSessionStorage';
-import {useNavContext} from 'sentry/views/nav/context';
+import {useNavigationContext} from 'sentry/views/nav/context';
 import {NavLayout} from 'sentry/views/nav/types';
 import {makeProjectsPathname} from 'sentry/views/projects/pathname';
 
@@ -45,7 +45,7 @@ export function OrganizationDropdown(props: OrganizationDropdownProps) {
   );
 
   const {projects} = useProjects();
-  const {layout} = useNavContext();
+  const {layout} = useNavigationContext();
 
   const [, setReferrer] = useSessionStorage<string | null>(CUSTOM_REFERRER_KEY, null);
 

static/app/views/nav/primary/components.tsx

@@ -20,7 +20,7 @@ import {
   NAV_PRIMARY_LINK_DATA_ATTRIBUTE,
   SIDEBAR_NAVIGATION_SOURCE,
 } from 'sentry/views/nav/constants';
-import {useNavContext} from 'sentry/views/nav/context';
+import {useNavigationContext} from 'sentry/views/nav/context';
 import {PRIMARY_NAV_GROUP_CONFIG} from 'sentry/views/nav/primary/config';
 import type {PrimaryNavGroup} from 'sentry/views/nav/types';
 import {NavLayout} from 'sentry/views/nav/types';
@@ -78,7 +78,7 @@ interface SidebarItemProps extends React.HTMLAttributes<HTMLLIElement> {
 }
 
 function SidebarItem({children, label, disableTooltip, ref, ...props}: SidebarItemProps) {
-  const {layout} = useNavContext();
+  const {layout} = useNavigationContext();
   return (
     <IconDefaultsProvider legacySize={layout === NavLayout.MOBILE ? '16px' : '21px'}>
       <Flex
@@ -122,7 +122,7 @@ export function SidebarMenu({
 }: SidebarItemDropdownProps) {
   // This component can be rendered without an organization in some cases
   const organization = useOrganization({allowNull: true});
-  const {layout} = useNavContext();
+  const {layout} = useNavigationContext();
   const theme = useTheme();
 
   const showLabel = layout === NavLayout.MOBILE;
@@ -186,7 +186,7 @@ function SidebarNavLink({
   group,
 }: SidebarItemLinkProps) {
   const organization = useOrganization();
-  const {layout, activePrimaryNavGroup} = useNavContext();
+  const {layout, activePrimaryNavGroup} = useNavigationContext();
   const location = useLocation();
   const isActive = isLinkActive(normalizeUrl(activeTo, location), location.pathname);
   const label = PRIMARY_NAV_GROUP_CONFIG[group].label;
@@ -260,7 +260,7 @@ export function SidebarButton({
   label,
 }: SidebarButtonProps) {
   const organization = useOrganization();
-  const {layout} = useNavContext();
+  const {layout} = useNavigationContext();
   const showLabel = layout === NavLayout.MOBILE;
 
   return (
@@ -421,7 +421,7 @@ const NavLink = styled(Link, {
 
 const NavButton = styled(
   ({isMobile: _isMobile, ...props}: ButtonProps & {isMobile: boolean}) => {
-    const {layout} = useNavContext();
+    const {layout} = useNavigationContext();
 
     return (
       <Button