feat: Show the currently used region in the settings page (#19780)

* show the currently used region in the settings page * Update frontend/src/scenes/settings/project/ProjectSettings.tsx Co-authored-by: Ben White <[email protected]> * use region property instead of site_url * simplify code * Update frontend/src/scenes/settings/project/ProjectSettings.tsx Co-authored-by: Ben White <[email protected]> * adjust tag id --------- Co-authored-by: Ben White <[email protected]>
PostHog · Jan 16, 2024 · f9d1ff0 · f9d1ff0
1 parent 9346ae9
commit f9d1ff0
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/frontend/src/scenes/settings/project/ProjectSettings.tsx b/frontend/src/scenes/settings/project/ProjectSettings.tsx
@@ -9,6 +9,7 @@ import { JSSnippet } from 'lib/components/JSSnippet'
 import { IconRefresh } from 'lib/lemon-ui/icons'
 import { Link } from 'lib/lemon-ui/Link'
 import { useState } from 'react'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { isAuthenticatedTeam, teamLogic } from 'scenes/teamLogic'
 
 import { TimezoneConfig } from './TimezoneConfig'
@@ -88,6 +89,8 @@ export function Bookmarklet(): JSX.Element {
 export function ProjectVariables(): JSX.Element {
     const { currentTeam, isTeamTokenResetAvailable } = useValues(teamLogic)
     const { resetToken } = useActions(teamLogic)
+    const { preflight } = useValues(preflightLogic)
+    const region = preflight?.region
 
     return (
         <div className="flex items-start gap-4 flex-wrap">
@@ -141,6 +144,15 @@ export function ProjectVariables(): JSX.Element {
                 </p>
                 <CodeSnippet thing="project ID">{String(currentTeam?.id || '')}</CodeSnippet>
             </div>
+            {region ? (
+                <div className="flex-1">
+                    <h3 id="project-region" className="min-w-[25rem]">
+                        Project Region
+                    </h3>
+                    <p>This is the region where your PostHog data is hosted.</p>
+                    <CodeSnippet thing="project region">{`${region} Cloud`}</CodeSnippet>
+                </div>
+            ) : null}
         </div>
     )
 }