From 1c3e8ac5a4eadda2958a12178065818e852b2494 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Fri, 20 Dec 2024 14:06:36 +0000
Subject: [PATCH] redirect notice in debug notice

---
 frontend/src/lib/components/DebugNotice.tsx   | 57 +++++++++++++++++--
 .../settings/environment/ReplayTriggers.tsx   |  4 +-
 2 files changed, 54 insertions(+), 7 deletions(-)

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 {
                         <div>
                             Revision: <b>{debugInfo.revision}</b>
                         </div>
-                        <div className="italic">Click to hide</div>
+                        <div className="italic">
+                            {isPort8000 ? (
+                                <>Development should run on port 8010 now! Click to redirect</>
+                            ) : (
+                                <>Click to hide</>
+                            )}
+                        </div>
                     </div>
                 }
-                onClick={() => setNoticeHidden(true)}
+                onClick={redirectOrHideOnClick}
             />
         )
     }
@@ -68,6 +101,20 @@ export function DebugNotice(): JSX.Element | null {
                     onClick={() => setNoticeHidden(true)}
                 />
             </div>
+            {isPort8000 && (
+                <div className="flex items-center gap-2 px-2 border-l-4 border-brand-blue justify-between">
+                    <LemonButton
+                        type="secondary"
+                        status="alt"
+                        icon={<IconOpenInNew />}
+                        size="small"
+                        fullWidth={true}
+                        onClick={redirectOrHideOnClick}
+                    >
+                        Development should run on port 8010 now! Click to redirect
+                    </LemonButton>
+                </div>
+            )}
             <div
                 className="flex items-center gap-2 px-2 h-8 border-l-4 border-brand-red"
                 title={`Branch: ${debugInfo.branch}`}
diff --git a/frontend/src/scenes/settings/environment/ReplayTriggers.tsx b/frontend/src/scenes/settings/environment/ReplayTriggers.tsx
index 48e79bea18cec..495387c5146ec 100644
--- a/frontend/src/scenes/settings/environment/ReplayTriggers.tsx
+++ b/frontend/src/scenes/settings/environment/ReplayTriggers.tsx
@@ -202,8 +202,8 @@ function UrlBlocklistOptions(): JSX.Element | null {
     return (
         <UrlConfigSection
             type="blocklist"
-            title="Block recordings when URL matches"
-            description="Adding a URL blocklist means recording will be paused when the user visits a page that matches the URL."
+            title="Pause recordings when URL matches"
+            description="Recording will be paused when the user visits a page that matches the URL."
             isAddFormVisible={isAddUrlBlocklistConfigFormVisible}
             config={urlBlocklistConfig}
             editIndex={editUrlBlocklistIndex}