diff --git a/src/components/linkToActivePlatform.tsx b/src/components/linkToActivePlatform.tsx new file mode 100644 index 0000000000000..ab908033b6045 --- /dev/null +++ b/src/components/linkToActivePlatform.tsx @@ -0,0 +1,37 @@ +'use client'; + +import {useEffect, useState} from 'react'; +import Link from 'next/link'; + +import {KEY_ACTIVE_PLATFORM} from 'sentry-docs/constants/localStorage'; + +interface Props { + children: React.ReactNode; + className?: string; +} +const DEFAULT_LINK = '/platforms'; + +export function LinkToActivePlatform({className, children}: Props) { + const [href, setHref] = useState(DEFAULT_LINK); + + useEffect(() => { + if (typeof window === 'undefined' || typeof localStorage === 'undefined') return; + + let activePlatform = localStorage.getItem(KEY_ACTIVE_PLATFORM); + if (activePlatform) { + const segments = activePlatform.split('.'); + if (segments.length === 2) { + activePlatform = `${segments[0]}/guides/${segments[1]}`; + } else { + activePlatform = `${segments[0]}`; + } + setHref(`${DEFAULT_LINK}/${activePlatform}`); + } + }, []); + + return ( + + {children} + + ); +} diff --git a/src/components/platformSelector/index.tsx b/src/components/platformSelector/index.tsx index cce5d995d0d9d..388f06bdb21ba 100644 --- a/src/components/platformSelector/index.tsx +++ b/src/components/platformSelector/index.tsx @@ -15,6 +15,7 @@ import {matchSorter} from 'match-sorter'; import {usePathname, useRouter} from 'next/navigation'; import {PlatformIcon} from 'sentry-docs/components/platformIcon'; +import {KEY_ACTIVE_PLATFORM} from 'sentry-docs/constants/localStorage'; import {Platform, PlatformGuide, PlatformIntegration} from 'sentry-docs/types'; import {uniqByReference} from 'sentry-docs/utils'; @@ -94,7 +95,7 @@ export function PlatformSelector({ const onPlatformChange = (platformKey: string) => { const platform_ = platformsAndGuides.find(platform => platform.key === platformKey); if (platform_) { - localStorage.setItem('active-platform', platform_.key); + localStorage.setItem(KEY_ACTIVE_PLATFORM, platform_.key); router.push(platform_.url); } }; @@ -114,9 +115,9 @@ export function PlatformSelector({ ); useEffect(() => { if (currentPlatformKey) { - localStorage.setItem('active-platform', currentPlatformKey); + localStorage.setItem(KEY_ACTIVE_PLATFORM, currentPlatformKey); } else { - setStoredPlatformKey(localStorage.getItem('active-platform')); + setStoredPlatformKey(localStorage.getItem(KEY_ACTIVE_PLATFORM)); } }, [currentPlatformKey]); diff --git a/src/constants/localStorage.ts b/src/constants/localStorage.ts new file mode 100644 index 0000000000000..2df9ff6ca6d52 --- /dev/null +++ b/src/constants/localStorage.ts @@ -0,0 +1 @@ +export const KEY_ACTIVE_PLATFORM = 'active-platform'; diff --git a/src/mdxComponents.ts b/src/mdxComponents.ts index f433c793de689..b3d7e951a7c94 100644 --- a/src/mdxComponents.ts +++ b/src/mdxComponents.ts @@ -16,6 +16,7 @@ import {Expandable} from './components/expandable'; import {GuideGrid} from './components/guideGrid'; import {JsBundleList} from './components/jsBundleList'; import {LambdaLayerDetail} from './components/lambdaLayerDetail'; +import {LinkToActivePlatform} from './components/linkToActivePlatform'; import {LinkWithPlatformIcon} from './components/linkWithPlatformIcon'; import {OnboardingOption, OnboardingOptionButtons} from './components/onboarding'; import {OrgAuthTokenNote} from './components/orgAuthTokenNote'; @@ -66,6 +67,7 @@ export function mdxComponents( LambdaLayerDetail, Link: SmartLink, LinkWithPlatformIcon, + LinkToActivePlatform, OrgAuthTokenNote, PageGrid, ParamTable,