diff --git a/frontend/src/lib/components/DebugNotice.tsx b/frontend/src/lib/components/DebugNotice.tsx index ac027f28fa1f7..4dddd9fb7cd2d 100644 --- a/frontend/src/lib/components/DebugNotice.tsx +++ b/frontend/src/lib/components/DebugNotice.tsx @@ -1,8 +1,8 @@ import { IconCode, IconX } from '@posthog/icons' import { useValues } from 'kea' -import { IconBranch } from 'lib/lemon-ui/icons' +import { IconBranch, IconOpenInNew } from 'lib/lemon-ui/icons' import { LemonButton } from 'lib/lemon-ui/LemonButton' -import { useEffect, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import { NavbarButton } from '~/layout/navigation-3000/components/NavbarButton' import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic' @@ -10,8 +10,31 @@ import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic' export function DebugNotice(): JSX.Element | null { const [debugInfo, setDebugInfo] = useState<{ branch: string; revision: string } | undefined>() const [noticeHidden, setNoticeHidden] = useState(false) + const [isPort8000, setIsPort8000] = useState(false) + const { isNavCollapsed } = useValues(navigation3000Logic) + useEffect(() => { + const isLocal = ['127.0.0.1', '0.0.0.0', 'localhost'].includes(window.location.hostname) + const port = window.location.port + + if (isLocal && port === '8000') { + setIsPort8000(true) + } + }, []) + + const redirectOrHideOnClick = useMemo( + () => + isPort8000 + ? () => { + window.location.assign( + `${window.location.protocol}//${window.location.hostname}:8010${window.location.pathname}${window.location.search}${window.location.hash}` + ) + } + : () => setNoticeHidden(true), + [isPort8000] + ) + useEffect(() => { const bottomNotice = document.getElementById('bottom-notice') const bottomNoticeRevision = document.getElementById('bottom-notice-revision')?.textContent @@ -29,7 +52,11 @@ export function DebugNotice(): JSX.Element | null { return () => {} }, []) - if (!debugInfo || noticeHidden) { + if (!debugInfo) { + return null + } + + if (!isPort8000 && noticeHidden) { return null } @@ -49,10 +76,16 @@ export function DebugNotice(): JSX.Element | null {