diff --git a/static/app/components/onboardingWizard/content.spec.tsx b/static/app/components/onboardingWizard/content.spec.tsx index 222a5b33a2aae6..1ec0cf2db28617 100644 --- a/static/app/components/onboardingWizard/content.spec.tsx +++ b/static/app/components/onboardingWizard/content.spec.tsx @@ -10,7 +10,6 @@ import { import {OnboardingSidebarContent} from 'sentry/components/onboardingWizard/content'; import {OnboardingTaskKey} from 'sentry/types/onboarding'; -import {NavigationTourProvider} from 'sentry/views/navigation/navigationTour'; import {PrimaryNavigationContextProvider} from 'sentry/views/navigation/primaryNavigationContext'; const DEFAULT_GETTING_STARTED_TASKS = [ @@ -57,9 +56,7 @@ describe('OnboardingSidebarContent', () => { it('should render the sidebar with the correct groups and tasks', async () => { render( - - - + , {organization} ); @@ -112,9 +109,7 @@ describe('OnboardingSidebarContent', () => { render( - - - + , {organization} ); @@ -126,9 +121,7 @@ describe('OnboardingSidebarContent', () => { it('if first group completed, second group should be expanded by default', async () => { render( - - - + , { organization: OrganizationFixture({ @@ -154,9 +147,7 @@ describe('OnboardingSidebarContent', () => { render( - - - + , {organization} ); diff --git a/static/app/components/onboardingWizard/content.tsx b/static/app/components/onboardingWizard/content.tsx index 5020ec3d35c9d3..f29e0db1269bca 100644 --- a/static/app/components/onboardingWizard/content.tsx +++ b/static/app/components/onboardingWizard/content.tsx @@ -27,7 +27,6 @@ import {useLocalStorageState} from 'sentry/utils/useLocalStorageState'; import {useLocation} from 'sentry/utils/useLocation'; import {useNavigate} from 'sentry/utils/useNavigate'; import {useOrganization} from 'sentry/utils/useOrganization'; -import {useNavigationTour} from 'sentry/views/navigation/navigationTour'; /** * How long (in ms) to delay before beginning to mark tasks complete @@ -183,7 +182,6 @@ function Task({task, hidePanel}: TaskProps) { const [showSkipConfirmation, setShowSkipConfirmation] = useState(false); const tours = useDemoTours(); - const sidebarTour = useNavigationTour(); const handleClick = useCallback( (e: React.MouseEvent) => { @@ -199,9 +197,6 @@ function Task({task, hidePanel}: TaskProps) { if (isDemoModeActive()) { if (task.task === OnboardingTaskKey.PERFORMANCE_GUIDE) { tours?.[DemoTour.PERFORMANCE]?.startTour(); - } else if (task.task === OnboardingTaskKey.SIDEBAR_GUIDE) { - // Demo mode uses existing sidebar tour - sidebarTour.startTour(); } else if (task.task === OnboardingTaskKey.RELEASE_GUIDE) { tours?.[DemoTour.RELEASES]?.startTour(); } else if (task.task === OnboardingTaskKey.ISSUE_GUIDE) { @@ -230,7 +225,7 @@ function Task({task, hidePanel}: TaskProps) { } hidePanel(); }, - [task, organization, navigate, location, hidePanel, tours, sidebarTour] + [task, organization, navigate, location, hidePanel, tours] ); const handleMarkSkipped = () => { diff --git a/static/app/utils/analytics/navigationAnalyticsEvents.tsx b/static/app/utils/analytics/navigationAnalyticsEvents.tsx index e419ff425dab4f..4b38904be720c0 100644 --- a/static/app/utils/analytics/navigationAnalyticsEvents.tsx +++ b/static/app/utils/analytics/navigationAnalyticsEvents.tsx @@ -7,8 +7,6 @@ type NavigationEventParameters = { 'navigation.help_menu_opt_out_stacked_navigation_clicked': Record; 'navigation.primary_item_clicked': NavigationItemClicked; 'navigation.secondary_item_clicked': NavigationItemClicked; - 'navigation.tour_modal_dismissed': Record; - 'navigation.tour_modal_shown': Record; }; type NavigationEventKey = keyof NavigationEventParameters; @@ -20,6 +18,4 @@ export const navigationAnalyticsEventMap: Record item.guide === EXPLORE_SPANS_TOUR_GUIDE_KEY)?.seen === false; - const isNavTourActive = useIsNavigationTourActive(); - useEffect(() => { - if ( - isRegistered && - shouldShowTourModal && - !hasOpenedTourModal.current && - !isNavTourActive - ) { + if (isRegistered && shouldShowTourModal && !hasOpenedTourModal.current) { hasOpenedTourModal.current = true; openModal( props => ( @@ -104,15 +96,7 @@ export function useExploreSpansTourModal() { } ); } - }, [ - isRegistered, - shouldShowTourModal, - startTour, - mutateAssistant, - endTour, - isNavTourActive, - openModal, - ]); + }, [isRegistered, shouldShowTourModal, startTour, mutateAssistant, endTour, openModal]); } const Title = styled('div')` diff --git a/static/app/views/navigation/index.tsx b/static/app/views/navigation/index.tsx index 578b1336f52fe0..16804d037a7042 100644 --- a/static/app/views/navigation/index.tsx +++ b/static/app/views/navigation/index.tsx @@ -14,10 +14,6 @@ import {HoverOverlayGroupProvider} from 'sentry/utils/useHoverOverlay'; import {useOrganization} from 'sentry/utils/useOrganization'; import {MobileNavigation} from 'sentry/views/navigation/mobileNavigation'; import {Navigation as DesktopNavigation} from 'sentry/views/navigation/navigation'; -import { - NavigationTourProvider, - useNavigationTour, -} from 'sentry/views/navigation/navigationTour'; import {PrimaryNavigation} from 'sentry/views/navigation/primary/components'; import {UserDropdown} from 'sentry/views/navigation/primary/userDropdown'; import {usePrimaryNavigation} from 'sentry/views/navigation/primaryNavigationContext'; @@ -94,7 +90,6 @@ function UserOnlyNavigation() { function NavigationLayout({children}: {children: React.ReactNode}) { const theme = useTheme(); const {layout} = usePrimaryNavigation(); - const {currentStepId} = useNavigationTour(); const hoverProps = useResetActiveNavigationGroup(); const {barTop} = useTopOffset(); @@ -102,11 +97,11 @@ function NavigationLayout({children}: {children: React.ReactNode}) { - - - - + + ); } diff --git a/static/app/views/navigation/navigation.tsx b/static/app/views/navigation/navigation.tsx index 153a44d074df78..4cb936f5859e48 100644 --- a/static/app/views/navigation/navigation.tsx +++ b/static/app/views/navigation/navigation.tsx @@ -1,5 +1,4 @@ import {Fragment, type RefObject, useMemo, useRef} from 'react'; -import {mergeProps} from '@react-aria/utils'; import {motion, type MotionProps} from 'framer-motion'; import {Stack} from '@sentry/scraps/layout'; @@ -26,14 +25,6 @@ import { PRIMARY_SIDEBAR_WIDTH, SECONDARY_SIDEBAR_WIDTH, } from 'sentry/views/navigation/constants'; -import { - NavigationTour, - NavigationTourElement, -} from 'sentry/views/navigation/navigationTour'; -import { - useNavigationTour, - useNavigationTourModal, -} from 'sentry/views/navigation/navigationTour'; import {PrimaryNavigation} from 'sentry/views/navigation/primary/components'; import {PrimaryNavigationHelpMenu} from 'sentry/views/navigation/primary/helpMenu'; import {PrimaryNavigationOnboarding} from 'sentry/views/navigation/primary/onboarding'; @@ -56,10 +47,7 @@ export function Navigation() { const {layout} = usePrimaryNavigation(); - useNavigationTourModal(); - - const {currentStepId} = useNavigationTour(); - const isCollapsed = currentStepId === null ? view !== 'expanded' : false; + const isCollapsed = view !== 'expanded'; const [secondarySidebarWidth] = useSyncedLocalStorageState( NAVIGATION_SIDEBAR_SECONDARY_WIDTH_LOCAL_STORAGE_KEY, @@ -141,105 +129,69 @@ export function PrimaryNavigationItems({listRef}: PrimaryNavigationItemsProps) { return ( - - {tourProps => ( - - - - - - )} - + + + + + - - {tourProps => ( - - - - - - )} - + + + + + - - {tourProps => ( - - - - - - )} - + + + + + {!organization.features.includes('insights-to-dashboards-ui-rollout') && ( - - {tourProps => ( - - - - - - )} - + + + + + )} @@ -256,27 +208,20 @@ export function PrimaryNavigationItems({listRef}: PrimaryNavigationItemsProps) { - - {tourProps => ( - - - - - - )} - + + + + + ); } diff --git a/static/app/views/navigation/navigationTour.tsx b/static/app/views/navigation/navigationTour.tsx deleted file mode 100644 index 5736cc71bcdc28..00000000000000 --- a/static/app/views/navigation/navigationTour.tsx +++ /dev/null @@ -1,384 +0,0 @@ -import { - createContext, - useCallback, - useContext, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; - -import NavigationTourSvg from 'sentry-images/spot/stacked-nav-tour.svg'; - -import {useModal} from '@sentry/scraps/modal'; - -import { - TourAction, - TourContextProvider, - TourElement, - TourGuide, - type TourElementProps, -} from 'sentry/components/tours/components'; -import {StartTourModal, startTourModalCss} from 'sentry/components/tours/startTour'; -import type {TourContextType} from 'sentry/components/tours/tourContext'; -import {useAssistant, useMutateAssistant} from 'sentry/components/tours/useAssistant'; -import {t} from 'sentry/locale'; -import {trackAnalytics} from 'sentry/utils/analytics'; -import {normalizeUrl} from 'sentry/utils/url/normalizeUrl'; -import {useLocalStorageState} from 'sentry/utils/useLocalStorageState'; -import {useLocation} from 'sentry/utils/useLocation'; -import {useNavigate} from 'sentry/utils/useNavigate'; -import {useOrganization} from 'sentry/utils/useOrganization'; -import {useUser} from 'sentry/utils/useUser'; -import {getDefaultExploreRoute} from 'sentry/views/explore/utils'; -import {usePrimaryNavigation} from 'sentry/views/navigation/primaryNavigationContext'; - -export const enum NavigationTour { - ISSUES = 'issues', - EXPLORE = 'explore', - DASHBOARDS = 'dashboards', - INSIGHTS = 'insights', - SETTINGS = 'settings', -} - -// Started rolling out to GA users on June 18, 2025 -const TOUR_MODAL_DATE_THRESHOLD = new Date(2025, 5, 18); -const NAVIGATION_TOUR_REFERRER = 'nav-tour'; - -const ORDERED_NAVIGATION_TOUR = [ - NavigationTour.ISSUES, - NavigationTour.EXPLORE, - NavigationTour.DASHBOARDS, - NavigationTour.INSIGHTS, - NavigationTour.SETTINGS, -]; - -export const NAVIGATION_TOUR_CONTENT = { - [NavigationTour.ISSUES]: { - description: t( - 'Issues are problems detected by Sentry. Code breaks — we tell you where, when, and why.' - ), - title: t('See what broke'), - }, - [NavigationTour.EXPLORE]: { - description: t( - 'Create queries, investigate data exemplars, and save charts for dashboards. Explore is where you turn raw data into answers.' - ), - title: t('Dig into data'), - }, - [NavigationTour.DASHBOARDS]: { - description: t( - 'Dashboards enable you to display key insights all on one page. Create new or find existing custom dashboards here.' - ), - title: t('Track what matters'), - }, - [NavigationTour.INSIGHTS]: { - description: t( - 'Project and domain insights live here, giving you prebuilt looks into your app’s health. ' - ), - title: t('Know what’s happening'), - }, - [NavigationTour.SETTINGS]: { - description: t( - 'Stats & Usage is now under Organization Settings. We’ve consolidated this page so you can see all your configurations in one place.' - ), - title: t('Find more in Settings'), - }, -}; - -// Note: this key is used as an analytics/assistant guide identifier and must -// remain stable — do not rename it even if the surrounding code is refactored. -const NAVIGATION_TOUR_GUIDE_KEY = 'tour.stacked_navigation'; - -const NavigationTourContext = createContext | null>(null); - -export function useNavigationTour(): TourContextType { - const tourContext = useContext(NavigationTourContext); - if (!tourContext) { - throw new Error('Must be used within a TourContextProvider'); - } - return tourContext; -} - -export interface NavigationTourElementProps extends Omit< - TourElementProps, - 'tourContext' -> {} - -export function NavigationTourElement({children, ...props}: NavigationTourElementProps) { - return ( - - tourContext={NavigationTourContext} - position="right-start" - {...props} - > - {children} - - ); -} - -function useNavigationTourCompleted() { - const {data: assistantData} = useAssistant(); - - return useMemo(() => { - const navigationTourData = assistantData?.find( - item => item.guide === NAVIGATION_TOUR_GUIDE_KEY - ); - - return navigationTourData?.seen ?? true; - }, [assistantData]); -} - -export function NavigationTourProvider({children}: {children: React.ReactNode}) { - const {setShowTourReminder} = useNavigationTourReminderContext(); - const organization = useOrganization(); - const isNavigationTourCompleted = useNavigationTourCompleted(); - const initialUrlRef = useRef(null); - const navigate = useNavigate(); - const location = useLocation(); - const {activeGroup} = usePrimaryNavigation(); - - const onStartTour = useCallback(() => { - // Save the initial URL when the tour starts because we need to restore it when the tour ends. - initialUrlRef.current = location.pathname + location.search + location.hash; - - // Scroll to top and lock scrolling when the tour starts. - document.documentElement.style.overflow = 'hidden'; - window.scrollTo(0, 0); - }, [location.hash, location.pathname, location.search]); - - const onEndTour = useCallback(() => { - setShowTourReminder(true); - - // Restore the initial URL when the tour ends. - if (initialUrlRef.current) { - navigate(initialUrlRef.current, {replace: true}); - } - initialUrlRef.current = null; - - // Unlock scrolling when the tour ends. - document.documentElement.style.overflow = ''; - }, [navigate, setShowTourReminder]); - - const onStepChange = useCallback( - (stepId: NavigationTour) => { - const prefix = `organizations/${organization.slug}`; - switch (stepId) { - case NavigationTour.ISSUES: - if (activeGroup !== 'issues') { - const target = normalizeUrl({ - pathname: `/${prefix}/issues/`, - query: {referrer: NAVIGATION_TOUR_REFERRER}, - }); - navigate(target, {replace: true}); - } - break; - case NavigationTour.EXPLORE: - if (activeGroup !== 'explore') { - const target = normalizeUrl({ - pathname: `/${prefix}/explore/${getDefaultExploreRoute(organization)}/`, - query: {referrer: NAVIGATION_TOUR_REFERRER}, - }); - navigate(target, {replace: true}); - } - break; - case NavigationTour.DASHBOARDS: - if (activeGroup !== 'dashboards') { - const target = normalizeUrl({ - pathname: `/${prefix}/dashboards/`, - query: {referrer: NAVIGATION_TOUR_REFERRER}, - }); - navigate(target, {replace: true}); - } - break; - case NavigationTour.INSIGHTS: - if (activeGroup !== 'insights') { - const target = normalizeUrl({ - pathname: `/${prefix}/insights/frontend/`, - query: {referrer: NAVIGATION_TOUR_REFERRER}, - }); - navigate(target, {replace: true}); - } - break; - case NavigationTour.SETTINGS: - if (activeGroup !== 'settings') { - const target = normalizeUrl({ - pathname: `/settings/${organization.slug}/`, - query: {referrer: NAVIGATION_TOUR_REFERRER}, - }); - navigate(target, {replace: true}); - } - break; - } - }, - [activeGroup, navigate, organization] - ); - - return ( - - tourKey={NAVIGATION_TOUR_GUIDE_KEY} - isCompleted={isNavigationTourCompleted} - orderedStepIds={ORDERED_NAVIGATION_TOUR} - TourContext={NavigationTourContext} - onStartTour={onStartTour} - onEndTour={onEndTour} - onStepChange={onStepChange} - // Because we use a single tour element on the sidebar for multiple steps, - // we can't have all steps present in the DOM at once. - requireAllStepsRegistered={false} - > - {children} - - ); -} - -interface NavigationTourReminderContext { - setShowTourReminder: (value: boolean) => void; - showTourReminder: boolean; -} - -const NavigationTourReminderContext = createContext({ - showTourReminder: false, - setShowTourReminder: () => {}, -}); - -function useNavigationTourReminderContext(): NavigationTourReminderContext { - const context = useContext(NavigationTourReminderContext); - if (!context) { - throw new Error('Must be used within a NavigationTourReminderContextProvider'); - } - return context; -} - -interface NavigationTourReminderContextProviderProps { - children: React.ReactNode; -} - -export function NavigationTourReminderContextProvider( - props: NavigationTourReminderContextProviderProps -) { - const [showTourReminder, setShowTourReminder] = useState(false); - - const contextValue = useMemo( - () => ({showTourReminder, setShowTourReminder}), - [showTourReminder, setShowTourReminder] - ); - - return ( - - {props.children} - - ); -} - -interface NavigationTourReminderProps { - children: React.ReactNode; -} - -export function NavigationTourReminder(props: NavigationTourReminderProps) { - const {showTourReminder, setShowTourReminder} = useNavigationTourReminderContext(); - - if (!showTourReminder) { - return props.children; - } - - return ( - setShowTourReminder(false)}> - {t('Got it')} - - } - isOpen={showTourReminder} - > - {tourProps =>
{props.children}
} - - ); -} - -// Displays the introductory tour modal when a user is entering the experience for the first time. -export function useNavigationTourModal() { - const {openModal} = useModal(); - - const user = useUser(); - const organization = useOrganization(); - const hasOpenedTourModal = useRef(false); - const {startTour, endTour} = useNavigationTour(); - const {data: assistantData} = useAssistant({ - notifyOnChangeProps: ['data'], - }); - const {mutate: mutateAssistant} = useMutateAssistant(); - const [localTourState, setLocalTourState] = useLocalStorageState( - NAVIGATION_TOUR_GUIDE_KEY, - {hasSeen: false} - ); - - // We don't want to show the tour modal for new users that were forced into the new navigation. - const shouldSkipTourForNewUsers = - new Date(user?.dateJoined) > TOUR_MODAL_DATE_THRESHOLD; - - const shouldShowTourModal = - assistantData?.find(item => item.guide === NAVIGATION_TOUR_GUIDE_KEY)?.seen === - false && - !shouldSkipTourForNewUsers && - !localTourState.hasSeen && - !process.env.IS_ACCEPTANCE_TEST; - - const dismissTour = useCallback(() => { - trackAnalytics('navigation.tour_modal_dismissed', {organization}); - mutateAssistant({ - guide: NAVIGATION_TOUR_GUIDE_KEY, - status: 'dismissed', - }); - setLocalTourState({hasSeen: true}); - endTour(); - }, [mutateAssistant, organization, endTour, setLocalTourState]); - - useEffect(() => { - if (shouldShowTourModal && !hasOpenedTourModal.current) { - hasOpenedTourModal.current = true; - trackAnalytics('navigation.tour_modal_shown', {organization}); - openModal( - props => ( - - ), - { - modalCss: startTourModalCss, - - // If user closes modal through other means, also prevent the modal from being shown again. - onClose: reason => { - if (reason) { - dismissTour(); - } - }, - } - ); - } - }, [ - shouldShowTourModal, - startTour, - mutateAssistant, - endTour, - organization, - dismissTour, - openModal, - ]); -} - -export function useIsNavigationTourActive() { - const location = useLocation(); - return location.query.referrer === NAVIGATION_TOUR_REFERRER; -} diff --git a/static/app/views/navigation/primary/helpMenu.spec.tsx b/static/app/views/navigation/primary/helpMenu.spec.tsx index 579dc5754bf336..2825044f5d30d6 100644 --- a/static/app/views/navigation/primary/helpMenu.spec.tsx +++ b/static/app/views/navigation/primary/helpMenu.spec.tsx @@ -6,15 +6,6 @@ import {ConfigStore} from 'sentry/stores/configStore'; import * as intercom from 'sentry/utils/intercom'; import {PrimaryNavigationHelpMenu} from 'sentry/views/navigation/primary/helpMenu'; -jest.mock('sentry/views/navigation/navigationTour', () => ({ - useNavigationTour: jest.fn(() => ({ - startTour: jest.fn(), - })), - NavigationTourReminder: ({children}: {children: React.ReactNode}) => ( -
{children}
- ), -})); - jest.mock('sentry/utils/intercom', () => ({ showIntercom: jest.fn(), })); diff --git a/static/app/views/navigation/primary/helpMenu.tsx b/static/app/views/navigation/primary/helpMenu.tsx index c9815069b1de7b..9536b66fc42d0a 100644 --- a/static/app/views/navigation/primary/helpMenu.tsx +++ b/static/app/views/navigation/primary/helpMenu.tsx @@ -9,7 +9,6 @@ import { IconDocs, IconEllipsis, IconGithub, - IconGlobe, IconGroup, IconMegaphone, IconOpen, @@ -26,10 +25,6 @@ import {trackAnalytics} from 'sentry/utils/analytics'; import {showIntercom} from 'sentry/utils/intercom'; import {useFeedbackForm} from 'sentry/utils/useFeedbackForm'; import {useOrganization} from 'sentry/utils/useOrganization'; -import { - NavigationTourReminder, - useNavigationTour, -} from 'sentry/views/navigation/navigationTour'; import {PrimaryNavigation} from 'sentry/views/navigation/primary/components'; export function PrimaryNavigationHelpMenu() { @@ -37,8 +32,6 @@ export function PrimaryNavigationHelpMenu() { const contactSupportItem = getContactSupportItem(organization); const openForm = useFeedbackForm(); const {privacyUrl, termsUrl} = useLegacyStore(ConfigStore); - const {startTour} = useNavigationTour(); - useEffect(() => { trackAnalytics('intercom_link.viewed', {organization, source: 'sidebar'}); }, [organization]); @@ -195,25 +188,12 @@ export function PrimaryNavigationHelpMenu() { }, hidden: !openForm, }, - { - key: 'tour', - label: t('Tour the new navigation'), - leadingItems: ( - - - - ), - onAction() { - startTour(); - }, - }, ], }, ]; return ( { render( - - - + , { organization, diff --git a/static/app/views/navigation/primaryNavigationContext.tsx b/static/app/views/navigation/primaryNavigationContext.tsx index 5b5b2baf688f61..a687cfad5ee7ba 100644 --- a/static/app/views/navigation/primaryNavigationContext.tsx +++ b/static/app/views/navigation/primaryNavigationContext.tsx @@ -5,7 +5,6 @@ import * as Sentry from '@sentry/react'; import {USING_CUSTOMER_DOMAIN} from 'sentry/constants'; import {useLocation} from 'sentry/utils/useLocation'; import {useMedia} from 'sentry/utils/useMedia'; -import {NavigationTourReminderContextProvider} from 'sentry/views/navigation/navigationTour'; import {SecondaryNavigationContextProvider} from 'sentry/views/navigation/secondaryNavigationContext'; const PRIMARY_NAVIGATION_GROUP_CONFIG = { @@ -70,13 +69,11 @@ export function PrimaryNavigationContextProvider( ); return ( - - - - {props.children} - - - + + + {props.children} + + ); } diff --git a/static/app/views/navigation/secondary/components.tsx b/static/app/views/navigation/secondary/components.tsx index 93296aa2b7bad9..d033e33705e220 100644 --- a/static/app/views/navigation/secondary/components.tsx +++ b/static/app/views/navigation/secondary/components.tsx @@ -26,9 +26,8 @@ import { verticalListSortingStrategy, } from '@dnd-kit/sortable'; import {CSS} from '@dnd-kit/utilities'; -import {css, useTheme} from '@emotion/react'; +import {css} from '@emotion/react'; import styled from '@emotion/styled'; -import {mergeProps, mergeRefs} from '@react-aria/utils'; import {AnimatePresence, motion} from 'framer-motion'; import PlatformIcon from 'platformicons/build/platformIcon'; @@ -64,13 +63,6 @@ import { SECONDARY_SIDEBAR_WIDTH, SIDEBAR_NAVIGATION_SOURCE, } from 'sentry/views/navigation/constants'; -import { - NAVIGATION_TOUR_CONTENT, - NavigationTour, - NavigationTourElement, - useNavigationTour, - type NavigationTourElementProps, -} from 'sentry/views/navigation/navigationTour'; import {isPrimaryNavigationLinkActive} from 'sentry/views/navigation/primary/components'; import {usePrimaryNavigation} from 'sentry/views/navigation/primaryNavigationContext'; import {useSecondaryNavigation} from 'sentry/views/navigation/secondaryNavigationContext'; @@ -82,8 +74,6 @@ interface SecondarySidebarProps { } function SecondarySidebar({children}: SecondarySidebarProps) { - const {currentStepId} = useNavigationTour(); - const stepId = currentStepId ?? NavigationTour.ISSUES; const resizableContainerRef = useRef(null); const resizeHandleRef = useRef(null); const {layout} = usePrimaryNavigation(); @@ -106,79 +96,6 @@ function SecondarySidebar({children}: SecondarySidebarProps) { const {activeGroup} = usePrimaryNavigation(); const isMobilePageFrame = layout === 'mobile'; - return ( - - {({ref, 'aria-expanded': _ariaExpanded, ...props}) => ( - // aria-expanded is omitted here because TourGuide passes it via useOverlay's - // triggerProps (designed for button/disclosure triggers), but this element is - // a plain container div with no role that supports aria-expanded. Spreading it - // would cause a Lighthouse a11y violation: aria-expanded is invalid on a div - // without a matching ARIA role. - - - - - {children} - - - {p => ( - { - setSecondarySidebarWidth(SECONDARY_SIDEBAR_WIDTH); - }} - atMinWidth={size === SECONDARY_SIDEBAR_MIN_WIDTH} - atMaxWidth={size === SECONDARY_SIDEBAR_MAX_WIDTH} - /> - )} - - - - - )} - - ); -} - -function SecondarySidebarWrapper(props: NavigationTourElementProps) { - const theme = useTheme(); - return ( - {p => ( - - )} + + + + + {children} + + + {p => ( + { + setSecondarySidebarWidth(SECONDARY_SIDEBAR_WIDTH); + }} + atMinWidth={size === SECONDARY_SIDEBAR_MIN_WIDTH} + atMaxWidth={size === SECONDARY_SIDEBAR_MAX_WIDTH} + /> + )} + + + + ); } diff --git a/static/images/spot/stacked-nav-tour.svg b/static/images/spot/stacked-nav-tour.svg deleted file mode 100644 index 685e9fc45c4cbb..00000000000000 --- a/static/images/spot/stacked-nav-tour.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file